Studioのカルーセルをマスターしよう!基本的な使い方から無限ループなどの応用方法まで徹底解説
Mari
2024.09.30
Updated:2025.07.10
Studioのカルーセルの基本的な使い方や、無限ループやフェードで切り替わるスライドショーへの応用方法を解説します。

Mari
2024.09.30
Updated:2025.07.10
Studioのカルーセルの基本的な使い方や、無限ループやフェードで切り替わるスライドショーへの応用方法を解説します。
Webサイト上で複数のアイテムを一定間隔で切り替えて表示する機能、カルーセル。STUDIOを活用すれば、コーディングの知識がなくても簡単にカルーセルを実装できます。
この記事では、STUDIOのカルーセルの基本的な使い方や、無限ループやフェードで切り替わるスライドショーへの応用方法を初心者の方にもわかりやすく解説します。
カルーセルとは、画像やテキストを含む複数のアイテムを一定間隔で切り替えて表示する機能のことです。スライダーやスライドショーとも呼ばれています。通常、左右のナビゲーションボタンをクリックしたり、横にスワイプしたりすることでアイテムを切り替えられます。
カルーセルを使用すると、限られたスペースで多くの情報を提供できるというメリットがあります。また、アイテムが自動で切り替わるよう設定し、視覚的な動きを加えることも可能です。
STUDIOで設定できるカルーセルには、以下の2種類があります。
STUDIOのリスト機能を使用したカルーセル
…リスト機能のアイテムをカルーセルに表示します。デザインエディタ上で直接カルーセルを更新できるというメリットがあります。
STUDIOのCMS機能を使用したカルーセル
…CMSダッシュボードで管理しているアイテムをカルーセルに表示します。アイテムを更新すると他のCMSリストや動的ページにも反映されるため、情報を一元管理できるというメリットがあります。
CMSダッシュボードで管理しているアイテムをカルーセルに表示したい場合は、CMSカルーセルを選択しましょう。同じ内容のカルーセルを複数配置したい場合や、ページごとに表示するアイテムを変更したい場合もCMSカルーセルがおすすめです。
※料金プランによってCMS公開アイテム数は異なります
まず、STUDIOのリストを使用したカルーセルの設定方法について解説します。
デザインエディタの左側にある追加パネルを開き、ボックスタブの「Component Parts」の中から「Carousel」をクリックします。ドラッグ&ドロップで任意の場所に配置することも可能です。
レイヤーパネルを確認すると、配置したカルーセルボックスのリストには、3つのアイテムがサンプルとして入力されています。
リストを使用したカルーセルに表示するアイテムは、レイヤーパネルから直接編集できます。
「+New」ボタンをクリックして新しいアイテムを追加したり、
左端のアイコンをドラッグ&ドロップして順番を並び替えることも可能です。
また、アイテムにカーソルを乗せた時に表示されるゴミ箱のアイコンをクリックすると、アイテムを削除できます。
さらに、リストの右端に表示される「+」ボタンをクリックすると、新たなプロパティを追加できます。
リストに追加できるプロパティの種類は、以下の通りです。
テキスト | 文字列を設定できるプロパティです。 |
画像 | 画像を設定できるプロパティです。 |
URL | プロジェクト内のページや外部URLを設定できるプロパティです。 |
ブール値 | オン・オフが設定できるプロパティです。 |
カラー | カラーを設定できるプロパティです。 |
リストを使用したカルーセルのデザインは、デザインエディタで自由に編集できます。アイテムを切り替えるボタンも、カルーセルのデザインに合わせて変更可能です。
例えば、STUDIOテンプレート「商品紹介LP|INTERIOR」では、商品一覧のカルーセルを洗練されたデザインにカスタマイズしています。
ここで注意すべきなのは、カルーセルに含まれるアイテムには共通のデザインが適用されることです。アイテムごとに異なるデザインを適用したい場合は、ブール値やカラーのプロパティを使用する必要があります。
詳細は、以下のページをご参照ください。
>リストアイテムごとにデザインを変える方法|STUDIO U
>カラープロパティを使ってリスト内アイテムごとに色を変える方法|STUDIO U
次に、STUDIOのCMSを使用したカルーセルについて解説します。
STUDIOのCMSを使用しているプロジェクトでは、デザインエディタの左側にある追加パネルでCMSタブを開くと、CMSカルーセルが表示されます。
こちらをクリックまたはドラッグ&ドロップして、デザインエディタに配置することが可能です。
※CMSを使用していないプロジェクトの場合、CMSタブに「CMSをはじめる」ボタンが表示されます。
「CMSをはじめる」ボタンをクリックすると、初期データの有無を選ぶ画面が表示されます。
ここで「テンプレートデータを使う」を選択すると、「Posts」「Writers」「Tags」のモデルにサンプルアイテムが挿入されます。
その後デザインエディタに戻ると、CMSカルーセルを設置できるようになっています。
CMSカルーセルに紐づけるモデルは、レイヤーパネルから自由に変更できます。フィルターを使用して表示するアイテムを絞り込んだり、表示数を指定したりすることも可能です。
CMSカルーセルに表示するモデルやアイテムは、CMSダッシュボードから編集する必要があります。
CMSコンテンツの仕組みとモデルやアイテムの編集方法は、以下のページをご参照ください。
なお、CMSに追加できるプロパティの種類は、リストと一部異なります。
テキスト | 文字列を設定できるプロパティです。 |
数値 | 数値を設定できるプロパティです。 |
ブール値 | オン・オフが設定できるプロパティです。 |
カラー | カラーを設定できるプロパティです。 |
画像 | 画像を設定できるプロパティです。 |
また、CMSのアイテムは公開日の新しい順に並ぶ仕様となっています。リストのようにドラッグ&ドロップでアイテムを並び替えるには、コレクションを使用します。
>CMS記事を任意の順番に並べることはできますか?|STUDIO U
CMSを使用したカルーセルのデザインも、デザインエディタで自由に編集できます。アイテムを切り替えるボタンも、カルーセルのデザインに合わせて変更可能です。
例えば、STUDIOテンプレート「暮らしのメディア」では、トップ記事や特集記事のCMSモデルをカルーセルに紐づけ、他の記事よりも注目を集めるようにしています。
なお、CMSを使用する場合も、カルーセルに含まれるアイテムには共通のデザインが適用されます。アイテムごとに異なるデザインを適用したい場合は、ブール値やカラーのプロパティを使用します。
詳細は、以下のページをご参照ください。
>特定のCMS記事にのみ「新着」バッジを表示する方法|STUDIO U
>CMSカラープロパティを使ってCMSリスト内アイテムごとに色を変える方法|STUDIO U
CMSカルーセルなら、「数値」プロパティを使用してカルーセルアイテムごとに異なる数値データ(※)の設定も可能です。
※マージン、パディング、縦幅、横幅、テキストのサイズなど
リストのカルーセルを選択し、レイヤーパネル「データを紐づけ」をクリックして表示されるCMSモデルを選択すると、CMSカルーセルへと変更することが可能です。CMSをまだ有効にしていないプロジェクトでは、先に有効化が必要です。
STUDIOのカルーセルは、右側のボックス設定パネルから自動再生の設定ができます。
これにより、ボタンをクリックしなくても自動でアイテムが切り替わるようになります。
設定できる項目の詳細は、以下の通りです。
自動再生 | オンにすると、アイテムが自動で切り替わります。 |
再生間隔 | アイテムが切り替わるまでの間隔をミリ秒(ms)単位で設定できます。数字を大きくするほど、ゆっくり時間をかけて再生されます。 |
送り時間 | アイテムが切り替わる速度をミリ秒(ms)単位で設定できます。数字を大きくするほど、ゆっくり時間をかけて切り替わります。 |
ホバーで停止 | オンにすると、ホバーした時に自動再生が停止します。ホバーが外れると、自動再生が再開します。 |
STUDIOは現時点で無限ループを実装する機能は提供していませんが、カルーセルの自動再生機能を応用することで実現できます。動作保証を行なっていないため、画像が読み込み時にチラつく(タイムラグが生じる)可能性がある点にご注意ください。
>カルーセルの自動再生機能で、要素の無限ループ再生はできますか?
例えば、STUDIOテンプレート「ドリンク・フード向けLP」では、リストを使用したカルーセルに無限ループが設定されています。
無限ループの基本的な設定方法は、以下の通りです。
カルーセルボックスを配置し、不要なテキストやボタンを削除します。
カルーセルのアイテムを選択し、任意のサイズに調整します。必要に応じて、パディングで余白も設定しましょう。
アイテムを選択した状態のまま、モーションタブでイージングを「linear」に変更します。これにより、アイテムの動きに緩急がなくなり、一定の速度で自動再生されるようになります。
カルーセルの自動再生で、再生間隔を「1」、送り時間を任意の値に設定します。必要がなければ、ホバーで停止はオフにしておきましょう。
※再生間隔を「0」にすると、現状の仕様で再生されません
これで、無限ループの基本的な設定が完了です。
ライブプレビューを確認しながら、より理想の動きに近づくよう送り時間を調整してみましょう。STUDIOテンプレート「ドリンク・フード向けLP」のように画像に角丸をつけたり、ブール値を活用したラベルを表示したりすることも可能です。
STUDIOのカルーセルを活用すれば、フェードで切り替わるスライドショーの実装も可能です。
例えば、STUDIOテンプレート「FLOWER COMPANY」では、ファーストビューの画像がフェードで切り替わるようになっています。
フェードで切り替わるスライドショーの基本的な実装方法は、以下の通りです。
カルーセルボックスを配置し、不要なテキストやボタンを削除します。
カルーセルの自動再生の設定で、送り時間を「1」、ホバーで停止はオフに変更します。
カルーセルのアイテムを選択し、配置を「絶対配置」に変更します。
カルーセルのアイテムの配下にある画像を選択した状態で、グループ化を行います。
グループ化したボックスの横幅と縦幅を「100%」に設定し、
条件付きスタイルの「出現時」の設定で、不透明度を「0」、イージングを「linear」、時間を「1000」など任意の数値に変更します。
グループ化したボックスの配下にある画像を選択し、「出現時」の設定でイージングを「linear」、時間を「4000」など任意の数値に変更します。
これで、フェードで切り替わるスライドショーの設定が完了です。
ライブプレビューを確認しながら、より理想の動きに近づくよう出現時の時間を調整してみましょう。STUDIOテンプレート「FLOWER COMPANY」のように、出現時の画像のスケールを大きめに設定することも可能です。
この記事では、STUDIOのカルーセルの基本的な使い方や、無限ループやフェードで切り替わるスライドショーへの応用方法を解説しました。
STUDIOで作成された世界中のWebサイトをジャンルやテイスト別に探せる「STUDIO Showcase」では、カルーセルの参考となるWebサイトを数多く掲載しています。
この機会に、ぜひSTUDIOのカルーセルを活用してみてください。
外部プロフィール
STUDIO BISCUITという屋号でStudioを活用したWebサイト制作や、Studioのテンプレート販売、メンターとしての活動などを行っています。
前職の経験を活かして、ビジネスメディアの執筆・編集やコンテンツ制作も担当。初心者の方でもわかりやすい情報発信を心がけています。
無料ではじめる