これは要チェック!豊かなユーザエクスペリエンスを与えるナビゲーション集

ナビゲーションはウェブサイトにとって重要なエレメントであり、基盤となるものです。素晴らしいナビゲーションは豊かなユーザエクスペリエンスを与えます。

ユーザーは使いにくくない困惑されないナビゲーションを望み、シンプルなナビゲーションはたいていの場合、ダイナミックなものよりユーザフレンドリーなものです。ここではダイナミックでクリエイティブなナビゲーションの素晴らしいインタラクションと若干の欠点を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

top of page

©2018 coliss