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

10966
Pocket

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

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

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

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

 

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

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

プロモニスタ

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

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

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

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

 

メディア系サイト10

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

ITmedia

ITmedia
ITmedia

左バーガー&右検索

Antenna

Antenna
Antenna

左下バーガー

Lifehacker

Lifehacker
Lifehacker

右バーガー&右検索

MERY

MERY
MERY
左バーガー

キナリノ

キナリノ
キナリノ
左バーガー

日刊サイゾー

日刊サイゾー
日刊サイゾー
左MENU

マカロニ

マカロニ
マカロニ
左バーガー

ことりっぷ

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

伊勢丹

伊勢丹
伊勢丹
左バーガー

まち日本橋

まち日本橋右バーガー

 

ECサイト10

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

ABCマート

abcマート
ABCマート
右バーガー+メニュー

ACTUS

ACTUS
ACTUS
右バーガー

DHC

DHC
DHC
左バーガー+カテゴリ

DMM

DMM
DMM
右検索&右サービス

fifth

fifth
fifth
左バーガー

G-SHOCK

GSHOCK
G-SHOCK
右バーガー

LUPICIA

LUPICIA
LUPICIA
右バーガー+メニュー

PORTER

PORTER
PORTER
右バーガー

ZOZOTOWN

ZOZOTOWN
ZOZOTOWN
左バーガー+メニュー

北欧暮らしの道具展

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

コーポレートサイト10

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

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

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

CyberAgent

CyberAgent
CyberAgent
右検索&右バーガー+メニュー

株式会社カネボウ化粧品

Kanebo
株式会社カネボウ化粧品
右検索&右バーガー+MENU

KDDI株式会社

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

凸版印刷株式会社

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

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

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

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

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

三菱商事株式会社

三菱商事
三菱商事株式会社
右バーガー+メニュ-

株式会社 資生堂

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

株式会社 博報堂

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

サービスサイト10

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

KITTE

KITTE
KITTE
右バーガー

Jリーグ

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

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

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

Adobe

adobe
Adobe
右バーガー&右検索

HIS

HIS
HIS
右バーガー+メニュー

NIKE

NIKE
NIKE
左バーガー

TAKAKAMI_BRIDAL

TKAKAMI_BRIDAL
TAKAKAMI_BRIDAL
右バーガー+MENU

Zoff

Zoff
Zoff
右MENU

武蔵野音楽大学

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

Windows

Windows
Windows
右バーガー

 

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

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

 

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

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

 

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

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

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

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

Pocket

無料ebook

今すぐ見直すべきサイト内部リンク4つのポイント
姓(必須)
名(必須)
会社名(必須)
電話(必須)
メールアドレス(必須)
個人情報のお取り扱いについて

競合比較ができるSEOツール SEOカウンセラー

最大10項目(順位/被リンク数など)の競合調査が無料でできます。

児玉 茜
2014年7月中途入社。 京都出身のWebデザイナーです。プロモニスタがすべてのWeb担当者の方にとって見やすく、使いやすいサイトになるよう日々進化させ続けます!