Webマーケティングに
強くなるメディア

  • ログイン
  • 会員になる
  • ログイン
  • 会員になる

  • 総合

    • 新着
    • Webマーケティング講座
    • 資料ダウンロード

    トレンドを知る

    • ノウハウ&トレンド ニュース
    • リリース ニュース
      - ferret×PR TIMES -
    • マーケター特集
      - マーケティングジャーニー -
    • おすすめツールソリューション情報
      - by マケスト -

    体系的に学ぶ

    • 基礎〜応用を学ぶ
      - Webマーケティング講座 -
    • コンテンツマーケティングを学ぶ
    • Googleアナリティクスガイド
    • 事例
    • 資料ダウンロード
    • マーケティング用語辞典

    Info

    • 運営会社
    • 著者一覧
    • お問い合わせ
    • 広告掲載について
    • 広告掲載に関する規約
    • 利用規約
    • プライバシーポリシー
    • 特定商取引法に基づく表示

  • 新着
  • Webマーケティング講座
  • 資料ダウンロード
  • トレンドを知る
    • ノウハウ&トレンド ニュース
    • リリース ニュース
      - ferret×PR TIMES -
    • マーケター特集
      - マーケティングジャーニー -
    • おすすめツールソリューション情報
      - by マケスト -
  • 体系的に学ぶ
    • 基礎〜応用を学ぶ
      - Webマーケティング講座 -
    • コンテンツマーケティングを学ぶ
    • Googleアナリティクスガイド
    • 事例
    • 資料ダウンロード
    • マーケティング用語辞典
  1. Webマーケティングメディア ferret
  2. 事例
  3. ハンバーガーメニューのデザイン問題が決着!ABテスト7パターン結果
  1. action
  2. URLをコピーしました

ハンバーガーメニューのデザイン問題が決着!ABテスト7パターン結果

  • 2015年11月25日
  • 事例

画面の表示領域の狭いスマホでは、表示されている ページ 以外にもメニューがあることをどう知ってもらうかは重要です。

今回は、メニューへの 導線 であるハンバーガーメニューのデザインで7パターンを回した結果をご紹介します。

仮説

メニューの存在があまり認識されていないのではないか。メニューをもっと分かりやすくすることで、気づいてもらえ、クリック率が向上するのではないか。
そこで、ハンバーガーメニューを既存のデザインとは別に6パターン、合計7パターンでどれが一番クリックされるのかテストして検証することにしました。

ハンバーガーメニューとは

ハンバーガーメニューは、スマホの画面上部によくある三本線のメニューアイコンのことを指します。

用意したデザインは7パターン

hamburger-design.png ※クリックすると拡大されます。

  • 基本:よくあるスタンダードなハンバーガーメニュー
  • A:囲いを付けたタイプ
  • B:色を付けたタイプ
  • C:色を付けて更に囲ったタイプ
  • D:分かりやすくMENUと表記したタイプ
  • E:MENU表記に囲いを付けたタイプ
  • F:ハンバーガーとMENUに囲いを付けたタイプ

ferretは初心者の方もよく利用していただいているメディアなので、もしかしたらハンバーガーメニューをメニューとして認識できていない可能性も考え、MENUと表記したタイプを入れてみました。

結論!ハンバーガーメニューのクリック率はFタイプが一番良い

クリック率の遷移

テスト開始からテスト終了までのメニューのクリック率を時系列の図にまとめました。
large.jpeg ※クリックすると拡大されます

テスト開始直後はデータの母数も少ないため、大きくクリック率が上下していますがデータが貯まっていくにつれて収斂していっているのが分かります。

各タイプのクリック率の比

hamburger.png ※クリックすると拡大されます。

基本タイプを100とすると、Aタイプは若干基本タイプを上回った(100.4)ものの、あまり大差がない結果になりました。

目立つと思って、色を付けたBタイプは、88と12ポイント低下。
Cタイプは、87と13ポイントもクリック率が大きく低下しました。

囲いのないDタイプは、最も悪く82と18ポイント低下。MENUだけだとMENUと認識されず、ただの文字に見えている模様。
Eタイプは、96と4ポイントの低下となりました。
囲いが付いているだけで、14ポイントも向上したこととなります。

一番良かったのは、ハンバーガーとMENUのダブル表記に囲いを付けたFタイプで、2ポイントの向上となりました。

まとめ

・囲いを付けたタイプは付けないタイプよりも全タイプでクリック率が向上しました。
・色を付けると怪しさのせいかクリック率が減少しました。
・三本線のデザイン(黒)が入っているものはクリック率が高くメニューとして、一般認知されている。
・スペースが許す場合、ハンバーガーとMENUをダブル表記して囲いを付けましょう。無いなら三本線と囲いで。
・次は基本タイプ、Aタイプ、Fタイプの3本でテストを回してみます。

関連記事

  • iPhone X 時代のモバイルナビゲーションアイデアに関する3つの考察
  • ハンバーガーメニューよりもわかりやすい?ナビゲーションデザイン案7選
  • 【無料】ブログ機能やメールフォームを搭載したホームページ制作ツール「CLOUD LINE」の使い方
  • 初心者必見!今さら聞けないiMovieの基本メニュー4つ
  • メールマーケティングの効果測定

