PAGE TOP

取り組み

印刷する

ハンバーガーアイコンを使ってみたかった

なぜか魅力的

のりのり
メニュー

既存のPCサイトをスマートフォンサイトに最適化するという難題に取り組みます。

さしあたり、いろいろなサイトを見ていましたが、“ハンバーガーアイコン”に魅かれ、これを絶対に取り込んでみようと思いました。

検索してみて見つけたのが、なんと“なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか?”という記事にぶちあたりました。

ハンバーガーアイコン
gigazineの記事にリンク ↑

なぜハンバーガーがダメなのかについて、ジェームズ・アーチャーという方がデータ分析結果を基に理論的に解説していますので、詳細はそちらで確認してください。

ハンバーガーメニュー
英語版ハンバーガーメニューの記事にリンク ↑

ハンバーガーアイコンというのは、スマートフォンなどでメニューを折りたたんで表示するのに使うアイコンで、ハンバーガーのように見えることからアメリカでは「ハンバーガーアイコン」と呼ばれているようです。

なぜダメなのか?
不親切:「それをクリックすることで何かが得られるとしても、何を得られるかがクリック前に明らかでない」という、情報が隠されている欠点を指摘しています。
『デザイナーの考える美しさとユーザーが考える便利さが一致するとは限らない』と言っています。

面倒:ユーザーが「クリック」しなければ表示されないというのは、どれほど面倒であるかは明らかなはず。

"香り"がしない:ユーザーは何を求めているのかについて明確には理解しておらず、自分の望むものに近い"香り"のようなものを頼りに行動するとのこと。

メニューがすべて表記された「タブメニュースタイル」から「ナビゲーションドロワー」に変更したところ、エンゲージメント率(クリック回数)が激減した例も挙げています。逆に、ハンバーガーをやめてタブバーにしたところ、アクセス率、滞在時間がアップしたそうです。

脱ハンバーガー:アーチャー氏はハンバーガーの利点として、デザインをシンプルかつ美しくできる点、省スペース性など優れていることは認めています。「時間がたてばユーザーはハンバーガーの使い方を理解してくれる」というデザイナーの言い訳に対しては、「本当に良いデザインは、市民権を得るのに時間などかからない」と一刀両断しています。

脱ハンバーガーとしてどのようなデザインが良いのかについて、アーチャー氏はいくつかの例を紹介しています。

・アイコン+テキスト
GameStopのモバイル用サイトのデザイン。分かりやすさと"香り"を持ち、一定のデザイン性も保たれている点で、ハンバーガーよりは優れたデザインと言えそうです。

a10
・優先順位
本家本元のハンバーガーショップであるマクドナルドのデスクトップ用サイト。ハンバーガーのかわりに、さまざまな情報を表示させられるタブバーメニューが採用されています。
 
a11

マクドナルドのモバイル用サイト
タブバーメニューもなければハンバーガーメニューもなし。デスクトップ用サイトで一覧で表示されたメニューのうち、「Food」「I'm lovin'it」など、優先度の高いものを選別した上でタブ表示し、その他の情報はスクロールすることで表示できるように配置変更されています。

a12


『安易にハンバーガーメニューに頼るのではなく、ユーザーが求める情報は何かを検討して、優先順位をつけた上でレイアウトを整える手法も有効だと言えそうです。』

大変勉強になりました。

キーワード