WEBマーケティングのトータルサポートならディーエムソリューションズ株式会社
0120-934-226受付時間 平日9:00~18:00

カルーセルとは?NGな使い方&効果的な使い方をご紹介

2022.06.23 Web制作
カルーセルとは?NGな使い方&効果的な使い方をご紹介
このエントリーをはてなブックマークに追加

カルーセルはメインビジュアルやバナーエリア、関連情報などでよく活用されている表示方法です。
スマートフォンでの画面設計が重視されるようになってからカルーセルを見かけるようになり、現在では省スペースで多くの情報を伝える手法としてすっかり定着した印象です。
本記事では便利なカルーセルのメリットとデメリットをご紹介しながら、どのような場面で活用すると効果的なのか考えていきます。

カルーセルとは

カルーセルの意味

カルーセルとは、回転台、回転木馬、回転コンベア、回転棚などの意味を持つ英単語のことです。
Webページにおいては、複数の画像などのコンテンツを左右に移動して切り替えられる領域を指します。
メリーゴーラウンドのように回転する動きからカルーセルと呼ばれています。

カルーセルの意味

カルーセルとスライドショー・スライダーの違い

コンテンツを切り替えられる手法は「カルーセル」のほか「スライドショー」や「スライダー」と呼ばれることもあります。
それぞれの言葉の意味を調べると以下のように記載があります。

カルーセル【carousel】

カルーセルとは、回転台、回転木馬、回転コンベア、回転棚などの意味を持つ英単語。Webページなどに設けられる画像などの表示領域で、内容を左右に移動して切り替えられるものをこのように呼ぶ。

スライドショー【slideshow】

スライドショーとは、一連の画像や文書、図表などを次々に切り替えて表示すること。

スライダー【slider】

スライダーとは、滑動部、擦り板、滑る物、スライドする物、という意味の英単語。ITの分野では、線分上でつまみを移動させてその位置により値や状態を指し示す器具や入力要素をスライダーということが多い。

引用元:IT用語辞典 e-Words

カルーセルとスライドショー・スライダーは同義

言葉の意味を比較すると、カルーセルには「回転」で元の位置に戻ってループする意味合いが込められています。ただし、カルーセルもスライドショー・スライダーも「切り替え」や「移動」といった根底の動きは共通しており、現場では大差なく使われていると予想されます。実際、筆者の周りでもカルーセルと言ったりスライダーと言ったり、明確な使い分けはなく混在している印象です。
使い分けるとすれば、ループするものは「カルーセル」、ループしないものは「スライドショー」や「スライダー」と基本的に理解しておきながら、実用場面でどちらを使った方が社内で伝わりやすいか、お客様に伝わりやすいか、などその時の状況で判断するのが良いのではないでしょうか。

カルーセルのメリット・デメリット

カルーセルはよく活用される便利な手法です。しかし、カルーセルにはメリットばかりではなく、使う場面を誤ると効果がかえってマイナスになるデメリットもあります。
メリットもデメリットも理解したうえでカルーセルを使うべきか判断してください。

カルーセルのメリット

限られたスペースに多くの情報を掲載することができる

カルーセルは高さが固定された中で左右にスライドすることで複数の情報を提示できます。
そのため、例えばメインビジュアルでカルーセルを取り入れると、Webサイトの中で最も訴求力のあるエリアで複数の情報をアピールすることができます。
また、メインビジュアル以外のエリアでも高さを抑えながら多くの情報を掲載することができます。省スペース化は縦に長くなりがちなスマートフォンサイトで特に効果を発揮します。

ユーザーのスクロール負荷を軽減できる

限られたスペースに多くの情報を掲載できるということは、全体の縦スクロール量を抑えることに繋がります。(縦スクロールサイトの場合)
すべての情報を羅列して掲載するとボリュームが出て縦スクロール量が増えますが、カルーセルであれば興味のあるユーザーだけがその場に留まって横スクロールをするので、全体的な縦スクロール量としては抑えられることになります。
縦に長いページを最下部までスクロールすることはユーザーにストレスがかかるため、縦スクロール量を抑えることは結果的にユーザーの負荷軽減に繋がります。

1つ1つの情報をダイナミックにアピールすることができる

同じサイズのエリアを使う場合に、例えばエリアを3分割して3つのバナーを全表示すると、当然ながら1つあたりのサイズが小さくなります。
カルーセルにするとエリア全体を使って1つのバナーを大々的にアピールすることができます。
つまり、カルーセルの方が1つあたりの情報の訴求力を高めることができます。

あえて次の情報が隠れていることにより期待感、ワクワク感を高める

