レスポンシブダイアログクリエイティブ

レスポンシブダイアログのクリエイティブについて

レスポンシブダイアログ
は、ウェブサイト／アプリのインサイトプロジェクトで利用できるクリエイティブタイプです。このクリエイティブタイプでは、異なるデバイスサイズに反応する、アクセシビリティに準拠したクリエイティブを作成できます。

レスポンシブダイアログクリエイティブは、過去に追加の JavaScript ベースの更新を必要とすることなく、追加設定不要のアクセシビリティ機能を提供します。この機能にアクセス

すると、他のクリエイティブとともにレスポンシブダイアログを使用できるようになります。

レスポンシブダイアログを作成

したら、インターセプトを設定する前にカスタマイズできる6つの領域（［サイズ］&amp、［スタイル］、［メッセージ］、［ボタン］、［ロゴ］&amp、［画像］、［アニメーション］、［翻訳］）があります。

サイズ; スタイル(&A)

［サイズ、スタイル］セクションでは、以下のようにクリエイティブの全体的な見た目と操作性をカスタマイズできます。

標準サイズ; スタイルオプション(&A)

埋込ターゲットを使用しない場合に表示されるオプションであり、ダイアログでサーベイを直接表示の選択を解除したままにします。

• コンテンツの間隔：クリエイティブのテキストの密度を設定します。[コンパクト]、[中]、または [スペース] のいずれかを選択できます。
• 色：カラーピッカーパレットから選択して、クリエイティブの背景色を設定します。
• 罫線の形：クリエイティブの罫線の半径を設定します。これにより、角の丸みが決定されます。[なし]、[やや丸め]、[まあまあ丸め]、[非常に丸め] から選択できます。
• 影付き：クリエイティブを囲む影を設定します。[なし]、[ライト]、[中]、[重] から選択できます。

ダイアログにサーベイを直接表示

［アンケートをダイアログに直接表示］
を選択すると、アンケートはボタンにリンクされるのではなく、クリエイティブに埋め込まれます。クリエイティブでアンケートの完全で正確な体験をテストするには、ブックマークレットを使用します。詳細については、インターセプトのテストを参照してください。

このオプションを選択すると、ターゲットアンケートですでに設定されているものとは別に、
［レスポンシブ］ダイアログにメッセージやボタンが表示されなくなるため、［メッセージ］タブと［ボタン］タブが削除されます。また、このオプションを選択すると、サイズとスタイルの設定も異なります。

• アンケートに合わせてダイアログを自動的にリサイズ：ダイアログに表示されているアンケートに合うように、レスポンシブダイアログのサイズを自動的に変更します。ウィンドウは、アンケートの最初のページの長さに応じて自動的にリサイズされます。

  ヒント：レスポンシブなダイアログを自動的に大きいサイズに調整する場合は、アンケートの最初のページに質問を追加するか、アンケートにスペースを追加します。レスポンシブダイアログを小さくするには、質問を後続のページに移動したり、改ページを追加したり、アンケート内のスペースを減らしたりします。

• 色：カラーピッカーパレットから選択して、クリエイティブの背景色を設定します。
• 罫線の形：クリエイティブの罫線の半径を設定します。これにより、角の丸みが決定されます。[なし]、[やや丸め]、[まあまあ丸め]、[非常に丸め] から選択できます。
• 影付き：クリエイティブを囲む影を設定します。[なし]、[ライト]、[中]、[重] から選択できます。
• アクセシビリティ
  • Iframe タイトル：訪問者が埋め込みウィンドウに移動すると、このテキストがスクリーンリーダーによって読み取られます。
    Qtip: ダイアログ作成時にIframeタイトルを提供することで、ダイアログがユーザーにとってアクセシビリティのあるものになります。

テンプレートの使用

アンケートテーマをクリエイティブのスタイル設定にインポート
する場合は、［テンプレートを使用］をクリックします。

テーマは、ブランド管理者がそのブランドのユーザーを使用するために作成します。ドロップダウンメニューからブランドを選択し、インポートをクリックします。このリストにテーマを追加する場合は、ブランド管理者にお問い合わせください。

テーマテンプレートをインポートすると、クリエイティブに関する次の設定が調整されます。

• 原色
• 二次色
• 背景色
• 質問テキストのサイズ
• 回答テキストサイズ
• 質問の間隔
• 前景コントラスト
• ロゴ

カスタムCSS

