KOBITブログ

スマホサイトでクリック率が低いハンバーガーバーに代わる3つの事例

この記事は約 7分 で読めます。

burger

モバイルサイトを作ろうと考えたときに、スマートホンの小さい画面にすべてのコンテンツを収めようとするのは一苦労です。

メインコンテンツや更新情報、各コンテンツに誘導するメニューの配置を考えると、1ページの情報量が多すぎて目立たせたい情報が埋もれてしまうという問題が考えられます。そこで人気が出たのが、ハンバーガーバーというUIです。

そもそもハンバーガーバーとは?

スマートホンのサイトやアプリでよく見かける「三」のマークは、ハンバーガーのように見えることからハンバーガーバーやハンバーガーボタンと呼ばれています。
普段は隠されているメニューがハンバーガーバーをタップすることで現れて、表示できる情報に制約があるモバイルサイトの省スペースに役立ち、GoogleやFacebookなどハンバーガーバーを導入する企業が増加しました。

たしかにデザイン性で優れているハンバーガーバーですが、ここ最近UIやUX面での不便さが指摘されています。
そもそもハンバーガーバーは三のマークで表示されているため、メニューが表示されるのかプロフィール欄が表示されるのか、タップするまで分かりません。情報が隠されているということはユーザー体験に大きな損失を与えるので、ハンバーガーバーに代わるアイデアを探しているWEB制作担当者も多いのではないでしょうか。

最適なUI・UXを考えると、他にどのようなデザインがあるでしょうか。事例と共にハンバーガーバーに代わるアイデアを紹介します。

【代替案1】ハンバーガーバーを文字ボタンに変更

1
ハンバーガーバーと同程度のスペースを確保したい場合は、シンプルにハンバーガーバーを文字に変更してみてください。「Menu」や「Category」のように用途に合わせて文字で表現すると、ハンバーガーバーの持っていた目的の分かりにくさを解消。不便さを軽減してユーザーを目的のコンテンツまで案内しやすくします。

(出典:BBC News, http://www.bbc.com/news)
イギリスのニュース番組BBCのモバイルサイトは、世界ニュースやアジアニュースなどセクションごとのニュースを「Sections」と文字で分かりやすく表現。クリックするとセクションが表示されるので、機能はハンバーガーバーと変わりません。

1-2
(出典:dマガジン, https://magazine.dmkt-sp.jp/)
dマガジンのアプリは「雑誌一覧」や「メニュー」など文字ボタンを複数採用。用途別にメニューを表示したいなら、文字ボタンは複数配置しても目的が分かりやすいためユーザーに混乱を招かないのでおすすめです。
Site For Profit(http://sitesforprofit.com/menu-eats-hamburger)は、ハンバーガーバーを使った場合とハンバーガーバーの代わりに「MENU」という文字ボタンを使った場合のA/Bテストを実施。文字ボタンはハンバーガーバーよりもクリック率が20%増加したと伝えて、文字ボタンの効果を証明しました。

ハンバーガーバーを文字メニューに変えるときに、変更点が少ないところもおすすめポイント。サイトやアプリのデザインを大幅に変えないですぐにサイトを改装したいと考えているなら、文字ボタンを試してみてはいかがでしょうか。

【代替案2】下部に固定されたタブメニュー

ユーザーがサイトやアプリでよく使うメニューは大体2~3個です。ソーシャルメディアはほとんどフィードが表示されるトップページしか使わないというユーザーも多数。ハンバーガーバーなどアイコンをタップすると一度にたくさん表示されるメニューは、かえって不親切に感じることも少なくありません。
ユーザーが使用する主要なメニューが2~3個のサイトを運営しているなら、下部に固定されたタブメニューを採用してみてはいかがでしょうか。

2-1
(出典:Twitter, https://twitter.com/)

TwitterやFacebookといったソーシャルメディアのアプリで使用されている下部のタブメニューは、一目で何がどこにあるか分かりやすく、よく使用するメニューへ常にアクセスできます。
頻繁に使用するボタンが隠されているとよく見るコンテンツへたどり着くまでの行程が増えるため、ユーザーにストレスを与えてしまいます。ユーザーが使用するメニューが多い場合は「文字ボタン」、2~3個のメニューを使用する頻度が多い場合は「下部固定のタブメニュー」というように、ユーザーが求める情報によってレイアウトを整える方法が有効です。

【代替案3】横スクロールできる上部固定のタブメニュー

「トップニュース」や「最新ニュース」などトップに表示する情報の種類が複数ある場合、下部に固定したタブメニューだけでは項目数が少ないと感じていませんか。上部に横スクロールできるタブメニューを表示することで、より多くのコンテンツへユーザーがアクセスしやすいように導けます。

3-1
(出典:Fox News, http://www.foxnews.com/)
ニュースサイトFox Newsはモバイルサイトで上部に固定したタブメニューを採用しています。画像のようにニュースのカテゴリが「Home」、「Video」、「Politics」と並び、トップ画面から各カテゴリにアクセスしやすくなっています。横スクロールに対応していることで表示する項目数の制限が緩和されることも魅力です。

さらに引用元のAPPTIMIZEが、上部タブメニューは他のシステムと利用されていることが多いと指摘しました。「文字ボタン」や「下部のタブメニュー」を導入したもののトップページでさらに目立たせたいカテゴリがある場合は、上部固定のタブメニューを併用してみると良いでしょう。上部メニューはデザインに馴染みやすいため、単体で使用するか併用するか機能面やデザイン面で選択しましょう。

まとめ

今回はハンバーガーバーに代わるUIのアイデアとして「文字ボタン」と「下部のタブメニュー」、そして「上部のタブメニュー」を紹介しました。
ハンバーガーバーを使用しているサイトのデザインを崩さずボタンの役割をユーザーが分かりやすいように変更したいなら「文字ボタン」。主要なコンテンツにアクセスしやすくしてUXを高めたいなら「下部のタブメニュー」。下部のタブメニューよりも項目数を増やしたいときや他の機能と併用したいときは「横スクロール可能な上部のタブメニュー」がおすすめです。
ハンバーガーバーの省スペース性は魅力ですが、役割が分かりにくくユーザーを混乱させてしまう恐れがあります。サイトやアプリの用途に合わせて紹介した事例のように、分かりやすいメニューを作成しましょう。

参照:APPTIMIZE, https://apptimize.com/blog/2015/07/the-ultimate-guide-to-the-hamburger-menu/


さあ、KOBITをスタートしよう。