デザインを開発するという視点でお伝えするクリエイティブBLOG
エラー・許可・着信などなど、優れたユーザーインターフェイスは視覚だけではなくて、直感的にわかりやすい音があり、表示されるユーザーインターフェイスに組み合わせることで、ユーザーがどのようなことをしたかの理解を早めてくれます。今日紹介するのはそんなユーザーインターフェイスの音を、様々なサービス別に集めたWEBサイト「UI Sounds」です。
今までユーザーインターフェイスをまとめて紹介するサイトは多数ありましたが、こうして音に注目したサイトは珍しいと思います。
詳しくは以下
使いやすく見やすい、ユーザーに満足してもらえるUXデザインをより短時間で作ることは、デザイナーであればぜひマスターしておきたいもの。そんな中今回は、特にSketchを利用している方におすすめ、様々な場面で役に立つSketchテンプレートを集約した「Must-Have Sketch Templates for New UX Designers」を紹介したいと思います。
FREEBIE – Flowchart kit for Sketch by Greg Dlubacz – Dribbble
Sketchで活用できる秀逸なテンプレートがまとめられており、どれも非常に魅力的なものばかりが揃っています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
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」ではチャットに必要な様々なユーザーインターフェイスがまとめられています。
詳しくは以下
UI/UXを豊かにそして直感的にしてくれるアニメーション。上手く利用すればWEBサイトやアプリケーションを劇的にブラッシュアップしてくれますが、取り入れるのはなかなか難しいものです。今日紹介するのはWEBやアプリの最新のアニメーション事例をまとめたエントリー「20 Animated Interfaces: New Ways to Present a Concept」です。
City intro animation by Vasjen Katro – Dribbble
アプリケーションからスマートウォッチまで全部で20ものアニメーションが纏められていますが、今日はその中から特に気になったものを幾つかピックアップして紹介したいと思います。
詳しくは以下
デザインする上で、色々なデザインと親和性が高い葉っぱ素材。それだけに写真素材や関連する素材も多々あります。今回紹介するのは、リアルな葉っぱのフリーphotoshopブラシセット「Leaf’d: 10 Free High-Res Photoshop Leaf Brushes」です。
ブラシで葉脈までキッチリと描写されたリアルな葉っぱのブラシがセットになっています。ブラシの解像度は1900px〜2400pxと非常に高解像度になっていますので、メインとしての利用にも十分耐えられるクオリティになっています。
詳しくは以下
web制作でよく使用するアイコン。定番のタイプから個性的なテーマのセットまで、さまざまな種類がフリーで配布されています。そんな中今回紹介するのは、フリーベクターラインアイコンセットをまとめた「550+ Free Vector Line Icons for Designers」です。
Dribbble – Winter Icon Set by Tamara
ベクター形式なので、いろんなタイプのデザインに使用できる点が魅力のラインアイコンセットが多数紹介されています。
詳しくは以下
先日発売され、日本でも話題を振りまいたiphone3Gですが、今回紹介するのはそのiphoneやipod touchに使われているインターフェイスの素材集「iPhone GUI PSD」です。
これはその名の通り、iPhoneで使われているユーザーインターフェイスのパーツを素材として使えるようにPSDファイルにし、配布されている物です。上記の写真のようにかなり細かく作り込んであり、忠実に再現されています。
詳しくは以下
webサイトを立ち上げる際に必要な素材の一つ、ファビコン。時には設置を忘れてしまいがちですが、サイト自体の完成度を高めるためにはとても重要な要素だと思います。今回はそんなファビコン用データを簡単に作成できる「Favicon Maker」を紹介します。
サイト内にドラック&ドロップするだけで、さまざまなサイズのファビコン用データを一気に生成してくれるとても便利なwebツールとなっています。
詳しくは以下
80年代のデザイン界に革新をもたらしたメンフィスデザイン個性の強いデザインなので最先端のトレンドを取り込みたい方にはとてもおすすめ。そんなパターンが詰まった「10 Memphis Style Patterns」を今回はご紹介していきたいと思います。
ビビットなカラーでデザインにインパクトを与えてくれる特徴的な10種類のパターンが収録されています。
詳しくは以下
psd形式の素材は何かと重宝し、高度な加工技術により非常にクオリティが高いものが多く配布されています。そんな中今回紹介するのは、フリーで使用できるハイクオリティなデザインセンスのpsd素材を集めた「50 Best Free PSD Files」です。
Dribbble – Resume | Freebie by Mahmud Saeef
デザイン性に優れたpsd形式の素材が集められており、どれも使ってみたくなるような魅力的なものばかりが揃っています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
和柄はデザインで考えると特定のジャンルにしか使えない個性的なものですが、逆にそう言ったデザインをする上では非常に使える素材です。和食のメニュー、日本のテイストが必要とされるデザインには重宝されるものですが、一からつくるのは複雑だし、色合いとかも難しいので、なかなか難しいものです。
そこで今回紹介するのは日本風の和柄のphotoshopパターンを収録したパターンセット「和風ぱたあん」です。収録画像の一覧が公開されていましたので、下記に貼付けておきます。
詳しくは以下
撮影した写真の加工や補正だけでなく、デザインで使うグラフィック素材の作成などにも利用されているPhotoshop。非常に多彩な表現が可能ですが、機能が多い分なかなか上手く使いこなせていないという方も多いのではないでしょうか？今回はそんな方におすすめのPhotoshopチュートリアルまとめ「45 Fresh And Useful Photoshop Tutorials」を紹介したいと思います。
（Old Signage in Photoshop 3D | Abduzeedo Design Inspiration）
Photoshopでできたグラフィック作品が出来上がるまでのチュートリアルが分かりやすく紹介されています。いくつかピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
デザインを印象的なものに仕上げるために活用されることも多いテクスチャ素材。そんな時は、より個性の強いものが求められます。今回はそんなシーンに最適な「33+ High Quality Peeling Paint Textures for Your Designs」を紹介したいと思います。
（Peeling Back Paint by ~GrungeTextures on deviantART）
破れた紙の質感が、色も素材感など豊富な形で展開されています。気になったものをピックアップしておりますので、下記よりご覧ください。
詳しくは以下
シンプルで使い勝手の良いフォントは重宝しますが、デザインにアレンジを効かせないとありきたりのデザインになってしまうことも。そんな中今回紹介するのは、個性的なデザインを取り入れたフリーフォントまとめ「20 Free Fonts That You Should Work With」です。
使うだけでデザインに変化をもたらしてくれる20種のフォントが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
