これは要チェック！豊かなユーザエクスペリエンスを与えるナビゲーション集
Post on:2011年4月21日
sponsors
ナビゲーションはウェブサイトにとって重要なエレメントであり、基盤となるものです。素晴らしいナビゲーションは豊かなユーザエクスペリエンスを与えます。
ユーザーは使いにくくない困惑されないナビゲーションを望み、シンプルなナビゲーションはたいていの場合、ダイナミックなものよりユーザフレンドリーなものです。ここではダイナミックでクリエイティブなナビゲーションの素晴らしいインタラクションと若干の欠点をSmashing Magazineから紹介します。
Showcase of Creative Navigation Menus: Good and Bad Examples
[ad#ad-2]
パララックスとスクロール
Nike Better World
ページを垂直方向にスクロールすると、その面白いパララックス効果を楽しめます。また、右の点がナビゲーションとして機能しますが、分かりにくいのが難点です。
Rossocarmilla style
ホバー操作に反応するパララックスです。水平方向のスクロールとカラースキームが印象的です。
Webdesign Karlsruhe
垂直・水平方向のダイナミックなパララックスです。ページの印象は強いですが、読みにくいのが難点です。
ストーリーをもったナビゲーション
Ben the Bodyguard.
ファーストビューのイラストもインパクトが強いですが、垂直方向にスクロールし、街を歩く仕掛けが印象的です。また、最後に、行動へのアクションボタンが用意されているのが抜け目ないです。
Youzee
ファーストビューでこのサイトが何であるかは分かりませんが、ナビゲーションやスクロールするごとに分かるようになっています。
スクロールするナビゲーション
Polecat
右上のナビゲーションをクリックすると目的のセクションにスクロールします。セクションごとに背景色を変えているのはいいアイデアです。ただし、クリックできそうなできないエレメントが多数あるのが紛らわしいです。
Eric Johansson
ページ下部のバーを操作してスクロールします。操作はドラッグとクリックに対応しています。難点はその操作性です。
Sam Web
水平と垂直のスクロールが混在した面白いナビゲーションです。ポートフォリオも同様に水平方向のスクロールでナビゲーションされますが、同じナビゲーションではないので、混乱するかもしれません。
Denny's Restrants
これも水平と垂直が混在したスクロールを提供します。ページ内のあちこちに面白いエフェクトがありますが、少しうるさいかもしれません。また、モバイルユーザーにフレンドリーではないでしょう。
[ad#ad-2]
実験的なナビゲーション
Ferocious Quarterly
ナビゲーションのデザインに奥行きを与えたものです。
Method Design Lab
泡のようなエレメントのアニメーションがとても面白いです。
Web Standards Sherpa
その前後が分かる水平方向のナビゲーションを使ったコンテンツスライダーです。
Design Intellection
右側のタブ型のナビゲーションは、そのセクションを表示してスクロールするとミニマルなデザインになります。
パンくずと融合したナビゲーション
NOS.nl
シンプルですが、非常に巧いナビゲーションです。サブカテゴリーを表示した状態がそのままパンくずになっています。
MDM Bank
クラシックなパンくずタイプのナビゲーションです。サイトマップをクリックすると、サイト全体を俯瞰できます。
スライドを活用したナビゲーション
Directions
多くのコンテンツをスライドで隠し、省スペースにおさめています。
Creative NZ
メガドロップダウンに数多くのアイテムを配置しています。また、打ち出しにのスライドにも数多くの情報を掲載しています。
おわりに
-
- シンプルで分かりやすい記述
- ユーザーが必要な時に、はっきりと分かる適切な記述を使ってください。ほんの少しの説明がユーザーへの大きな手助けとなるかもしれません。
-
- 一貫性をもたせる
- ナビゲーションなどのキーとなるエレメントは特に、サイト内で一貫性をもたせるようにしてください。
-
- 明確なラベル
- ラベルにはシンプルで分かりやすいものを使用してください。
-
- ストーリーを考える
- インタラクションを伴うことでユーザーとあなたのサイトで繋がりを増やすきっかけになるかもしれません。これは特にランディングページに取り入れてみてください。
元記事では他にも数多くのナビゲーションの事例が紹介されています。
sponsors
