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

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

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

WebサイトやスマホアプリのUIデザインのアイデアに困った時に、参考になるサイトのまとめ

サイトのキャプチャ

Mobbin -Latest Mobile Design Patterns

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

サイトのキャプチャ

DSGN -The hottest web design shocase

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

サイトのキャプチャ

Grid Examples

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

サイトのキャプチャ

Pages.xyz

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

サイトのキャプチャ

Up Labs

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

サイトのキャプチャ

Call to Idea

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

サイトのキャプチャ

Atomic

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

サイトのキャプチャ

Museum of Websites

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

sponsors

top of page

©2018 coliss