統計データマーケティングお役立ちレポート全てのカテゴリを見るferret記事をさがすABテスト・EFO・CROハンバーガーメニューのデザイン問題が決着!ABテスト7パターン結果ハンバーガーメニューのデザイン問題が決着!ABテスト7パターン結果2018年04月10日ABテスト・EFO・CRO会員登録する画面の表示領域の狭いスマホでは、表示されているページ以外にもメニューがあることをどう知ってもらうかは重要です。今回は、メニューへの導線であるハンバーガーメニューのデザインで7パターンを回した結果をご紹介します。資料を無料ダウンロード仮説メニューの存在があまり認識されていないのではないか。メニューをもっと分かりやすくすることで、気づいてもらえ、クリック率が向上するのではないか。そこで、ハンバーガーメニューを既存のデザインとは別に6パターン、合計7パターンでどれが一番クリックされるのかテストして検証することにしました。ハンバーガーメニューとはハンバーガーメニューは、スマホの画面上部によくある三本線のメニューアイコンのことを指します。用意したデザインは7パターン※クリックすると拡大されます。基本:よくあるスタンダードなハンバーガーメニューA:囲いを付けたタイプB:色を付けたタイプC:色を付けて更に囲ったタイプD:分かりやすくMENUと表記したタイプE:MENU表記に囲いを付けたタイプF:ハンバーガーとMENUに囲いを付けたタイプferretは初心者の方もよく利用していただいているメディアなので、もしかしたらハンバーガーメニューをメニューとして認識できていない可能性も考え、MENUと表記したタイプを入れてみました。結論!ハンバーガーメニューのクリック率はFタイプが一番良いクリック率の遷移テスト開始からテスト終了までのメニューのクリック率を時系列の図にまとめました。※クリックすると拡大されますテスト開始直後はデータの母数も少ないため、大きくクリック率が上下していますがデータが貯まっていくにつれて収斂していっているのが分かります。※クリックすると拡大されます。基本タイプを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本でテストを回してみます。ページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。導線とは、買い物客が店内を見てまわる道順のことです。ホームページにおいては、ページ内での利用者の動きを指します。ホームページの制作にあたっては、人間行動科学や心理学の視点を取り入れ、顧客のページ内での動きを把握した上でサイト設計を行い、レイアウトや演出等を決めることが重要になります。詳しく見るABテスト・EFO・CRO会員登録するおすすめ記事コンテンツマーケティングケーススタディで学ぶ。「Pardotユーザー会」が国内最大級のMAユーザー会へと成長した理由マーケティングオートメーション(MA)ADマーケティングオートメーション(MA)「Pardotユーザー会」運営リーダーが語る。国内最大級のMAユーザー会を維持・拡大する秘訣とはマーケティングオートメーション(MA)BtoBマーケティングのノウハウ資料をダウンロード!基礎から4ステップで実践まで!BtoBマーケティング実践ガイド(無料)BtoBマーケティング実践ガイドは、BtoB事業のマーケティングのノウハウを網羅的かつ体系的にまとめたものです。基礎から応用まで4つのステップでマーケティングが実践できるBtoBマーケターの永久保存版です。株式会社SoLabo「0→1」「1→10」がどちらも叶う。【2019年版】無料で使える画像編集ソフト・GIMP(ギンプ、ジンプ)の使い方ケーススタディで学ぶ。PIECE』を超える異例の売上。PIECE』を超える異例の売上。意外な掛け合わせでビジネス再生!復活した斜陽産業まとめケーススタディで学ぶ。人気記事をもれなくチェックSNSで話題!BtoBビジネスで勝てるマーティングのノウハウを1冊の資料にまとめました。