みなさんこんにちは、連載「スマホサイトのメニュー表現」2日目では、実際に企業195社のメニュー表現の調査結果をお伝えしていきます。

それではさっそく見ていきましょう！

<スマホサイトのメニュー表現：連載>
1日目：「スマホサイトのメニュー、ハンバーガーボタンで大丈夫？」
2日目：「スマホサイトのメニューボタン、優良企業195社を検証！」
3日目：「参考にしたい！業態別に見る各社のヘッダー周りの表現方法」

調査結果

今回の調査では、幅広い世代にとって知名度の高い全業種の優良企業をできるだけ公平にピックアップしたかったので、Gomezが2015年4月に発表したIRサイトランキングを利用し、上位195社をまず一覧にまとめ、まずはスマホ対応している企業117社に絞りました。

調査票：スマホサイトのメニューボタン

次に、以下の内容で分類を行いました。

1. アイコンの種類
2. メニューボタンの表現の分布
3. メニューボタンの装飾の分布
4. メニューボタンのアニメーションの分布
5. メニューボタンの位置
6. ヘッダーにメニューボタンがあるかどうか
7. メニュー展開画面でのメニュー項目数
8. メニュー展開画面での見せ方

それではまず、アイコンの種類から見ていきます。

1. アイコンの種類

今回の調査結果では、ヘッダーにメニューボタンにアイコンを使っている企業は195社中72社となり、そのアイコンの種類は以下のようになりました。

ハンバーガーアイコンと呼ばれる「三本線」が約7割を占め、「リスト型三本線」が12社、「プラスマーク」が2社で使われています。
ハンバーガーアイコンかそれに似た形状のもので大半を占めていることがわかり、広く一般的に使われ、受け入れられてきているのではないかと感じました。

その他のユニークなアイコンでは、ビルや段ボール箱のようなもの、9個のドットの集合体、メモが重なった様子などが、各1社ずつ見られました。

（ユニークなアイコン例：ココカラファイン、フィールズ、日立製作所、日本ハム、エムティーアイ、コカ・コーラウエスト）

個人的には、ドラッグストアを展開しているココカラファインの見せ方は、何か含まれていることを連想させるプラスマークと日本語を使った存在感のあるボタンで、幅広い層をターゲットとするなら非常にわかりやすい見せ方だと感じました。

また、遊技機などのコンテンツビジネスを展開しているフィールズの見せ方は、背景画像によっては見えづらくなり、またスマホ操作に慣れた人向けと感じるものの、シンプルなアイコンと人物の手の向きとも調和し、メニュー展開後の見せ方も非常に凝っていました。

日立製作所では、箱アイコンに製品/サービスメニューを、ビルアイコンに企業情報メニューを格納するというユニークな使い方をしています。
アイデアはとても工夫があり面白いのですが、ボタンを押した時に何のページが表示されるのか一般ユーザーにとって想像できない場合もあるので、ユニークなアイコンを使う場合は文字で意味を補完する必要があるかもしれません。

メニューアイコンの調査結果からは、ハンバーガーアイコンが市民権を得てきているように見受けられますが、ターゲットや目的によってはハンバーガーアイコン以外でわかりやすい見せ方もあると改めて気付かされました。

2. メニューボタンの文字表現の分布

ヘッダーにメニューボタンを持つ77社の内、メニューボタンをアイコンや文字でどのように見せているのか分類します。すると「アイコンのみ」と、「日本語とアイコン」の2つが多数を占め、「文字のみ」は少数派となりました。

昨日前述した2014年のA/Bテストの記事を参考にすると、コンバージョン率（クリックされる確率）が大きく改善したのは「アイコンを使わず文字に囲みを付けて表現したメニューボタン」だったそうです。

今回の調査を見るとそのような「文字のみ」の表現をしているのはごく少数でしたが、ソフトバンクでは採用されており、他にも、ALSOKやインフォコムでも見かけました。
今後「文字のみ」のメニューボタンが増えてくるのかどうか、注視していきたいところです。

3. メニューボタンの装飾の分布

次に、メニューボタンがどのような装飾をされているかを見ていきます。
約7割はアイコンの着色以外で何かしら装飾されていて、装飾方法は「ベタのみ」が一番多く、境界線の利用も多く見られました。

ヘッダー全体のデザインによる部分も大きいとは思いますが、装飾例がこちら。（サイバーエージェント、日立製作所、コカコーラウエスト）

4. メニューボタンのアニメーションの分布

次に、メニューボタンを押した時にどのような動きでメニュー画面が表示されるのかを分類します。

UIアニメーション（スライドしてくるのか、モーダル表示されるのか、など）はもっと丁寧に分けることもできますが、大きな違いを捉えるために今回はざっくりと分けています。

メニューボタンを押すと、上から表示されるものが8割近くを占めますが、右から表示されるものも2割ほどありました。（例：みずほファイナンシャルグループ、JR西日本、ソフトバンク）

5. メニューボタンの位置

メニューボタンが画面のどの場所に置かれているのか、分類します。
全体の96%のメニューボタンが右上に配置され、左上や画面下部に置かれたものは合計3社と極少数でした。（配置例：東京ガス、日立建機、LION）

LIONのサイトは非常にユニークな作りで、右上のリスト型三本線アイコンはブランドサイト一覧が表示されるボタンで、本当のメニューボタンは画面下中央に配置されていました。

6. ヘッダーにメニューボタンがあるかどうか

これまでヘッダーにメニューボタンがある場合の表現方法を見てきましたが、スマホ対応している企業の34%では、そもそもヘッダーにメニューボタンを使っていませんでした。

メニューボタンを使っていない企業では、ページの目立つところにメニューが一覧で展開（以降、展開型メニューと呼ぶ）されていました。KDDI、日清食品、SHARPが好例です。

スマホ対応が不十分なためにメニューボタンの設置が検討されていないサイトもありそうでしたが、あえてメニューボタンを使わず、展開型メニューのみを採用している企業も多いように感じました。

7. メニュー展開画面でのメニュー項目数

メニューボタンを押した後に展開される画面で、メニュー項目がどのように表示されるかを見ていきます。まずはメニューの項目数を分類してみました。

ヘッダーにメニューボタンを持つ77社のうち、6〜9個のメニュー項目数で展開している企業が65%を占めました。16個以上のメニュー項目数を持つ企業5社のうち、最大で30個のメニューを使った企業もあり、メニュー項目数の差は各社間で大きいと感じました。
（例：日立建機、ユニ・チャーム、第一三共）

8. メニュー展開画面での見せ方

メニュー項目数に差が大きいことは上で述べましたが、メニュー展開画面でその項目数をどのように一覧させているのかを分類しました。入れ子を使っている企業が約2割あり、入れ子を開くと沢山の項目が出てくる見せ方をしていました。
個人的には入れ子を使った企業はもっと多いかと思っていたので少し意外でした。

また、画面横幅いっぱいに使っているものとそうでないもの、また、その幅の中で一列展開しているものと2列展開しているものなど、いろんな見せ方がありました。
（例：サイバーエージェント、マツダ、ニチレイ）

調査終了

以上のようにそれぞれ項目毎に分類をしてきました。
その他にも、そもそもレスポンシブなのか振り分けているのか、フッターはどう見せているのかなど他の分類もしているので、よろしければ調査リストをご覧ください。
調査票：スマホサイトのメニューボタン

明日はこの調査結果をもとに考えられることをまとめていきます。