最近のWebのUIデザインで採用されているナビゲーションのパターン16種類のまとめ

サイト構築 -デザイン

Post on:2016年3月9日

Search: 検索

検索のナビゲーションは、ユーザーが特定の何かを探していて、それがどこにあるか分からない時に直接その何かにアクセスすることができます。

最も基本的なパターンはメインのナビゲーションに検索のオプションとして含めることで、右上に配置するのが人気です。虫眼鏡アイコンを添えたり、ドロップダウンで拡張した検索機能にしてもよいでしょう。

Notifications: 通知

ユーザーが何らかの操作をした時、もしくは新しい内容を伝える時に知らせることができます。

通知が普及したのは、ソーシャルメディアサイトにおけるプッシュコンテンツの影響が大きく、他のサイトでも通知を利用して新しいコンテンツやプロダクトやコメントを知らせるようになりました。例えば、Googleでは多数のプロダクト全体に渡る通知を統合して使用しています。

Jump to Section: ページ内アンカー

ページを見る時や特定のセクションに戻る時にスクロールすることは必然です。ページ内アンカーがセクションごとに定義されていると、ユーザーの時間は節約されます。

テキストベースの長いページでは目次として、スクロール前提の縦長ページでは各セクションのアンカーポイントとして利用することができます。

Sticky Navigation: スティッキーナビゲーション

ユーザーはスクロールが長いと、混乱して迷ったり、メインのナビゲーションに戻ることを必要とします。スティッキーナビゲーションはスクロールしても上部にくっついて配置されるので、この問題を解決します。

スティッキーナビゲーションは上部でよく機能しますが、サイドや下部では普通（もしくは邪魔）です。特に無限スクロールを採用しているサイトでは、上部のナビゲーションが非常によく機能します。これがあることで、ユーザーは常に選択肢が与えられた状態となります。

Vertical Navigation: 垂直型のナビゲーション

サイドバーに配置される垂直型のナビゲーションに含まれる項目は、水平型のメインナビゲーションに含まれない重要なリンクが多く含まれています。項目はそのページでできるオプション的なコンテンツや操作で、属性ごとにまとめて配置する必要があります。

Slideouts: スライドアウト

スライドアウトは、コンテンツに重なって、またはコンテンツを押し出すようにして表示するナビゲーションで、そのスペースがしばしば問題です。また初期状態に使用されるハンバーガーアイコンは人気が高いですが、そのアイコンが分かりにくいため、「Menu」などのように文字を使用するものが増えてきました。

Popovers: ポップオーバー

ユーザーが表示しているページはそのままの状態で、ポップアップを表示し、補足となる情報を表示します。情報入手のために個別のページに移動する操作がなくなるので、ユーザーの操作の流れを混乱させないという利点があります。

Modals: モーダル

ポップアップと同様に、ページはそのままの状態で追加の情報を表示します。重要な異なる点は、ユーザーが何らかの操作を行わないと、元に戻したり、先に進むことができないことです。モーダルを使用した広告や宣伝は、オーナーは好みますが、ユーザーには好まれない傾向です。

Call to Action: コールトゥアクション

ユーザーはページで次に何をすべきか、明確なサインを必要とします。コールトゥアクションボタンは、行動への呼びかけを行い、ユーザーを招待するナビゲーションです。そのため、目立つ必要がありますが、あまり派手すぎると避けられてしまいます。

コールトゥアクションを目立たせるためにはボタンのデザインや文言だけでなく、その周りのスペースを充分確保することで、ユーザーの目に止まります。

Featured Content: フィーチャードコンテンツ

ユーザーはページを見た時、すぐに重要なコンテンツを見つけることができるとは限りません。それを解決するのが、重要なコンテンツを上部や中央に配置するフィーチャードコンテンツです。重要である基準は「価値がある情報」「新しい情報」で、その中身は常に変更するようにします。

Recommendations: おすすめ

おすすめは最近のWebサービスには欠かせないナビゲーションで、ユーザーの嗜好に合わせてその内容が変化します。ショッピングサイトであればユーザーの購入や閲覧履歴を元に表示し、ソーシャルメディアであればユーザーに関係している人物を解析して表示し、サービスであればユーザーが利用したコンテンツのタイプを分類して類似のコンテンツを表示します。