実例から学ぶ、固定表示されるナビゲーションを賢く使うポイント

スクロールしても同じ位置に固定表示されるナビゲーションを賢く使ったウェブサイトを紹介します。

サイトのキャプチャ

Five killer ways to use fixed navigation

[ad#ad-2]

下記は各ポイントを意訳したものです。

サイトのキャプチャ

Netontwerp

正方形のグリッドが特徴的なウェブサイトで、ナビゲーションは真ん中に配置されています。サイトは1ページで構成されており、ナビゲーションのラベルをクリックするとスライドのアニメーションでコンテンツが表示されます。
ナビゲーションは各コンテンツに溶け込むようにデザインされており、こういった使い方は小さいサイトには素晴らしいソリューションとなるでしょう。

サイトのキャプチャ

ナビゲーションをクリックしたキャプチャ

サイトのキャプチャ

Black Estate Vineyard

このサイトも1ページで構成されたもので、半透明な背景を使用したナビゲーションが配置されています。各コンテンツは半透明のナビゲーションの後ろにスクロール表示され、ユーザーは迷うことがないでしょう。
半透明の背景を使用する一番の利点は、さまざまなビューポートのサイズでも不具合が生じないことです。

サイトのキャプチャ

ナビゲーションをクリックしたキャプチャ

サイトのキャプチャ

Parachute Clothing

次は小規模のEコマースサイトの例です、ナビゲーションは左のサイドバーに固定表示されます。
ナビゲーションはプロダクトを条件別に表示するもので、スクロールをしても常に一番良い位置に表示され、ユーザーの利便性に配慮されています。

サイトのキャプチャ

ナビゲーションをクリックしたキャプチャ

サイトのキャプチャ

Fat-Man Collective

このサイトも1ページで構成されたサイトで、各コンテンツはボックスのデザインによって構成されています。
前述のように固定されたナビゲーションの利点だけでなく、サイトの雰囲気を演出する大切な役割も担っており、イラストがナビゲーションのクリック時にはジャンプし、スクロール時には歩くアニメーションをします。

サイトのキャプチャ

スクロール時のキャプチャ

サイトのキャプチャ

Campaign Monitor

最後は今までとは異なるタイプで、ナビゲーションはページ上部に固定表示されます。それぞれのラベルはアクティブ時にハイライトされ、クリックするとスライドのアニメーションで直ちにコンテンツを表示します。

サイトのキャプチャ

ナビゲーションをクリックしたキャプチャ

[ad#ad-2]

sponsors

top of page

©2018 coliss