---
title: バナーの種類と基本設定
description: バナーの種類と基本設定について説明します。
---
[コンテンツまでスキップ](https://support.materialdigital.jp/manual/scenario-button-setting#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/scenario-button-setting#text)
2. [画像バナー](https://support.materialdigital.jp/manual/scenario-button-setting#image)
3. [テキスト+画像バナー](https://support.materialdigital.jp/manual/scenario-button-setting#text_image)
4. [HTMLバナー](https://support.materialdigital.jp/manual/scenario-button-setting#html)
5. [基本設定](https://support.materialdigital.jp/manual/scenario-button-setting#setup)
### 1. テキストバナー
テキストのみのシンプルなバナーを作成することが可能です。
見た目はシンプルですが、その分内容がストレートに伝わりやすいのが特徴です。
| **項目名** | **説明** |
| --- | --- |
| テキスト | 「テキスト」の入力欄に任意のテキストを入力することが可能です。 ※空欄の状態ではシナリオを作成することはできません。 バナーサイズに収まらない場合は、横方向のサイズは固定されたまま、縦方向にバナーが拡大されてテキストを収めるように動きます。 ※長文を入力するとバナーサイズに合わせて自動的に改行されます。 任意の場所で改行を挿入することも可能ですので、プレビューを確認しながら調整してください。 **※「”（半角ダブルクォート）」は使用できません。** |
| 文字サイズ | 文字サイズは初期値は14pxに設定されています。 数値を編集することも可能です。 空欄の状態ではシナリオを作成することはできません。 |
| 文字色と背景色 | - **文字色** 初期値は白（#FFFFFF）に設定されています。 - **背景色** 初期値はグレー（#666666）に設定されています。 色指定については文字色と同様の挙動です。 **■ 色指定の方法** デフォルトカラーが用意されていますが、任意のカラーへの変更は 「 ＋ 」ボタンから可能です。 一度追加したカラーは「 ＋ 」ボタンの隣に追加されていきます。  カラーパレットからの追加では、HEX・RGB・HSLの3種類の指定方法が用意されており、右端の矢印をクリックすることで切り替えることができます。 下部の色表示部分にて任意の場所をクリックすることでも色の選択が可能です。   |
| カスタムデザイン | 「有効にする」にチェックを入れると設定が可能です。 設定内容の詳細は下記を参照ください。 |
- **カスタムデザインについて**
「有効にする」にチェックが入っている場合に設定が可能です。
| **項目名** | **説明** |
| --- | --- |
| 文字の水平方向の配置 | 文字の揃えを指定します。 左揃え・中央揃え・右揃えの3種類から選べます。 |
| **▼ 「枠線あり」の場合に設定可能** | |
| 枠線の種類 | 枠線の種類を選択できます。 実線・破線・点線の3種類から選択可能です。 |
| 枠線の太さ | 枠線の太さをpxで指定可能です。 |
| 線色 | 枠線の色を指定可能です。 |
| **▼ どちらかを選択して使用** | |
| 四隅の丸み | バナーの四隅の丸みをpxで指定可能です。 最小値は1pxです。 - 例）10pxにした場合  |
| 四隅を別で設定 | バナーの四隅の丸みをそれぞれpxで指定可能です。 最小値は1pxです。 - 例）上部を1px、下部を10pxにした場合  |
- **AIが提案について**
テキストバナー、テキスト+画像バナーにおいて、接客文言をAIが提案・サポートする機能です。
雰囲気・概要・文字数を伝えることで、要望に沿った文言を提案します。
詳しくは[「AIが提案」を使ったバナー設定](https://support.materialdigital.jp/manual/ai_suggestion?hsLang=ja)のマニュアルをご確認ください。
### 2. 画像バナー
画像をバナーとして作成することが可能です。
作成した画像をアップロード、またはメディアライブラリからアップロード済みのファイルを選択してご利用いただけます。
- **画像ファイルを追加**
「＋画像ファイルを追加」ボタンをクリックするとファイルの選択ウインドウが開きます。使用したいファイルがあるフォルダに移動して、対象のファイルを選択します。
使用できるファイル形式はpng・gif・jpgの3種類です。
ファイルは元のサイズのままアップロードされるので、必要に応じて後述の基本設定にある「表示サイズ」の変更を行ってください。
灰色部分にファイルをドロップしてアップロードすることも可能です。
- **メディアライブラリを開く**
メディアライブラリにアップロードしたファイルを選択することも可能です。
#### **▼ アップロードできる画像ファイルの詳細**
| **使用できる形式** | png・gif・jpg |
| --- | --- |
| **アップロード可能な ファイルサイズ** | **1MB未満** ※1MBを超えた場合はエラーとなりますので、縮小するか加工しなおしてアップロードしてください。 |
| **推奨サイズ** | **500KB未満** ※500KBを超えるような大きなファイルサイズの画像ファイルをアップロードすると、実際のシナリオ適用時にバナーが表示されるまでに時間がかかり、ユーザー体験を損ねることになります。 ※ファイルをアップロードする場合は適したサイズのものを選んでください。 |
- **カスタムデザイン**
「有効にする」にチェックが入っている場合に設定が可能です。
テキストバナーと同様に、バナーを装飾することができます。
### 3. テキスト+画像バナー
テキストバナーの右または左に画像をはめ込んだバナーです。
テキストバナーを少しリッチに作成することが可能です。
| **項目名** | **説明** |
| --- | --- |
| 画像アップロード | 詳細は前述の[画像バナー](https://support.materialdigital.jp/manual/scenario-button-setting#image)を参照してください。 |
| 画像位置 | バナーの左側・右側のいずれかに画像を配置するかをラジオボタンで選択します。 選択後はすぐに画面右側のプレビューに反映されます。 |
| テキスト 文字サイズ 文字色・背景色 カスタムデザイン | 詳細は前述の[テキストバナー](https://support.materialdigital.jp/manual/scenario-button-setting#text)を参照してください。 - 「テキスト+画像バナー」の場合 - 1行14文字もしくは7文字×2行以上の文言を入力すると、バナーの外に文字がはみ出てしまうのでサイズ調整を行なってください。 |
### 4. HTMLバナー
クリエイティブエディタやHTMLエディタで自在にバナーを作成することが可能です。
テンプレートを読み込んだ後は、HTMLエディタで編集することも可能です。
#### **HTMLバナー利用における注意点**
- **リンク先URLについて**
「バナー全体にリンクを設定する」を設定した場合でも、HTMLボタン内に
`タグ`によるリンク先が記述されていれば、`タグ`で指定したURLへ遷移します。
- 「HTMLバナー本体を押すとチャットやポップアップが開き、HTMLバナー内の子ボタンを押すと詳細ページやFAQへ遷移する」ようなバナーは仕様上作成することができませんのでご了承ください。
- **HTMLに記述したCSSが効かない場合**
他のCSSと競合している可能性があります。
その場合は`!important`を追記することでCSSの優先順位を上げることが可能です。
```
.sampleclass{ font-size: 40px !important; }
```
- **エディタタイプ**
- **エディタ**
直感的な操作でクリエイティブがつくれるエディタです。
ドラッグ&ドロップとかんたんな操作だけで要素を組み立てられるのでHTMLの知識が必要ありません。
詳細については[クリエイティブエディタ](https://help.flipdesk.jp/manual/button_setting_creative_editor?hsLang=ja)のマニュアルをご確認ください。
- **エディタを開く**
要素やブロック等をドラッグ＆ドロップでセットでき、HTMLの知識がなくとも簡単にバナーを作成することが可能です。
- **テンプレートを選ぶ**
「HTMLバナーテンプレート選択」のサブウィンドウが開きます。
テンプレートが表示されますので、お好みのテンプレートを選択してください。
選択後は画面右上にある「決定」ボタンを押すと、HTML入力欄にテンプレートを構成しているHTMLコードが挿入されます。
- 「エディタを開く」ボタンをクリックし、挿入されたコード内の画像・リンク先・バナーの色などを編集することが可能です。
- **HTML**
技術者向けのエディタです。
HTMLを直接記述することが可能なためカスタマイズ性に優れていますが、HTMLの知識が必要です。
エディタの入力エリアのすぐ下にある「テンプレートから選ぶ」ボタンより選択したテンプレートについて、後述する詳細の部分を変更することによって細かな編集が可能です。
- **AIコード**
リクエスト（命令文）を入力することで、AIが代わりにHTMLのコーディングをしてくれる機能です。
0から作成することもできる他、既存のコードをAIに編集してもらうことも可能です。
詳細は[「AIコード」を使ったHTMLバナー設定](https://support.materialdigital.jp/manual/ai-html-code?hsLang=ja)のマニュアルをご確認ください。
- **メディアライブラリを開く**
メディアライブラリにアップロードしたいファイルをアップロードしたり、アップロード済みのファイルのURLをコピーすることが可能です。
画像ファイルの形式やサイズ等についての詳細は前述の[画像バナー](https://support.materialdigital.jp/manual/scenario-button-setting#image)を参照してください。
ここでは動画のアップロードも可能です。
動画ファイルの詳細は以下の通りです。
#### **▼ アップロードできる動画ファイルの詳細**
| **使用できる形式** | mp4・mov |
| --- | --- |
| **アップロード可能なファイルサイズ** | 128MB以下 ※128MBを超えた場合はエラーとなりますので、縮小するか加工し直してアップロードしてください。 |
### 5. 基本設定
- #### **サイズの設定**
| **項目名** | **説明** |
| --- | --- |
| 表示サイズ | - **固定サイズ** バナーの表示サイズをピクセルで縦横共に設定します。 縦横いずれかの欄を空欄にすると縦横比が維持されたまま、入力された数値に合わせて拡縮されます。 - **横幅100%** バナーが画面幅いっぱいに表示され、これは端末ごとの画面サイズの違いも吸収します。 設定したバナーは画面幅に合わせて拡縮され、画像バナーの場合は縦横比が維持されて拡縮されます。 テキストバナー・テキスト+画像バナーの場合、縦サイズが維持されてそのまま横方向に拡縮されます。 その場合、テキスト+画像バナーの画像部分の縦横比は維持されます。 HTMLバナーの場合、クリエイティブエディタで作成したバナーは横幅が優先され、HTMLで作成したバナーは横幅は無視されます。 また、後述のバナー表示位置によって固定される位置がことなります。 ※下マージン・上マージンは無効化されます。 - 右下・左下・中央下のいずれかの場合：画面下部 - 右上・左上・中央上のいずれかの場合：画面上端 |
| バナーサイズ | バナーのサイズを変更できます。 - **高さの自動計算をする** 高さの自動計算を行います。 サイト内の他のCSSの影響を受けるなどしてバナーが見切れるなど意図した表示がされない場合はチェックを外し、高さを手動で調整してください。 |
- #### 表示位置の設定
| **項目名** | **説明** |
| --- | --- |
| 表示位置 | バナーの表示位置を設定します。初期状態は「左下」です。 選択可能なバナー位置は、右下・左下・中央下の画面下側3箇所と、右上・左上・中央上の画面上側3箇所の計6箇所です。 場所によって後述の出現エフェクトの選択肢が変動します。 |
| 下マージン | バナーの下マージンを設定します。 縦方向のマージンのみ設定が可能です。 表示位置が画面下側の場合は下マージン、画面上側の場合は上マージンに自動的に切り替わります。 ここで設定した数値分、バナーの表示位置が画面端から離されます。 |
| 出現エフェクト | バナーが表示されるときの動きについて設定を行います。 - **なし** 初期状態です。バナー表示時にそのまま指定された位置にバナーが表示されます。 - **下から** 画面下端からバナーがスライドインし、指定された位置まで移動して停止します。バナーの表示位置を画面上側のいずれかに設定している場合は選択できません。 - **横から** 画面横からバナーがスライドインし、指定された位置まで移動して停止します。バナー位置が右下、右上の場合は画面右端からスライドインします。それ以外の場所の場合は画面左端からスライドインします。 - **上から** 画面上端からバナーがスライドインし、指定された位置まで移動して停止します。 |
- #### **バナーのタイプ**
****
バナーを画面内にどのように埋め込むかの設定することが可能です。
初期状態は「オーバーレイ」が選択されています。
| **項目名** | **説明** |
| --- | --- |
| オーバーレイ | 表示位置で指定した場所にバナーを常に表示します。 閲覧しているページとは別のレイヤーに表示されますので、画面をスクロールしてもバナーの位置は変わらずに表示され続けます。 |
| インライン | バナーをインライン要素としてページ内の任意の位置に差し込むことが可能です。 |
| インライン置換 | ページ内の既存の要素と、インラインバナーを置換することができます。 例えばページ内のバナーを別のバナーに入れ替えるなどの使い方が可能です。 |
※「インライン」「インライン置換」はあらかじめインラインバナータグを設置しておくことで、指定した場所にバナーを挿入することができますが、ページ内の既存のDOM要素を利用することも可能です。
※インラインDOMを利用する場合のマニュアルは[こちら](https://help.flipdesk.jp/manual/scenario_inline_button?hsLang=ja)
- #### **透過**
「何もしない」以外を選んだ場合、スクロールによってバナーの透過処理がされます。
透過されるまでの時間は指定できません。
| **項目名** | **説明** |
| --- | --- |
| 何もしない | 透過処理を行いません。 |
| スクロール時以外はバナーを透過する | バナーの表示後に一定時間経過するとバナーが半透明に透過されます。 画面のスクロールで透過が解除されます。 |
| スクロール中は バナーを透過する | スクロール中はバナーが半透明に透過され、スクロール停止後に透過が解除されます。 |
- #### **カスタムフォント**
テキストバナー、テキスト+画像バナーの時にのみ表示され、ご利用いただけます。
「有効にする」にチェックを入れると文字をデフォルト以外のフォントに指定することが可能です。
バナー・ポップアップの両方に適用されます。
※フォントの拡張はできません。
- #### **閉じるボタンのふるまい **
シナリオの閉じるボタンをクリックしたユーザーに対して、非表示期間を変更することが可能です。
「30分」「1時間」「1日」「今後表示しない」の4種類から選択できます。
なお、非表示期間は一般設定と比較して長い方が優先されます。
※一般設定にあるオプトアウトとの優劣については[こちら](https://help.flipdesk.jp/manual/flipdesk-optional-settings?hsLang=ja#optout)
※閉じるボタンのカスタマイズ詳細については[こちら](https://help.flipdesk.jp/manual/closebutton_editor?hsLang=ja)
**閉じるボタンの非表示対応は推奨しておりません**
- シナリオを表示し続けたい（閉じるボタンを非表示にしたい）というご要望がございますが、WEB接客の観点から「常に表示」「消したのに出続ける」挙動は推奨しておりません。
- ユーザー自身でボタンやポップアップの表示・非表示が選べない挙動はSEOや広告申請にも影響を与えますのでご注意ください。
- [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)
[](https://materialdigital.jp/)
Copyright © Flipdesk Inc.
Copyright © 2026, 株式会社マテリアルデジタル