Appleがトップページで一時期不採用にしたカルーセルについてなぜ?辞めたのかが気になったのでA/Bテストをして検証してみました。
Appleがトップページで採用しているカルーセルを辞めた
Appleのトップページのデザインでカルーセルを辞めたというのが一時期話題になっていました。(現在は、カルーセル表示に戻っています。)※カルーセルとは、ひとつの画像領域のところに複数の写真を置いてペラペラとスライドショーのように見えるインターフェイスです。(有名なサイトだとappleのこのトップページの部分に使われています。)
参考記事:Appleがトップページで自動送りカルーセルをやめた理由 – Rriver
Appleがカルーセルから一時期変更したデザインは、こちら。
※ 補足をしておくと、このデザインに変更したのはiPhoneが発売されたタイミングのみでした。その後は、カルーセルの表示に戻っています。
カルーセルって。間違ってクリックしていませんか?
実際に自分もこのカルーセルでストレスの残る体験をしました。iPhone 6をクリックしたつもりが、スライドが勝手に次に移動してApple Watchのページに行ってしまいました。
数秒後に自動的に変わってしまうカルーセルでは、押そうと思った時に間違って次のページを押してしまう事ってありませんか?
なぜ商品発表直後は、カルーセルを不採用にしたのか?
どうしてカルーセルにしたり戻したりしてるのか?
気になったので実験することにしました。
Appleとe-Agencyのサイトでは、販売している商品が違うので完全な比較にはなりませんが、A/Bテストした結果から見えてきたものを少しでも楽しんで読んでいただければと思っています。
実験パターンをOptimizelyで作成
実験前のトップページのデザイン
実験してみたトップページのデザイン
変更することでどんなメリットやデメリットがあるのか?
簡単に結果を出すとこのようになりました。OptimizelyでABテストを行うと同じ期間で調べられるので時期的要因を排除することが出来ます。どのような変化があったのかまとめました。
バナークリック率 125%アップ
問い合わせ数 120%アップ
滞在時間 120%アップ
クリック数の変化
結果は、このようになりました。
1番目のバナーは、クリック数が増加しました。
2番目のバナーは、クリック数が減少しました。
3番目のバナーは、クリック数は、同じでした。
バナー領域全体は、125%アップ。
クリックデータについて補足
カルーセルを採用を辞めることで2番目のクリック数が落ちているじゃないか!と思われるかもしれませんが。新規のユーザのクリック数を調べてみたところ69%アップしていました。必ずしも、クリック数が減った!と落胆しなくても良いことがわかりました。
滞在時間の変化
テスト前のデータ
平均ページ滞在時間 00:01:07
直帰率 49.00%
ABテスト後のデータ
平均ページ滞在時間 00:01:21
直帰率 45.26%
カルーセルを辞めたことにより滞在時間、直帰率が下がった事がわかりました。
問い合わせ数について
1番目2番目のサービスについては、問い合わせ数に変化はありませんでした。3番目のサービスについては、通常の2倍ほどの問い合わせ数がありました。
クリック数は、少なくなった3番目のバナーでしたが、問い合わせ数が増えたのは、びっくりしました。
問い合わせ数が増えた推測。
私の推測は、トップページに貼られたリンクから適切なリンクにちゃんと辿りつけたのが原因かと思っています。
サイトトップページへの動線は、検索経由よりも被リンクやブログ経由で来ている人の事をもっと考えて設計した方が良いと考えさせられる結果になりました。
以上のデータを社長に見せたところ即採用。
このデータを元に改善ポイント改善内容を伝えたところ。
「こういうのは、速く改善していくのがいいよね。実装しよう!」
と言ってくれました。(良かった良かった。)
まとめ
カルーセル表示が有効な場合
・見てもらいたいコンテンツを1枚目に置き滞在時間を短くしたい。
・全体のコンテンツよりカルーセルの1枚目に集中して視点を集めたい。
カルーセル表示しない方が有効な場合
・色々なコンテンツの中から探しやすくしたい。
・滞在時間を増やし検討してもらうコンテンツを増やしたい場合。
A/Bテストしてみた感想
今回の結果をふまえて現在のe-Agencyのサイトは、カルーセルを辞めました。A/Bテストをする事で簡単に導入すべきか辞めるべきか?数字を元に議論できて楽しいね!一度A/Bテストを使って既存のサイトのメニュー表示などの機能などを見つめ直してはいかがでしょうか?
e-Agencyには、A/BテストのOptimizelyをサポートするメンバーが沢山います。私は、まだ使い始めたばかりのマーケティング担当なので、より詳しいボトルネックの調査やテストを頼みたい方は、こちらからどうぞ。
超カンタンA/Bテスト『Optimizelyサポートパック』 | e-Agency
PICK UP
-
タグ: 2025年の崖, DX推進, GA4, Googleアナリティクス, IT人材育成, gmpプレミアムサロン, イー・エージェンシー, オンライン学習, コラム, データ活用, マーケティングDX, レガシーシステム, 企業変革, 社内教育, 自社DX戦略
「2025年の崖」を乗り越える!DX推進とIT人材の育成が鍵 -
タグ: GA4, GMPパートナー, Googleアナリティクス, Udemy Business, アクセス解析, イー・エージェンシー, オンライン学習, コラム, サイト運営支援, データ活用, マーケティング支援, 初心者向け講座, 動画講座, 学習プラットフォーム, 法人向け教育
Udemy Businessで視聴可能に!GA4のスキルアップを強力サポート! -
タグ: AI時代の働き方, Web3, コミュニケーションデザイン, コラム, ブロックチェーン, 仕事の創造性, 企業の想い, 企業理念, 働き方の価値観, 採用メッセージ, 正直に生きる, 社内文化, 社員インタビュー, 社長メッセージ, 誠実なコミュニケーション
甲斐社長から2025年度の期初メッセージ「正直に生きよう」|株式会社イー・エージェンシー公式note -
タグ: CRM, DATA CAST, ECサイト運営, MAツール, futureshop, コラム, セミナー情報, パネルディスカッション, メルマガ施策, メールマーケティング, リピート率向上, 売上アップ施策, 秋田屋本店, 自社EC強化, 顧客満足度向上
2025年4月15日(火)開催 CRM活用でメルマガ売上10倍以上!秋田屋本店が実践するリピーター戦略 -
タグ: AIマーケティング, AI活用事例, BigQuery, GA4, Googleアナリティクス, Vertex AI, ウェビナー, コラム, データ活用, ノーコードAI, プロンプト設計, マーケティング分析, 検索体験向上, 次世代マーケティング, 生成ai
ビジネス成果を加速する!Google アナリティクス×生成 AI で実現する次世代マーケティング -
タグ: エンジニア募集, オウンドメディア, コラム, ビジネス職, リモートワーク, レコメンドエンジン, 中途採用, 働きやすい環境, 採用強化, 社内文化, 翻訳ツール
【オープン社内報 2025年4月号】イー・エージェンシー プレミアムニュース