ブランドストーリーや漫画などをあえてエリアを定めて紙芝居のような見せ方をすることで、ストーリーがあるものの続きを見たくなる心理に訴えかけ、期待感やワクワク感を高めることができます。
例えば小説を紹介するサイトなど、Webサイト上で本のページをめくるような、アナログな感覚をユーザーに体験させることも効果的かもしれません。

カルーセルのデメリット

2枚め以降の情報はユーザーに見られない

ユーザーがカルーセルの箇所で長時間留まるとは限りません。
たとえ自動でスライドが切り替わるとしても、ユーザーは2枚目以降の存在に気づかないか、気づいてもわざわざ2枚目以降を待ったりクリックしたりしない場合がほとんどです。

これは、カルーセルの問題点を指摘した記事でよく取り上げられている、カルーセルのクリック率に関する調査結果からもわかります。
Erik Runyon氏の調査によると、1枚目の画像のクリック率がWebサイト訪問者の1%程度。2枚目の画像のクリック率がその1%のうちの20%と言われています。

カルーセルのクリック率に関する調査結果

引用元:Carousel Interaction Stats – June 2013 Update | Erik Runyon

上記は古いデータではありますが、ユーザーが「スライドになっているもの=大した情報ではない」というイメージを持っている可能性が考えられます。
すべてのスライドをユーザーに見てもらえるという想定は、作り手の都合の良い幻想でしかないようです。

Webサイトの表示速度が遅くなる

Webサイトの表示速度が遅くなる原因として「サイト内のコンテンツが重い」「外部ファイルの読み込み数が多い」「JavaScriptの多用」がよく挙げられます。
カルーセルでは1エリアで表示する画像サイズが大きくなる=重くなる傾向にあります。そして、画面の外に多数の画像などの外部ファイルが隠れています。さらに、それらのファイルをJavaScriptで切り替えるとなると、表示速度に影響が出ます。
表示速度が遅いとユーザーがストレスに感じたり、検索エンジンからのWebサイトの評価が下がったり、ユーザビリティ的にもSEO的にも悪い影響が出る可能性があります。

ユーザーのペースを乱す

自動でスライドが切り替わる設定をしていると、ユーザーが内容を理解している途中で次のスライドに移ってしまう場面が考えられます。その場合は手動で1つ前に戻して見ることになります。
自動でスライドが切り替わることでユーザーに次のスライドに気づかせるメリットがありますが、ユーザーの閲覧ペースを乱しストレスを与える可能性もあります。

カルーセルの動きに気を取られて1つ1つの情報の注目度や内容の理解度が低下する

カルーセルの自動で切り替わる動きや矢印などの操作面の方に注意が向いてしまい、肝心な情報にユーザーが目を留められない、情報の理解に集中できず内容が頭に入らないなど、情報が伝わりきらない可能性があります。

カルーセルのNGな使い方

これまで挙げたデメリットを踏まえ、効果がマイナスになっている可能性があるカルーセルのNGな使い方を考えてみます。

×メインビジュアルでスライドごとに別々の企業メッセージを表示

1枚目の企業メッセージ(キャッチコピー)はユーザーに伝えることができますが、2枚目以降のメッセージはたまたま見たユーザー、気づいたユーザーにしか伝わりません。
ユーザーによっては伝えたいメッセージの一部分しか伝えられないことになります。つまり、せっかくユーザーに刺さる効果的なメッセージを考案したとしても、その効果はカルーセルにすることでマイナスになっていることになります。

×イベントやキャンペーンなど多種の情報を同エリアにカルーセル表示

同じカルーセル内にイベントやキャンペーン、新商品など多種の情報を表示すると、見えていない次のスライドにどんな内容が掲載されているかユーザーは想像することができません。
中身がわからない表示の仕方は、次のスライドにユーザーの興味を惹くことができず気に留めてもらえないかもしれません。
メインビジュアルに企業メッセージのスライドと、突発的なキャンペーンや新商品など種類の違うスライドを混在して表示しているWebサイトもよく見かけますが、同様です。
せっかくPRのための画像作成にリソースや費用をかけたのに、ユーザーに見られない=存在価値を失い、その効果はカルーセルにすることでマイナスになっていることになります。

×PCでのカルーセル多用

手動で操作できるカルーセルの場合、スマートフォンにおいてのカルーセルは、縦と横のスクロール操作(スワイプ操作)の切り替えを容易に、直感的に行うことができます。
一方でPCにおいてのカルーセルは、矢印にカーソルを合わせて1つ1つクリックして次へと送るため手間がかかります。
PCでの操作はスマートフォンと比較してユーザーに負荷がかかるため、カルーセルにすることでかえって使い勝手が悪くなる場面が考えられます。
スマートフォン以上に、PCでのカルーセルの多用には注意した方が良いでしょう。

