目次
そもそもハンバーガーメニューについて
スマホサイトに必ずと言って良いほど配置されているハンバーガーメニューですが、その起源は1980年代にまで遡ります。
複合機でお馴染みのゼロックスが開発したパソコン「Xerox Star」に組み込まれたハンバーガーメニューは、 画素数の少ない当時のPCでも視認性が確保できるUIとしてデザインされました。
PCの画素が担保できる時代になってから一度は鳴りをひそめたものの、スマートフォンの登場によって再度UIの座に返り咲いたのです。
そして、人類の90%が右利きの世界において、ハンバーガーメニューは右手の親指で操作しやすい「右上」への配置が主流となったのです。
では多くの人にとって右上配置が使いやすいなかで、なぜ「左上」に配置するサイトも存在するのでしょうか？
あえて左上に置く理由考察3選
1. 左に指を移動させる動作がある
グミの日2025特設サイト
例えば、グミの日サイトにはTikTok導線の横スライダーがあります。さらに「グミ食べたよボタン」を選ぶ際にも、指を左に動かす動作が発生しています。
これらの右から左にスワイプする流れにおいて、そのままメニューに指が届くように左に設置された可能性があるのかもしれません。
2. メニューよりもっと見てほしい要素がある
縦型ショートドラマ制作会社B4B Inc.
事例に挙げたサイトは、本来メニューがある位置にコンタクト導線が設置されています。
MVには自社事例である動画を流し、ページ下部で自分たちが何者か、どういった価値を提供できるのかをある程度説明ができているサイトになっています。そのため、ユーザーを迷わせず最短距離で問い合わせてもらうために、メニューを左側に設置している可能性があります。
3.日本語縦読みのサイトである
オリジナルTVアニメーション「風を継ぐもの」公式サイト
事例のサイトでは、見出しを縦に大きく表示しています。
縦書きの日本語は普通右から左に読むので、右上にメニューがあると見出しとかぶって読みにくくなってしまいます。
視線の移動を考慮した上で、あえて左上に配置する手法も覚えておきたいですね。
番外編：「上」でなくてもいい
前述のようにハンバーガーメニューは右上のみならず左上のサイトも存在するのですが、場合によっては「下」に配置するケースもあります。
宇都宮メディア・アーツ専門学校
添付のサイトは、メニューが右下に配置されています。
そもそも指を上に移動させなくても自然な流れでメニューを押下でき、さらにコンテンツを邪魔しない利点を叶えています。
ただしスクロール中誤って押してしまったり、ユーザーにとって見慣れないUIだったりする点には注意が必要です。
左上メニューは時と場合によりけり
さて、左上ハンバーガーメニューについて事例も交えて考察をしてきました。調査する前は全部右上でいいじゃないかと思っていましたが、詳しく見てみるとユーザービリティ向上につながるケースもありそうです。
どんなことでも「そういう決まりだから」で流すのではなく「なぜそうなっているのか？」分析する気持ちを忘れないでいたいですね。
