UIについて#1 / ハンバーガーメニューボタンの位置

初代iPhoneが発売されてから15年以上が経つ。以降、PCで閲覧する前提のWEBサイトとは別にスマートフォンで見やすい・使いやすいサイト制作の手法やデザインが誕生してきた。スマートフォン用サイトならではのUIも模索・実装され続けてきた。

進化しないスマートフォンサイトのメニューボタン

ところが。WEBサイトのUIの要といえるメニューボタン（ハンバーガーボタンと呼ばれるもの）はほとんど変わっていない。何が変わっていないかというと、メニューボタンの位置、あるいは押しづらさである。

大半のスマートフォンサイトでメニューボタンは画面右上に配置されている。イレギュラーで左上にある場合や画面下に配置されている場合もある。だが、いずれも決して使いやすい（押しやすい）とは言い難い。

なぜスマートフォンサイトのメニューボタンは押しづらいのか

片手でスマートフォンを持っているとき、親指を右上に運ぶ必要があるが、手の大きさと画面サイズのバランスによっては、指がボタンまで届かないことがある。特にソニーのXperiaを使っていると、画面の縦幅が長いので指が右上に届かない。右利きの人間ですらこうなのだから、左利きの人はさらに押しづらさを感じていることだろう。

そもそも手の大きさや使っているスマートフォンの画面サイズは人によってまちまちなので、押しやすいポイントも人によって差がある。つまり右上にしろ左上にしろ、あるいは下にしたところで変わりなく、メニューボタンの位置が固定化されていることが、押しづらさを誘発している。

誰でも押しやすいメニューボタンを試作した

とすれば、人それぞれボタンの位置を押しやすい場所に変えることができれば、この問題は改善できる。簡単な話だ。簡単なことなのに、なぜかそのようなUIを実装をしてるスマートフォンサイトやアプリにまず出会ったことがない。不思議だ。

このUIを提案したくても事例がない。そこで試作することにした。ページを再読み込みしたり、他サイトへ離脱してから戻ってきたときもメニューボタンは前回移動した位置に表示される。結構使いやすいと思う。

試作ページ

過去に1度だけ、何年か前WOWOWのスマートフォンアプリを使った時、メニューボタンを好きな位置に移動できるようになっていた。「これは使いやすい！」と軽く感動したのだが、アプリが刷新されたタイミングで、一般的なUIデザイン（メニューボタンが上に並んでいる）に変わってしまった。せっかく良いUIだったにもったいない。刷新前のアプリでの操作を録画しておけばよかったと後悔している。