ヘッダ・フッタ・ナビゲーションなど、最近のWebデザインで採用されているアイデアのまとめ -Good Web Design
Post on:2017年10月12日
ランディングページで使用されているヘッダ・フッタ・ナビゲーション・フィーチャーコンテンツ・アクションボタン・ソーシャルコンテンツなど、最近のWebデザインで採用されているアイデアがまとめられたGood Web Designを紹介します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017101201.png)
まずは、上部に配置するナビゲーション。
最近のトレンドは細いバーが多く、ロゴは左端か中央に配置し、右端にはアクションボタン、その横にグローバルナビゲーションを3-5個のアイテムが用意されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017101202-01.png)
ナビゲーション: その1
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017101202-02.png)
ナビゲーション: その2
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017101202-03.png)
ナビゲーション: その3
プロダクトやサービスなど、メインとなるコンテンツを最初に見せるヒーローヘッダ。高品質なグラフィックを使用し、テキストは最小限、またアクションボタンもユーザーが迷わないように1つだけ配置するレイアウトに人気が集まっています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017101202-04.png)
ヒーローヘッダ: その1
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017101202-05.png)
ヒーローヘッダ: その2
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017101202-06.png)
ヒーローヘッダ: その3
フッタ、一時期は凝ったデザインが流行りましたが、最近ではシンプルなリストを使ったレイアウトが増えています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017101202-07.png)
フッタ: その1
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017101202-08.png)
フッタ: その2
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017101202-09.png)
フッタ: その3
プロダクトやサービスを詳しく紹介するフィーチャーコンテンツの見せ方はさまざまです。グラフィック要素はプロダクトやサービスの画像を使用するだけでなく、アイコンを効果的に使用するデザインが増えています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017101202-10.png)
フィーチャーコンテンツ: その1
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017101202-11.png)
フィーチャーコンテンツ: その2
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017101202-12.png)
フィーチャーコンテンツ: その3
フィーチャーコンテンツはリストを使って、プロダクトやサービスの特徴を紹介するのも王道です。●のようなビュレットを並べるのではなく、アイコンやサムネイルなどグラフィカルな要素を使うと魅力がアップします。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017101202-13.png)
ソーシャル用のコンテンツも必須になりました。自身のソーシャルを紹介するだけでなく、評判などをツイートで掲載するコンテンツも見かけます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017101202-14.png)
価格表はシンプルなものから、比較するものまで、分かりやすさに重点がおかれてデザインされています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017101202-15.png)
ユーザーから見ると、FAQは非常に重要なコンテンツです。力をあまり入れてないデザインを見かけると、がっかりします。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201704/2017101202-16.png)
sponsors