【Studio初心者ガイド】カルーセル（スライダー）の基本設定と活用方法｜Editor 5.0対応

※本記事は Studioの「Editor 5.0」に対応しています。

ウェブデザインの世界でよく見かけるカルーセル（スライダー）は、視覚的に魅力的かつ効率的に情報を伝える手段です。

CSSやHTMLの知識が必要だと思われがちですが、Studioを使えば簡単にカルーセルを自由な形でデザインすることができます。

この記事では、Studioでのカルーセル設定方法と、カルーセル使用の際のメリットやデメリット、注意点やおすすめの活用法を解説します。

カルーセルとは何か

カルーセルとは、ウェブサイトやアプリケーションにおいて、複数のコンテンツを順番に表示させる事ができます。視覚的な魅力を高め、限られたスペースで多くの情報を提供します。

カルーセルのメリット

カルーセルは、訪問者の滞在時間の延長や情報提供の効率化を図れます。更に、複数のコンテンツを一箇所に集めて表示し、ページの縦スクロール量を減らすことができるため、ユーザーエクスペリエンスが向上します。

カルーセル、スライダー、スライドショーの違い

カルーセルとスライダー（スライドショー）は、ほとんど同じであると考えてよいでしょう。

Studioでのカルーセル（スライダー）の作り方

Studioでは、直感的な動作でカルーセルを簡単にデザインすることができます。手順をお話ししていきます。

Studioアカウントと素材を準備

まず、カルーセルスライダーを作るために必要な素材を準備しましょう。表示したい画像やテキスト、リンクなどを用意します。

次に、Studioの公式ウェブサイトにアクセスし、アカウントを取得してログインしましょう。

Studioでの操作手順

Studioにログインしたら、「新規プロジェクト」を作成します。

1.画面左端のナビゲーションにある「追加」アイコン（ピンク四角）をクリックして、追加パネルを開きます。

2.追加パネル下部の「インタラクション」にある「Carousel」（ピンク四角）をドラッグ&ドロップ、またはクリックしてスクリーンに配置します。

カルーセルのカスタマイズ

カスタマイズしたいカルーセルを選択した状態で、画面左端のナビゲーションにある「レイヤー」アイコンをクリックし、レイヤーパネルを開くと、カルーセルの内容を変更する事ができます。

タイトル、文字、画像の変更

カルーセルのタイトル・ディスクリプション・日付・画像などの内容は、右パネルの「データ」タブ（赤四角）にあるリスト部分から変更します。

手順

1. カルーセルを選択する

2. 画面右側のパネルを開く（ショートカット：Macは ⌘+5 ／ Windowsは Ctrl+5）

3. 「データ」タブを開く

4. リスト内の変更したいアイテムをクリックして、テキストや画像を編集する

画像の変更方法 リスト内の画像部分をクリックすると画像選択画面が表示されます。リストから選ぶか、新しい画像をアップロードして差し替えてください。

注意：カルーセルをデータではなく、デザインエディタ上で直接編集すると、すべてのアイテムに同じ内容が反映されてしまいます。
ただし新しい画像やテキストを追加したい場合はデザインエディタ上で追加し、データで情報を紐づけていくことで追加が可能です。

ボタンの編集

ボタン（ピンク四角部分）をダブルクリックすると、ボタンの形や位置を直観的に編集できます。

プロパティ（テキスト、画像、URL、ブール値、カラー）の追加と編集

カルーセルを選択した状態で、画面右側の右パネル内「データ」タブ（ピンク四角）を開きます。

データタブ内の[+NEW]ボタン（黄色四角）をクリックすると、テキスト、画像、URL、ブール値、カラーのプロパティを追加・編集できます。

テキスト

文字を追加できます。

画像

画像を登録できます。

URL

外部サイトのURLや、内部リンクを設定できます。

ブール値

オン（on）/オフ（off）を切り替える事ができます。

カラー

RGB、HEX、HSLの値で色を変更できます。

カルーセル（スライド）させたい情報の追加

