こんにちは！会社員クリエイターのこばたです！
STUDIOのアップデートにより基本機能として実装された、カルーセル自動再生機能の使い方を解説していきます。
そもそもカルーセルとは何か？カルーセルを使うメリットは？といった方向けに前提知識から解説していきますので、ご安心ください。
STUDIOでWebサイト制作をするうえで、お客様からの需要が多い機能にはなりますので、ぜひ覚えて使いこなしてみてください。
前提知識が不要な方は、実装方法まで読み飛ばしていただくと良いかと思います。
カルーセルとは？
カルーセルとは、回転台、回転木馬、回転コンベアなどの意味を持つ英単語で、主にメリーゴーランドを指します。
このような言葉の意味から、Web上では複数の画像やコンテンツをスライド式で表示する手法のことです。
スライド式でくるくると回る様子が、メリーゴーランドを連想させるため「カルーセル」と言われています。
特にEコマースサイトやニュースアプリなどで、最新の製品やトピックなどを紹介するためによく使われます。
天下のアマゾンさんもプライムビデオのトップページにカルーセルを使用しています。
今回は、カルーセルが自動再生される機能が追加されました。
これは一定時間経つと自動でスライドされる機能で、より多くの情報やコンテンツを閲覧者に届けることができるようになりました。
自動でスライドするものが多く、気になったものが「あ、行っちゃった」と切り替わってしまい、自分自身で戻したりしたご経験、みなさんも一度はあるのではないでしょうか。
カルーセルを使うメリット
視認性の向上
カルーセルを使うことで、複数のコンテンツを簡潔に表示することができます。したがって、ユーザーはより短い時間でより多くの情報を確認することができます。
複数の画像や動画、コンテンツなどをスライド式に表示するので、画面を見ているだけで伝えたい情報のアピールポイントを容易に訴求することができます。
情報に溢れすぎている今、調べるのも一苦労、長い文章やページをスクロールすればするほど、サービスの作り手の思いやアピールポイントとはずれたものを感じる場面も少なくありません。
その点、カルーセルはサービスの詳細はもちろん、アピールポイント、ストーリー性も容易に取得することができます。
スペースの有効活用
カルーセルを使うことで、画面スペースを効果的に活用することができます。
通常であれば画像一枚しか掲載できない場所でも、カルーセルを利用することで複数の画像を表示できます。
広い場所でなくても画像やコンテンツを複数表示できるので、ユーザーに情報を詳細に伝えることができます。
特にモバイルアプリやウェブサイトにおいて、画面スペースは限られているため、カルーセルは有効な方法となります。
カルーセルを使うデメリット
表示速度が遅くなる可能性がある
カルーセルを利用すると、画面の表示速度が遅くなる場合があります。
なぜなら、複数の画像やコンテンツを入れると、画面を切り替える際の処理に時間がかかるからです。
表示速度が遅いと、ユーザーのサイト離脱率が高まります。
ユーザー視点で考え、スライド枚数を減らすことや、不必要なデザイン性を落とすことも検討する必要があります。
認知的負担が増加する可能性がある
カルーセルを利用することで、ユーザーがコンテンツを見分けるのに時間がかかったり、目的のコンテンツを素早く見つけることが困難になる場合があります。
これにより、ユーザーの認知的負担が増加する可能性があります。
自動カルーセル機能の実装方法
まずは追加タブのCMSよりコンテンツをドラッグ&ドロップします。
つぎに、自動再生機能を右のパネルの「カルーセル」より設定していきます。
再生間隔：スライドが切り替わるまでの間隔。
送り時間：スライドが流れる速度。
ホバーで停止：マウスでカーソルを当てるまたは、キーボード操作でフォーカスが当たった際に自動再生が止まります。カーソル・フォーカスが外れると自動再生が開始します。
2023年1月29日以前に配置していたカルーセルで利用するには、「変換」ボタンのクリックが必要です。
また、Google Tag Managerで自動再生を設定していた場合は、Google Tag Manager側の設定を解除してから、「変換」ボタンをクリックしてください。
送り時間を短くすることで、切り替えが早くなり、クールなテキパキした印象を与えることができます。
反対に、送り時間を長くすることで、切り替えがゆっくり行われ、ふんわりした落ち着いた印象を与えることができます。
第一優先はユーザーの使いやすさですが、各々サイトで再現したい世界観を考えながら実装してみてください。
カルーセルの自動再生機能を応用すると以下の記事のようなことが実現できます。
まとめ
今回は、カルーセルのメリット・デメリットと自動再生機能の基礎的な設定方法を解説しました。
画面スペースの限られているWebサイト内でより情報を伝えるためにカルーセルは有効な手段です。
ぜひCMSの使い方と併せて必須で覚えておきましょう。
STUDIOでサイトの制作をしてほしい、STUDIOでWebサイト作りたいけど、何から始めていいか分からない…という方へ。
STUDIOにてサイトの制作依頼や講師等の依頼も承っておりますので、ぜひご連絡ください！
最後までお読みいただきありがとうございました。
