web404

ハンバーガーメニューが嫌いな理由

ハンバーガーメニューとは、「☰」のようなアイコンをタップすると展開するメニューのことです。
主に、スマホのUIで見かけます。

私は、ハンバーガーメニューが嫌いです。
理由は、わかりにくいからです。
そして、使いにくいからです。
もちろん、一ユーザーとしての意見です。
少なくとも、ハンバーガーメニューでなければならない理由はどこにもありません。

アプリなら、ハンバーガーメニューの存在意義はわかります
めったに使わない項目をハンバーガーメニューにまとめることで、よく使う項目を目立たせ、使いやすくするのは理にかなっています。

一方で、ホームページのハンバーガーメニューについては疑問に思うことが多いです。
使用目的がはっきりしているアプリとは異なり、ホームページでは情報の一覧性が求められるからです。


ハンバーガーメニューのデメリット

以下、ハンバーガーメニューのデメリットを列挙します。

  • ハンバーガーメニューが何なのかわからない
  • メニューを展開するまで内容がわからない
  • 複数回の操作が必要
  • メニューの表示でコンテンツが隠れる
  • メニューを閉じにくい

とにかく、わかりにくくて使いにくい。


ハンバーガーメニューのメリット

逆に、ハンバーガーメニューのメリットを挙げます。

  • 表示領域を最小化できる
  • デザインを共通化できる
  • テンプレートに組み込みやすい

そもそも、ハンバーガーメニューは制作者の都合の産物です。
テンプレートで利用するには、メニューの項目数が不定でもレイアウトに影響を与えないハンバーガーメニューが便利だからです。
テンプレートでデザインを共通化するのに適しているのは間違いありません。


誰のためのハンバーガーメニューか

特に、スマホ対応のテンプレートはかなりの確率でハンバーガーメニューを採用しています。
ハンバーガーメニューじゃないとダメなのかと思うくらいに。

ハンバーガーメニューじゃないとダメなのは、制作者がHTMLもCSSもわからなくて、通常のメニューを作ることができないからです。
最初から表示されているメニューだと、項目数やレイアウト、画面サイズによって表示を変えなければならないので、コピペでは対応できません。
したがって、テンプレートを使うことしかできないと、必然的にハンバーガーメニューになります
これが、使いやすくもないハンバーガーメニューが増える原因だと思います。

要は、ユーザーのためのホームページか、制作者のためのホームページかということです。
ハンバーガーメニューを使わなくても、スマホ対応は可能です。
むしろ、展開するまで内容がわからず、表示したら画面を専有し、「×」をタップしないと閉じられないメニューが本当にスマホに最適なのかは、一考の余地があります。
スマホは画面が小さくて誤操作しやすいデバイスだからこそ、パッと見て理解でき、少ない操作でアクセスできることが求められるのではないでしょうか。
スマホはスクロールが容易で、誤操作はタップにより発生することを考えても、ハンバーガーメニューがユーザーのためのデザインには思えないのです。

以上の理由により、私はスマホユーザーをメインターゲットにしているホームページでも、ハンバーガーメニューは使わない方針です。