SPhereロゴ

SPhere!

コンテンツ・ファースト時代のスマートフォン情報最前線[スフィア!]

| カテゴリ:

50のスマホサイト調査から見るナビゲーションのUIデザイン5パターン

スマートフォンサイトを最適化するうえで、重要な要素となるナビゲーション。今回は50のスマホサイトをリサーチした結果をもとに、スマートフォンサイトのナビゲーションのデザインパターンとそれぞれの特色を紹介します。

 調査対象となったサイト一覧

スマホ最適化事例

 

 ナビゲーション調査結果

ナビゲーションを取り入れているスマホサイトは、50サイト中45サイトありました。SPhere!では、その内訳を、大きく「横1列型」「リスト型」「スライド型」「Springpad型」「ショートカット型」として区別しました。以下に詳細を記載します。

横一列型


最も数が多く、オーソドックスなパターン。iOS、AndroidOSのユーザーインターフェースに似ているため、迷いにくいのが特徴です。メニュー項目が4~6個で、かつ増減しない場合、ユーザーにやさしいスタンダードなデザインパターンとして多くのサイトで利用できます。

リスト型


横一列型に次いで数が多かったパターン。横一列型よりも長い文章を掲載でき、メニューは縦に追加していくので項目数も制限を受けないのが特徴です。これを応用して、大カテゴリをアコーディオンで展開させてサブメニューを表示し、直接下層ページへと誘導するといったことも可能なため、階層構造をもつサイトで効果を発揮します。

スライド型


リスト型の派生タイプで、アプリなどでよく見られるナビゲーションです。ナビが隠れる分、自由なデザインができるため、世界観を強く表現したいプロモーションやキャンペーンで用いると効果的だと思われます。

Springpad型


スマートフォンのホーム画面を想起させる、アイコンが並んだナビゲーションパターンです。アプリのような印象を与えるため、ぐるナビや大和証券のような、ツール系のWebサービスで多く見られました。

ショートカット型


こちらもリスト型の派生タイプで、ナビに記載する項目が多い場合に有効です。メニューが隠れる分自由なデザインができる、メニューの項目数に制限がないなど、メリットは大きいものの、ショートカットボタンがあまり目立たないため、デザイン的な配慮が必要です。トップページはリスト型にし、下層ページをショートカット型にしているケースもいくつか見られました。

 

 ボタンのサイズについて

「スマートフォンは指で操作するため、正確な位置をタッブすることが難しい」「指で隠れる範囲が意外と大きい」など、スマホサイトならではの配慮が必要です。

適切なボタンサイズは?

appleは44px×44px、Andoridは48px×48pxと、それぞれのOSでボタンサイズやタップ可能な範囲の大きさに関するガイドラインが定まっています。

このほか、若い女性が多く利用するサイトでは爪の長さを考慮してリンク域を広めにとる、など臨機応変な対応が求められます。

まとめ

調査の結果、横一列型のナビゲーションが1番多いという結果に。ユーザーが認知しやすい、スタンダードなタイプが人気のようです。ただし、画面幅によって項目数が制限されるため、情報設計の段階でナビゲーションの内容を精査する必要があります。項目を増やしたい場合はリスト型を採用したり、ナビゲーションよりもページを大きく見せたりしたい場合は、スライド型やショートカット型にするなど、目的に合わせたナビゲーション設計がユーザビリティ向上に繋がります。今後、スマートフォンのスペックアップによって、よりダイナミックなナビゲーションの見せ方も増えてくるものと思われます。

(宇尾公輔)
※調査対象となったサイト一覧を追記いたしました。 2013年 4月17日 14:50

 
最新記事
月別一覧
カテゴリ一覧
 

 サイトTOPへ