ブックマークしておきたい!UIデザインのアイデアに困った時、参考になるサイトのまとめ

WebサイトやアプリなどのUIデザインのアイデアに困った時の参考に、そして勉強になるサイトを紹介します。

ページのレイアウト、UIのさまざまなコンポーネント、動きが気持ちいいアニメーション、実装のテクニックなど、定期的にチェックしておきたいサイトばかりです。

ユーザインターフェイスのアイデアに困った時、参考になるサイトのまとめ

サイトのキャプチャ

UI Patterns

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

サイトのキャプチャ

Collect UI

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

サイトのキャプチャ

UiDSGN

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

サイトのキャプチャ

Inspiration UI

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

サイトのキャプチャ

UI Movement

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

サイトのキャプチャ

Code My UI

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

サイトのキャプチャ

100 Days UI

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

サイトのキャプチャ

Good UI Evidence

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

サイトのキャプチャ

Evolution of Webdesign

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

top of page

©2016 coliss