全画面のビジュアルを分割したダイナミックなナビゲーション10選
アパレルのメンズ、レディースや学校の学部のように、大きくユーザーの異なるコンテンツを一画面に分割、配置し、ビジュアルを強く押し出してナビゲーションする手法が増えてきているように思います。
レスポンシブデザインなどが流行し、画面の広さを活かしたビジュアルが人気になったことが要因かと思いますが、その手法も数多くあります。
サイトをアーカイブする中で見つけた、ビジュアルを活かしたナビゲーションを使用したサイトを紹介いたします。
luxury-stay.asia
石垣島のスポットを紹介しているサイト。
TOPの大きく二つに分割された、美しい景色の写真が印象的です。
選択すると幕が開くようにスライドし、コンテンツに遷移します。
京都工芸繊維大学大学院
建築学とデザイン学の2コースを分割しているサイト。
赤と青のわかりやすい色使い、選んだ学科を全画面にする演出など、
わかりやすい表現がいいと思います。
LEE stylebook
ファッションブランド、leeのファッションスタイル紹介サイト。
左右の人物がMens、Womensへの導線です。
ホバーで輪郭線に切り替わる効果に遊び心を感じます。
コンテンツ移動後の、スクロールに応じてパラパラマンガのように動くモデルも注目。ついつい最後まで見てしまう、面白いサイトです。
mariobruschi
アパレルブランド（セレクトブランド？）「mariobruschi」のサイト。Mens、Womensの縦に分割されたコンテンツが左右にスライドします。
versacecollection
アパレルブランド、ヴェルサーチのコレクションのサイト。
上下に分割されているものは比較的珍しいですね。
おもてなし茶の道
お茶の２大様式について説明しているサイト。
侘び茶と煎茶の２つのコンテンツがあり、それぞれ同じテーマを扱っているので、テーマごとに2つのコンテンツを行き来し、比較できるようになっている、考えられたサイトです。
うどん・おでん 久丸 | 旬家 莉久
2つの店舗を１つのwebサイトにまとめています。トップの入り口で分断されていますが、２つのコンテンツの構成が同じになるよう作られています。
自然とどちらのお店も気になってくるので
同じところが運営しているお店としてアピールするには適した手法に思います。
loisjeans
ジーンズメーカーloisjeansのキャンペーンサイト。
画像ではなく、ムービーが分割されています。コンテンツ移動後のページもアーティスティックでクールです。
house on the krasina
海外の不動産サイト。ユーザーの望む生活に応じたコンテンツに４分割されており、アコーディオンのようなスライドと、動画の演出が美しいサイトです。
piaget
ジュエリーブランドpiagetのサイト。
ムービー後、ブランドを選択する2枚の写真の演出が印象的。
選択後、topのビジュアルに切り替わる際の演出も素敵です。
