モバイルサイトのナビゲーションメニューは画面下に置くべき

thumb_smartphone

スマートフォンを使ってWebサイトを閲覧する人、どんどん増えてきています。モバイルブラウザーのシェアを見ても、そのユーザー数は無視できないものとなっています。サイトによってはデスクトップで閲覧する層より多いところもあるかもしれませんね。私がWebサイトの制作依頼を受けた際、モバイル対応は必須としてきましたが、モバイルユーザビリティについて再考してみたので、今回はナビゲーションメニューについて簡単に記事にしてみます。

よく見かけるWebサイトのナビゲーションメニュー

よく見かけるWebサイトのナビゲーションメニュー

人気Webサイトギャラリー「The Best Designs」に掲載されている多くのWebサイトはメニューアイコンをロゴとともに画面上部に掲載しているのをよく見かけます。よく見かけるからと言ってこの場所に設置するのが本当に使いやすいのか?という点をちょっと考えてみました。

スマートフォンをどうやって持つか?

hand

まず、スマートフォンユーザーはスマートフォンをどのようにして持っているのでしょうか?Designing Mobile Interfacesの著者、Steven Hoober氏の書いた記事によると、49%の人は片手でスマートフォンを持ち、親指で操作しているそうです。両手持ちはキー入力の場面ですかね。

画面内で親指の届く範囲

題材は異なりますが、「Facebook Paper’s gestural hell」という記事でも同じく親指で操作できる範囲について取り上げられていました。

片手の親指だけでタッチできる範囲

こちらの画像のとおり、片手の親指だけでタッチできる範囲はかなり狭く、画面上部にリーチさせるのは難しそうです。確かに試してみても、親指と反対側の上部には届きませんでした。女子の場合は特に難しいでしょう。

両手で見た場合のリーチ範囲
どちらの手で握っても届く範囲は中央に集中。

この記事では、親指の届く範囲にどの要素があるか検証できるよう、親指リーチ範囲のファイルが配布されています(.psd, .ai, .pdf, .png, .svg形式)。制作途中のデザインと照らし合わせ、改善すべき点がないか再確認してみるとよいでしょう。

結論:ナビゲーションメニューは画面下に

上記を踏まえると、最もタッチしやすい画面下中央にナビゲーションメニューを配置するのがよさそうです(記事タイトルそのまんま)。サイトによってはナビゲーションメニューよりタッチしてほしい要素(CTA、特定のページへのリンク等)を配置することになりますね。スマートフォンアプリでは開発当初からすでに取り入れているものが多く、UIの考え方の違いが伺えます。

おそらくデスクトップ版を先に制作しているサイトほど、デスクトップ版との統一性を重視して上部にロゴとメニューを設置しているものと思われます。確かに統一感は大切ですが、デスクトップにはデスクトップの、モバイルにはモバイルの使いやすさがあります。これまでのWebデザインではモバイルに「対応させる」ことがキーポイントとされてきましたが、これからのWebサイト制作では、「対応させる」だけではなく、デザイン性を損なわず、かつどのデバイスでも「使いやすい」Webサイトを作るため、制作フローの段階から考え直す必要があります。もちろん賛否はあるかと思いますが、この記事がユーザビリティについて考えるきっかけになれば幸いです。


まあここまで言っておいてなんですが、かく言ううちのサイトのモバイル版も右上にメニューが設置されてるんですけどね(・ω<)てへぺろ☆ リデザイン考えます…。

シェアする

コメント

  • Taichi Kume

    iOS7 safariの場合、フローティングバナー対策なのか画面下をタッチするとメニューが表示されるという仕様のため、画面下に追従タイプ(fixed系)メニュートグルを設置すると、一生メニューが開けなくなる可能性もあるので注意です・・・