TOM CREATIVE(トム クリエイティブ)

MENU

ARTICLE

WEB DESIGN

ハンバーガーメニューって上、下どっちがいいの?





近年WEB業界では
UI(ユーザーインターフェイス)やUX(ユーザーエクスペリエンス)という言葉を
当たり前のように使うようになりました。

WEBデザインをする上で僕自身もかなり気にしている言葉ですが、
今回はUIの部分で重要となる、ハンバーガーメニューについて書いていこうと思います。

最近僕の中で気になっている、
「ハンバーガーメニュー上・下問題」
実は最近、そのことでWEBディレクターとやりとりしたので、
本気で考えてみることにしました。

先に結論を申し上げますが、色々考えた結果現時点での僕は「右上派」です。

その理由も含めてお話ししたいと思います。

そもそもハンバーガーメニューって?

ハンバーガーメニューとは、コンピュータの操作画面におけるメニューの表示形式の一つで、「≡」の字に似た3本の横棒が縦に並んだアイコンを画面の隅に常に表示し、これを利用者がタッチやクリックすると主要な操作メニューが出現する方式

引用:IT用語辞典 e-Words

みなさん見慣れているとは思うのですが、
一般的には右上にあるイメージをもたれると思います。

出典:sps collection

最近では親指から遠いという理由から、右下にあるサイトを多く見るようになりました。

それが最近のトレンドみたいです。

ちなみにPC版ではグローバルナビゲーションが主流でしたが、
ハンバーガーメニューも多く見られるようになりましたよね?

PC版はどのような意図で多くなったのかはわかりませんが、
こちらもトレンドってやつだと思います。

じゃあそもそもトレンドって何?
トレンドだからって使うべきなの?僕はそう疑問をもちました。

WEBディレクターと意見がぶつかる

つい最近、WEBディレクター(以下WEBD)から右下にハンバーガーをつけるよう指示されました。

僕:なんでですか?

WEBD:俺が好きだから入れて!

僕:嫌です。

WEBD:じゃあデザインバリエーション作ったら入れて!

僕:しょうがないっすね。(まっいれねーけど!)

これ、説得力ないですよね。

ただ僕も、しっかりとした根拠がなく、
理由をもつためには自分で調べなきゃだ!そう思いました。



とりあえずアンケートをとってみました!

自分の固定概念では説得力がなく、しっかりと意見を聞いてみたい。
そんな思いでアンケートをとってみることにしました。

ご協力いただいた方ありがとうございました!

とりあえずインスタでそういう機能があると思い早速実施!

インスタグラム回答者:13人

右上派:11人(男性3人:女性:8人)
右下派:2人(男性1人:女性:1人)

続いて理由も聞きたかったので直接聞いてみました。

口答回答者:6人

右上派:3人(すべて女性の別業種の方)

理由1
目に行くのが上!
下にあると手で隠れちゃうから探しにくい。

理由2
いろんなサイトのメニュー画面右上だから
慣れてる!

理由3
右下の固定概念がない。
なんでも右上にあるから素直に押せる。

右下派:3人(すべて男性のWEB業界人)

理由1
片手で操作する時は下の方が押しやすい気がする。
上だと届かないし、無理すると落とす

理由2
下下!IphoneXだと届かない。

理由3
流行ってるから!今風。

総合結果

回答者:19人
右上派:14人(男性3人:女性:11人)
右下派:5人(男性4人:女性:1人)

アンケート結果についての見解

理由に関しては、
右上:「大体が右上だから慣れている」という固定概念からくる意見。
右下:「上だと単純に押しにくい。親指に近い位置だから」使いやすさを考えた意見。

これは少し予想できましたよね?

押しやすさより慣れているを重視した「右上派」と
単純に押しやすさを重視した「右下派」。

ただ少し意外だと思ったのが右下派の女性率の低さです。
手の大きさから、右上は届かないという女性が多いのかと思ってました。

また聞くべきだったのが、使用しているスマホの端末と利き手です。

利き腕の割合がこちら

世界の人口の10%の比率が左利きだと言われていますが、日本人は男性女性合わせておよそ11%の比率の人が左利きだと言われています。

引用:KIRARI

利き腕問題は、割合から一旦左利きを忘れてみます。

赤い部分が無理した状態。

出典:Scott Hurff

どっちも無理しなきゃ押せないやんけ!w



じゃあなぜ右上を推薦するのか。

個人としての意見なので一概には言えないし、
100人や1000人を対象にしたアンケートではないのでちゃんとした結果ではないのかもしれないのですが、
やはり固定概念というものは強い印象を受けました。

ちなみにハンバーガーではなく、
右下(下部)にボタンがあるアプリってよくありますよね。

僕が確認したところ、

  • instagramの投稿ボタン
  • Twitterのツイートボタン
  • メルカリの販売ボタン

これっていわゆるアプリのメイン動作のボタン類です。

じゃあ果たしてハンバーガーってその位置付けなのか?
僕自身はそうではないと思っています。

ハンバーガーメニューの内容によるとは思うのですが、
基本的には色んなページの回遊ができるページ一覧がメインとなります。

ちなみにTOMのサイト(ハンバーガー右上)がこちらです。

ひらいた状態(下層ページメイン)

記事のアーカイブページと
料金やお問い合わせページの一覧です。

TOMのサイトの主なコンテンツはあくまでも記事です。

TOPページに最新の記事を載せているので、
あくまでも下層はサブで、結果ハンバーガーは頻繁に押してもらわなくても良い。
(そもそもTOPページ自体に導線がある。)

回遊させるために右下で目立たせたい!
ならわかるのですが、
ページのコンテンツを隠してまでその上に置く必要があるのか。
(こちらはデザインによってカバーすることは可能だと思います。)

まだ右下の固定概念ができていない段階で、
トレンドということだけで片付けてしまうのはとても怖いことです。

もちろんいつか右下が当たり前となって
右上ハンバーガーがなくなることも予想されます。

完全に僕個人の意見なので断言はできないのですが、
どっちにするにしても、
しっかりとしたデータによる根拠と、
ユーザビリティを考えたページデザインとどのような導線でどこをみて欲しいか。
そこがはっきりしていないと答えは見えてこない気がしてます。

まとめ

いかがだったでしょうか。
完全なる答えを導きだせず申し訳ないのですが、
僕が大事だと思うことをまとめました。

  • 最近のトレンドだからは理由にならない。
  • サイトのゴールや目的、導線によってハンバーガーの位置は決める
  • あくまでも固定概念は強い(そこを間違えると逆にユーザーが混乱する)
  • 押しやすいという理由はわかるが、果たして頻繁に押すボタンか考える
  • BtoBやBtoCどちらのサイトかによって変わる可能性もある

現時点で僕が考えたことは以上です。

WEB業界は時代の移り変わりが本当に早いです。

ただそれが、本当にユーザーにとって便利で使いやすいのか。
自分の固定概念だけでは動けないなと改めて考えさせられる機会でした。

少しでも参考になれば幸いです。