右パネルの[データ]タブ内、リスト下部にある[+NEW]ボタン(ピンク四角)をクリックすれば、カルーセルさせたい情報(アイテム)を追加できます。

カルーセルでは、全体で最大50件のアイテムを表示することができます。また、アイテムのサイズを小さくすることで、一つの画面に同時に表示できるアイテム数は最大7件までとなります。

情報の削除

右パネルの[データ]タブ内、リストの各行右端(ピンク四角の部分)にカーソルを合わせるとゴミ箱アイコンが表示されるので、クリックすれば削除できます。

カルーセルの動きを編集する

カルーセルパーツを選択した状態で、画面右側の右パネルを開きます(パネルが表示されていない場合は、画面右上の開閉アイコンをクリック)。

右パネルの[カルーセル]タブ（ピンク四角）を開きます。

ここで以下の設定ができます。

• 自動再生: ON/OFF

• 再生時間: ミリ秒単位で設定（例: 5000 = 5秒）

• 送り時間: スライドが切り替わる時間（ミリ秒単位）

• ホバーで停止: マウスカーソルを合わせたときに自動再生を停止する設定

※ Editor 5.0では、カルーセルの動作設定が右パネルの [カルーセル] タブに統合されました。

CMSカルーセルの設定

画面左端のナビゲーションにある「ページ」アイコンをクリックして、ページパネルを開きます。

ページパネル内に表示されているCMSモデルから、配置したいCMSを選択し、クリックまたはドラッグ&ドロップでCMSカルーセルを配置します。

CMSモデルを事前に作成していない場合は、CMSダッシュボードで先にモデルとアイテムを作成する必要があります。

＋ボタン（ピンク四角）」をクリックし、動的ページボタンを出現させてクリックすれば作成画面に移ります。

次に以下の画面になるので、テンプレートデータを使う場合は「ピンク四角部分」、最初からつくる場合は「黄色四角部分」、所持しているWordpressの記事を使いたい場合は、「水色四角部分」を選択し、WordPressエクスポートファイル（.xml）をStudioにインポートしてください。

カルーセルを選択した状態でレイヤーパネル（ピンク四角）を開くと、特定のデータのみを表示させるなどの設定が行えます。

完成後のチェックポイント

カルーセルスライダーが完成したら、エディタ右上にある「ライブプレビュー」で最終確認を行います。表示速度やスムーズな切り替え、リンクの動作を確認します。

そして、不具合がないかどうかを再度チェックし、問題がなければ公開しましょう。公開後も、定期的に内容を見直し、更新していくことをおすすめします。

カルーセルの実用事例

多くのビジュアルコンテンツを持つサイトにおいて、カルーセルは非常に効果的です。具体的な事例をいくつか紹介します。

ポートフォリオサイトでのカルーセルの活用

デザイナーやフォトグラファー、アーティストたちのポートフォリオサイトでも、カルーセルは非常に有効です。

特に、作品を脈絡なく並べるのではなく、テーマごとにまとめてカルーセル形式で表示することで、閲覧者に視覚的な一貫性を提供できます。

また、作品ごとに短い説明を添えることで、閲覧者がどのような作品なのかを理解しやすくなります。

カルーセルはさらに、最新のプロジェクトや受賞履歴を強調する際にも役立つため、クリエイティブな分野での使い勝手は抜群です。

教育サイトでのカルーセルの導入

学習コースや教材の紹介にカルーセルを利用することで、関心のある情報に簡単にアクセスできます。

また、授業のハイライトや学生の成功事例をカルーセルで表示することで、サイト全体の魅力を高めることができます。

カルーセルの注意点

カルーセルは、使い方を間違えると、ユーザー体験を損なう可能性があります。次のポイントを確認しましょう。

自動再生の時間にこだわる

カルーセルの自動再生時間は、ユーザーエクスペリエンスに大きな影響を与えます。

長すぎるとユーザーが待たされ、短すぎると情報が見逃されるおそれがあります。適切な時間設定が必要です。

