MENU

カルーセルとは

目次

カルーセルとは

英語で書くと「carousel」、意味は「回転木馬」になります。スライドショーやフェードで表示させる要素です。画像、動画など訴求したいコンテンツを複数表示できるので表示領域の節約にもなります。

また、言葉の役割として「スライドショー」「スライダー」は別の意味のように捉えられている向きもありますが、現在ではほとんど同じ意味合いで使われています。

slider_image1
slider_image2
slider_image3

カルーセルのメリット

カルーセルにより複数のコンテンツをファーストビューで表示させることには、ユーザーが一度のアクセスで複数の情報に触れることができるというメリットがあります。

PC画面で見るカルーセルは、多くのWebサイトではファーストビューにあたるホームページの上部に配置され、サイト自体の紹介やキャンペーンのバナーのような扱いになっています。

反対にスマホやタブレットのWebアプリケーションでは、カルーセルは「広告」の役割を持っていることも多く、商品などのリストが横に連なって表示されています。

Webデザインの観点からは外れますが、現在では、LINEのテンプレートにもカルーセルを使うことができるようです。ボタンを沢山設置でき、セミナーの申し込みや会社情報のメニュー表示に使われます。

カルーセルのデメリット

Webサイトを隅から隅まで見るユーザーはほとんど居ないように、カルーセルで表示される全てのコンテンツを見てくれるユーザーもほとんど居ません。
表示速度の問題もありますが、ユーザーに伝えたいコンテンツがいくつもあるからといってユーザーはそれを複数とは捉えず、一枚の画像のように捉えます。

また、カルーセルの存在に気づかないくらいすぐにスクロールしてしまうユーザーも多いので、ファーストビューに長く留まらないため、訴求したいコンテンツを見逃す可能性もあります。

カルーセルの真実

2013年発表の内容ですが、ノートルダム大学のWeb開発者であるErik Runyon氏のレポートによれば、「サイト訪問者の1%のみがカルーセルをクリックし、その中でも89.1%前後は1枚目をクリックするが、2枚目以降はさらにその半分以下しかクリックしない」というような結果が出ています。

Carousel Interaction Stats – June 2013 Update
https://erikrunyon.com/2013/07/carousel-interaction-stats/

ある意味、衝撃的な内容ですが、実体験に照らし合わせるとそこまで差異は感じないのではないでしょうか。また、この報告内容を鑑みても、カルーセルに全幅の信頼をおくべきではないことは明白です。

それよりも、このWebサイトで訴求したいコンテンツを一つに絞り、そのデザインとSEOに力を注ぐべきでしょう。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

肩書:Webプログラマー兼Webライター
名前:ゆいちゃん
経歴:ライド株式会社ではコーポレートエンジニアとしてWebサイトの開発・保守・運用を行う。
   ホテルマン、総合商社で勤務していた経験から顧客との対話は大切にしている。
   IT系と育児系の情報収集が得意。
保有資格:ITパスポート
使用言語:HTML/CSS, PHP
好きな言葉:Done is better than perfect.

目次