カルーセルデザインとは、Web上で画像やテキストなどのコンテンツをスライド表示させるWebデザインの一種で、スライダーやスライドショーと呼ばれることもあります。限られたスペースで、ユーザーがページをスクロールせずに、より多くの情報を確認できるのが大きな特徴です。

カルーセルデザインは多くの企業のWebサイトで活用されており、良質なWebサイトをつくるのに効果的な手法の一つだといえます。質の高いWebサイトにするためにも、カルーセルデザインとは何か、カルーセルデザインのメリットとデメリット、効果的な活用法について正しく理解することが大切です。ここでは、カルーセルデザインについて詳しく解説しますので、今後の業務に役立ててみてください。

▼目次

1．カルーセルデザインの概要
　1-1.カルーセルデザインとは
　1-2.カルーセルデザインの活用事例
2. カルーセルデザインを導入するメリット
　2-1. スペースを節約できる
　2-2. 興味を惹きつけやすい
　2-3. 情報を集約できる
3.カルーセルデザインを導入するデメリット
　3-1. コンテンツが見逃される可能性がある
　3-2.読み込み時間が増加する可能性がある
　3-3. SEOへ悪影響の可能性がある
4.カルーセルデザインを効果的に使うポイント
　4-1.カルーセルの枚数と順序に気をつける
　4-2.テキストを見やすくする
　4-3.インジゲーターを設置する
　4-4.手動でも動かせるようにする
5.カルーセルデザインを効果的に活用しよう

1．カルーセルデザインの概要

カルーセルデザインを有効に使うためにも、まずはカルーセルデザインの概要を理解しましょう。具体的にイメージできるよう、成功事例も併せて紹介します。

1-1.カルーセルデザインとは

カルーセルデザインとは、Web上で複数のコンテンツや情報をスライド方式で表示する手法のことです。カルーセル(carousel)はメリーゴーランドという意味があり、コンテンツがスライド式で回転するような様子から、カルーセルデザインと名づけられました。

カルーセルデザインの導入により、ユーザーの可視領域の情報量が増え、より効果的に情報を発信できるようになります。近頃は、文字と画像のそれぞれの情報を時間差で発信して、ユーザーに強く印象付けるような手法を取り入れるサイトも目にするようになりました。

1-2.カルーセルデザインの活用事例

カルーセルデザインは商品やサービスの紹介、イベント告知、ブランドストーリーの伝達などで活用することが多い手法です。複数の画像やテキストを一つのスペースに集約することで、商品やサービスの魅力を伝えやすくなり、ユーザーがさまざまな商品やサービスを容易に比較できるからです。

カルーセルデザインを自社サイトに取り入れて成功している事例をいくつか紹介します。大手通販サイトであるAmazonでは、売上アップに大きく貢献している｢レコメンド機能｣をカルーセルデザインが引き立てています。レコメンド機能とは個別商品の下に関連した商品画像を表示させる機能のことで、新たな購入に結びつける効果があります。

ストリーミングサービスを提供するNetflixのWebサイトでも、番組や映画のバナーが次々に切り替わるカルーセルデザインを導入しています。ユーザーが横スクロールで情報をチェックするようになり、より多くのコンテンツ視聴につなげているのです。

2. カルーセルデザインを導入するメリット

良質なサイトや大手企業のサイトで導入されているカルーセルデザインのメリットは、以下の3つです。

• スペースの節約
• ユーザーの興味を惹きつける
• 情報の集約

それぞれのメリットについて詳しく解説します。

2-1.スペースを節約できる

カルーセルデザインは狭い範囲でもユーザーに効果的に情報を伝えられるため、スペースを節約できます。高さが固定されて限られた量の画像やテキストしか掲載できないスペースでも、複数の画像やテキストを表示してユーザーに必要な情報を詳しく伝えられます。

Webサイトの中でも最も訴求力が高いエリアであるメインビジュアルで、多くの情報をアピールできるのです。特に情報が縦長になりがちなスマートフォンサイトで、カルーセルデザインは効果を発揮してくれます。

2-2.興味を惹きつけやすい

カルーセルデザインを活用してブランドストーリーや動画、マンガなどを取り入れることで、ユーザーの興味や関心を惹きつけやすくなります。ユーザーに情報を届けるためには、まずはユーザーに情報を見てもらうことが大切です。

ページの一部を動くようにしたり、書籍の紹介としてWeb上で本をめくるように見せたりと、さまざまな手法でユーザーの期待感やワクワク感を高められます。あえて次の情報を隠すような手法を取り入れることにより、情報の続きを見たくなるように導けるのです。

2-3.情報を集約できる

情報を集約できるため、ユーザーに多くの情報をコンパクトに伝えられます。ユーザーに情報を伝えるために多くの画像やテキストを掲載すると、ユーザーが何度もスクロールして情報をチェックすることになるでしょう。

ユーザーがスクロールする回数が増えるほどに、サービスや商品のアピールポイントが伝わりにくくなり、ユーザーに効果的なアピールができなくなるのです。カルーセルデザインを使うことで複数の画像やテキストを一つの場所でまとめて表示でき、サービスや商品の詳細、アピールポイントやストーリー性などを有効に伝えやすくなります。

