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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4.  タブメニュー

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

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

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

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

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

◎タブメニューのメリット

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

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

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

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

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

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

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

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

 まとめ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

→無料相談はこちらから