Studioのカルーセルをマスターしよう！基本的な使い方から無限ループなどの応用方法まで徹底解説 

Webサイト上で複数のアイテムを一定間隔で切り替えて表示する機能、カルーセル。STUDIOを活用すれば、コーディングの知識がなくても簡単にカルーセルを実装できます。

この記事では、STUDIOのカルーセルの基本的な使い方や、無限ループやフェードで切り替わるスライドショーへの応用方法を初心者の方にもわかりやすく解説します。

カルーセル（スライダー・スライドショー）とは

カルーセルとは、画像やテキストを含む複数のアイテムを一定間隔で切り替えて表示する機能のことです。スライダーやスライドショーとも呼ばれています。通常、左右のナビゲーションボタンをクリックしたり、横にスワイプしたりすることでアイテムを切り替えられます。

カルーセルを使用すると、限られたスペースで多くの情報を提供できるというメリットがあります。また、アイテムが自動で切り替わるよう設定し、視覚的な動きを加えることも可能です。

STUDIOで設定できるカルーセルの種類

STUDIOで設定できるカルーセルには、以下の2種類があります。

1. STUDIOのリスト機能を使用したカルーセル
   …リスト機能のアイテムをカルーセルに表示します。デザインエディタ上で直接カルーセルを更新できるというメリットがあります。

2. STUDIOのCMS機能を使用したカルーセル
   …CMSダッシュボードで管理しているアイテムをカルーセルに表示します。アイテムを更新すると他のCMSリストや動的ページにも反映されるため、情報を一元管理できるというメリットがあります。

CMSダッシュボードで管理しているアイテムをカルーセルに表示したい場合は、CMSカルーセルを選択しましょう。同じ内容のカルーセルを複数配置したい場合や、ページごとに表示するアイテムを変更したい場合もCMSカルーセルがおすすめです。

※料金プランによってCMS公開アイテム数は異なります

1. STUDIOのリストを使用したカルーセルの設定方法

まず、STUDIOのリストを使用したカルーセルの設定方法について解説します。

カルーセルボックスの配置

デザインエディタの左側にある追加パネルを開き、ボックスタブの「Component Parts」の中から「Carousel」をクリックします。ドラッグ＆ドロップで任意の場所に配置することも可能です。

レイヤーパネルを確認すると、配置したカルーセルボックスのリストには、3つのアイテムがサンプルとして入力されています。

リストの編集

リストを使用したカルーセルに表示するアイテムは、レイヤーパネルから直接編集できます。

「+New」ボタンをクリックして新しいアイテムを追加したり、

左端のアイコンをドラッグ＆ドロップして順番を並び替えることも可能です。

また、アイテムにカーソルを乗せた時に表示されるゴミ箱のアイコンをクリックすると、アイテムを削除できます。

さらに、リストの右端に表示される「+」ボタンをクリックすると、新たなプロパティを追加できます。

リストに追加できるプロパティの種類は、以下の通りです。

デザイン編集

リストを使用したカルーセルのデザインは、デザインエディタで自由に編集できます。アイテムを切り替えるボタンも、カルーセルのデザインに合わせて変更可能です。

例えば、STUDIOテンプレート「商品紹介LP｜INTERIOR」では、商品一覧のカルーセルを洗練されたデザインにカスタマイズしています。

＞商品紹介LP｜INTERIORのプレビュー画面を見る

ここで注意すべきなのは、カルーセルに含まれるアイテムには共通のデザインが適用されることです。アイテムごとに異なるデザインを適用したい場合は、ブール値やカラーのプロパティを使用する必要があります。

詳細は、以下のページをご参照ください。

＞リストアイテムごとにデザインを変える方法｜STUDIO U

＞カラープロパティを使ってリスト内アイテムごとに色を変える方法｜STUDIO U

2. STUDIOのCMSを使用したカルーセルの設定方法

次に、STUDIOのCMSを使用したカルーセルについて解説します。

CMSカルーセルの配置

STUDIOのCMSを使用しているプロジェクトでは、デザインエディタの左側にある追加パネルでCMSタブを開くと、CMSカルーセルが表示されます。

こちらをクリックまたはドラッグ＆ドロップして、デザインエディタに配置することが可能です。

※CMSを使用していないプロジェクトの場合、CMSタブに「CMSをはじめる」ボタンが表示されます。

「CMSをはじめる」ボタンをクリックすると、初期データの有無を選ぶ画面が表示されます。

ここで「テンプレートデータを使う」を選択すると、「Posts」「Writers」「Tags」のモデルにサンプルアイテムが挿入されます。

その後デザインエディタに戻ると、CMSカルーセルを設置できるようになっています。

CMSカルーセルに紐づけるモデルは、レイヤーパネルから自由に変更できます。フィルターを使用して表示するアイテムを絞り込んだり、表示数を指定したりすることも可能です。

CMSの編集

CMSカルーセルに表示するモデルやアイテムは、CMSダッシュボードから編集する必要があります。

CMSコンテンツの仕組みとモデルやアイテムの編集方法は、以下のページをご参照ください。

＞CMSコンテンツの仕組み｜STUDIO U

＞モデル｜STUDIO U

＞アイテム｜STUDIO U

なお、CMSに追加できるプロパティの種類は、リストと一部異なります。

