web404

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

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

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

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

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

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

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

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

逆に、ハンバーガーメニューのメリットを挙げると、

  • 展開前のメニューの表示領域を最小化できる
  • 項目数によらずデザインを共通化できる
  • テンプレートに組み込みやすい

など。

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

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

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

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

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