三本線のアイコンをハンバーガーアイコンと呼ぶ
スマートフォンでホームページを見るとき、メニュー欄を表示させる「三本線のアイコン」をよく見かけます。
アレはハンバーガーアイコンと呼ぶんです。
上下の線がパンズで、真ん中はハンバーグかな？鶏肉かな？魚のフライかな？と考えるとなんだかおかしいですね。
今ではあのアイコンを押せば、何かがページ内に表示されるという事を経験からわかっている方が多くいると思います。
すっかり定着した感がありますが、それでもやっぱり「押すと何が出るのか、どういった意図のアイコンなのか、そもそも押すと動作するボタンだとわかるのか？？？」といった多くの疑問が残るのも事実です。
フィーチャーフォン（ガラケー）が生産終了というニュースもあり、どんどんスマートフォンへ移行していくと考えると、新規のユーザーがこれから爆発的に増えるかもしれません。そうなったときにハンバーガーアイコンは、ユーザーに優しいボタンなのでしょうか・・・
その答えはNOです。
あのアイコンだけで済ませてしまっては何のボタンかわかりません。
私はスマートフォンを持つようになって5年程経ちますが、客観的に見てもやはりわかりにくい・・・
ページを見に来てくれた方を「欲しい情報まで誘導する」という点ではハンバーガーアイコン単体にはその有用性が全くありません。
その理由と、それに代わるナビゲーションについてお話します。
ハンバーガーアイコンを押した先に情報があるとは思わない
例えば価格表を見たいと思っているユーザーがいるとします。
当然その方はホームページを見て、価格表はどこから表示するのかを探しますよね。
作り手からすれば「ハンバーガーアイコンを押して、そこから価格表のボタンを押すだけ」と思いますが、見に来てくれた方はそのことを知りません。きっとハンバーガーアイコンを押さずに「戻る」ボタンを押してしまう事でしょう・・・
ページを見る方は、自分の欲しいと思っている情報に近い文言を探してページを見ます。
価格表が見たければ「代金・料金・費用」になるでしょうか。
それでも見つからなければ今度は「商品・メニュー」を探し始めてくれるかもしれません。
でもこれらの文言と、三本線のハンバーガーアイコンを結びつけるには無理がありますね。
なのでこのハンバーガーアイコンに欲しい情報が隠されているとは思わないんです。
情報は隠さない
よく探されると思われるページへのリンクや、見てほしいと思っているページへのリンクボタンは隠さずに表示させましょう！
JqueryやCSSを使って、画面の下に常に表示させておくのもいいアイデアかもしれません。
このように誰かが「ほしい」と思っている情報を隠してしまうのは得策ではありません。
しっかり表に出してあげる事で、見てすぐにわかりますよね。さらにアイコンもつけてあげるとわかりやすさが増しますね。
横幅に収まらないからどうしてもハンバーガーアイコンを付けたい・・・
隠さないで表示させておく方がいいことはわかったけれど、ページのメニューが多すぎて画面に収まらない・・・
全てのメニューを出して画面下に固定してしまうと、メインコンテンツが小さくなりすぎて困る・・・
などなど、どうしてもハンバーガーアイコンを使ってメニューボタンを設けないと煩雑になりすぎてしまう場合もありますよね。
その時はハンバーガーアイコンに文言を一言付け足しましょう。
そのつけ足す文言は「ページメニュー」です。
もしかしたら「ページリンク」もいいかもしれませんね。
とにかくハンバーガーアイコンに文言をつけ足してあげることで、ハンバーガーアイコンがページのメニューであるという事を見ている人へ伝えることができるようになりますね。
今度は「ページメニューってなんだ？」という問題が出てきてしまいますが、何かしらの情報を引き出すボタンであることがわかるようになるので、少しでも押してもらえる可能性が出てくるはずです。
つけ足す文言については「コレ」と特定しなくても大丈夫です。伝わる表現を考えて、いろいろと試してみてくださいね。
このアイコンの他にも
・トップページへ各種主要コンテンツへの誘導を目的としたバナーやリンクを設ける
・フッターにページのリンクをまとめて表示しておく
・サイトマップページを作る
という事も有効でしょう。
初めての人に伝えるような気持ちでデザインする
見に来てくれる人はあなたのWebページの構造をわかりません。
なのでどのボタンを押すと何が起こるのか、どの情報を引き出せるのかがわからないんです。
初めて見た人はどう思うだろうか？ほしいと思っている情報へ簡単にたどり着けるだろうか？と常に考えを巡らせるようにしてみてください。
「どれか一つしか設けられない」「ひとつのアイデアしか実装できない」という制限はありませんので、有効だと思われる方法を使って情報の交通整理をして、情報を探している方を誘導できるような構造やデザインを心掛けましょう。
まとめ
・三本線のアイコンをハンバーガーアイコンと呼ぶ
・ハンバーガーアイコンにはページのメニューが含まれる場合が多いが、わかりにくい
・多くの人に欲しいと思われることが予想されるページリンクは隠さずに表示させる
・メニューが多すぎて、どうしてもハンバーガーアイコンを使わないと表現できない時にはハンバーガーアイコンに「ページメニュー」などの文言をつけ足す
