目から鱗のスマホユーザー体験、情報は長くなっても1ページにまとめた方がいい？

心得其の491

常識に従う

Rostislav_Sedlacek/Thinkstock

3本ほどの横線が並ぶアイコンで「メニュー」のありかを示す「ハンバーガーメニュー」。私がこの名称を使うようになったのは比較的最近、それまでは単純に「スマホのメニュー」と呼んでいました。

理由は業界人との会話でしかでてこないから。また、ハンバーガーに見えないという主観からも、しばらくは受け入れずにいたとは余談ながら、意地になり「Menu」の文字をもじったアイコンを用意していました。しかし、あまりに多く見かけるようになったので、その「常識」に従うことにしました。

そんなハンバーガーメニューですが、名称どころか効果を疑う声がちらほら聞こえてきます。当サイトでも鈴木謙一さんのコラム^※1で報告されていましたが、今回は現場での経験を紹介します。

※1　やっぱり！ ハンバーガーメニューをやめたらPVも再訪問も劇的に改善！ などSEO記事まとめ10+3本

右か左か論争

スマホ向けのコンテンツの課題は、情報量が限られる小さな画面にあります。PC閲覧を基本にデザインされてきたWebコンテンツは、画面の上下左右のいずれかに「メニュー」が常駐されているという常識がありました。しかし、スマホでこれを守ると一画面あたりの情報量が少なくなります。

そこで画面を有効利用するため、ドロップダウンにせよ、スライドにせよ、画面をタップすると隠れていたメニューが開く、ハンバーガーメニューが多用されるようになります。

ハンバーガーメニューは、主にスマホサイトの画面上部にサイト名などとともに設置されますが、左右のどちらかに寄せるのが正しいかという議論もあちこちで確認しています。

「利用者は右利きが多数派だから右だ」との説明に一定の説得力はありますが、いまや左手だけでスマホを操るユーザーもいて、そのとき右に寄せられたハンバーガーメニューは至極不便です。

温故知新の回答

右か左か論争に答えはありません。パソコン版の頃から続く論争であり、かつては「左メニュー」が優勢でした。これに従えば、「右利き説」は揺らぎます。なぜなら、スマホの普及前、左利きが多かった訳ではないからです。

左メニューが定着したことと、画面を分割し、それぞれに別のソースを読み込む「Flame」構造は無縁ではありません。ウィンドウを分割し、複数のコンテンツを表示できる構造がSEOの台頭まで栄華を誇ったのは、ユーザーの利便性に資すると考えられていたからです。

多くのユーザーがWeb閲覧になれておらず、英文における行頭の「左」に「案内」を置くことが親切だと考えたからなのでしょう。当時の「UI/UX」です。

Webの常識という非常識

メニューの目的は、その他のコンテンツを閲覧させるためにあります。PCサイトのグローバルナビもその目的は同じです。しかし、ハンバーガーメニューへの異論は、「そもそもメニューとして気づかれていない」というものです。

つまり、「この3本線はメニューを示すアイコンですよ」という、Web制作者にとっての「常識」は思い込みで、ユーザーは気づいていない可能性があるということです。

深く頷くのは、私自身が手がけたサイトでの経験です。やはり「気づかなかった」といわれます。

メニュー否定論

ある飲食店のサイトを構築しました。レスポンシブウェブデザインによるオーソドックスなもので、スマホ版のメニューはハンバーガーメニューで処理します。

こちらの店舗にとって初めてのサイト制作ということもあり、私が得意とする「墨俣城方式」で取り組みました。まずはザックリとした骨組みを作り、徐々にコンテンツを充実させていく方法です。きっちりと作り込むには、時間とコンテンツが不足し、年末年始の宴会告知に間に合わないという理由もありました。

拡張性とファイル管理の観点から、「トップページ」に「メニュー」「店舗案内」「最新情報」などをぶら下げるファイル構成にして仕上げます。

第一段階の完成から数日後、オーナーから「メニューが見られない」と不満の声があがります。メニューは食べ物と飲み物に分け、さらに肉や魚といった料理ごとにページを切り分けていたのですが、これが「見られない」というのです。

理由は、ハンバーガーメニューが見落とされていたから。役割を説明しても「1ページに全部載せてほしい」と求めます。

スマホではずっとスクロールする。そこで全部みたい

繰り返される永遠のテーマ

続けて「トップページにすべて載せたい」とも要求します。メニューはもちろん、地図や営業時間などの店舗情報も、まとめてトップページに載っていた方がスマホユーザーには便利だというのです。この主張に目から鱗が落ちます。

1人の私見に過ぎないとはいえ、オーナーは利用者層と重なります。PCサイトを出発点とするWeb担当者にはない発想を全面的に受け入れました。細部にはこちらの提案や、ハンバーガーメニューも一応は残しましたが、オーナーのリクエストに極力従ったのは、クライアントの要求だからではありません。

私は間違っていると思えば、クライアントの要求すらはね除け、何度、契約が打ち切られたかわからないほどですが、「常識は常に書き換えられる」というWebの常識に従ったまでのことです。

つまり、スマホユーザーにとって、メニューをたどって複数のコンテンツを見ていくという概念は希薄であり、ランディングしたページをスクロールして見られる範囲がすべて、という常識になっているかもしれない。

仮説に過ぎませんが、やってみなければ正解はわかりません。まずはチャレンジします。結果はデータがたまれば見えくるでしょう。

メニュー論争は古くて新しいテーマで、ハンバーガーメニューも過去と同じ道を歩んでいます。最適解を目指しつつも、そこには定冠詞として「現時点で」と添えられます。

つまり、その大半は永遠の真理ではなく、端末や回線速度、HTMLの改訂はもちろんトレンドの変化によって「書き換えられていく常識」だと、まるでWeb黎明期のような「1ページ」にまとめたのでした。