みなさん、サイトのスマートフォン対応できていますか？
スマートフォンサイトを作る時は、PCサイトと色々と勝手が違うのでいちいち迷ってしまいますよね。
今回はその中でもスマートフォンサイトのメニューの部分に着目し、傾向と対策を紹介したいと思います。
スマートフォンサイトの事例を
「メディア系サイト」「ECサイト」「コーポレートサイト」「サービスサイト」
の4つのタイプに分けて10個ずつ用意しました。
それでは一気に見て行きましょう。
目次
メニューの定義：「ドロワー」「ハンバーガー」とは
スマートフォンのメニューのこと
今回のテーマであるメニュー部分とはどの部分をさすのかを、まずご紹介します。
上の画像は当サイト（プロモニスタ）のスマートフォンサイトです。
今回注目しているメニューとは、上図の右上に設置している「menu」部分、PCサイトで言うグローバルナビゲーションの部分です。
タップによってメニューが出てくるこのスタイルをスマートフォンで作り出したのがFacebookと言われており、引き出すイメージから「ドロワーメニュー」、アイコン部分の形（≡：水平の三本線）から「ハンバーガーメニュー」と呼ばれています。
スマートフォンはPCに比べて表示される面積が限られている分、見やすくする為の工夫やアイディアが必須になります。
メニュー部分はまさにサイトの中核となりうる部分ですので、事前にしっかり研究してよりよいスマートフォンサイトを作りましょう。
メディア系サイト10
左側にハンバーガーメニューやメニューボタンがあり、タップすると左からメニューが出てくるタイプが多かったのが特徴です。メニューの数が多いため、画面左を覆う形でのメニューが適しているのでしょう。
左側にハンバーガーメニュー、右に検索メニューというタイプのサイトも比較的多いです。
ITmedia
左バーガー＆右検索
Antenna
左下バーガー
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サイト付、レスポンシブサイト、専用サイト、あなたはどちらを選びますか？
