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

Post on:2018年4月27日

sponsors

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

ランディングページ・プロダクトページのレイアウト、UIのさまざまなコンポーネント、アニメーションが気持ちいいインタラクションなど、ブックマークして定期的にチェックしておきたいサイトばかりです。

デザイン面に優れた最新のスマホ向けデザインのパターンがコレクションされています。100以上のiOSアプリの主要な画面遷移と5,000以上のパターンが厳選されており、自身のライブラリを作成（要登録、無料）することもできます。

クリエイター達に注目され、高いデザイン水準のWebサイトがまとめられています。ダーク・ライトやクリーンやミニマルやアニメーションといったスタイル、コマース・企業サイト・ポートフォリオといったタイプ、使用している技術などで抽出することもできます。

CSS Gridは今までのレイアウトにこだわる必要はまったくありません。
CSS Gridでどういったレイアウトができるのか、効果的に使用されているWebサイトがコレクションされています。

ランディングページ、プロダクトページ、価格ページごとに、良質なWebサイトのページがまとめられています。各詳細ではそれぞれ、縦長でも全ページ分のキャプチャ画像が収録されています。

デスクトップ向けページ、スマホ向けページをはじめ、ブランディングやイラストなど、クリエイティブな作品がコレクションされています。UIキットやデザイン素材も含まれており、有料・無料のものも揃っています。

レイアウトやコンポーネントのアイデアを求めている時は、このサイトがお勧めです。ナビゲーション・サイドバー・フッタ・リストといったコンポーネントをはじめ、アバウトページ・お問い合わせページ・ログインページなど、カテゴリごとに最新のデザインがまとめられています。

Atomicはギャラリーサイトではないのですが、よいインスピレーションが得られると思います。インタラクティブ性に優れたプロトタイプを作成するツールで、そのデザイン・インタラクション・コンポーネント・アニメーションは見るだけでよい刺激になります。

最後は、有名なインターネット企業のWebサイトがどのように変化したかが分かるギャラリーです。一環したブランドのデザインを守りつつも、テクノロジーやトレンドを巧く取り入れて進化しています。