3.カルーセルデザインを導入するデメリット

効果的な手法であるカルーセルデザインですが、導入によるデメリットもあります。カルーセルデザインを有効に活用するためにも、デメリットについて理解しておきましょう。

3-1.コンテンツが見逃される可能性がある

コンテンツをスライド表示させることから、コンテンツが見逃される可能性もあります。ユーザーがカルーセルデザインの箇所で長時間とどまるとは限らないからです。

Webサイトの種類にもよりますが、カルーセルデザインのクリック率を調べてみると、1枚目の画像のクリック率はWebサイト訪問者のわずか1%程度、良くても数%に止まるものが多く、2枚目以降は1枚目のクリック率よりも格段に下がります。（※）

1枚目の情報を目にしたとしても、2枚目以降の存在に気が付かない、もしくは2枚目以降の表示をチェックしないということが多いのです。

（※）Erik Runyon“Carousel Interaction Stats – June 2013 Update”

3-2.読み込み時間が増加する可能性がある

カルーセルデザインを導入することで、コンテンツの読み込み時間が増加する可能性があります。時間がかかるほど、ユーザーがサイトから離れる確率も高くなってしまいます。サイト内のコンテンツ量や、外部ファイルの読み込み数が多いこと、JavaScriptの多用がWebサイトの表示速度を遅くする主な原因です。

カルーセルデザインはエリア内で表示する画像が大きく、画面の外に多数の画像などの外部ファイルを含んでいるため、サイト自体が重くなりがちです。表示速度が遅くなるとユーザーがストレスを感じて、サイトの閲覧を中断することも出てくるでしょう。

3-3.SEOへ悪影響の可能性がある

カルーセルデザインを取り入れることでSEOに悪影響となる可能性があります。カルーセルデザイン内のコンテンツがJava Scriptで表示されている場合、サイト内の情報をチェックしている検索エンジンのクローラーが、正確にインデックス（データベースに含まれて検索されるようになること）できず、検索エンジンでの表示が低下する恐れがあるからです。

また、サイトが重くなって読み込みに時間がかかると、ユーザビリティが低いと判断されて検索エンジンからサイトが低評価を受けることも起こり得ます。

4.カルーセルデザインを効果的に使うポイント

カルーセルデザインのメリットとデメリットを踏まえたうえで、カルーセルデザインを効果的に使うための重要なポイントを解説します。

4-1.カルーセルの枚数と順序に気をつける

カルーセルデザインに取り入れる画像の枚数は3～5枚が妥当です。多くの情報を盛り込みたくなりますが、情報量が多すぎるとユーザーの興味が続かず見てもらえなくなるかもしれないからです。

また、ページが進むにつれてユーザーの興味が薄れてくる可能性があるため、優先順位の高いものから順番に掲載することをおすすめします。次の情報が気になるような構成にすることで、ユーザーの興味や関心を惹きつけましょう。

4-2.テキストを見やすくする

スライド表示されるテキストを見やすくする工夫をしましょう。タイトルやテキストは、さまざまな種類の画像と組み合わせて表示されることを想定し、ユーザーが読みやすいように、色やフォント、サイズを考えてテキストを設置します。

また、テキストの位置によって読みやすさも変わってくるため、適切な配置を考える必要もあります。

4-3.インジゲーターを設置する

カルーセルデザインでは一度に全ての情報が表示されません。そのため全部でページが何枚あるのか、何枚目を表示しているのかを示すインジゲーターを設置しましょう。

インジゲーターを設置することで、ユーザーに対してカルーセルデザインであることや、コンテンツの量を伝えられ、ユーザーにとって使いやすいサイトになるからです。

4-4.手動でも動かせるようにする

スライドは自動的に切り替わる設定がほとんどですが、手動でも動かせるようにしておくことをおすすめします。スライドの切り替わりを短時間に設定すると、カルーセルデザイン内の全ての情報に目を通してもらえなくなるからです。

表示時間が短いと情報をチェックしているうちに次のスライドに切り替わり、ユーザーのストレスになり得ます。ユーザーが内容をチェックしているうちに途中でスライドが切り替わらないように、一時停止や停止の設定をしておきましょう。

5.カルーセルデザインを効果的に活用しよう

ここまでWebサイトに導入されているカルーセルデザインについて解説しました。カルーセルデザインはWebサイト上でコンテンツをスライド表示させるWebデザインの一種です。

大手企業のサイトや良質なサイトでの導入実績も豊富で、実際に成功している事例も多くあります。ただし、カルーセルデザインにはデメリットもあり、有効に活用できなければWebサイトの質を低下させる原因にもなるため、注意が必要です。

カルーセルデザインを効果的に活用するためには、Webマーケティングとデジタル技術の知識が不可欠です。ココエでは「デジマ事例集」やココエのブログ、noteでデジタルマーケティングに役立つ事例や情報を発信しています。ぜひ、活用してみてください。

株式会社ココエについて1分でわかる資料請求はこちら。