デザインを開発するという視点でお伝えするクリエイティブBLOG
アイコンやUI、フォントなどWEBデザインを取り巻くたくさんの要素の中に、フリー素材を取り入れることも多いと思いますが、それらひとつひとつを探していると余計に時間が掛かってしまうことも。今回はそんな時にぴったりな、効率的にWEBデザインに役立つフリーの素材やコンテンツをまとめて入手できる「Web Design Freebies That Will Save Hours Of Your Time And Make Your Life Easier」をご紹介します。
UIキットやフリーアイコンなど、定番の素材など使えるコンテンツのみが厳選されています。その中から気になったものを幾つかピックアップしましたので、下記よりご覧下さい。
詳しくは以下
(さらに…)
UIデザインを行うのに必要なツールや素材は多岐に渡ります。必要なものとはわかっているけれど、ネットの膨大な情報から適切なものを取捨選択するのも一苦労。今回はそんなときに参考にしたい、UIデザインに便利なフリー素材やツールをまるっとまとめた「29 New Free Photoshop PSD Files for UI Designers」をご紹介します。
29 New Free Photoshop PSD Files for UI Designers | Freebies | Graphic Design Junction
UIデザインを見せるためのモックアップや、便利なカラーピッカーなどが手広くまとまっています。まとめの中から、気になったものを幾つかご紹介しますのでご覧下さい。
詳しくは以下
WEBサイトにおいて、探すインターフェイスは非常に重要で、初めて見るサイト・使い慣れたサイトでもともによく利用するものとなりますが、今回紹介するのはダイナミックで洗練された検索ユーザーインターフェイスキット「Inspiration for Search UI Effects」です。
WEBサイトで利用できる様々なユーザーインターフェイスが全部で11まとめられています。全画面でダイナミックにアニメーションするものから。検索コマンドのように事例を見せるユニークなタイプのものまでがまとめられています。
詳しくは以下
PCで見るWEBサイトの印象を大きく左右するアクションの一つホバーアクション。主にWEB上のユーザー導線上に配されるものだけに、小さいながらも、このアクションが心地よいかでサイトのクオリティを左右するものですが、今日紹介するのはクリエイティブなホバーアクションを実装できる「Tilt Hover Effects」です。
一般的に色が変わる、透明度が上がる、画像が切り替わるなどといったものでは無く、複数の画像がズレたり、アニメーションが加わったりマウス座標の位置で見た目が変わったりと、多彩なホバーアクションが簡単に実装できるようになっています。
詳しくは以下
WEBデザインのトレンドの推移は早く、年々あらたなトレンドが生まれては消えていきますが、今日紹介するのはUIデザインのベースにできるシンプルなUIフリーサンプル「Ease UI Component Free Sample」です。
非常にシンプルでスタイリッシュなデザインでブログ、メディア、フォーム、Eコマース、ベースパーツなどなど様々なユーザーインターフェースのパーツが収録されています。
詳しくは以下
国内でもスタンダードなコミュニケーションツールの一つチャット。様々なWEBサービスやコミュニティで導入されています。今日紹介するのはそんなチャットの開発やデザインのためのUIキット「Chat UI Design Kit」です。
「Chat UI Design Kit」ではチャットに必要な様々なユーザーインターフェイスがまとめられています。
詳しくは以下
デザインに合わせてイメージにあったフォントを選ぶことはとても重要です。そんな中今回紹介するのは、美しく繊細な雰囲気が特徴の細字フリーフォントまとめ「35 Beautiful and Free Thin Fonts」です。
Champagne & Limousines Font | dafont.com
欧文フォントの、細いラインで描かれたフリーフォントの数々がピックアップされています。気になったものを以下にまとめましたので、ご覧ください。
詳しくは以下
デザインに質感を与えるグランジ素材は素材の定番として背景写真素材からブラシなど様々な形で提供されていますが、今日紹介するのはシンプルだから便利なグランジテクスチャブラシ「10 Free Subtle Grunge Texture Brushes」です。
非常にシンプルなもので細かい粒子状のグランジのブラシが全部で10パターンセットになっています。収録されているブラシセットは以下からご覧ください。
詳しくは以下
色々な意味を持たせて、様々なデザインに利用される地図の表現ですが、地図を一から描いているというデザイナーの方は極々まれだと思います。今日紹介するのはイラストレーターなどでベクターデータで利用できる地図データを集めたエントリー「Vector World Map Collection (Redux)」を紹介したいと思います。
EPS Vector Maps for Designers (.eps format)
同じ世界地図でも国や地域で色が付いたもの、国境などなく、世界がシルエットになって表現されているものなどなど様々なタイプの世界地図のデータがまとめられています。今日はその七からいくつかピックアップして紹介したいと思います。
詳しくは以下
webサイトをデザインするときにはいろいろなパーツ素材が必要になってきますが、同じデザインテイストですべてを揃えるのはなかなか大変なもの。今回はそんなときに参考にしたい、webサイト設計で使用する基本的UIが揃ったフリーキット「Spot UI Kit PSD」を紹介したいと思います。
ポップでカラフルなテイストのUIが揃っており、シリーズで使用すればデザイン感を合わせながらクオリティを高めることができます。
詳しくは以下
非常にさまざまなシーンで活躍してくれるアイコン。たくさん種類をストックしておくと、いざという時とても便利です。そんな中今回紹介するのは、さまざまなテーマのフリーアイコンセットを集めた「Best Free Icons For Web And User Interface Design」です。
20 Free Square Icons by Krafted – Dribbble
魅力的なデザインのアイコンセットが多数まとめられており、個性的なものがピックアップされているのも特徴。気になったものを以下よりご覧ください。
詳しくは以下
WEBサイトの制作をより簡単にそして精度の高いものにしてくれるテンプレート。現在様々なフリーで使えるテンプレートがリリースされており、かなりクオリティの高いもの存在します。今日はそんなハイクオリティなフリーHTML/CSSテンプレートを集めたエントリー「99 High-Quality Free (X)HTML/CSS Templates」を紹介したいと思います。
様々なタイプの高品質なHTML/CSSが収録されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
表現の幅を広げてくれる様々なphotoshopブラシですが、今日紹介するのは日本をテーマにした、photoshopブラシ「Japanese Brushes Collection」です。日本をといっても様々な表現があり、扇子や家紋のようなスタンダードなものから、日本語自体のものまで幅広く収録されています。
収録されているブラシセットは全部で21セットにも及びますが、今日は収録されているphotoshopブラシの中から気になったブラシをピックアップして紹介したいと思います。
詳しくは以下
私達の生活にも密接に関わりのある医療。広告やWEB制作でも医療に関するモチーフを利用する場合が直接的にも間接的にもありますが、今日紹介するのは医療系のモチーフをアイコンセットにした「Free Medical Vector Icons」です。
このアイコンはベクターで描かれており、影などをあしらい、シンプルながらも質感のあるアイコンセットに仕上がっています。収録されているアイコンは以下の通りです。
詳しくは以下
小気味の良いアニメーションはWEBデザインのアクセントとなり、よりクオリティを高めてくれますが、今回紹介するのはローディングアニメなどに利用できるシンプルなCSSスニペット「SpinKit」です。
このアニメーション画像などは一切利用せずには全てCSSで書かれており、HTMLとCSSを書くだけ簡単に実装することが可能です。
詳しくは以下
今まで様々なjQueryを使ったプラグインを紹介してきましたが、今日紹介する「jqtransform」は今まで紹介した物と少し違っていて、フォームのデザイン補助してくれると言うものです。
CSSなどでデザインせず、普通にフォームを制作した場合上記のように利用OSに準拠したプルダウンメニューやボタンなどが表示されます。このプラグインを使えば上機能なありきたりなフォームデザインを施す事が可能です。変更後のデザインは以下の通り
詳しくは以下
