人気のタグ
おすすめのサイト
企業ニュース
2018.04.10

スマホサイトの「ハンバーガーメニュー」の欠点を解消する方法

企業やブランドのスマートフォンの公式サイトなどではおなじみの「三」という横三本線のマーク。タップするとメニューが表示される。このメニューは、その見た目から「ハンバーガーメニュー」と呼ばれ、世界的にもポピュラーとなっているが、実際、メニューとして見つけられにくいなどの欠点もあるという。

そんなハンバーガーメニューの問題点や解決策などを、WEB制作も行うシステム開発の会社に話を聞いてみた。

■主要サイトでは世界8割、国内7割がハンバーガーメニュー

世界でも、日本でも、このスマホのハンバーガーメニューはとてもポピュラーであるようだ。

WEBマーケティングサービスを行うあとらす二十一が、世界主要企業500サイト/国内主要企業225サイトを対象に調査した「世界/国内主要企業サイト グローバルナビゲーション調査 2016年8月版」によると、世界主要企業サイトの7割、国内主要企業サイトの7割がハンバーガーメニューを導入しているという。

設置場所は「右上:左上=6:4」で、国内では「右上」が8割超えとなっている。ページ下に配置されることはないようだ。

■ハンバーガーメニューの欠点

ところで、このハンバーガーメニューには欠点があるといわれている。

複数のWEB制作関連の業者の公式ブログなどでは、次のことが挙がっている。

・メニューだと気づかれにくい
・ユーザーにとってはいちいちクリックしてメニューを開くのが面倒
・クリック率が下がる

Web制作会社のWEBLAB株式会社のWEBディレクター坂本康平氏は、他にも欠点として「jQueryを使うため古い端末では不具合が出る可能性」について指摘している。例えば、「タップ領域のずれ・タップしてもメニューが出てこないなど」があるそうだ。

では、このハンバーガーメニューについてどう考えているのか。坂本氏は次のように話す。

「いいか悪いかといえば『一概には言えない』というのが正直なところです。欠点はあるものの利点も大きいためです。画面外にメニューをしまうことができるので、小さな画面での情報の整理に非常に役立ちます」

とはいえ、サイトを新規で立ち上げることになった場合、ハンバーガーメニューを導入するかどうかは迷うところだ。

「導入にあたってはそのサイトの『ターゲット層』を元に判断すると良いです。ターゲットのユーザーにこのハンバーガーを見て『これがメニューだな』と気づいてもらえるか、ということが重要です。デジタルネイティブ世代は問題無いかと思いますが、高齢者をターゲットとする場合は注意が必要です。私自身の経験になりますが、比較的高齢のユーザー複数の方に、ハンバーガーメニューが『タップできるものであるという認識がなかった』と言われたことがあります」

@DIMEのSNSアカウントをフォローしよう!

DIME最新号

最新号
2018年8月16日(木) 発売

DIME最新号の特集は「ミニマルギア100」「男のメルカリ活用術」! 特別付録は「シンカリオン 500 TYPE EVA」の激レアクリアファイル

人気のタグ

おすすめのサイト

ページトップへ