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
-
タグ: CVランキング, ECマーケティング, Shopify, Shopifyアプリ連携, ecサイト構築, refactory, さぶみっと!レコメンド, コラム, レコメンドエンジン, 売上向上, 導入事例, 販売代理店
株式会社refactory様『さぶみっと!レコメンド』をShopify上に国内初導入&販売代理店契約を締結 -
タグ: エンジニア募集, オウンドメディア, コラム, ビジネス職, リモートワーク, レコメンドエンジン, 中途採用, 働きやすい環境, 採用強化, 社内文化, 翻訳ツール
【オープン社内報 2025年7月号】イー・エージェンシー プレミアムニュース -
タグ: エンジニア採用, キャリア採用, コミュニケーション, コラム, ブログ, リモートワーク, ワーケーション, 文化, 環境
2025年7月の募集職種一覧!ビジネス職を中心に採用強化中!|株式会社イー・エージェンシー公式note -
タグ: BIツール, GMP, Google Cloud, Looker Studio, Looker Studio Pro, コラム, データ分析, データ可視化, レポート自動化, 生成ai
【比較表あり】有料版Looker Studio Proと無料版の違いを徹底解説!導入で気をつけるべき3つのポイント -
岩崎人形総本店様:さぶみっと!レコメンドご利用事例
-
タグ: BigQuery, Eight EXPO, GA360, Google Cloud, Google アナリティクス 360, UX改善, Vertex AI Search for Commerce, イー・エージェンシー, コラム, データ活用, マーケティングDX, マーケティング支援, 営業DX, 展示会レポート, 生成ai
イベントレポート「Eight EXPO」に出展!営業マーケDXの熱い2日間