カスタマイズCSS ボタンをクリックすると、レスポンシブなダイアログのCSSを自由にカスタマイズできます。デフォルトのものに加えて、カスタムクラスやプロパティを追加することができます。ここで行った編集はプレビューには反映されないかもしれません。ガイド付きセットアップを完了させ、デプロイ前にインターセプトをテストすることを忘れないでください。

-レスポンシブなダイアログのデフォルトCssを表示するには、ここをクリックしてください。

定義済みテンプレート内のCSSセレクタやクラスを削除すると、テンプレートの更新や再読み込みができなくなります。インターセプトのCssをリセットする必要がある場合に備えて、このテンプレートを以下に掲載する：

Qtip:以下のスニペットのINTERCEPT_IDをインターセプトのIDに置き換えてください。

/* レスポンシブなダイアログスタイルをオーバーライドするには、以下のクラスを使用してください。
注意以下のコードはそのまま提供されます。
、実装するにはプログラミングの知識が必要です。
Qualtricsサポートでは、カスタムコーディングに関するサポートやコンサルティングを提供していません。
クアルトリクスXMコミュニティ（英語）の経験豊富なユーザーにいつでも質問できます。
カスタムコードのヘルプは https://community.qualtrics.com/custom-code-12 */
/* ダイアログの後ろに表示されるシャドウボックスのスタイル。注: このシャドーボックスへの変更はプレビューアには反映されません */
.QSIWebResponsiveShadowBox {
/* font-family：Arial, Helvetica, sans-serif; */
/* z-index：1; */
/* margin-top: 10px !important; */
/* white-space: normal !important; */
}
/* コンテナのフェードのスタイル */
.QSIWebResponsive-creative-container-fade {
/* */
}
/* ウェブレスポンシブなダイアログのメインコンテナのスタイル */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_content {
/* line-height: 1em ！important; */
/* margin: 0 0.5em 0 0 !important; */
/* width: auto !important; */
/* font-size: inherit !important; */
/* font-weight: normal !important; */
/* font-style: normal !important; */
/* display: inline !important; */
/* color：#000000 !important; */
}
/* クリエイティブのロゴコンテナ部分のスタイル */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_logo-container {
/* display: inline-block !important; */
/* margin-right: 5px !important; */
}
/* クリエイティブのテキストコンテナ部分のスタイル。これには、ヘッダセクションと説明セクションが含まれます */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_text-container {
/* display: inline-block !important; */
}
/* クリエイティブの見出しセクションのスタイル */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_headline {
/* font: inherit ！important; */
}
/* クリエイティブの説明セクションのスタイル */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_description {
/* font: inherit !important; */
/* background: transparent !important; */
/* border: none !important; */
/* padding：0 !important; */
/* vertical-align: middle !important; */
/* margin: 0 0.4em 0 0 !important; */
/* cursor: pointer !important; */
}
/* ボタンを格納するコンテナのスタイル */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_button-container {
/* display: inline-block ！important; */
}
/* ダイアログの最初のボタンのスタイル */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_button-1 {
/* font: inherit ！important; */
/* padding: .4em .4em !important; */
/* min-width: 3em !important; */
/* line-height: 1em !important; */
/* border-radius：4px !important; */
/* border-width: 1px !important; */
/* border-style: solid !important; */
/* cursor: pointer !important; */
/* background：#FFF !important; */
/* color：#000 !important; */
/* border-color：#000 !important; */
}
/* ダイアログの2番目のボタンのスタイル */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_button-2 {
/* font: inherit ！important; */
/* padding: .4em .4em !important; */
/* min-width: 3em !important; */
/* line-height: 1em !important; */
/* border-radius：4px !important; */
/* border-width: 1px !important; */
/* border-style: solid !important; */
/* cursor: pointer !important; */
/* background：#FFF !important; */
/* color：#000 !important; */
/* border-color：#000 !important; */
}
/* ダイアログを閉じるボタンのスタイル */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_close-btn {
/* display: inline-block !important; */
/* margin-right: 5px !important; */
}
}.

メッセージ

［メッセージ］セクションでは、クリエイティブに表示されるヘッドラインと説明を設定できます。見出しは、訪問者の注意を捉える短いフレーズにするのが一般的です。一方、説明には、クリエイティブが現れた理由の詳細が示されています。

フォントはクリエイティブを表示するWebサイトより採用される。ヘッドラインと説明の両方について、実際のテキスト、フォントサイズ、およびフォントウェイトをカスタマイズできます。

