実例から学ぶ、固定表示されるナビゲーションを賢く使うポイント
Post on:2011年6月29日
sponsors
スクロールしても同じ位置に固定表示されるナビゲーションを賢く使ったウェブサイトを紹介します。
Five killer ways to use fixed navigation
[ad#ad-2]
下記は各ポイントを意訳したものです。
正方形のグリッドが特徴的なウェブサイトで、ナビゲーションは真ん中に配置されています。サイトは1ページで構成されており、ナビゲーションのラベルをクリックするとスライドのアニメーションでコンテンツが表示されます。
ナビゲーションは各コンテンツに溶け込むようにデザインされており、こういった使い方は小さいサイトには素晴らしいソリューションとなるでしょう。
ナビゲーションをクリックしたキャプチャ
このサイトも1ページで構成されたもので、半透明な背景を使用したナビゲーションが配置されています。各コンテンツは半透明のナビゲーションの後ろにスクロール表示され、ユーザーは迷うことがないでしょう。
半透明の背景を使用する一番の利点は、さまざまなビューポートのサイズでも不具合が生じないことです。
ナビゲーションをクリックしたキャプチャ
次は小規模のEコマースサイトの例です、ナビゲーションは左のサイドバーに固定表示されます。
ナビゲーションはプロダクトを条件別に表示するもので、スクロールをしても常に一番良い位置に表示され、ユーザーの利便性に配慮されています。
ナビゲーションをクリックしたキャプチャ
このサイトも1ページで構成されたサイトで、各コンテンツはボックスのデザインによって構成されています。
前述のように固定されたナビゲーションの利点だけでなく、サイトの雰囲気を演出する大切な役割も担っており、イラストがナビゲーションのクリック時にはジャンプし、スクロール時には歩くアニメーションをします。
スクロール時のキャプチャ
最後は今までとは異なるタイプで、ナビゲーションはページ上部に固定表示されます。それぞれのラベルはアクティブ時にハイライトされ、クリックするとスライドのアニメーションで直ちにコンテンツを表示します。
ナビゲーションをクリックしたキャプチャ
[ad#ad-2]
sponsors
