[スマホサイト]スマホサイトのナビゲーションを考える

最近のサイトはスマホサイトあって当たり前な流れが定着してきましたが、なかなかスタンダードなデザインが見出だせなくて奮闘しております。
そこで「50のスマホサイト調査から見るナビゲーションのUIデザイン5パターン(インフォバーン様)」を参考に持論と飛ばしてみます。

調査結果から見ていきます。

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

これの結果が上記のイラストの結果だそうです。
※調査サイト一覧はリンク先を参照してください。

それぞれメリット、デメリットあるでしょうが、ここからが持論です。
もちろんサイトの内容や全体的なデザイン、コンセプト等でまったく違ってくると思いますが・・・

横一列型(32%)

多くのサイトが横一列型を採用しているようですが、デメリットが目立つような気がします。
「50のスマホサイト調査から見るナビゲーションのUIデザイン5パターン(インフォバーン様)」でも書かれているようにメニュー項目が4～6個で増減しないという条件は結構キツイかな。と。
むしろナビゲーションが6個になるとタップし難い、つまりユーザビリティに欠けてしまうのではないかと思います。
ただ分かりやすい、親しみやすい点は捨てがたいですね。

リスト型(24%)

一番オーソドックスな形じゃないでしょうか。
メニューの増減にも柔軟に対応でき、なおかつコーディングもしやすいです。
ただ1つ気になることは、このメニュー以下に配置したコンテンツに目が行きにくい点です。
その辺は、デザイン構造をよく考えながら配置してあげないといけない部分ですね。

スライド型(10%)

これは面白さは他のメニューに比べるとかなりあると思います。
が、おそらく気付かない閲覧者が多いのではないでしょうか。誘導を担うメニューへの誘導が必要というサイトには向かないナビゲーションだと思います。
ちなみに以前、クライアントのたっての要望で実装したことがありますが「・・・。」な結果でした。
まーボクの誘導の仕方が悪かったんでしょうけど・・・。なかなかサイトには難しいナビゲーションだと思います。

Springpad型(12%)

スマホユーザーには親しみやすいナビゲーションだと思います。
実際、ボクもこれを採用するケースは少なくないです。
ただ難点はメニュー自体に長い文字列を入れられないところです。(CSSのみでデザインする場合)
内容を短い単語とピクトグラムに抑えられるなら有効なナビゲーションだと思います。

ショートカット型(12%)

これもスライド型と同様にタップ率は減るナビゲーションじゃないかと思います。
実際に実装したこともありますし、WordPressのプラグイン「WPtouch」もこのナビゲーションを採用していますが「・・・。」な結果でした。
メインナビゲーションには向かないと思いますが、サブナビゲーションとしてはスペースも取らないしいいのかもしれませんね。

まとめ

好き勝手グダグダ書いてみましたが、実際どれがベストなのかはサイトの内容、デザイン、コンセプト、構造等を加味して決定したほうが良さそうです。
ボクは基本企業サイト制作がほとんどなので「横一列型」を横2列にしたり「リスト型」を採用することが多いです。コーディングもしやすいしwww

おまけ

CSS3 Button Generator
各プロパティを指定するだけでCSS3でボタンを吐き出してくれるサイトです。
CSS3ガッツリなのでスマホサイトにはオススメです。