お問合せ株式会社ジェイコス
TEL 03-5428-8733

Webコンサルティング会社、首都圏(東京)を中心に戦略的なホームページの制作、Webマーケティングをご提供

Webコンサルティング.jp HOME > Blog Top > スマホサイトに『ハンバーガー』が続出!?スマホサイトのカギとなるメニューの選び方

Profile

通称:株式会社ジェイコス
誕生日:2005年4月1日
出身地:三軒茶屋
現住所:麹町
職業:Webコンサルタント

2015年7月28日

スマホサイトに『ハンバーガー』が続出!?スマホサイトのカギとなるメニューの選び方

赤ちゃんスマホ.jpg

「ハンバーガーメニュー?何それおいしいの?」

 

近頃、スマートフォン対応のWebサイトが増えてきましたね!

Googleのアルゴリズムが変更され、

モバイルフレンドリーなサイトが有利になってからも

気づけば1ヶ月以上経っていました。

 

私のiPhoneでネットサーフィンをしていても、

以前よりずっと閲覧しやすくなったなあという印象を受けます。

 

そんなスマホサイトでよく目にするメニューの名称って、ご存知でしたか?

 

 

1.   ハンバーガーメニュー(横スライド系)

 

hamburger.jpg

ハンバーガーが横スライド?(違います)

 

ドロワーメニューという名前でも知られている、ハンバーガーメニュー。

タップすると横や縦にメニューがぬるっと現れます。

アイコンとしてよく使われる、このマークが↓

1436350667_menu-alt.png

ハンバーガーに見えることが名前の由来だそうです。

私にはハンバーガーには見えません

 

ハンバーガーメニュー(横スライド系)のメリット

・画面いっぱいにコンテンツを表示させることができる。

・多数のコンテンツを収納することができる。

・両サイド使える!

情報量の多いページに向いています。

gamba.png

両側に横スライドのメニューを置くと、これだけの情報が収納できます。

左右の違いを表すために、右上のアカウントメニューは人型になっていますね。

 

×ハンバーガーメニュー(横スライド系)のデメリット

・メニューのボタンだと気づかれにくいことも多い。

三本線のアイコンよりも「MENU」の方がクリック率が高かったらしいです。

・コンテンツ数が少ないと余白が多くなってしまう。

コンテンツ数が少ない場合は他のパターンを試してみましょう。

 

 

2.  ハンバーガーメニュー(ドロップダウン系)

横スライドした部分をまるごと占領する横スライド型と比較して、

ドロップダウン式は必要なスペースだけをメニューに充てることが出来ます。

glim.png

筆者の友人のバンド、GLIM SPNAKYのオフィシャルWebサイト。

新曲『リアル鬼ごっこ』発売中です!(宣伝)


メニューが背景に覆いかぶさるかたちなので、

背景ごと全体が動くメニューと比較して、さくさく見られる印象がありますね。

 

ハンバーガーメニュー(ドロップダウン系)のメリット

・画面いっぱいにコンテンツを表示させることができる。

・吹き出し状であり、サイズを調整できるので、余計な余白が出ない

メニューボタンはトップに載せたくないけど、

 コンテンツの数が少なくて不格好...

そんなページに向いています。

 

×ハンバーガーメニュー(ドロップダウン系)のデメリット

・メニューのボタンだと気づかれにくいことも多い。

・下層のページに辿り着くのに、最小2タップ以上必要。

・コンテンツ数が多いとき、スクロールしづらい

ファーストビューにおさまらない場合は、横スライドの方が向いていそうです。

 

3.  アコーディオンメニュー

aco.png

項目が並んでおり、展開すると下層のページが現れるメニュー。

ハンバーガーアイコンをタップしたらアコーディオンが現れるケースもあります。

展開されて長くなるようすがアコーディオンに似ていることに由来しています。

(下の写真では、心なしか黒いアイコンが黒鍵にも見えますね)


gu.jpg

ジーユーのSP版オンラインストア。

ボトムス全部、という見方ができないのはPC版より不便

 

また、のブログでDEMO版も触れます。

CSSだけでメニューが開いたり閉じたりするアコーディオンを作る!javascript不要

