レスポンシブなダイアログ
このページの内容
レスポンシブなダイアログクリエイティブについて
レスポンシブダイアログは、ウェブサイト／アプリアプリインサイトプロジェクトで利用できるガイド付きインターセプトの一種です。レスポンシブダイアログを使用すると、さまざまなデバイスサイズに対応し、アクセシビリティに準拠したオーバーレイをウェブサイトに作成できます。
この機能にアクセスできるようになると、他のクリエイティブとともにレスポンシブなダイアログが利用可能になります。
レスポンシブなダイアログの作成
プラットフォームはウェブサイトに設定したままにします。
オーバーレイを選択します。
インターセプトの作成をクリックします。
[セットアップ]ページで、[外観]を選択します。
従来のインターセプトエディターを使用するには、下にスクロールしてレスポンシブなダイアログを選択します。その後、手順7と8に従ってインターセプトの外観をカスタマイズします。
ヒント：インターセプトのレイアウトを構築するための新しいアピアランススタジオが導入されました。このエディターでは、このページで説明されているものと同じカスタマイズオプションに加え、より高度なオプションと柔軟なエディターが提供されます。「中央ポップオーバー」または「コーナー通知」テンプレートを使用して開始します。
このサポートページで、以下に概説されている手順を完了してください。
必要に応じて翻訳を追加します。
接続を追加をクリックして、カスタムリンクまたはアンケートをダイアログに追加します。
以下の中から1つ選択してください。
- 既存のアンケートを選択: アクセス権のあるアンケートにリンクします。使用したいプロジェクトが公開されており、利用可能な匿名リンクがあることを確認してください。
- 外部リンクを追加：完全なURLを貼り付けます。
接続を保存をクリックします。
ターゲティングロジックを追加します。
埋め込みデータを追加します。
インターセプトが表示されるタイミングやXM Directoryへの接続など、インターセプトの設定を調整します。
変更を公開します。
ヒント：最終的な設定手順と公開の詳細については、ガイド付きインターセプトの作成も参照してください。
サイズとスタイル
サイズとスタイルセクションでは、クリエイティブ全体の見た目と操作性を次のようにカスタマイズできます。
標準サイズとスタイルのオプション
埋め込みターゲットを使用せず、 ダイアログにアンケートを直接表示するの選択を解除した場合に表示されるオプションです。
- コンテンツの間隔：クリエイティブのテキスト密度を設定します。コンパクト、ミディアム、 スペーシャスのいずれかを選択できます。
- 色：カラーピッカーパレットから選択して、クリエイティブの背景色を設定します。
- 枠線の形状：クリエイティブの枠線の角の半径を設定します。角の丸みを決定します。なし、やや丸い、丸い、非常に丸いから選択できます。
- ドロップシャドウ：クリエイティブを囲むドロップシャドウを設定します。なし、弱、中、強から選択できます。
ダイアログにアンケートを直接表示
ダイアログにアンケートを直接表示を選択すると、アンケートはボタンでリンクされるのではなく、クリエイティブに埋め込まれます。クリエイティブ内のアンケートで完全かつ正確なエクスペリエンスをテストするには、ブックマークレットを使用してください。詳細はインターセプトのテストを参照してください。
ヒント：この設定は、このクリエイティブに接続されているアクションセットで設定された表示オプションを上書きします。アクションセットの表示オプションに関する詳細は、表示オプションを参照してください。
このオプションを選択すると、ターゲットアンケートで既に設定されているものを除き、レスポンシブなダイアログにメッセージやボタンが表示されなくなるため、メッセージタブと ボタンタブが削除されます。このオプションを選択すると、サイズとスタイルの設定も異なります。
アンケートに合わせてダイアログのサイズを自動調整：ダイアログに表示しているアンケートに合わせて、レスポンシブダイアログのサイズを自動調整します。ウィンドウは、アンケートの最初のページの長さに応じて自動的にサイズ変更されます。
ヒント: 自動サイズ変更は、ブラウザウィンドウの高さによって制限されます。アンケートの最初のページに質問が多数ある場合は、質問を移動したり、新しいページ区切りを追加したりして、最初のページを短くすることができます。ただし、アンケートが途中で切れてしまうのを防ぐための最善策は、新しいアンケート回答エクスペリエンスを有効にすることです。
- 色：カラーピッカーパレットから選択して、クリエイティブの背景色を設定します。
- 枠線の形状：クリエイティブの枠線の角の半径を設定します。角の丸みを決定します。なし、やや丸い、丸い、非常に丸いから選択できます。
- ドロップシャドウ：クリエイティブを囲むドロップシャドウを設定します。なし、弱、中、強から選択できます。
- アクセシビリティ
Iframeのタイトル: このテキストは、訪問者が埋め込みウィンドウに移動したときにスクリーンリーダーによって読み上げられます。
ヒント：ダイアログ作成時にIframeのタイトルを指定すると、ユーザーがダイアログにアクセスしやすくなります。
ヒント：左下の矢印をクリックすると、セクションラベルが表示されます。セクションアイコンのみを表示するには、ラベルを非表示をクリックします。
テンプレートを使用する
クリエイティブのスタイル設定にアンケートテーマをインポートする場合は、テンプレートを使用をクリックします。
テーマは、ブランドのユーザーが使用するためにブランド管理者が作成します。ドロップダウンメニューからブランドを選択し、インポートをクリックします。このリストにテーマを追加したい場合は、ブランド管理者に詳細をお問い合わせください。
テーマテンプレートをインポートすると、クリエイティブの以下の設定が調整されます。
- 原色
- 二次色
- 背景色
- 質問テキストのサイズ
- 回答テキストのサイズ
- 質問の間隔
- 前景コントラスト
- ロゴ
ヒント：クリエイティブの設定は、テンプレートとして使用されるテーマから切り離されています。テンプレートのテーマが変更されてもクリエイティブの設定は更新されず、クリエイティブの設定を変更してもテンプレートのテーマは変更されません。
カスタムCSS
CSSをカスタマイズボタンをクリックすると、レスポンシブダイアログのCSSを任意にカスタマイズできます。デフォルトのものに加えて、カスタムのクラスとプロパティを追加できます。ここで行った編集はプレビューに反映されない場合があります。ガイド付きセットアップを完了して、デプロイ前にインターセプトをテストしてください。
注意: 以下のコードは現状のまま提供されるものであり、実装にはプログラミングの知識が必要です。Qualtricsサポートでは、カスタムコーディングに関するサポートやコンサルティングを提供していません。その代わり、クアルトリクスXMコミュニティの経験豊富なユーザーにいつでも質問できます。
-レスポンシブダイアログのデフォルトCSSを表示するには、ここをクリックしてください-
-レスポンシブダイアログのデフォルトCSSを表示するには、ここをクリックしてください-
ヒント：以下のスニペットにあるINTERCEPT_IDを、ご自身のインターセプトのIDに置き換えてください。
/* 以下のクラスを使用して、レスポンシブダイアログのスタイルを上書きします。
注意：以下のコードは現状のまま提供されるものであり
、実装にはプログラミングの知識が必要です。
Qualtricsサポートでは、カスタムコーディングに関するサポートやコンサルティングを提供していません。
クアルトリクスXMコミュニティ（英語）の経験豊富なユーザーにいつでも質問できます。
カスタムコードに関するヘルプは、https://community.qualtrics.com/custom-code-12 を参照してください */
/* ダイアログの背後に表示されるシャドーボックスのスタイルを設定します。注：このシャドーボックスへの変更は、プレビューアーには反映されません */
.QSIWebResponsiveShadowBox {
/* font-family: エリアル、ヘルベチカ、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; */
/* マージン: 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; */
/* 行の高さ: 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; */
/* 行の高さ: 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; */
}
}
メッセージ
メッセージセクションでは、クリエイティブに表示されるヘッドラインと説明を設定できます。見出しは、一般的に訪問者の注意を引く短いフレーズにし、説明文では、そのクリエイティブが訪問者に表示された理由をより詳しく説明します。
クリエイティブが表示されるウェブサイトからフォントが採用されます。見出しと説明の両方で、実際のテキスト、フォントサイズ、フォントの太さをカスタマイズできます。
ボタン
ボタンセクションでは、各ボタンの数、外観、ターゲットに固有のオプションを設定できます。
- テキストを指定してください。これはボタンに表示される文言です。
- ボタンアクションでターゲットを開くかインターセプトを閉じるかを選択します。ターゲットを開くは、このボタンがインターセプトの基準で指定したターゲットを開くことを示します。インターセプトを閉じるは、インターセプトを閉じるだけです。
- カラーピッカーパレットを使用して、ラベルの色、背景色、枠線の色を選択します。
- ARIA ラベルを指定します。デフォルトでは、スクリーンリーダーはボタンのラベルに指定したテキストを読み上げます。ただし、場合によっては、「このボタンをクリックすると新しいアンケートウィンドウが開きます」など、スクリーンリーダーに追加のコンテキストを読み上げさせたいことがあります。この場合、ボタンコントロールのARIAラベルを指定できます。 注意：クリエイティブをアクセシブルにするには、ARIAラベルがボタンのテキストと一致するか、ボタンのテキストを含んでいる必要があります。
ヒント：ボタンのフォントは、サイトのCSSで明示的に設定する必要があります。フォントが設定されていない場合、ボタンにはユーザーのブラウザで設定されているデフォルトのフォントが使用されます。
ロゴと画像
ロゴと画像セクションでは、クリエイティブに含める画像やロゴを1つ以上指定できます。
モバイル用とデスクトップ用に別々の画像をアップロードできます。これにより、クリエイティブがモバイルブラウザで表示されるか、デスクトップブラウザで表示されるかに応じて、異なる画像が表示されます。デバイスのブラウザタイプに合わせて表示を最適化するために、同じ画像を異なる解像度でアップロードすることもできます。
ヒント：モバイル用の画像のみをアップロードした場合、その画像はモバイルとデスクトップの両方のブラウザで使用されます。ただし、デスクトップ用の画像のみをアップロードした場合、その画像はデスクトップブラウザでのみ使用されます。
画像のアクセシビリティに準拠させるため、画像に付随する代替テキストを指定することもできます。(代替テキストは、スクリーンリーダーが視覚に障がいのあるユーザーに画像を説明できるようにする機能です。)
アニメーション
アニメーションセクションでは、クリエイティブが画面に表示される際のアニメーションの種類(フェードまたはスライドイン) を選択できます。
- ダイアログの表示タイミング: ユーザーがインターセプトの条件を満たしてから(アプリ内でのクリックなど)、このダイアログが表示されるまでの秒数。
- ダイアログを閉じるタイマーを設定: ダイアログが表示されてから自動的に閉じるまでの時間を決定します。このオプションの選択を解除すると、ユーザーはダイアログを閉じるまで画面から削除できなくなります。
トランジションタイプ：クリエイティブが画面に表示される際に、フェードインさせるかスライドインさせるかを選択します。スライドインアニメーションを選択した場合、クリエイティブの画面上の最終的な位置（左上、右上、左下、右下）も選択できます。
ヒント：スライドインのトランジションタイプを使用すると、このクリエイティブはスライダークリエイティブのように動作します。
ヒント： フェードは、フルスクリーンオーバーレイを表示し、キーボードフォーカスをダイアログ内に固定します。デスクトップのスライドインはページにオーバーレイ表示されず、フォーカスを固定しないため、キーボードユーザーはページ上でタブ移動を継続できます。モバイルでは、スライドインはフェードのようにオーバーレイを使用し、フォーカスをトラップします。
- 背景のフェード：クリエイティブの背後にあるデバイス画面の色（なし、薄い、中間、濃い）。
- アンケートの表示：アンケートの表示場所（新規ウィンドウ、埋め込みウィンドウ、現在のウィンドウ、ポップアンダーウィンドウ、または新規タブ）。
必要に応じて、この画面でアニメーションをプレビューをクリックして、アニメーション設定をプレビューすることもできます。
FAQs
スタンドアロンインターセプト、ガイド付きインターセプト、ガイド付きクリエイティブの違いは何ですか？
スタンドアロンインターセプト、ガイド付きインターセプト、ガイド付きクリエイティブの違いは何ですか？
ガイド付きインターセプトとは、これらの手順を使用して、レスポンシブダイアログ、テンプレート化された埋め込みフィードバック、フィードバックボタン、埋め込みアプリのフィードバックなどの機能を作成することです。ガイド付きセットアップとも呼ばれるガイド付きインターセプトは、クリエイティブの視覚的要素と設定を1つの分かりやすいフローにまとめたもので、最初から最後までユーザーをガイドします。
ガイド付きクリエイティブとは、レスポンシブダイアログ、テンプレート化された埋め込みフィードバック、フィードバックボタン、埋め込みアプリフィードバックなどの機能を、代わりにこれらの手順を使用して作成する場合を指します。ガイド付きクリエイティブでは、ペアにする別のインターセプトを作成する必要があります。改良されたクリエイティブエディターは引き続き利用できますが、ガイド付きセットアップの残りの部分は利用できません。
クリエイティブとしてレスポンシブなダイアログを作成しましたが、代わりにガイド付きインターセプトとして使用したいです。切り替えてもよろしいですか？
クリエイティブとしてレスポンシブなダイアログを作成しましたが、代わりにガイド付きインターセプトとして使用したいです。切り替えてもよろしいですか？
ガイド付きセットアップをライブラリに保存できますか？
ガイド付きセットアップをライブラリに保存できますか？
素晴らしい！ フィードバックありがとうございます！
フィードバックありがとうございます！