【2016年振り返り】webサイトの画面設計の参考になるサイトをまとめてみた

トミー

2017.01.05

こんにちは、デザイナーのトミーです。

2016年を振り返ってみて、画面設計がこれまでページ単位（縦長）なのに対して、モニターにfitする画面のサイトも増えてきました。1画面ごとに説明する、アプリケーションのような構成のサイトは今後も増えてきそうです。そこで、参考になる画面やサイト設計をまとめてみました!

1. 全画面にfitするコンテンツ

参考サイト：reword™

参考サイトでは、コンテンツをスクロールすると画面にコンテンツがfitしています。縦長のサイトよりも、各セクションごとにコンテンツが配置されているので、初見のユーザーにとってとても内容が入ってくるのではないでしょうか。全画面にfitするコンテンツをfitscreenと呼んでいます。全画面に対してデザインできるので、モニターサイズが異なっていても見た目の差異が出にくいのも特徴です。しかし、コンテンツの情報量が少ない場合にのみ有効なので、コンテンツを簡潔に説明する場合に利用できそうな画面設計ですね。

2. 画面広域でのメニュー効果

2-1

参考サイト：camper.com

参考サイトでは、サイドにあるナビゲーションで、次のコンテンツを画面の側面全体に表示しています。

2-2

参考サイト：Control Films

hoverでのアフォーダンスにより、作品を表示しています。メニューだけでなく、表示するコンテンツと合わせて全画面で構成されるメニューの参考例です。

2-3

参考サイト：Standard

こちらはスクロールでのアフォーダンスで、作品を画面全体で切り替えています。ページ全体がメニューであり、演出となっている参考例です。全面でひとつずつコンテンツを見せていくサイトも上記とともに2016年に増えてきた表現のひとつです。

参考サイト：GREE Ventures（グリーベンチャーズ）

全画面メニューの参考例です。SPとPCのメニューを合わせやすいので、レスポンシブ、アダプティブサイトでよく見られます。汎用性も高いメニュー表現ではないでしょうか。参考サイトでは、タイポをダイナミックに使い、サイトの印象ととてもマッチしています。

3. ダイナミックな画面分割

4-1

参考サイト：Build in Amsterdam

参考サイトは左右の分割ですが、画面を上下2分割にするなど、これまであまり見られなかった画面分割の表現も2016年に増えてきたと思います。以前よく言われていた、フォーストビューに伝えたい情報をできるだけ多く入れる流れから、フォーストビューを全画面で印象的に見せるようになってきてますね。

4. ページ遷移アニメーション

5-1

参考サイト：Kuum.jp

ページ遷移のアニメーションも2016年よく見かけました。参考サイトでは、ページ遷移時に商品と同トーンのカラーが全面に表示され、商品の特徴がより伝わってきます。ページ遷移アニメーションは、pjax（pushStateとAjaxの組み合わせたページ遷移の手法）などのシームレスな画面遷移と組み合わせて使われることが多いですね。webサイトでは画面の表示領域が固定されているので、シームレスな遷移により別ページを開くというより表示領域を広げているような感覚に近いかもしれません。

まとめ

今回、画面設計の参考サイトをまとめてみました。情報の多いサービスサイトやコーポレートサイトなど、条件に合わせて画面設計を選ばなくてはいけませんが、どれも魅力的なサイトでしたね。コンテンツのボリュームや構成なども含まれてくるので、「サイトでのプライリティーが明確に設計されているサイト」では、画面設計がより重要です。画面設計でこんな良書があるよという方がいたら教えてください〜〜〜。それではまた。