「それ本当に必要？専門家が教える、ウェブサイトのカルーセルをやめるべき理由」

「Webサイトにカルーセルを導入しようか迷っている。たくさん情報を載せられると聞いたけど、本当だろうか？」「制作会社から提案されたけど、費用対効果が合うか心配だ」

そのお気持ち、よくわかります。カルーセルは一見、華やかでたくさんの情報を載せられるように見えますよね。

しかし、実はユーザーにとって使いづらく、思ったほど効果が出ないことも多いのです。

最近は、ユーザーが使いやすいウェブサイトが好まれる傾向にあります。そのため、カルーセルを使うかどうかは、慎重に考えなければなりません。

この記事では、ウェブサイトの改善を考えている方に向けて、

• カルーセルを使うことで生じる問題
• 実測データが示すユーザーの本当の行動
• カルーセルの代わりにできること、逆に使ってよいケース

上記について、ウェブ制作の専門家がわかりやすく解説します。

カルーセルを使わなくても、魅力的なウェブサイトは作れます。「自社のウェブサイトを、もっと使いやすくしたい」と考えている方は、ぜひ参考にしてください。

カルーセルとは？

カルーセルとは、複数の画像や情報を自動的に切り替えて表示する機能のことです。ウェブサイトでよく使われてきましたが、最近はユーザーにとっての使いやすさの面から、見直されつつあります。

ウェブサイトにおけるカルーセルの役割

カルーセルは主に、ウェブサイトのトップページなどで使われます。限られたファーストビューの中に複数の部署やキャンペーンの情報を並べたい、という社内の要望を平等にかなえられる手段として、長く重宝されてきました。

実測データが示す、カルーセルの厳しい現実

「たくさんの情報を載せられる」というカルーセルの評判は、実測データによって覆されています。最も引用される調査が、米ノートルダム大学のウェブ開発者エリック・ランヨン氏が2013年に公開した大学公式サイトの利用実態です。

2012年10月から2013年1月にかけての調査期間中、同大学トップページのカルーセルをクリックしたユーザーは、全体のわずか約1%でした。

さらに、そのわずかなクリックのうち84%が「1枚目のスライド」に集中しており、2枚目以降はほとんど見られていないことが分かっています。

同氏が調べた他の4サイトでも、クリック率は1.7〜8.8%、1枚目への集中度は40〜62%と、傾向は同じでした。

多くの担当者は「カルーセルなら複数のキャンペーン情報を均等に見てもらえる」と考えて設計しますが、実際にはエンゲージメントは1枚目に集中しており、2枚目以降は「誰も見ていない装飾」になってしまっているのです。

カルーセルのデメリット

• すべての情報が見られない
• ページの読み込みが遅くなる
• ユーザーが使いづらい

すべての情報が見られない

カルーセルは自動で切り替わるため、ユーザーがすべての情報を見られないことがあります。前述のとおり、2枚目以降のクリックはごく一部にとどまります。

また、画像の切り替わりが速すぎると、ユーザーが内容を理解できないことも。特に、目の不自由な方にとっては、情報の把握が難しくなります。

そのため、大事な情報をカルーセルに載せるのは避けた方が良いでしょう。

ページの読み込みが遅くなる

カルーセルは複数の高解像度画像を裏側に隠し持っているため、ページの読み込みが遅くなることがあります。ファーストビューに配置される画像は、Googleが検索評価の指標とする「最大視覚コンテンツの表示時間（LCP）」の対象になりやすく、表示速度への悪影響がSEO評価にも波及しかねません。

ページの読み込みが遅いと、ユーザーはイライラしてしまい、ウェブサイトから離れてしまうかもしれません。ページの表示速度は、ユーザーの満足度に大きく影響するのです。

ユーザーが使いづらい

自動で切り替わるカルーセルは、ユーザーが自分の見たい情報に集中できない原因となります。読んでいる途中で、次の画像に切り替わってしまうことも。

Web上のアクセシビリティ基準WCAG（Web Content Accessibility Guidelines）でも、5秒以上続く自動で動くコンテンツには、利用者が一時停止・停止・非表示にできる操作を用意することが求められています。自動で切り替わり続けるカルーセルに一時停止ボタンがないと、この基準を満たせません。

静的なレイアウトに置き換えるだけで成果が変わったA/Bテスト

カルーセルを避けるべき理由は、ユーザーの行動データから見て、実際の効果が低いからです。自動で回転するスライダーを静的なレイアウトに置き換えることで、クリック数やコンバージョンが大きく向上したというA/Bテストの報告が数多く存在します。

• 米国のWeb制作会社オービットメディア社が実施した自社サイトでのテストでは、静的画像のバージョンが40%以上クリックされたのに対し、カルーセルのクリック率はわずか2%にとどまりました。
• Adobeのコンバージョン最適化担当者が金融サービス企業のサイトで実施したテストでは、スライダーを他の要素に差し替えることすらせず、ただ削除しただけでコンバージョンが23%向上しました。
• ラトビアのEC企業スカンディウェブ社が実施したテストでは、ループ再生のヒーロー動画を静的な価値提案とCTAに差し替えたところ、CTAへの反応率が35%、コンバージョン率が89%向上しました。
• 制作会社ホール・インターネット・マーケティング社が複数業界のクライアントで実施したテストでは、食品業界のクライアントでクリックコンバージョンが29%、害虫駆除業界のクライアントでは24%向上しました（一方で、健康・フィットネス業界のクライアントでは4枚構成のカルーセルの方が静的バナーを上回った例もあり、業種によって結果が分かれる点には注意が必要です）。

