---
title: シナリオ作成：カルーセル
description: シナリオ作成：カルーセル機能について説明します
---

[コンテンツまでスキップ](https://support.materialdigital.jp/manual/carousel#main-content)

日本語

翻訳のサブメニューを表示

[お問い合わせ](https://support.materialdigital.jp/manual/kb-tickets/new?hsLang=ja)

![typeA-1.png\]](https://support.materialdigital.jp/hs-fs/hubfs/typeA-1.png?height=40&name=typeA-1.png)

メインナビゲーションを開く

メインナビゲーションを閉じる

- 日本語
  
  翻訳のサブメニューを表示
- [お問い合わせ](https://support.materialdigital.jp/manual/kb-tickets/new)
- [サービスサイトへ](https://materialdigital.jp/)

[サービスサイトへ](https://materialdigital.jp/)

 お困りのことは何でしょうか？

- 検索フィールドが空なので、候補はありません。

1. [Flipdeskサポートセンター](https://support.materialdigital.jp/manual?hsLang=ja)
2. [Flipdeskマニュアル](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja)
3. [シナリオ](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E3%82%B7%E3%83%8A%E3%83%AA%E3%82%AA)

# シナリオ作成：カルーセル

## ノーコードでカルーセルを作成できる機能です。

1. [概要](https://support.materialdigital.jp/manual/carousel#step1)
2. [設定方法](https://support.materialdigital.jp/manual/carousel#step2)
3. [注意点](https://support.materialdigital.jp/manual/carousel#step3)

### **１.概要**

HTMLバナー＞ウィジェット＞カルーセルにてカルーセルシナリオを作成することができます。

ノーコードでカルーセルを設定し、オーバーレイやインラインシナリオとして活用することができます。

![](https://support.materialdigital.jp/hs-fs/hubfs/CleanShot%202026-03-16%20at%2016-28-33@2x-png.png?width=603&height=275&name=CleanShot%202026-03-16%20at%2016-28-33@2x-png.png)

![](https://support.materialdigital.jp/hs-fs/hubfs/CleanShot%202026-05-28%20at%2012-35-54-gif.gif?width=391&height=271&name=CleanShot%202026-05-28%20at%2012-35-54-gif.gif)

### **2.設定方法**

①スライドさせる画像を設定します

![](https://support.materialdigital.jp/hs-fs/hubfs/CleanShot%202026-03-12%20at%2017-57-07-png.png?width=579&height=249&name=CleanShot%202026-03-12%20at%2017-57-07-png.png)

”アップロード”を選択すると画像を設定できます。

アップロード時に画像のアスペクト比などトリミングすることができます。

編集メニューでは下記が可能です

・画像のトリミング  
・拡大、縮小  
・画像の回転  
・画像の容量圧縮

![](https://support.materialdigital.jp/hs-fs/hubfs/CleanShot%202026-08-20%20at%2019-06-03-png.png?width=410&height=432&name=CleanShot%202026-08-20%20at%2019-06-03-png.png)

アップロードした画像には遷移先リンク・ALT属性のテキスト・ラベルテキストを設定することができます

![](https://support.materialdigital.jp/hs-fs/hubfs/CleanShot%202026-05-28%20at%2011-20-16@2x-png.png?width=398&height=602&name=CleanShot%202026-05-28%20at%2011-20-16@2x-png.png)

 

②基本設定  
![](https://support.materialdigital.jp/hs-fs/hubfs/CleanShot%202026-03-12%20at%2018-42-00-png.png?width=546&height=217&name=CleanShot%202026-03-12%20at%2018-42-00-png.png)

| 項目 | 内容 |
| --- | --- |
| 表示枚数 | 一度に表示するスライド枚数を設定します |
| スライド間隔 | スライド画像の間隔を設定します |
| まとめてスライド | ”表示枚数”で設定した枚数がまとめてスライドします |
| 水平方向・垂直方向 | スライドする方向を水平方向、垂直方向に変更できます |
| ループ | 設定したスライドに終点を設けるか設定します |
| 自動再生 | 自動でスライドが切り替わる間隔を設定できます |

③デザイン設定  
![](https://support.materialdigital.jp/hs-fs/hubfs/CleanShot%202026-05-28%20at%2011-51-12@2x-png.png?width=654&height=369&name=CleanShot%202026-05-28%20at%2011-51-12@2x-png.png)

| 項目 | 内容 |
| --- | --- |
| 画像の角丸 | スライド画像の丸みを設定します |
| コンテナの角丸 | コンテナの丸みを設定します |
| コンテナの背景色 | コンテナの背景色を設定します |
| コンテナの余白 | コンテナ内の上下左右の余白を調整します |
| 影 | カルーセルに影のエフェクトを追加します |
| 整列 | 開始位置：１枚目のスライドが左端から開始します 中央：１枚目のスライドが中央から開始します 終了位置：１枚目のスライドが終了位置から開始します |

④見出し設定

![](https://support.materialdigital.jp/hs-fs/hubfs/CleanShot%202026-05-28%20at%2011-54-13@2x-png.png?width=639&height=392&name=CleanShot%202026-05-28%20at%2011-54-13@2x-png.png)

| 項目 | 内容 |
| --- | --- |
| テキスト | カルーセルの見出しテキストを入力します |
| テキスト位置 | 見出しを表示する位置を指定します |
| 揃え | テキスト文字の揃え位置を指定します |
| 色 | テキスト文字 |
| 背景色 | 見出しテキストの背景色を指定します |
| 背景の幅 | 背景色を指定した時、その適用範囲を指定します |
| フォントサイズ | 見出しテキストのフォントサイズを指定します |
| 余白 | 見出しテキストの上下左右の余白を指定します |
| コンテナとの間隔 | 見出しテキストとコンテナ要素の間隔を指定します |
| 角丸 | 見出しテキストの背景の丸みを指定します。 |

⑤ラベル設定

![](https://support.materialdigital.jp/hs-fs/hubfs/CleanShot%202026-05-28%20at%2012-10-06@2x-png.png?width=670&height=364&name=CleanShot%202026-05-28%20at%2012-10-06@2x-png.png)

| 項目 | 内容 |
| --- | --- |
| 表示 | 画像毎に設定したラベルテキストを表示する位置を指定します |
| 位置 | ラベルテキストを表示する位置を指定します |
| 文字色 | ラベルテキストの文字色を指定します |
| 背景色 | ラベルテキストの背景色を指定します |
| 文字サイズ | ラベルテキストの文字サイズを指定します |
| 太字 | ラベルテキストを太字にします |
| 余白 | ラベルテキストの余白を指定します |
| 角丸 | ラベルテキストの背景の丸みを指定します |
| オフセット | 画像内ラベルの端からの距離、または画像外ラベルと画像の間隔を指定します |

⑥詳細設定  
![](https://support.materialdigital.jp/hs-fs/hubfs/CleanShot%202026-03-12%20at%2018-45-52-png.png?width=579&height=176&name=CleanShot%202026-03-12%20at%2018-45-52-png.png)

| 項目名 | 内容 |
| --- | --- |
| スワイプ可能にする | ドラッグ・スワイプでスライドを操作可能になります |
| 前へボタン・次へボタン | スライドを操作するボタンを設置します |
| ドットナビゲーション | スライド位置を示すドットナビゲーションを設置します |
| ナビゲージョン位置 | ドットナビゲーションの位置を設定します |

### **3.注意点**

- 画像のアスペクト比（縦横比）を揃えてください
  
    - アスペクト比の統一された画像をアップロードしてください。  
      アップロード時にトリミングをすることでアスペクト比を揃える事も可能です。  
      ![](https://support.materialdigital.jp/hs-fs/hubfs/CleanShot%202026-03-16%20at%2016-05-28@2x-png.png?width=338&height=340&name=CleanShot%202026-03-16%20at%2016-05-28@2x-png.png)
- 画像の容量サイズに注意してください 
    - カルーセルでは一度に複数枚の画像を表示します。画像のファイルサイズが大きい場合、カクついた表示の原因になりUXの低下につながります。
- スライドの枚数を増やしすぎない 
    - ユーザーがすべてのスライドを閲覧しない可能性が高くなります。  
      情報を詰め込みすぎると伝えたい内容が分散してしまう恐れがあります。  
      伝えたい内容を整理したうえで、必要最小限の枚数に抑えることを推奨します。

- [Flipdeskスタートガイド](https://support.materialdigital.jp/manual/flipdesk%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%AC%E3%82%A4%E3%83%89?hsLang=ja#main-content)

    - [初めての方はこちら](https://support.materialdigital.jp/manual/flipdesk%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%AC%E3%82%A4%E3%83%89?hsLang=ja#%E5%88%9D%E3%82%81%E3%81%A6%E3%81%AE%E6%96%B9%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89)
    - [初期設定（タグ設置）](https://support.materialdigital.jp/manual/flipdesk%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%AC%E3%82%A4%E3%83%89?hsLang=ja#%E5%88%9D%E6%9C%9F%E8%A8%AD%E5%AE%9A%E3%82%BF%E3%82%B0%E8%A8%AD%E7%BD%AE)
- [Flipdeskマニュアル](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#main-content)

    - [シナリオ](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E3%82%B7%E3%83%8A%E3%83%AA%E3%82%AA)
    - [配信ターゲットの設定](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E9%85%8D%E4%BF%A1%E3%82%BF%E3%83%BC%E3%82%B2%E3%83%83%E3%83%88%E3%81%AE%E8%A8%AD%E5%AE%9A)
    - [各種タグの仕様](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E5%90%84%E7%A8%AE%E3%82%BF%E3%82%B0%E3%81%AE%E4%BB%95%E6%A7%98)
    - [レポート管理](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E3%83%AC%E3%83%9D%E3%83%BC%E3%83%88%E7%AE%A1%E7%90%86)
    - [各種設定](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E5%90%84%E7%A8%AE%E8%A8%AD%E5%AE%9A)
    - [アラート機能](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#%E3%82%A2%E3%83%A9%E3%83%BC%E3%83%88%E6%A9%9F%E8%83%BD)
    - [AI機能](https://support.materialdigital.jp/manual/flipdesk%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja#ai%E6%A9%9F%E8%83%BD)
- [Flipdeskオプション](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja#main-content)

    - [有人チャット](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja#%E6%9C%89%E4%BA%BA%E3%83%81%E3%83%A3%E3%83%83%E3%83%88)
    - [WEBプッシュ](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja#web%E3%83%97%E3%83%83%E3%82%B7%E3%83%A5)
    - [会員情報連携](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja#%E4%BC%9A%E5%93%A1%E6%83%85%E5%A0%B1%E9%80%A3%E6%90%BA)
    - [ヒートマップ](https://support.materialdigital.jp/manual/flipdesk%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3?hsLang=ja#%E3%83%92%E3%83%BC%E3%83%88%E3%83%9E%E3%83%83%E3%83%97)
- [Cross Talk](https://support.materialdigital.jp/manual/cross-talk?hsLang=ja#main-content)

    - [スタートガイド](https://support.materialdigital.jp/manual/cross-talk?hsLang=ja#%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88%E3%82%AC%E3%82%A4%E3%83%89)
- [技術的なマニュアル](https://support.materialdigital.jp/manual/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AA%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB?hsLang=ja)
- [よくある質問](https://support.materialdigital.jp/manual/%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E8%B3%AA%E5%95%8F?hsLang=ja#main-content)

    - [技術的な情報](https://support.materialdigital.jp/manual/%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E8%B3%AA%E5%95%8F?hsLang=ja#%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AA%E6%83%85%E5%A0%B1)
    - [契約・請求関連](https://support.materialdigital.jp/manual/%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E8%B3%AA%E5%95%8F?hsLang=ja#%E5%A5%91%E7%B4%84-%E8%AB%8B%E6%B1%82%E9%96%A2%E9%80%A3)

[![Chill listening crop-3](https://support.materialdigital.jp/hs-fs/hubfs/typeA-1.png?width=99&height=31&name=typeA-1.png "Chill listening crop-3")](https://materialdigital.jp/)

Copyright © Flipdesk Inc.

Copyright © 2026, 株式会社マテリアルデジタル