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
-
タグ: AIトランスフォーメーション, AI音声生成, Google Workspace, Notebook LM, gemini, イー・エージェンシー, コラム, ポッドキャスト化, 広報DX, 生成ai, 社内コミュニケーション, 社内コンテンツ活用, 社内ブログ活用, 自動音声要約, 音声メディア
「10分で“読む資料”が“聴くコンテンツ”に!」──Notebook LMの新機能を遊んでみた話|株式会社イー・エージェンシー公式note -
タグ: Webサイト多言語変換サービス, shutto翻訳, コラム, 事例紹介
株式会社明石工業様:shutto翻訳ご利用事例 -
タグ: Webサイト多言語変換サービス, shutto翻訳, コラム, 事例紹介
株式会社崎陽軒様:shutto翻訳ご利用事例 -
タグ: さぶみっと!メール配信, クラウドサービス, コラム, ニュース, 自社サービス
ITreview Grid Award 2025 Springにて「High Performer」を受賞しました!(メールマーケティングツールカテゴリー) -
タグ: eコマース, itreviewアワード, カゴ落ち対策, クラウドサービス, コラム, ニュース, 顧客満足度
ITreview Grid Award 2025 Springにてカゴ落ち対策カテゴリー部門で「High Performer」を受賞しました! -
タグ: Webサイト多言語変換サービス, shutto翻訳, インバウンド, コラム, ニュース, 顧客満足度
ITreview Grid Award 2025 Springにて、ウェブサイト翻訳ツール部門で「Leader」を5年連続で受賞しました!