関連記事

  • iPhone X 時代のモバイルナビゲーションアイデアに関する3つの考察
  • ハンバーガーメニューよりもわかりやすい?ナビゲーションデザイン案7選
  • 【無料】ブログ機能やメールフォームを搭載したホームページ制作ツール「CLOUD LINE」の使い方
  • 初心者必見!今さら聞けないiMovieの基本メニュー4つ

この記事を読んだ方にお勧め、ferretの無料「Webマーケティング講座」

ferretでは、ニュース記事を毎日読むだけでは身につきにくいWebマーケティングの『体系的な知識』を学ぶことができる「Webマーケティング講座」コンテンツも用意しています。

解説を読むだけでなく、記入式のワークを埋めていくことで自社サービスを客観的に理解し、今行うべき施策を考える準備ができるように構成されたコンテンツです。Webマーケティングは何から始めたら良いか分からないという方、無料ですのでぜひのぞいてみてください。

この記事を書いた人

青木 哲郎

マーケター
ferret立ち上げメンバー。サイト企画・制作ディレクション・集客施策など、サイトの裏側全般を担当しています。

Facebook : https://www.facebook.com/tetsuro.aoki
Twitter : https://twitter.com/te26_kun

執筆記事一覧はこちら

一人でもできた!コンテンツマーケティングで始める見込み客獲得入門

■本書を読むとできるようになる3つのこと
①必要な方法を体系的に理解し、見込み客獲得の最初の一歩を踏み出せる
②見込み客獲得後にすべきコミュニケーションを理解し、ビジネス上のゴールに導く事ができる
③媒体や特定の手法に依存せず自ら集客できる場を持てるようになる

資料をダウンロードする

  • 昨日
  • 週間
  • 月間

世界でシェアを誇る有名CMSを比較!それぞれのメリット・デメリット

Twitterで売上予測、プロモーションはYouTube。タカラトミーのEC&Web戦略に迫る

【CMS】WordPressとは?特徴・機能・導入方法・プラグインをまとめて解説

登録しておくとビジネスに役立つかも!?チェックしたいメルマガ13選

【機能・料金比較】SFAの失敗しない選び方

検索流入に影響あり?Google検索の新機能「アクティビティカード」とは

急成長するInstagramの動画と動画広告

営業ナシでも選ばれるのはなぜ?ヌーラボのビジネスモデルを徹底取材

経営判断を加速化!ERPの基本とメリット・デメリット

RPA(ロボティック・プロセス・オートメーション)とは? 基礎知識やメリット・デメリットを解説

無料ホームページ作成ツールはどれを選ぶべき?おすすめサービス15選

「センスと根性で売る営業はもう終わり」ベルフェイスの目指すこれからの営業

作りたいサイトによって選び方が違う!CMSの種類と特徴

Googleの「しごと検索」が日本でもリリース!求人検索に大きな影響が

新しくなったSearch Console(サーチコンソール)の導入と使い方について

現会員424,919人

ログインはこちら

カテゴリから探す

集客

SEO

  • SEO基礎(2)
  • SEO準備(2)

Facebook

  • Facebookページ運用(3)
  • Facebook広告運用(1)

リスティング広告

  • リスティング広告基礎(2)

戦略

戦略基礎

  • 戦略基礎(1)

制作・デザイン

Webデザイン

  • 基礎知識(1)

コンバージョン

LPO

  • 基礎知識(2)

EFO

  • 基礎知識(2)

リピーター育成

メールマーケティング

  • メールマーケティング基礎(2)
  • メールマーケティング運用(1)

分析・改善

アクセス解析

  • アクセス解析応用(2)

A/Bテスト

  • A/Bテスト基礎(1)

おすすめ記事

iPhone X 時代のモバイルナビゲーションアイデアに関する3つの考察

ハンバーガーメニューよりもわかりやすい?ナビゲーションデザイン案7選

【無料】ブログ機能やメールフォームを搭載したホームページ制作ツール「CLOUD LINE」の使い方

初心者必見!今さら聞けないiMovieの基本メニュー4つ

メールマーケティングの効果測定

エントリー

  • 新着
  • Webマーケティング講座
  • 資料ダウンロード

トレンドを知る

  • ノウハウ&トレンド ニュース
  • リリース ニュース
    - ferret×PR TIMES -
  • マーケター特集
    - マーケティングジャーニー -
  • おすすめツールソリューション情報
    - by マケスト -

体系的に学ぶ

  • 基礎〜応用を学ぶ
    - Webマーケティング講座 -
  • コンテンツマーケティングを学ぶ
  • Googleアナリティクスガイド
  • 事例
  • 資料ダウンロード
  • マーケティング用語辞典
  • 運営会社
  • 著者一覧
  • お問い合わせ
  • 広告掲載について
  • 広告掲載に関する規約
  • 利用規約
  • プライバシーポリシー
  • 特定商取引法に基づく表示
Webマーケティングに
強くなるメディア
© basic Incorporated.

過去10年間で弊社が得てきたWebマーケティングのノウハウを

1冊の資料にまとめました。(全83ページ)

feedlyへの登録はこちら
その他のrssはこちら