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