ブックマークしておきたい!UIデザインのアイデアに困った時、参考になるサイトのまとめ
Post on:2016年2月19日
WebサイトやアプリなどのUIデザインのアイデアに困った時の参考に、そして勉強になるサイトを紹介します。
ページのレイアウト、UIのさまざまなコンポーネント、動きが気持ちいいアニメーション、実装のテクニックなど、定期的にチェックしておきたいサイトばかりです。


ページのレイアウト、ナビゲーション、データコンテンツ、フォーム、ユーザスクリーンなど、インタラクティブ性の高いUIデザインのさまざまな事例から、UIの問題を解決するデザインのパターンが紹介されています。
ローンチして間もないサイトですが、内容は非常に充実しています。

DribbbleでUIデザインを探す人には、かなり便利です。日々アップロードされるDribbleのアートワークのUIデザインに関するもののみをコレクションしているサイトです。
このサイトもローンチしたばかり、登録数は2,000を越えようとしています。

UIデザイナーのためのインスピレーションと素材をコレクションしているサイト。
デザインだけでなく、UIを実装するコードも扱っており、CSSやJavaScriptの参考にもなります。

ヘッダのいいアイデアないかな、リストやテーブルがいつも同じ感じになってしまう、という人にオススメ。50種類以上のカテゴリからさまざまなUIのパターンを見つけることができます。

UIデザインのトレンドや最新のテクニックがコレクションされています。コンセプト的なものも多いので、そのデザインやアニメーションは非常に楽しめます。

実装レベルでのUIデザインを求めている人はここがオススメです。CSSやSVGを使ったアニメーションの実装テクニックがコレクションされています。

100日間UIデザインをアップロードしていく修行僧のようなプロジェクトがついに完了しました。100個もデザイン案をあげてと言われたら、そのクオリティが心配ですが、そんなのは無用です。
全UIデザインがPSD、またはHTMLで無料でダウンロードできます。

さまざまなUIデザインのユーザビリティを検証しているコンテンツです。入力画面はモーダルの方が効果があるのかないのか? アイコンにはテキストのラベルをつけた方がいいのか? パスワードの確認入力は必要なのか? など、10,000人以上のユーザテストの結果を見ることができます。
キャプチャはボタンの下に、それに申し込んだ際の事例へのリンクの有無の違いです。

最後は、ちょっと息抜きに。
Webデザインの歴史をまとめたコンテンツ。創世記はテキストベースからはじまり、サイズ指定が間違った画像が配置されたり、アニメーションgifがジャギってたり、W3Cのvalidボタンを貼ったり、といろんなことがありましたw
sponsors