ボタン

ボタンセクションでは、各ボタンの数、外観、およびターゲットに固有のオプションを設定することができます。

1. まず、クリエイティブのボタン数を選択します。
2. ボタンごとにボタンの形状を指定するには、なし、やや丸い、まあまあ丸い、または完全に丸めのいずれかを選択します。
3. テキストサイズを指定します。
4. ボタンごとに、以下を実行します。
   • テキストを指定します。ボタンに書いてあるのはこれだ。
   • ［アクション］ボタンで［ターゲットを開く］または［インターセプトを消去］を選択します。［ターゲットを開く］は、このボタンがインターセプトの基準で指定したターゲットを開くことを示します。［インターセプトを却下］ではインターセプトが閉じられます。
   • カラーピッカーパレットを使用して、ラベル色、背景色、および枠線色を選択します。
   • ARIA ラベルを指定します。デフォルトでは、スクリーンリーダはボタンラベルに指定したテキストを読み上げます。ただし、「このボタンをクリックして新しいアンケートウィンドウを開く」など、スクリーンリーダーで追加のコンテキストを読みたい場合があります。この場合、ボタンコントロールの ARIA ラベルを指定することができます。
     注意：クリエイティブにアクセスできるようにするには、ARIAラベルが一致しているか、ボタンテキストが含まれている必要があります。

ロゴと画像(&A)

［ロゴ］、［画像］セクションで、クリエイティブに含める画像／ロゴを1つまたは複数指定できます。

モバイルまたはデスクトップ用に別の画像をアップロードすることを選択できます

。これにより、クリエイティブがモバイルまたはデスクトップのブラウザに表示されるかどうかに応じて、異なる画像が表示されます。また、同じ画像をアップロードすることもできますが、解像度が異なるため、どちらのタイプのデバイスブラウザでも表示を最適化できます。

画像のアクセシビリティに準拠
させるため、画像と一緒に移動する Alt テキストを指定することもできます。(Alt テキストは、スクリーンリーダーが視覚障害のあるユーザーに画像を説明できる機能です)。

アニメーション

アニメーションセクションでは、画面に表示されるクリエイティブのアニメーションのタイプ（［フェード
］または［スライドイン］）を選択できます。

• ダイアログ表示までの時間: ユーザがこのダイアログが表示されるインターセプト条件 (アプリをクリックするなど) を満たしてから経過した秒数。
• ダイアログを閉じるタイマーを設定: ダイアログが表示された後にダイアログ自体を閉じる時間を決定します。このオプションの選択を解除すると、ダイアログを閉じて画面から削除するようユーザに強制できます。
• 移行タイプ：画面の表示時にクリエイティブがフェードまたはスライドのどちらに表示されるかを選択します。［スライドインアニメーション］を選択すると、画面上のクリエイティブの最後の位置（左上、右上、左下、右下）を選択することもできます。
  ヒント：［スライドイン］移行タイプを使用すると、このクリエイティブはスライダークリエイティブのように動作します。
• フェード背景：クリエイティブの裏にあるデバイスの画面の色（なし、ライト、中、ダーク）。
• アンケートの表示：アンケートが表示される場所（［新規］ウィンドウ、［埋め込み］ウィンドウ、［現在のウィンドウ］、［ポップアンダーウィンドウ］、［新規］タブ）。

必要に応じて、アニメーションプレビューをクリックして、この画面でアニメーション設定をプレビューすることもできます。

翻訳

レスポンシブダイアログでは、すべてのテキストの翻訳を追加できます。詳細な手順については、「フィードバックボタンの翻訳& レスポンシブダイアログ」ページを参照してください。

レスポンシブダイアログクリエイティブのプレビュー

レスポンシブダイアログクリエイティブの設定時に、異なる画面サイズ（デスクトップ、モバイル、タブレットなど）でクリエイティブがどのように表示されるかをプレビューできます。

レスポンシブダイアログクリエイティブの保存と公開

レスポンシブダイアログクリエイティブに変更を追加
するときには、プレビューエリアのすぐ上にある、右下隅にある［保存］ボタンをクリックして、定期的に作業内容を保存してください。

インターセプトの設定

レスポンシブダイアログのクリエイティブは、標準のインターセプトで使用できます。インターセプトのクリエイティブを設定するときに、［レスポンシブダイアログ］セクションでレスポンシブダイアログクリエイティブを選択していることを確認してください。