思い出していただけましたでしょうか?

 

アコーディオンメニューのメリット

・画面いっぱいにメニューを表示させることができる。

・上層と下層をはっきりと表現できる

→情報量が多く、上層・下層がはっきりしているときにおすすめです。

 

×ハンバーガーメニュー(ドロップダウン系)のデメリット

・情報量が少ないとき、無駄なタップが必要になる

SEO的にあまりよろしくないらしい。

参照:「アコーディオンメニュー」を無視するGoogle

→情報量が多く、上層・下層がはっきりしているときにおすすめです。

 

4.  タブメニュー

instagram.jpg

 

タブメニューはスマホサイトというより、アプリでよく目にするかもしれません。

フッターやヘッダーにいくつかのタブが配置されているメニューです。

写真はInstagramです!一番右のタブを選択中。

Facebook公式アプリも以前は横スライドをしてメインメニューを表示させていましたが、

いつの間にかタブメニューにアップデートされていましたね。

 

タブメニューのメリット

・人気コンテンツが限定されているとき、常にアクセスしやすい位置にメニューがある

1タップでコンテンツに到達できる

・主要SNSアプリがこぞってタブを使用しているため、スマホユーザーとの親和性が高い

勿論コンテンツの内容によりますが、ユーザビリティ重視ならタブもおすすめ。

 

×タブメニューのデメリット

・コンテンツを画面いっぱいに表示することが出来ない。

・メニューが多い場合、タブが小さくなってアクセシビリティが低下

シンプルなサイトや、よく使われる項目が限られている場合におすすめです。

 

 まとめ

メニューと向いているシチュエーションをまとめると、以下のとおりになります。

 

1.    ハンバーガーメニュー(横スライド系):メニュー数多、並列

2.    ハンバーガーメニュー(ドロップダウン系):メニュー数少、全画面コンテンツ

3.    アコーディオンメニュー:メニュー数多、上層・下層あり

4.    タブメニュー:メニュー数少or利用頻度が高いコンテンツが限定されている

 

皆様のお持ちのサイトにピッタリのメニューは何番でしたか?

PCサイトのスマホ変換ツールで、実際に手を動かしながら

各メニューの使いやすさ、使いづらさを理解していっても良いかもしれません。

例:Shutto (PCサイト→SPサイト変換ツール

 

モバイルという限られたスペースの中で、伝えたい情報を伝えるのは非常に困難です。

勿体無い離脱を防ぐために、しっかり考えて選択しましょう!

 

以上、新入社員の東でした。

 

ウェブサイトがスマホユーザーの心にもヒットするように、

ジェイコスも数々のお客様のお手伝いをさせていただいております。

まずは相談だけでも、お気軽にお問い合わせくださいませ!

無料相談はこちらから

trackbacks

trackbackURL:

Recent Entries

  1. 【あなたにピッタリのサービスがわかる】スマホでお得にエンタメ動画を楽しもう~全ての動画配信サービスを視聴してみた!~
  2. 個人の居酒屋もカフェもレストランもクレジットが安価に簡単に導入できる~ビジネスチャンスが広がる"モバイルクレカ"比較まとめ~
  3. 驚異の6秒動画プロモーション「Vineを活用した8つのキャンペーン事例」をご紹介!
  4. "スモールビジネス"LINE@活用法~PR戦略成功事例をご紹介!~
  5. 企業の存続危機に発展するかも!?Twitter炎上事例からわかるリスクの実態とその対策
  6. 注目のオウンドメディア100サイト「訪問者」ランキング!~Webマーケティング戦略に勝利したサイトはどれ?~6/6
  7. 注目のオウンドメディア100サイト「訪問者」ランキング!~Webマーケティング戦略に勝利したサイトはどれ?~5/6
  8. 注目のオウンドメディア100サイト「訪問者」ランキング!~Webマーケティング戦略に勝利したサイトはどれ?~4/6
  9. 注目のオウンドメディア100サイト「訪問者」ランキング!~Webマーケティング戦略に勝利したサイトはどれ?~3/6
  10. 注目のオウンドメディア100サイト「訪問者」ランキング!~Webマーケティング戦略に勝利したサイトはどれ?~2/6