カルーセルはメインビジュアルやバナーエリア、関連情報などでよく活用されている表示方法です。
スマートフォンでの画面設計が重視されるようになってからカルーセルを見かけるようになり、現在では省スペースで多くの情報を伝える手法としてすっかり定着した印象です。
本記事では便利なカルーセルのメリットとデメリットをご紹介しながら、どのような場面で活用すると効果的なのか考えていきます。
カルーセルとは、回転台、回転木馬、回転コンベア、回転棚などの意味を持つ英単語のことです。
Webページにおいては、複数の画像などのコンテンツを左右に移動して切り替えられる領域を指します。
メリーゴーラウンドのように回転する動きからカルーセルと呼ばれています。
コンテンツを切り替えられる手法は「カルーセル」のほか「スライドショー」や「スライダー」と呼ばれることもあります。
それぞれの言葉の意味を調べると以下のように記載があります。
カルーセルとは、回転台、回転木馬、回転コンベア、回転棚などの意味を持つ英単語。Webページなどに設けられる画像などの表示領域で、内容を左右に移動して切り替えられるものをこのように呼ぶ。
スライドショーとは、一連の画像や文書、図表などを次々に切り替えて表示すること。
スライダーとは、滑動部、擦り板、滑る物、スライドする物、という意味の英単語。ITの分野では、線分上でつまみを移動させてその位置により値や状態を指し示す器具や入力要素をスライダーということが多い。
引用元：IT用語辞典 e-Words
言葉の意味を比較すると、カルーセルには「回転」で元の位置に戻ってループする意味合いが込められています。ただし、カルーセルもスライドショー・スライダーも「切り替え」や「移動」といった根底の動きは共通しており、現場では大差なく使われていると予想されます。実際、筆者の周りでもカルーセルと言ったりスライダーと言ったり、明確な使い分けはなく混在している印象です。
使い分けるとすれば、ループするものは「カルーセル」、ループしないものは「スライドショー」や「スライダー」と基本的に理解しておきながら、実用場面でどちらを使った方が社内で伝わりやすいか、お客様に伝わりやすいか、などその時の状況で判断するのが良いのではないでしょうか。
カルーセルはよく活用される便利な手法です。しかし、カルーセルにはメリットばかりではなく、使う場面を誤ると効果がかえってマイナスになるデメリットもあります。
メリットもデメリットも理解したうえでカルーセルを使うべきか判断してください。
カルーセルは高さが固定された中で左右にスライドすることで複数の情報を提示できます。
そのため、例えばメインビジュアルでカルーセルを取り入れると、Webサイトの中で最も訴求力のあるエリアで複数の情報をアピールすることができます。
また、メインビジュアル以外のエリアでも高さを抑えながら多くの情報を掲載することができます。省スペース化は縦に長くなりがちなスマートフォンサイトで特に効果を発揮します。
限られたスペースに多くの情報を掲載できるということは、全体の縦スクロール量を抑えることに繋がります。（縦スクロールサイトの場合）
すべての情報を羅列して掲載するとボリュームが出て縦スクロール量が増えますが、カルーセルであれば興味のあるユーザーだけがその場に留まって横スクロールをするので、全体的な縦スクロール量としては抑えられることになります。
縦に長いページを最下部までスクロールすることはユーザーにストレスがかかるため、縦スクロール量を抑えることは結果的にユーザーの負荷軽減に繋がります。
同じサイズのエリアを使う場合に、例えばエリアを3分割して3つのバナーを全表示すると、当然ながら1つあたりのサイズが小さくなります。
カルーセルにするとエリア全体を使って1つのバナーを大々的にアピールすることができます。
つまり、カルーセルの方が1つあたりの情報の訴求力を高めることができます。
ブランドストーリーや漫画などをあえてエリアを定めて紙芝居のような見せ方をすることで、ストーリーがあるものの続きを見たくなる心理に訴えかけ、期待感やワクワク感を高めることができます。
例えば小説を紹介するサイトなど、Webサイト上で本のページをめくるような、アナログな感覚をユーザーに体験させることも効果的かもしれません。
ユーザーがカルーセルの箇所で長時間留まるとは限りません。
たとえ自動でスライドが切り替わるとしても、ユーザーは2枚目以降の存在に気づかないか、気づいてもわざわざ2枚目以降を待ったりクリックしたりしない場合がほとんどです。
これは、カルーセルの問題点を指摘した記事でよく取り上げられている、カルーセルのクリック率に関する調査結果からもわかります。
Erik Runyon氏の調査によると、1枚目の画像のクリック率がWebサイト訪問者の1％程度。2枚目の画像のクリック率がその1％のうちの20％と言われています。
引用元：Carousel Interaction Stats – June 2013 Update | Erik Runyon
上記は古いデータではありますが、ユーザーが「スライドになっているもの＝大した情報ではない」というイメージを持っている可能性が考えられます。
すべてのスライドをユーザーに見てもらえるという想定は、作り手の都合の良い幻想でしかないようです。
Webサイトの表示速度が遅くなる原因として「サイト内のコンテンツが重い」「外部ファイルの読み込み数が多い」「JavaScriptの多用」がよく挙げられます。
カルーセルでは1エリアで表示する画像サイズが大きくなる＝重くなる傾向にあります。そして、画面の外に多数の画像などの外部ファイルが隠れています。さらに、それらのファイルをJavaScriptで切り替えるとなると、表示速度に影響が出ます。
表示速度が遅いとユーザーがストレスに感じたり、検索エンジンからのWebサイトの評価が下がったり、ユーザビリティ的にもSEO的にも悪い影響が出る可能性があります。
自動でスライドが切り替わる設定をしていると、ユーザーが内容を理解している途中で次のスライドに移ってしまう場面が考えられます。その場合は手動で1つ前に戻して見ることになります。
自動でスライドが切り替わることでユーザーに次のスライドに気づかせるメリットがありますが、ユーザーの閲覧ペースを乱しストレスを与える可能性もあります。
カルーセルの自動で切り替わる動きや矢印などの操作面の方に注意が向いてしまい、肝心な情報にユーザーが目を留められない、情報の理解に集中できず内容が頭に入らないなど、情報が伝わりきらない可能性があります。
これまで挙げたデメリットを踏まえ、効果がマイナスになっている可能性があるカルーセルのNGな使い方を考えてみます。
1枚目の企業メッセージ（キャッチコピー）はユーザーに伝えることができますが、2枚目以降のメッセージはたまたま見たユーザー、気づいたユーザーにしか伝わりません。
ユーザーによっては伝えたいメッセージの一部分しか伝えられないことになります。つまり、せっかくユーザーに刺さる効果的なメッセージを考案したとしても、その効果はカルーセルにすることでマイナスになっていることになります。
同じカルーセル内にイベントやキャンペーン、新商品など多種の情報を表示すると、見えていない次のスライドにどんな内容が掲載されているかユーザーは想像することができません。
中身がわからない表示の仕方は、次のスライドにユーザーの興味を惹くことができず気に留めてもらえないかもしれません。
メインビジュアルに企業メッセージのスライドと、突発的なキャンペーンや新商品など種類の違うスライドを混在して表示しているWebサイトもよく見かけますが、同様です。
せっかくPRのための画像作成にリソースや費用をかけたのに、ユーザーに見られない＝存在価値を失い、その効果はカルーセルにすることでマイナスになっていることになります。
手動で操作できるカルーセルの場合、スマートフォンにおいてのカルーセルは、縦と横のスクロール操作（スワイプ操作）の切り替えを容易に、直感的に行うことができます。
一方でPCにおいてのカルーセルは、矢印にカーソルを合わせて1つ1つクリックして次へと送るため手間がかかります。
PCでの操作はスマートフォンと比較してユーザーに負荷がかかるため、カルーセルにすることでかえって使い勝手が悪くなる場面が考えられます。
スマートフォン以上に、PCでのカルーセルの多用には注意した方が良いでしょう。
ニュースサイトやECサイトなど、カテゴリメニューをカルーセルにしているWebサイトを見かけます。
メニューはWebサイト全体の案内役を担っており、キャンペーン情報や新商品情報よりも重要度が高い要素です。その重要なメニューがカルーセル表示になっていることでメニューの続きを見落とされてしまうと、Webサイトにとっては致命的です。
メインビジュアルやキャンペーン情報などのカルーセルには矢印を表示して次のスライドがあることをわかりやすくしている工夫を見ますが、メニューに矢印を付けてわかりやすくしているパターンはあまり目にしません。
そのため、メニュー名がどんな環境でも必ず中途半端なところで切れるように表示するなど、他の工夫を慎重に検討する必要があります。
メニューが見落とされる可能性を理解し、他の手法と比較したうえでカルーセルが最適と判断されるのであれば問題はありません。しかし、安易に大手のWebサイトを真似してメニューにカルーセルを取り入れるのは避けるべきです。かえってメニューが本来の役割を果たせなくなるかもしれません。
メニュー数が多い場合は、例えば、一部のメニューのみ表示＋最後尾に「その他のメニュー」として開閉（アコーディオン）メニューを置く、メニュー数を絞る、など別の方法も検討してみることをおすすめします。
秀逸なデザインのまとめサイトにも取り上げられている他社様のサイトを参考に挙げながら、カルーセルの効果的な使い方を見ていきます。
※現状のデザイン及びリンク先は変更されている場合がございます
カルーセルよりもスライドショーという表現の方がイメージに近いかもしれませんが、写真だけをふわっと切り替えたり、一方向にエンドレスで流したり、写真部分だけが変化する使い方が効果的です。
写真は数が多くても、短い時間で切り替わっても、文字とは違って理解に時間がかかりません。
企業メッセージは固定して背景写真だけ切り替えたり、写真だけが流れるエリアを用意したりすることで、視覚的・直感的に多くの情報を伝えることができます。
株式会社ローカル
例えば商品詳細ページにおいて、商品の全体写真、アップ写真、使用シーンなど、商品を多角的にアピールするための商品写真の紹介にはカルーセルが効果的です。
商品詳細ページにはスペックや注意事項、関連商品など、一般的に多くの情報が掲載されています。その中で写真1枚1枚をすべて羅列するとスペースをとってしまいます。
そこで、別アングルの写真をカルーセルにすることでスペースを最低限に抑えながらも、商品に興味を持っているユーザーには2枚め以降の写真を見てもらえることも期待できます。
例えば、「お知らせ」というタイトルの下にイベントやキャンペーン、新商品など幅広いバナーがカルーセルで表示されていると、次にどんなバナーが出てくるか想像できないためユーザーの興味を惹くことができません。
一方で、「お得なキャンペーン」というタイトルの下に複数のキャンペーンバナーがカルーセルで表示されているとどうでしょうか。「ここにはキャンペーン情報がまとめて載っている」と想像しやすく、キャンペーン情報を観たいユーザーの目を留める効果が期待できます。
例えば、商品ページや記事ページ、ランキングページ、導入事例ページ、実績ページなどの下層ページから引用した情報をTOPページに数件表示する場合にカルーセルが活用されています。
他にも商品ページに関連商品やおすすめ商品、新着商品などを数件表示する際にもよく目にします。
まずは一覧ページへ遷移させることを狙っている場合も多く、引用情報はページ内の役割としてはサブ情報です。そのため、スペースを取ることなく一定の件数を表示することができるという点でカルーセルが効果的です。
使用方法や設定方法などステップのある説明の際にもカルーセルを活用できます。
限られたスペース内でも画面キャプチャを大きく用いて説明したい場合など、1ステップ1スライドを使うことで大きく見やすくユーザーに伝えることができます。
反対に、ステップの全体感（流れ）を伝えたい場合にはカルーセルではなく、すべてのステップが1つの画面内に表示されている方が俯瞰して情報を理解することができます。
参照元：AIRPOST-ご利用ガイド
また、Instagram、FacebookなどのSNSではカルーセル形式の漫画広告の成果が高く出ているようです。
ストーリー性のあるものは続きが気になり見たくなるという人間心理に巧みに働きかけられるため効果的と考えられます。
限られたスペースで漫画によるPRやブランドストーリーを伝える場合などにもカルーセルを活用できそうです。
企業メッセージなのか、キャンペーン情報なのか、内容や掲載する場所、ターゲットなどによってちょうど良い枚数を検討します。
例えば、企業メッセージを5枚も6枚も見せられてもユーザーの興味は続かないでしょう。
一方で、関連商品や記事などは掲載数が多くても興味を持ったユーザーはある程度閲覧すると予想されます。ただし、最初に興味を持ったスライドになかなか戻れないとストレスになります。限られたカルーセルエリアで永遠にスクロールさせるよりも、一定数掲載した後は「もっと見る」や「一覧を見る」などで別ページに遷移させた方がユーザビリティが良いでしょう。
自動で切り替わる場合はスライドの表示時間に留意します。
短い方が次のスライドに気付きやすいですが、1枚のスライドに要素が多い場合は文字を読んでいる途中で次のスライドに移動してしまいストレスになる場合があります。
そもそも自動にすべきなのか、1枚あたりどれくらいの時間であれば文字が読みきれそうか、表示時間のバランスを考えます。
ちなみに、人間が認識できるのは1秒4文字と言われています。文字サイズや可読性などにも左右されると思いますが、表示時間を考える際の基準として参考にしてみてください。
スライドを自動で切り替わる設定をする場合は、ユーザーが内容を理解している途中で切り替わることがないように、一時停止や停止ができるように設定しておくとユーザーのストレスを軽減できます。
これまでご紹介したように、カルーセルは限られたスペースで多くの情報を伝えることができるとても便利な表示方法です。
使い方を誤ると効果がマイナスになってしまう可能性を理解したうえで、カルーセルを効果的に使えそうな場面があればぜひ活用してみてください。
internet archiveというサイトをご存知ですか？これは、時系列で過去のサイトの状態を見ることができる便利なサイトです。 普段何気…
ホームページやブログを運営するにあたり、自社の目的に合ったレンタルサーバーの選び方がわからずお悩みではないでしょうか？選択肢がたくさんありす…
さまざまなビジネスでオンライン化が加速していく中、物販を行っている方もインターンネット上での販売を併用するのが必須となってきています。また、…
新しく企業のサイトを作ることになったけど、何からどうやって進めれば良いかわからない。どういうサイトを作ればお問い合わせを増やせるだろうか・・…
こんにちは、デジタルマーケティング研究所です。 この記事にたどり着いた方は、 「パスを理解したいけど、なんだかよくわからなくなってきた」 「…
<iframe>とはHTMLタグの種類の1つで、Webページ内に矩形の領域を作り、指定したURLを読み込んで表示するHTMLタグ…
あなたのサイトは、集客できていますか？各々の課題に沿ったSEOとユーザーに響くデザインを両立したサイト制作で、意識の高いターゲットをフロントへ呼び込みます。
Webマーケティングに関わる施策全般をワンストップで
ご提供します。
お気軽にご相談ください。
Webマーケティング最新ニュースのレポートや無料セミナーの先行案内が届く、お得なメルマガ配信中！
検索順位で1位まで上げるためのSEOポイント8つ
E-E-A-Tとは？ SEOにおける重要性と評価の高め方を解説
成功確率アップ！BtoBのコンテンツマーケティング施策とは
YMYLとは？該当するジャンルとSEOにおける対策のポイント8つ
SEO内部施策とは？重要な項目16選【セルフチェックリストつき】