一般的には、5秒〜7秒が推奨されます。この範囲ならば、ユーザーが内容を把握しやすいです。

しかし、サイトの内容やユーザー層により最適な時間は違いますので、テストを重ねることが重要です。ユーザーにとってストレスのない時間設定を心がけましょう。

PCでカルーセルを多用しない

PCの画面では、多くの情報を同時に表示できるため、カルーセルの多用は避けることが賢明です。一つのディスプレイに複数のカルーセルがあると、ユーザーが混乱しやすくなります。

また、視線があちこちに飛び、集中できません。適切に使うことで、情報を整理しやすくなります。他の方法と組み合わせ、効果的な情報提示を目指すことが重要です。

バラバラの情報を一緒に載せない

カルーセルには、関連性のある情報をまとめることが必要です。

バラバラの情報を一緒に載せると、ユーザーが混乱するからです。それぞれのスライドで明確なテーマやカテゴリーを持たせると、ユーザーが理解しやすくなります。

同じトピックで統一することで、情報の流れがスムーズになります。ユーザーが興味を持続させるためには、一貫性を保つことが重要です。

サイトのメニューはカルーセルにしない

サイトのメニューをカルーセル形式にすることは避けるべきです。

メニューは常に表示されていることが重要です。カルーセルでは、必要なときにすぐにアクセスできないため、ユーザーがストレスを感じる可能性があります。

また、ナビゲーションの一貫性も失われます。他の方法でメニューを常に表示し、ユーザビリティを高めることが求められます。こうすることで、ユーザーの満足度が向上します。

カルーセルのおすすめな使い方

カルーセルは以下の様に使っていただくのがおすすめです。

商品写真

商品写真をカルーセルで表示させると、ユーザーが直感的に商品の特徴を理解しやすくなります。

一枚一枚の写真に異なる角度や使用シーンを取り入れることで、もっとリアルに感じてもらえます。

この方法は特に、複数のバリエーションがある商品に適しています。

色々な角度から商品を見せる事で購入意欲を高めることができるのです。また、写真にキャプションや短い説明文を添えると、さらに理解が深まります。

写真のみ

写真のみをカルーセルで表示する場合、そのビジュアルが非常に重要になります。質の高い写真を選ぶことで、ユーザーの目を引きやすくなります。

例えば、風景写真やイベントのハイライトを採用することで、一瞬で注目を集めることができます。

そして、ユーザーが次々に写真を見進めるよう促すことができます。文章をあえて省くことで、視覚的要素に集中させることが狙いです。シンプルでありながら効果的な方法です。

同じサイト上にある他ページの紹介

同じサイト内の他ページをカルーセルで紹介することも効果的です。

この方法を用いると、ユーザーは一目で他ページの内容を把握できます。それにより、サイト内の回遊率が高まります。

たとえば、ブログ記事や関連する商品ページのサムネイルを表示することが考えられます。そして、クリック率の向上が期待できます。また、ユーザー体験の向上にも繋がります。

ストーリー性があるもの

ストーリー性があるコンテンツをカルーセルに取り入れると、ユーザーは感情的に引き込まれることが多いです。

例えば、商品の製作過程や利用シーンを順に紹介することで、物語性を持たせることができます。

これにより、ユーザーは商品の背景に興味を持ちやすくなります。そして、自然とブランドへの愛着が深まります。連続性と一貫性を持たせることで、視聴者を飽きさせない工夫が重要です。

まとめ

カルーセルは、魅力的でダイナミックなコンテンツを提供する手段として、ウェブサイトやアプリケーションにおいて大きな役割を果たします。

そのデザインの自由度と情報提供の効率性を活かし、ユーザーにとっての価値を高めることができます。

しかし、その使用には適切な知識と配慮が必要であり、ユーザー体験を損なわないよう慎重に設計することが重要です。

カルーセルを活用することで、サイトの見た目を美しくし、情報を効果的に伝え、訪問者の関心を惹きつけることができるでしょう。