×メニューをカルーセル表示

ニュースサイトやECサイトなど、カテゴリメニューをカルーセルにしているWebサイトを見かけます。
メニューはWebサイト全体の案内役を担っており、キャンペーン情報や新商品情報よりも重要度が高い要素です。その重要なメニューがカルーセル表示になっていることでメニューの続きを見落とされてしまうと、Webサイトにとっては致命的です。
メインビジュアルやキャンペーン情報などのカルーセルには矢印を表示して次のスライドがあることをわかりやすくしている工夫を見ますが、メニューに矢印を付けてわかりやすくしているパターンはあまり目にしません。
そのため、メニュー名がどんな環境でも必ず中途半端なところで切れるように表示するなど、他の工夫を慎重に検討する必要があります。
メニューが見落とされる可能性を理解し、他の手法と比較したうえでカルーセルが最適と判断されるのであれば問題はありません。しかし、安易に大手のWebサイトを真似してメニューにカルーセルを取り入れるのは避けるべきです。かえってメニューが本来の役割を果たせなくなるかもしれません。
メニュー数が多い場合は、例えば、一部のメニューのみ表示+最後尾に「その他のメニュー」として開閉(アコーディオン)メニューを置く、メニュー数を絞る、など別の方法も検討してみることをおすすめします。

カルーセルの効果的な使い方

秀逸なデザインのまとめサイトにも取り上げられている他社様のサイトを参考に挙げながら、カルーセルの効果的な使い方を見ていきます。
※現状のデザイン及びリンク先は変更されている場合がございます

○写真だけカルーセル

カルーセルよりもスライドショーという表現の方がイメージに近いかもしれませんが、写真だけをふわっと切り替えたり、一方向にエンドレスで流したり、写真部分だけが変化する使い方が効果的です。
写真は数が多くても、短い時間で切り替わっても、文字とは違って理解に時間がかかりません。
企業メッセージは固定して背景写真だけ切り替えたり、写真だけが流れるエリアを用意したりすることで、視覚的・直感的に多くの情報を伝えることができます。

株式会社ローカル

株式会社ローカル
株式会社ローカル

参照元:https://lo-cal.co.jp/

○様々なアングルやシーンで撮影した商品写真をカルーセル

例えば商品詳細ページにおいて、商品の全体写真、アップ写真、使用シーンなど、商品を多角的にアピールするための商品写真の紹介にはカルーセルが効果的です。
商品詳細ページにはスペックや注意事項、関連商品など、一般的に多くの情報が掲載されています。その中で写真1枚1枚をすべて羅列するとスペースをとってしまいます。
そこで、別アングルの写真をカルーセルにすることでスペースを最低限に抑えながらも、商品に興味を持っているユーザーには2枚め以降の写真を見てもらえることも期待できます。

MOCK things by hand

MOCK things by hand

参照元:https://mock-jpn.com/

○タイトル+統一された内容をカルーセル

例えば、「お知らせ」というタイトルの下にイベントやキャンペーン、新商品など幅広いバナーがカルーセルで表示されていると、次にどんなバナーが出てくるか想像できないためユーザーの興味を惹くことができません。
一方で、「お得なキャンペーン」というタイトルの下に複数のキャンペーンバナーがカルーセルで表示されているとどうでしょうか。「ここにはキャンペーン情報がまとめて載っている」と想像しやすく、キャンペーン情報を観たいユーザーの目を留める効果が期待できます。

LINEMO

LINEMO

参照元:https://www.linemo.jp/

○他ページから引用した情報をカルーセル

例えば、商品ページや記事ページ、ランキングページ、導入事例ページ、実績ページなどの下層ページから引用した情報をTOPページに数件表示する場合にカルーセルが活用されています。
他にも商品ページに関連商品やおすすめ商品、新着商品などを数件表示する際にもよく目にします。
まずは一覧ページへ遷移させることを狙っている場合も多く、引用情報はページ内の役割としてはサブ情報です。そのため、スペースを取ることなく一定の件数を表示することができるという点でカルーセルが効果的です。

Chatwork

Chatwork

参照元:https://go.chatwork.com/ja/

○ステップやストーリーのあるもの

