デザインを開発するという視点でお伝えするクリエイティブBLOG
WEBデザインならではのエフェクトは、私たちの目を楽しませてくれたり、あっと驚かせてくれたりします。今回ご紹介する「WebGL Distortion Hover Effects | Codrops」は、WEBの中でもよく目にするホバーアクションのエフェクト集になります。
歪みの効果を与え、滑らかに動くスタイリッシュなホバーアクションです。
詳しくは以下
マウスオーバーすると、色が変わったり、様々なアクションが走ったりと、WEBデザインでは多用されるホバーエフェクト。簡単に透明度だけ変えたり、色を変えたりというシンプルなものも良いのですが、一工夫されたホバーエフェクトは上手に使えばサイトの質を向上させてくれます。今日紹介するのはリッチなホバーエフェクトを実現するCSSセット「IMAGE HOVER EFFECTS」です。
画像が拡大されたり、フィルタが掛かったような表現になったり、全部で16ものホバーエフェクトを簡単に実装することが可能です。
詳しくは以下
制作の現場では一般的なベクターデータ形式。拡大縮小が自由自在で、色の変化なども自由にでき、汎用性が効くデータ形式として広くデザインには利用されています。今回紹介するのはそんなベクターデータで制作された素材データをダウンロードできるサイトを集めたエントリー「32 Places to Find High-Quality Vectors」を紹介したいと思います。
どのサイトも数多くのベクターがデータが無料でダウンロードすることができます。今日はまとめられているベクターデータサイトの中から、今までDesigndevelopで紹介したことが無いサイトを中心にいくつかピックアップして紹介したいと思います。
詳しくは以下
webサイトを一からデザイン・設計するのはなかなか大変なもの。さらにそこから、トレンドを押さえたクオリティの高いものが求められる場合、時間もデザインセンス・技術も必要になってきます。今回はそんなシーンで活用したい、webサイトデザインの設計・デザイン・参考として活用できる「Free PSD Website Templates for Web Designers and Developers」を紹介したいと思います。
Freebie PSD: Perth – A Free Flat Web Design.
デザイン性にすぐれたpsd形式のテンプレートがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
先日「最新の使えるjQueryプラグイン集「25 Amazing and Fresh jQuery Plugins」」と言う記事で、最新の機能のjQueryプラグインをまとめたエントリーを紹介致しましたが、今日紹介するのはjQueryで動きが特徴的な魅せる動きを集めたエントリー「10 jQuery Transition Effects: Moving Elements with Style | DevSnippets」を紹介したいと思います。
Fluid Navigation – How to create an informative menu-bar with jQuery & CSS
スムーズに出現するフェードだったり、スライドインだったり、気持ちいい感じの動きをするjQueryのテクニックが集められています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
布や紙などにできるしわ感は、素材の状態によってさまざまな表情を作り出します。今回はそんなしわのある素材感を手軽に表現できるテクスチャセット「26 Appealing Tissue Texture for your Creased-Looking Designs」を紹介したいと思います。
（Tissue paper texture by ~MapleRose-stock on deviantART）
シンプルな布素材や、素材自体に加工や手が加えられるものを題材に使用したテクスチャ素材が26種収録されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
WEBデザインでは欠かす事ができないCSS。CSSも奥が深く、工夫しだいで様々な表現ができるようになっていますが、今回紹介するのはそんなCSSのテクニックを集めたテクニック集「20 Ultimate CSS Tutorials That Will Help You Master CSS | DWSmg.com」です。
タブナビゲーションから、角丸、フォトギャラリーに影付けなどなど様々なCSSのテクニックが全部で20個、それぞれのジャンルに分けて公開されています。今日はその中からいくつかピックアップして紹介したいと思います。
詳しくは以下
デザインをしていて「こんな素材があれば…」と、誰もが1度は悩んだ経験をがあるかと思います。そんな中今回紹介するのは、フリーのPSDテンプレートをまとめた「20 New Useful Free PSD Templates for Designers」です。
さまざまなUIや扱いやすいアイコン、オブジェクト郡が揃っていて、すぐに使えそうなものばかりです。中でも気になるものをピックアップしたので下記よりご覧ください。
詳しくは以下
文字を美しく見せるための技法が用いられ作成されたカリグラフィーフォントは、デザインに柔らかさや洗練された雰囲気を与えてくれます。そんなカリグラフィーフォントをまとめた「15 Free Calligraphy Fonts for Designers」を今回は紹介したいと思います。
（Billion Stars Font | dafont.com）
15種の、デザインに彩りを添えるカリグラフィーフォントが紹介されています。気になったものをピックアップしましたので下記よりご覧ください。
詳しくは以下
予算をかけることなくデザインを仕上げるために便利に活用できるフリー素材。デザインの流行に併せて日々新しい素材が多数配布されています。そんな中今回紹介するのは、比較的新しいさまざまな種類のフリー素材をあつめた「50 Free Resources for Designers from March 2014」です。
（Matt's Brushpack by Juhupainting on deviantART）
アイコン、フリーフォント、テクスチャ、ブラシ、UIキットなど、豊富なテーマで素材がまとめられ紹介されています。
詳しくは以下
デザインに置いて色は非常に重要な要素の一つで、その配色でデザイン全体のイメージが左右されるほど。それだけに配色というのは難しい決定頁の一つでもあります。今日紹介するのはそんな難しい配色の手助けをしてくれる、感情・ターゲットなど様々切り口から配色を提案してくれる配色ツール「Culrs 」です。
「Culrs」は左側のメニューからEmotions、Target Audience、Type of productsなど選択でき、そこからさらに細分化された項目での色彩パターンを提示してくれます。いくつか試してみましたので以下からご覧ください。
詳しくは以下