また、CMSのアイテムは公開日の新しい順に並ぶ仕様となっています。リストのようにドラッグ＆ドロップでアイテムを並び替えるには、コレクションを使用します。

＞CMS記事を任意の順番に並べることはできますか？｜STUDIO U

デザイン編集

CMSを使用したカルーセルのデザインも、デザインエディタで自由に編集できます。アイテムを切り替えるボタンも、カルーセルのデザインに合わせて変更可能です。

例えば、STUDIOテンプレート「暮らしのメディア」では、トップ記事や特集記事のCMSモデルをカルーセルに紐づけ、他の記事よりも注目を集めるようにしています。

＞暮らしのメディアのプレビュー画面を見る

なお、CMSを使用する場合も、カルーセルに含まれるアイテムには共通のデザインが適用されます。アイテムごとに異なるデザインを適用したい場合は、ブール値やカラーのプロパティを使用します。

詳細は、以下のページをご参照ください。

＞特定のCMS記事にのみ「新着」バッジを表示する方法｜STUDIO U

＞CMSカラープロパティを使ってCMSリスト内アイテムごとに色を変える方法｜STUDIO U

CMSカルーセルなら、「数値」プロパティを使用してカルーセルアイテムごとに異なる数値データ（※）の設定も可能です。

※マージン、パディング、縦幅、横幅、テキストのサイズなど

リストを使用したカルーセルをCMSカルーセルに変更する方法

リストのカルーセルを選択し、レイヤーパネル「データを紐づけ」をクリックして表示されるCMSモデルを選択すると、CMSカルーセルへと変更することが可能です。CMSをまだ有効にしていないプロジェクトでは、先に有効化が必要です。

STUDIOのカルーセルを自動再生する方法

STUDIOのカルーセルは、右側のボックス設定パネルから自動再生の設定ができます。

これにより、ボタンをクリックしなくても自動でアイテムが切り替わるようになります。

設定できる項目の詳細は、以下の通りです。

【応用編】STUDIOのカルーセルを無限ループさせる方法

STUDIOは現時点で無限ループを実装する機能は提供していませんが、カルーセルの自動再生機能を応用することで実現できます。動作保証を行なっていないため、画像が読み込み時にチラつく（タイムラグが生じる）可能性がある点にご注意ください。

＞カルーセルの自動再生機能で、要素の無限ループ再生はできますか？

例えば、STUDIOテンプレート「ドリンク・フード向けLP」では、リストを使用したカルーセルに無限ループが設定されています。

＞ドリンク・フード向けLPのプレビュー画面を見る

無限ループの基本的な設定方法は、以下の通りです。

カルーセルボックスを配置し、不要なテキストやボタンを削除します。

カルーセルのアイテムを選択し、任意のサイズに調整します。必要に応じて、パディングで余白も設定しましょう。

アイテムを選択した状態のまま、モーションタブでイージングを「linear」に変更します。これにより、アイテムの動きに緩急がなくなり、一定の速度で自動再生されるようになります。

カルーセルの自動再生で、再生間隔を「1」、送り時間を任意の値に設定します。必要がなければ、ホバーで停止はオフにしておきましょう。

※再生間隔を「0」にすると、現状の仕様で再生されません

これで、無限ループの基本的な設定が完了です。

ライブプレビューを確認しながら、より理想の動きに近づくよう送り時間を調整してみましょう。STUDIOテンプレート「ドリンク・フード向けLP」のように画像に角丸をつけたり、ブール値を活用したラベルを表示したりすることも可能です。

STUDIOのカルーセルでフェードで切り替わるスライドショーを実装する方法

STUDIOのカルーセルを活用すれば、フェードで切り替わるスライドショーの実装も可能です。

例えば、STUDIOテンプレート「FLOWER COMPANY」では、ファーストビューの画像がフェードで切り替わるようになっています。

＞FLOWER COMPANYのプレビュー画面を見る

フェードで切り替わるスライドショーの基本的な実装方法は、以下の通りです。

カルーセルボックスを配置し、不要なテキストやボタンを削除します。

カルーセルの自動再生の設定で、送り時間を「1」、ホバーで停止はオフに変更します。

カルーセルのアイテムを選択し、配置を「絶対配置」に変更します。

カルーセルのアイテムの配下にある画像を選択した状態で、グループ化を行います。

グループ化したボックスの横幅と縦幅を「100%」に設定し、

条件付きスタイルの「出現時」の設定で、不透明度を「0」、イージングを「linear」、時間を「1000」など任意の数値に変更します。

グループ化したボックスの配下にある画像を選択し、「出現時」の設定でイージングを「linear」、時間を「4000」など任意の数値に変更します。

これで、フェードで切り替わるスライドショーの設定が完了です。

ライブプレビューを確認しながら、より理想の動きに近づくよう出現時の時間を調整してみましょう。STUDIOテンプレート「FLOWER COMPANY」のように、出現時の画像のスケールを大きめに設定することも可能です。

最後に

この記事では、STUDIOのカルーセルの基本的な使い方や、無限ループやフェードで切り替わるスライドショーへの応用方法を解説しました。

STUDIOで作成された世界中のWebサイトをジャンルやテイスト別に探せる「STUDIO Showcase」では、カルーセルの参考となるWebサイトを数多く掲載しています。

この機会に、ぜひSTUDIOのカルーセルを活用してみてください。