[サイトタイプ別40事例]スマホサイトのメニューデザインに困ったときに役立つサイトまとめ

みなさん、サイトのスマートフォン対応できていますか？
スマートフォンサイトを作る時は、PCサイトと色々と勝手が違うのでいちいち迷ってしまいますよね。

今回はその中でもスマートフォンサイトのメニューの部分に着目し、傾向と対策を紹介したいと思います。

スマートフォンサイトの事例を
「メディア系サイト」「ECサイト」「コーポレートサイト」「サービスサイト」
の4つのタイプに分けて10個ずつ用意しました。

それでは一気に見て行きましょう。

 

メニューの定義：「ドロワー」「ハンバーガー」とは
スマートフォンのメニューのこと

今回のテーマであるメニュー部分とはどの部分をさすのかを、まずご紹介します。

上の画像は当サイト（プロモニスタ）のスマートフォンサイトです。
今回注目しているメニューとは、上図の右上に設置している「menu」部分、PCサイトで言うグローバルナビゲーションの部分です。

タップによってメニューが出てくるこのスタイルをスマートフォンで作り出したのがFacebookと言われており、引き出すイメージから「ドロワーメニュー」、アイコン部分の形（≡：水平の三本線）から「ハンバーガーメニュー」と呼ばれています。

スマートフォンはPCに比べて表示される面積が限られている分、見やすくする為の工夫やアイディアが必須になります。

メニュー部分はまさにサイトの中核となりうる部分ですので、事前にしっかり研究してよりよいスマートフォンサイトを作りましょう。

 

メディア系サイト10

左側にハンバーガーメニューやメニューボタンがあり、タップすると左からメニューが出てくるタイプが多かったのが特徴です。メニューの数が多いため、画面左を覆う形でのメニューが適しているのでしょう。
左側にハンバーガーメニュー、右に検索メニューというタイプのサイトも比較的多いです。

ITmedia

ITmedia

左バーガー＆右検索

Antenna

Antenna

左下バーガー

Lifehacker

Lifehacker

右バーガー＆右検索

MERY

MERY
左バーガー

キナリノ

キナリノ
左バーガー

日刊サイゾー

日刊サイゾー
左MENU

マカロニ

マカロニ
左バーガー

ことりっぷ

ことりっぷ
左バーガー＆右検索

伊勢丹

伊勢丹
左バーガー

まち日本橋

右バーガー

 

ECサイト10

大・中・小カテゴリー、様々な見せ方がありました。カートや主要カテゴリは常時表示されるナビゲーションに置き、より細かいメニューをハンバーガーメニューの中に入れているサイトが多いようです。

ABCマート

ABCマート
右バーガー＋メニュー

ACTUS

ACTUS
右バーガー

DHC

DHC
左バーガー＋カテゴリ

DMM

DMM
右検索＆右サービス

fifth

fifth
左バーガー

G-SHOCK

G-SHOCK
右バーガー

LUPICIA

LUPICIA
右バーガー＋メニュー

PORTER

PORTER
右バーガー

ZOZOTOWN

ZOZOTOWN
左バーガー＋メニュー

北欧暮らしの道具展

北欧暮らしの道具展
右バーガー＋メニュー

コーポレートサイト10

コーポレートサイトはメニューの数が少なくシンプルです。必要な情報にたどり着きやすいようにサイト内検索を入れているところも多いですね。
コーポレートサイトのサイト内検索はPCではあまり使われなそうですが、スマホでは必須なのかもしれません。

エイベックス・グループ・ホールディングス

エイベックス・グループ・ホールディングス
右バーガー＋MENU

CyberAgent

CyberAgent
右検索＆右バーガー＋メニュー

株式会社カネボウ化粧品

株式会社カネボウ化粧品
右検索＆右バーガー＋MENU

KDDI株式会社

KDDI株式会社
ヘッダメニュー

凸版印刷株式会社

凸版印刷株式会社
プルダウンメニュー＆検索

リクルートホールディングス

リクルートホールディングス
右バーガー

ザ・リッツ・カールトン･ホテル･カンパニー

ザ・リッツ・カールトン･ホテル･カンパニー
右バーガー

三菱商事株式会社

三菱商事株式会社
右バーガー＋メニュ－

株式会社　資生堂

株式会社　資生堂
右バーガー

株式会社 博報堂

株式会社 博報堂
左下バーガー＆右上検索

サービスサイト10

右側にハンバーガーメニューがあるタイプが多いです。タップすると画面全体にメニューが広がるタイプも比較的多めです。

KITTE

KITTE
右バーガー

Jリーグ

Jリーグ
左検索＆右バーガー

女子旅つくるプロジェクト

女子旅つくるプロジェクト
右バーガー＋MENU

Adobe

Adobe
右バーガー＆右検索

HIS

HIS
右バーガー＋メニュー

NIKE

NIKE
左バーガー

TAKAKAMI_BRIDAL

TAKAKAMI_BRIDAL
右バーガー＋MENU

Zoff

Zoff
右MENU

武蔵野音楽大学

武蔵野音楽大学
右バーガー＋MENU

Windows

Windows
右バーガー

 

まとめ：スマートフォンサイトのメニュー、傾向と対策

いかがでしたでしょうか？
10個ずつではありましたが、サイトタイプごとの傾向が少し出ていましたね。メディア系サイトに左メニューが多いのは特徴的でした。
そしてどのサイトタイプでもハンバーガーメニューのアイコンが多用されていました。

 

サイト内検索へのアクセスのしやすさが重要

全体的に「サイト内を検索する」点に工夫がなされているのを強く感じました。
冒頭でも述べましたが、スマートフォンサイトは限られた面積で表現しないといけないので、Webサイトの全体像が分かりづらくなります。
そういった状況では、「必要な情報がある程度明確なユーザー」は検索してしまったほうが早いと考える可能性も高く、検索機能は必須です。PCサイトとはまた違った構成や見せ方の工夫を感じました。

 

実際にスマートフォンで使ってみるのが大事

まだまだ「鉄板」が存在しないスマートフォンサイトのデザイン、分かりやすいメニューを作るためにはやはりユーザー目線に立って考えるのが重要です。似たような業種やサービスのWebサイトをたくさん見て、実際に操作してみると自サイトにあったメニューが見えてくるでしょう。

メニューボタンを作ったが押しても反応が悪かった、指が届かなかった、動きが分かりづらかった、なんてことはスマートフォンではよく起こります。今回の記事を書くに当たり私もスマートフォンで実際にサイトを使ってみましたが、色々と気付きがありました。
今回の例ではほとんどありませんでしたが、画面が大きめのスマートフォンが増えているので、サイトの上部より下部にメニューがあったほうが使いやすいかも、なんて個人的には思います。

是非たくさんのサイトを見て今後のスマートフォン対策にお役立て下さい！

 

▼この記事を読んだあなたにおすすめ!

サイトデザインの横幅の基準はこれだ！お役立ち記事まとめ＆事例9選で何ピクセルかもう迷わない

グローバルナビがユーザビリティを左右する！あなたのサイトが”使いやすい”と思われるために必要な4つのこと

スマホ最適化はモバイルファーストよりユーザーファースト！参考8サイト付、レスポンシブサイト、専用サイト、あなたはどちらを選びますか？