ボタンの種類と基本設定

シナリオ作成のうち、ボタンについて説明します。

1.テキストボタン

項目名	説明
テキスト	「テキスト」の入力欄に任意のテキストを入力することでボタンプレビューに反映されます。 空欄の状態ではシナリオを作成することはできません。長大なテキストを入力するとボタンサイズに合わせて自動的に改行されます。 ボタンサイズに納まらない場合は横方向のサイズは固定されたまま、縦方向にボタンが拡大されてテキストを収めるように動きます。 任意の場所で改行を挿入することもできます。その場合は自動改行及び自動サイズ調整機能がキャンセルされますので、プレビューを見ながら調整してください。「”（半角ダブルクォート）」は使用できません。
文字サイズ	文字サイズは初期値は14pxに設定されています。数値を編集することで直ちにプレビューに反映されます。 空欄の状態ではシナリオを作成することはできません。
文字色と背景色	文字色は初期値は白(#FFFFFF)に設定されています。 背景色は初期値はグレー(#666666)に設定されています。 色指定については文字色と同様の挙動です。 デフォルトカラーが用意されていますが、任意のカラーへの変更は＋ボタンから可能です。一度追加したカラーは＋ボタンの隣に追加されていきます。 カラーパレットからの追加では、HEX / RGB / HSLの3種類の指定方法が用意されており、をクリックすることで切り替えることができます。下部の色表示部分にて任意の場所をクリックすることでも色の選択が可能です。
カスタムデザイン	＜有効にする＞にチェックを入れると設定が可能です。設定内容の詳細は下記を参照ください。

カスタムデザインについて

「有効にする」にcheckが入っている場合に設定が可能です。

項目名	説明
文字の水平方向の配置	文字の揃えを指定します。 左揃え、中央ぞろえ、右揃えの3種類から選べます。
枠線ありの場合に設定可能です。
枠線の種類	枠線の種類を選べます。 実践、破線、点線の3種類から選べます。
枠線の太さ	枠線の太さをpxで指定できます。
線色	枠線の色を指定できます。
どちらかを選択して使用します
四隅の丸み	ボタンの四隅の丸みをpxで指定できます。 最小値は1pxです。 例）10pxにした場合
四隅を別で設定	ボタンの四隅の丸みをそれぞれpxで指定できます。 最小値は1pxです。 例）上部を1px、下部を10pxにした場合

 

2. 画像ボタン

 

• 画像ファイルを追加

  「＋」ボタンをクリックするとファイルの選択ウインドウが開きます。使用したいファイルがあるフォルダに移動して、対象のファイルを選択します。
  使用できるファイル形式はPNG、GIF、JPGの3種類です。
  ファイルは元のサイズのままアップロードされるので、必要に応じて後述の「表示サイズ」の変更を行ってください。
  灰色部分にファイルをドロップしてアップロードすることも可能です。
• メディアライブラリを開く
  メディアライブラリーにアップロードしたファイルを選択することも可能です。

アップロードできる画像ファイルの詳細

内容	説明
使用できる形式	PNG、GIF、JPG
アップロード可能なファイルサイズ	1MB未満 ※1MBを超えた場合はエラーとなりますので、縮小するか加工しなおしてアップロードしてください。
推奨サイズ	500KB未満 ※500KBを超えるような大きなファイルサイズ（表示サイズではありません）の画像ファイルをアップロードすると、実際のシナリオ適用時にボタンが表示されるまでに時間がかかり、ユーザー体験を損ねることになります。ファイルをアップロードする場合は適したサイズのものを選んでください。

 

3. テキスト＋画像ボタン

項目名	説明
画像アップロード	詳細は前述の画像ボタンを参照してください。
画像位置	ボタンの左側/右側のいずれに画像を配置するかをラジオボタンで選択します。選択は直ちにプレビューに反映されます。
テキスト 文字サイズ 文字色/背景色 カスタムデザイン	詳細は前述のテキストボタンを参照してください。 テキスト＋画像ボタンの場合、1行14文字もしくは7文字×2行以上の文言を入力した場合、ボタンの外に文字が飛び出ますのでご注意ください。

 

4. HTMLボタン

エディタタイプ

• エディタ
  直感的な操作でクリエイティブがつくれるエディタです。ドラッグ&ドロップとかんたんな操作だけで要素を組み立てられるのでHTMLの知識が必要ありません。
  クリエイティブエディタの詳細についてはこちらをご参照ください。
  
  • 【エディタを開く】
    要素やブロック等をドラッグ＆ドロップでセットでき、簡単にボタンを作成することができます。
  • 【テンプレートを選ぶ】
    「HTMLボタンテンプレート選択」のサブウィンドウが開きます。あらかじめ用意されたテンプレートから目的に合ったものを選択し、✓が緑に変化した選択状態で、右上にある「決定」ボタンを押すと、HTML入力欄にテンプレートを構成しているHTMLコードが挿入されます。
    【エディタを開く】より、挿入されたコード内の画像、リンク先、ボタン色などを編集することで簡単にボタンを作成することができます。
    
• HTML
  技術者向けのエディタです。HTMLを直接記述出来るためカスタマイズ性に優れますがHTMLの知識が必要です。
  エディタの入力エリアのすぐ下にある【テンプレートから選ぶ】ボタンより選択したテンプレートについて、口述する詳細の部分を変更することによって細かな編集が可能です。
  　
  ※HTMLエディタ下部のテンプレートは将来的に廃止される予定です。クリエイティブのテンプレートをご利用ください。

• • HTMLテンプレート編集の詳細
    HTMLテンプレート編集はテンプレート内に設定されているパラメータを操作することで、自由にボタンの見た目を変えることができます。各項目の詳細について本項で説明します。
    
    
• AIコード
  • ベースHTMLを参考にリクエストにもとづいてAIがHTMLを生成します。
     
    

    項目名	説明
    リクエスト	AIに生成したいHTMLボタンの概要を指示します。デフォルトでは”目的”で記入した文章が入力されています。 ベースHTMLに書かれているHTMLを参考に、リクエスト文を加味したHTMLが生成されます。 ベースHTMLが空の状態から生成する事も可能です。
    ベースHTML	生成されたHTMLです。 ”AIで生成”を実行した時、AIが参考にするHTMLになります。
    リセット	ベースHTMLの記述をリセットする事ができます。
    既存のHTMLをつかう	・通常エディタのHTML HTMLボタンのデフォルトデザインが表示されます ・クリエイティブエディタのHTML ”エディタ”タブのHTMLが表示されます ・テンプレートのHTML Flipdeskのデザインテンプレートから選択できます
    AIで生成	リクエストとベースHTMLを参考に生成を実行します。

 

• • 一部修正モード
    • 修正したい箇所に対してプロンプト(質問文)を作成する機能です。
      修正したい箇所をドラッグしてプロンプトを入力してください。

 

メディアライブラリを開く

メディアライブラリーにアップロードファイルをアップロードしたり、アップロード済みのファイルのURLをコピーする事が可能です。画像ファイルの形式やサイズ等についての詳細は前述の画像ボタンを参照してください。
ここでは動画のアップロードも可能です。動画ファイルの詳細は以下の通りです。

アップロードできる動画ファイルの詳細

 

5. 基本設定

• サイズ

  項目名	説明
  表示サイズ	固定サイズ ボタンの表示サイズをピクセルで縦横共に設定します。 縦横いずれかの欄を空欄にすると縦横比が維持されたまま、数値が入った方のパラメータに合わせて拡縮されます。  横幅100% ボタンが画面幅ちょうどに表示されます。 後述のボタン表示位置が右下/左下/中央下のいずれかの場合は画面下端に、右上/左上/中央上のいずれかの場合は画面上端に固定されます（下マージン/上マージンが無効化）。 画面幅に合わせてボタンが拡縮されます。これは端末ごとの画面サイズの違いも吸収します。 画像ボタンの場合、縦横比が維持されて拡縮されます。 テキストボタン/テキスト＋画像ボタンの場合、縦サイズが維持されてそのまま横方向に拡縮されます。その場合テキスト＋画像ボタンの画像部分の縦横比は維持されます。 HTMLボタンの場合、クリエイティブエディタは横幅はこちらが優先されます。HTMLで作成したものはこちらの横幅は無視されます。
  ボタンサイズ	ボタンのサイズを変更できます。 高さの自動計算をする 高さの自動計算を行います。サイト内の他のCSSの影響を受けるなどしてボタンが見切れるなど意図した表示がされない場合はチェックを外し、高さを手動で調整してください。

  

• 表示位置

  項目名	説明
  表示位置	ボタンの表示位置を設定します。初期状態は「右下」です。 選択可能なボタン位置は、右下/左下/中央下の画面下側3箇所と、右上/左上/中央上の画面上側3箇所の6箇所です。場所によって後述の出現エフェクトの選択肢が変動します。
  下マージン	ボタンの下マージンを設定します。初期状態は「下マージン10px」です。縦方向のマージンのみ設定が可能です。 表示位置が画面下側の場合は下マージン、画面上側の場合は上マージンに自動的に切り替わります。 ここで設定した数値分、ボタンの表示位置が画面端から離されます。
  出現エフェクト	ボタンが表示されるときの動きについて設定を行います。 なし 初期状態です。ボタン表示時にそのまま指定された位置にボタンが表示されます。 下から 画面下端からボタンがスライドインし、指定された位置まで移動して停止します。ボタンの表示位置を画面右上側のいずれかに設定している場合は選択できません。 横から 画面横からボタンがスライドインし、指定された位置まで移動して停止します。ボタン位置が右下、右上の場合は画面右端からスライドインします。それ以外の場所の場合は画面左端からスライドインします。 上から 画面上端からボタンがスライドインし、指定された位置まで移動して停止します。

  

• ボタンのタイプ
  
  ボタンを画面内にどのように埋め込むかの設定ができます。初期状態は「オーバーレイ」が選択されています。

  項目	説明
  オーバーレイ	表示位置で指定した場所にボタンを常に表示します。閲覧しているページとは別のレイヤーに表示されますので、画面をスクロールしてもボタンの位置は変わらずに表示され続けます。
  インライン	ボタンをインライン要素としてページ内の任意の位置に差し込むことができます。
  インライン置換	ページ内の既存の要素と、インラインボタンを置換することができます。例えばページ内のバナーを別のバナーに入れ替えるなどの使い方が可能です。

  ※「インライン」「インライン置換」はあらかじめインラインボタンタグを設置しておくことで、指定した場所にボタンを挿入することができますがページ内の既存のDOM要素を利用することもできます。
  インラインDOMを利用する場合の説明はこちらをご参照ください。

• 透過
  
  「何もしない」以外を選んだ場合、スクロールによってボタンの透過処理がされます。透過されるまでの時間は指定できません。
  

  項目	説明
  何もしない	透過処理を行いません。
  スクロール時以外はボタンを透過する	チェックを入れるとボタンの表示後に一定時間経過するとボタンが半透明に透過されます。画面のスクロールで透過が解除されます。
  スクロール中はボタンを透過する	スクロール中はボタンが半透明に透過され、スクロール停止後に透過が解除されます。

• カスタムフォント　※テキストボタン、テキスト＋画像ボタンの時にのみ表示されます
  
  ＜有効にする＞にチェックを入れると文字をデフォルト以外のフォントに指定できます。ボタン・ポップアップの両方に適用されます。
  フォントの拡張は出来ません。

• 閉じるボタンのふるまい
  
  
  • シナリオの閉じるボタンをクリックしたユーザーに対して、非表示期間を変更できます。「30分」「1時間」「1日」「今後表示しない」の4種類から選択可能です。
    
    なお、非表示期間は一般設定と比較して長い方が優先されます。
    ※一般設定にあるオプトアウトとの優劣についてはこちら
  • 閉じるボタンのカスタマイズ詳細についてはこちら