これらのテストが示す共通点は、「情報が足りないこと」より「注意を乱すノイズがあること」の方が、コンバージョンにとって大きな障害になっているということです。

Appleが自社サイトとiOSでカルーセルをどう扱っているか

UI/UXのベストプラクティスを長年リードしてきたApple社も、自動で回転するカルーセルには一貫して慎重な姿勢を取っています。

同社の公式サイトでは、1999年ごろから「1つの製品を大きく見せ、明確な一つのメッセージを伝える」というシンプルなヒーロー主導のデザインを基本としてきました。

現在、複数の製品を比較・提示する場面でスライダー状のUIが使われることはありますが、自動で切り替わることはなく、ユーザーが自分でクリックまたはスワイプしたときだけ次のスライドへ移る設計が徹底されています。

この姿勢を象徴する出来事が、2024年のiOS 18における「写真」アプリの事例です。同年6月に公開された最初の開発者ベータ版で、Appleは写真アプリの画面上部に、お気に入りの人物や場所を自動でキュレーションして表示する「カルーセルビュー」を新機能として導入しました。

しかし、ベータテスターから「ナビゲーションが複雑になった」という不満が相次いだため、Appleはわずか2ヶ月後の8月に公開したベータ版で、このカルーセルビューを完全に削除しています。

目新しさのためにUIの複雑さを増すことが、いかにユーザビリティを損なうかを示す好例です。

カルーセルを使ってもよいケースもある

ここまでカルーセルの弱点を中心に見てきましたが、あらゆる場面で使うべきではない、というわけではありません。カルーセルが有効に機能するのは、「異なる文脈の無関係なメッセージ」を詰め込む場面ではなく、「同等の価値を持つ関連アイテム」をユーザー自身の意思でブラウジングしてもらう場面です。

例えば、ECサイトの商品詳細ページで、同じ商品の異なる角度や使用シーンの写真を並べる画像ギャラリーは、カルーセルの正当な使いどころです。

ユーザーはすでに「この商品を詳しく知りたい」という意図を持っているため、1枚目しか見られないという弱点が致命傷になりにくいのです。

同様に、不動産の間取りやホテルの部屋の写真、ページ下部でのお客様の声の紹介なども、カルーセルが向いている場面といえます。

こうした場面でカルーセルを採用する場合も、自動回転は行わず、現在地を示すドットや矢印を用意し、キーボード操作でも動かせるようにすることが欠かせません。

カルーセルを使わないデザインの工夫

カルーセルを使わないデザインは、ユーザーにとってわかりやすく、使いやすいウェブサイトを実現するために重要です。シンプルなデザインを採用することで、ユーザーは必要な情報を見つけやすくなります。

静止画や文字を効果的に使う

カルーセルの代わりに、静止画や文字を効果的に使う方法が注目されています。特に、トップページでは1枚の大きな画像を配置し、はっきりとしたメッセージを伝えることが可能です。

静止画を使うことで、ページの読み込み速度が速くなることも期待できます。また、ユーザーは自分の目的に合わせて、情報を整理しやすいでしょう。

情報を一目で把握できる静的なデザインは、現代のウェブサイトに求められる重要な要素なのです。

シンプルで直感的なナビゲーション

ウェブサイトの案内（ナビゲーション）は、シンプルで直感的なものが良いでしょう。ユーザーは、複雑な動きのあるカルーセルよりも、わかりやすいメニューを好みます。

メインメニューは7項目以内に収めると、ユーザーが理解しやすくなります。また、パンくずリスト（今見ているページが、ウェブサイト全体のどこにあるかを示すもの）を設置するのも効果的です。

スマートフォン向けには、ハンバーガーメニュー（3本線のアイコンで表されるメニュー）を使うことが多いですが、重要な項目は常に表示させておく工夫も必要です。

まとめ：カルーセルに頼らない、使いやすいウェブサイト作りを

今回は、ウェブサイトのデザインを改善したい方に向けて、

• カルーセルを使うことで生じるユーザー体験の低下
• 実測データが示すクリック率の低さと、A/Bテストの結果
• 効果的な代替手法と、逆にカルーセルが向いている場面

上記について、ウェブデザイナーとしての経験を交えながらお話してきました。

カルーセルは一見華やかに見えますが、実際にはユーザーの閲覧を妨げる要因となっています。多くのデータが示すように、カルーセルの自動切り替えはユーザーにストレスを与え、重要な情報の見落としを招くことがあるでしょう。

これまでカルーセルを活用してきた方も、その選択は当時のトレンドに従った合理的な判断だったはずです。ただし、現代のウェブ制作では、ユーザー第一の考え方がより重要視されるようになってきました。

まずは自社のウェブサイトで使用しているカルーセルの効果を分析してみましょう。その上で、静止画やシンプルなレイアウトなど、より効果的な代替案を検討してみてはいかがでしょうか。

「ウェブサイトの改善を考えているけれど、何から手をつけていいかわからない」

そんなお悩みをお持ちの方は、ぜひ一度、ウェブ制作の専門家である合同会社謙虚の「KCW」にご相談ください。お客様のウェブサイトを丁寧に分析し、最適な改善プランをご提案いたします。

ユーザーにとって使いやすく、ビジネスの成果につながるウェブサイト作りを、私たちと一緒に目指してみませんか？