Webサイト上で複数のアイテムを一定間隔で切り替えて表示する機能、カルーセル。STUDIOを活用すれば、コーディングの知識がなくても簡単にカルーセルを実装できます。この記事では、STUDIOのカルーセルの基本的な使い方や、無限ループやフェードで切り替わるスライドショーへの応用方法を初心者の方にもわかりやすく解説します。カルーセル（スライダー・スライドショー）とはカルーセルとは、画像やテキストを含む複数のアイテムを一定間隔で切り替えて表示する機能のことです。スライダーやスライドショーとも呼ばれています。通常、左右のナビゲーションボタンをクリックしたり、横にスワイプしたりすることでアイテムを切り替えられます。カルーセルを使用すると、限られたスペースで多くの情報を提供できるというメリットがあります。また、アイテムが自動で切り替わるよう設定し、視覚的な動きを加えることも可能です。STUDIOで設定できるカルーセルの種類STUDIOで設定できるカルーセルには、以下の2種類があります。STUDIOのリスト機能を使用したカルーセル…リスト機能のアイテムをカルーセルに表示します。デザインエディタ上で直接カルーセルを更新できるというメリットがあります。STUDIOのCMS機能を使用したカルーセル…CMSダッシュボードで管理しているアイテムをカルーセルに表示します。アイテムを更新すると他のCMSリストや動的ページにも反映されるため、情報を一元管理できるというメリットがあります。CMSダッシュボードで管理しているアイテムをカルーセルに表示したい場合は、CMSカルーセルを選択しましょう。同じ内容のカルーセルを複数配置したい場合や、ページごとに表示するアイテムを変更したい場合もCMSカルーセルがおすすめです。※料金プランによってCMS公開アイテム数は異なります1. STUDIOのリストを使用したカルーセルの設定方法まず、STUDIOのリストを使用したカルーセルの設定方法について解説します。カルーセルボックスの配置デザインエディタの左側にある追加パネルを開き、ボックスタブの「Component Parts」の中から「Carousel」をクリックします。ドラッグ＆ドロップで任意の場所に配置することも可能です。レイヤーパネルを確認すると、配置したカルーセルボックスのリストには、3つのアイテムがサンプルとして入力されています。リストの編集リストを使用したカルーセルに表示するアイテムは、レイヤーパネルから直接編集できます。「+New」ボタンをクリックして新しいアイテムを追加したり、左端のアイコンをドラッグ＆ドロップして順番を並び替えることも可能です。また、アイテムにカーソルを乗せた時に表示されるゴミ箱のアイコンをクリックすると、アイテムを削除できます。さらに、リストの右端に表示される「+」ボタンをクリックすると、新たなプロパティを追加できます。リストに追加できるプロパティの種類は、以下の通りです。テキスト文字列を設定できるプロパティです。画像画像を設定できるプロパティです。Unsplashが提供しているフリー画像や、アップロードした画像を設定することが可能です。URLプロジェクト内のページや外部URLを設定できるプロパティです。設定したURLはリンクとして使用できます。ブール値オン・オフが設定できるプロパティです。条件付きスタイルや表示条件と組み合わせて、そのプロパティがオンまたはオフの場合にデザインを変更することができる高度な機能です。カラーカラーを設定できるプロパティです。デザイン編集リストを使用したカルーセルのデザインは、デザインエディタで自由に編集できます。アイテムを切り替えるボタンも、カルーセルのデザインに合わせて変更可能です。例えば、STUDIOテンプレート「商品紹介LP｜INTERIOR」では、商品一覧のカルーセルを洗練されたデザインにカスタマイズしています。＞商品紹介LP｜INTERIORのプレビュー画面を見るここで注意すべきなのは、カルーセルに含まれるアイテムには共通のデザインが適用されることです。アイテムごとに異なるデザインを適用したい場合は、ブール値やカラーのプロパティを使用する必要があります。詳細は、以下のページをご参照ください。＞リストアイテムごとにデザインを変える方法｜STUDIO U＞カラープロパティを使ってリスト内アイテムごとに色を変える方法｜STUDIO U2. 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に追加できるプロパティの種類は、リストと一部異なります。テキスト文字列を設定できるプロパティです。数値数値を設定できるプロパティです。ブール値オン・オフが設定できるプロパティです。カラーカラーを設定できるプロパティです。画像画像を設定できるプロパティです。Unsplashが提供しているフリー画像や、アップロードした画像を選択することが可能です。また、CMSのアイテムは公開日の新しい順に並ぶ仕様となっています。リストのようにドラッグ＆ドロップでアイテムを並び替えるには、コレクションを使用します。＞CMS記事を任意の順番に並べることはできますか？｜STUDIO Uデザイン編集CMSを使用したカルーセルのデザインも、デザインエディタで自由に編集できます。アイテムを切り替えるボタンも、カルーセルのデザインに合わせて変更可能です。例えば、STUDIOテンプレート「暮らしのメディア」では、トップ記事や特集記事のCMSモデルをカルーセルに紐づけ、他の記事よりも注目を集めるようにしています。＞暮らしのメディアのプレビュー画面を見るなお、CMSを使用する場合も、カルーセルに含まれるアイテムには共通のデザインが適用されます。アイテムごとに異なるデザインを適用したい場合は、ブール値やカラーのプロパティを使用します。詳細は、以下のページをご参照ください。＞特定のCMS記事にのみ「新着」バッジを表示する方法｜STUDIO U＞CMSカラープロパティを使ってCMSリスト内アイテムごとに色を変える方法｜STUDIO UCMSカルーセルなら、「数値」プロパティを使用してカルーセルアイテムごとに異なる数値データ（※）の設定も可能です。※マージン、パディング、縦幅、横幅、テキストのサイズなどリストを使用したカルーセルをCMSカルーセルに変更する方法リストのカルーセルを選択し、レイヤーパネル「データを紐づけ」をクリックして表示されるCMSモデルを選択すると、CMSカルーセルへと変更することが可能です。CMSをまだ有効にしていないプロジェクトでは、先に有効化が必要です。STUDIOのカルーセルを自動再生する方法STUDIOのカルーセルは、右側のボックス設定パネルから自動再生の設定ができます。これにより、ボタンをクリックしなくても自動でアイテムが切り替わるようになります。設定できる項目の詳細は、以下の通りです。自動再生オンにすると、アイテムが自動で切り替わります。再生間隔アイテムが切り替わるまでの間隔をミリ秒（ms）単位で設定できます。数字を大きくするほど、ゆっくり時間をかけて再生されます。送り時間アイテムが切り替わる速度をミリ秒（ms）単位で設定できます。数字を大きくするほど、ゆっくり時間をかけて切り替わります。ホバーで停止オンにすると、ホバーした時に自動再生が停止します。ホバーが外れると、自動再生が再開します。【応用編】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のカルーセルを活用してみてください。