使用方法や設定方法などステップのある説明の際にもカルーセルを活用できます。
限られたスペース内でも画面キャプチャを大きく用いて説明したい場合など、1ステップ1スライドを使うことで大きく見やすくユーザーに伝えることができます。
反対に、ステップの全体感(流れ)を伝えたい場合にはカルーセルではなく、すべてのステップが1つの画面内に表示されている方が俯瞰して情報を理解することができます。

AIRPOST

AIRPOST

参照元:AIRPOST-ご利用ガイド

また、Instagram、FacebookなどのSNSではカルーセル形式の漫画広告の成果が高く出ているようです。
ストーリー性のあるものは続きが気になり見たくなるという人間心理に巧みに働きかけられるため効果的と考えられます。
限られたスペースで漫画によるPRやブランドストーリーを伝える場合などにもカルーセルを活用できそうです。

カルーセルを採用する場合のポイント

カルーセルであることがわかるような工夫

  • 前や次への矢印などナビゲーションをつける
  • 前や次への矢印などナビゲーションをつける

  • インジケーター(現在何枚目のスライドなのかを表示するもの)やサムネイルをつける
  • インジケーター(現在何枚目のスライドなのかを表示するもの)やサムネイルをつける

  • わざと次のスライドが途中で切れるように配置する(特にスマホで効果的。視界が限られている中で切れている画像があったらすぐに目に付くため。)
  • わざと次のスライドが途中で切れるように配置する(特にスマホで効果的。視界が限られている中で切れている画像があったらすぐに目に付くため。)

枚数を絞る

企業メッセージなのか、キャンペーン情報なのか、内容や掲載する場所、ターゲットなどによってちょうど良い枚数を検討します。
例えば、企業メッセージを5枚も6枚も見せられてもユーザーの興味は続かないでしょう。
一方で、関連商品や記事などは掲載数が多くても興味を持ったユーザーはある程度閲覧すると予想されます。ただし、最初に興味を持ったスライドになかなか戻れないとストレスになります。限られたカルーセルエリアで永遠にスクロールさせるよりも、一定数掲載した後は「もっと見る」や「一覧を見る」などで別ページに遷移させた方がユーザビリティが良いでしょう。

最適なスライドの表示時間を検討する

自動で切り替わる場合はスライドの表示時間に留意します。
短い方が次のスライドに気付きやすいですが、1枚のスライドに要素が多い場合は文字を読んでいる途中で次のスライドに移動してしまいストレスになる場合があります。
そもそも自動にすべきなのか、1枚あたりどれくらいの時間であれば文字が読みきれそうか、表示時間のバランスを考えます。
ちなみに、人間が認識できるのは1秒4文字と言われています。文字サイズや可読性などにも左右されると思いますが、表示時間を考える際の基準として参考にしてみてください。

ユーザーが制御できるようにする

スライドを自動で切り替わる設定をする場合は、ユーザーが内容を理解している途中で切り替わることがないように、一時停止や停止ができるように設定しておくとユーザーのストレスを軽減できます。

おわりに

これまでご紹介したように、カルーセルは限られたスペースで多くの情報を伝えることができるとても便利な表示方法です。
使い方を誤ると効果がマイナスになってしまう可能性を理解したうえで、カルーセルを効果的に使えそうな場面があればぜひ活用してみてください。

 

このエントリーをはてなブックマークに追加
The following two tabs change content below.

digital-marketing

デジタルマーケティング研究所では、デジタルマーケティングの施策・広告・技術を、分析・実装・検証して、WEB担当者・マーケティング担当者の方の役立つ情報を発信していきます。
お役立ち資料ダウンロード
SNSでフォロー

問い合わせCTA

ウルロジ誘導CTA_900

セルマーケ

SEO×デザインでどの時代でも集客に強いサイトを制作します

あなたのサイトは、集客できていますか?各々の課題に沿ったSEOとユーザーに響くデザインを両立したサイト制作で、意識の高いターゲットをフロントへ呼び込みます。


Contactお問い合わせ

Webマーケティングに関わる施策全般をワンストップで
ご提供します。
お気軽にご相談ください。

関連資料ダウンロードはこちら
サービスのお問い合わせはこちら

Webマーケティング最新ニュースのレポートや無料セミナーの先行案内が届く、お得なメルマガ配信中!

Webマーケティング最新情報をお届けするDMSメールマガジン
東京営業所
東京都新宿区西新宿1丁目6-1 新宿エルタワー3階
電話番号 03-6374-1393 FAX番号 0422-57-2761
大阪営業所
大阪府大阪市北区堂島1丁目5-30 堂島プラザビル10F
電話番号 06-7176-3367 FAX番号 06-7176-3368
Copyright © 2022 DM SOLUTIONS Co.,Ltd. All rights reserved.