ホームページ制作/SEO対策なら株式会社サイバーブレーンへ

 03-5961-5681 平日10:00~19:00

 2017-02-07

スマホサイトのグローバルナビを考える

グローバルナビは”組み合わせ”でできている

普段スマホでサイトを閲覧する機会の多い方であれば、よく見かけるナビゲーションデザインのパターンがいくつか思い浮かぶかと思います。
ここではスマートフォンサイトで使われているナビゲーションのUIパターンをいくつかご紹介したいと思います。
まず、ハンバーガーボタン + プルダウン(ドロップダウン)メニュー。
これが最近もっとも一般的なスタイルでないかと思います。
「 ≡ 」のアイコンをタップするとメニューがするんと出てくるタイプです。
メニュー項目の数や文字数などに影響されにくく、どんなサイトでも使いやすい形です。
サイバーブレーンで制作しているスマホサイトでもこのタイプが多いかと思います。
次にハンバーガーボタン + サイドメニュー。
これもスマートフォンサイトならではのメニューでよく見かけるスタイルで、「 ≡ 」のアイコンをタップすると左右どちらかのサイドからメニューが出現します。
特にSNSサイトやメニューの項目数が多いサイトなどでよく使われています。
次にヘッダーメニュー。
ヘッダーメニューは、画面のサイト上部に配置されているメニューです。ハンバーガーボタンなどをタップする一手間がなくなり、一目でどのようなメニューがあるかをユーザーに認識させることができるため、サイト内の回遊率を高める効果も期待できます。
画面幅の狭いスマートフォンに納めるためには、メニューの項目数はなるべく少なく、メニュータイトルは極力短くしないといけないので、サイトのページ構成によっては適さない場合や実現が難しい場合もあります。
また、使いやすいUIにするためにはヘッダーメニューは画面移動しても常に同じ位置にあるべきですが、コンテンツの領域が常に狭くなってしまうというデメリットもあるので、なるべく高さを抑えるような設計をするなど工夫が必要です。

ハンバーガーナビはもう古い?

上記でハンバーガーナビを多く紹介しましたが、実はハンバーガーナビは古い、もう使われていないと言われています。
確かに一番多く見かけた時期よりも数は少なくなったとは思いますが、全くなくなったわけではありません。
しかし、ハンバーガーナビが減った理由はなんでしょうか。
グローバルナビゲーションとしての機能が不足しているわけではありませんが、1つ大きな欠点があります。
それは、アイコンをタップしないとそれがメニュー(グローバルナビゲーション)だとわからないということです。
ハンバーガーメニューは、リテラシーの高いユーザーであれば他サイトからの経験でそれが何かを理解できますが、何も知らない人が見れば「3つの横棒が並んでいる」だけです。
それがメニューであると分からなければ、興味本位でタップされる以外に、「メニューを使いたい」というユーザにタップされることはありません。 そもそも使ってもらうことはできないという致命的な課題があるのです。

しかし、PCサイトよりも遥かに表示画面が小さいスマホサイトの中で全てのリンクをボタンで表示してしまうのは使いやすいナビとは言えません。
では、なにか良いグローバルナビのデザインは無いのでしょうか。

UIを考えたグローバルナビデザイン

ハンバーガーナビには、それが何を表すのかがわからないという課題があります。
ではそれを解消させる事ができればより良いUIを作り出すことができるのではないでしょうか。
それには、上記で上げたメニューとしての役割を担いつつ、ひと目でメニューとわかるデザインであること、という条件を追加して考える必要があります。
例えば、ハンバーガーメニューにラベルをつける、ヘッダー・フッターにメニューを配置する、コンテンツ内にメニューを配置する。 こうするだけで、ハンバーガーメニューでも分かりやすく使いやすいものになります。

最後に

サービスの目的やターゲットユーザーのUXをしっかり考え、そのサイトに最適なグローバルナビゲーションを考え活用していく必要があります。
古いデザインと新しいデザインのいいとこ取りをして、さらに良いUIを作り出していきたいです。

~この記事の著者~

サイト制作に関するご相談はこちら

 03-5961-5681 平日10:00~19:00

メールフォーム

あなたが
サイトに
求める要素
あなたがサイトに求める0要素