ブックマークしておきたい!WebサイトやスマホアプリのUIデザインのアイデアに困った時に、参考になるサイトのまとめ
Post on:2018年4月27日
WebサイトやスマホアプリなどのUIデザインのアイデアに困った時に、参考になる、そして勉強になるサイトを紹介します。
ランディングページ・プロダクトページのレイアウト、UIのさまざまなコンポーネント、アニメーションが気持ちいいインタラクションなど、ブックマークして定期的にチェックしておきたいサイトばかりです。
![WebサイトやスマホアプリのUIデザインのアイデアに困った時に、参考になるサイトのまとめ](http://coliss.com/wp-content/uploads-201802/2018042701.png)
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018042702-01.png)
Mobbin -Latest Mobile Design Patterns
デザイン面に優れた最新のスマホ向けデザインのパターンがコレクションされています。100以上のiOSアプリの主要な画面遷移と5,000以上のパターンが厳選されており、自身のライブラリを作成(要登録、無料)することもできます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018042702-02.png)
DSGN -The hottest web design shocase
クリエイター達に注目され、高いデザイン水準のWebサイトがまとめられています。ダーク・ライトやクリーンやミニマルやアニメーションといったスタイル、コマース・企業サイト・ポートフォリオといったタイプ、使用している技術などで抽出することもできます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018042702-03.png)
CSS Gridは今までのレイアウトにこだわる必要はまったくありません。
CSS Gridでどういったレイアウトができるのか、効果的に使用されているWebサイトがコレクションされています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018042702-04.png)
ランディングページ、プロダクトページ、価格ページごとに、良質なWebサイトのページがまとめられています。各詳細ではそれぞれ、縦長でも全ページ分のキャプチャ画像が収録されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018042702-05.png)
デスクトップ向けページ、スマホ向けページをはじめ、ブランディングやイラストなど、クリエイティブな作品がコレクションされています。UIキットやデザイン素材も含まれており、有料・無料のものも揃っています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018042702-06.png)
レイアウトやコンポーネントのアイデアを求めている時は、このサイトがお勧めです。ナビゲーション・サイドバー・フッタ・リストといったコンポーネントをはじめ、アバウトページ・お問い合わせページ・ログインページなど、カテゴリごとに最新のデザインがまとめられています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018042702-07.png)
Atomicはギャラリーサイトではないのですが、よいインスピレーションが得られると思います。インタラクティブ性に優れたプロトタイプを作成するツールで、そのデザイン・インタラクション・コンポーネント・アニメーションは見るだけでよい刺激になります。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201802/2018042702-08.png)
最後は、有名なインターネット企業のWebサイトがどのように変化したかが分かるギャラリーです。一環したブランドのデザインを守りつつも、テクノロジーやトレンドを巧く取り入れて進化しています。
sponsors