外観レイアウトの作成
このページの内容
外観レイアウトの作成について
ヒント： このページのセクションでは、アピアランススタジオ内でオーバーレイクリエイティブを編集する方法について説明します。埋め込みクリエイティブの編集については、 埋め込みクリエイティブを参照してください。
このページでは、digitalインターセプトの外観レイアウトを構築する方法について説明します。レイアウトは複数の要素で構成されています。個々の要素は、それぞれがdigitalインターセプトの異なるコンポーネントです。これには、テキストボックス、グラフィック、埋め込みアンケート調査などが含まれます。
アピアランススタジオの ビルドタブで外観レイアウトを作成します。
以下の要素を使用して、レイアウトをカスタマイズできます。
- テキスト: テキストボックスを追加します。
- グラフィック：グラフィックを追加します。
- ボタン：訪問者がクリックするとアンケートが起動したり、外部リンクが開いたりするボタンを追加します。
- 埋め込み接続：アンケートまたはエージェントをインターセプトに直接埋め込みます。
- フィードバックボタン：ユーザーがクリックしてインターセプトを開くためのフィードバックボタンを追加します。
- 行: 要素を縦ではなく横に表示するには、行でグループ化します。
- スペーサー：他の要素間に空白を追加します。
編集の取り消しと変更の保存
外観スタジオは、外観レイアウトの変更の保存や元に戻す操作を管理できる、柔軟性の高いエディターです。レイアウトの編集中に、必要に応じて ［元に戻す］ ボタンと ［やり直し］ボタンを使用して、アクションを元に戻したり復元したりできます（例：誤ってテキストボックスの要素を削除してしまった場合）。
編集内容は、エディター下部にある 外観を保存ボタンをクリックするまで確定されません。
注意：保存すると、保存前に行った操作の取り消しややり直しはできなくなります。レイアウトを以前に保存したバージョンに 戻すことはできませんのでご注意ください。
デザインを保存した後、サイトで新しい外観をテストし、本番のインターセプトに変更を公開できます。これは、有効なインターセプトに変更を公開する場合と同様に機能します。詳細については、以下のページを参照してください。
要素の移動
Appearance Studioでは、要素が縦方向のリストで表示されます。このリストでの要素の表示順序によって、レイアウトでの要素の表示順序が決まります。一番上の要素が最も左に、一番下の要素が最も右に表示され、その他すべての要素はその間に表示されます。
要素を並べ替える最も簡単な方法は、マウスで要素をクリックし、リスト内の新しい場所までドラッグすることです。
ただし、個々の要素にマウスポインターを合わせ、オプションを選択することで、その要素を管理できます。
- コピー：要素の複製を作成します。
- 削除：要素を削除します。
- ストラクチャーの最上部に移動：要素をリストの最上部に移動します。
- 要素を上に移動：リスト内の要素を1つ上の位置に移動します。
- 要素を下に移動：要素をリスト内で1つ下の位置に移動します。
- 構造の最下部に移動: 要素をリストの最下部に移動します。
インターセプトコンテナの設定
コンテナにはインターセプトのすべての要素が含まれており、サイト上での表示方法を決定します。すべてのエレメントがコンテナの下にネストされます。
ヒント：1つのコンテナでサポートされるエレメントは最大15個です。フィードバックボタンはこの制限の対象外です。
コンテナをクリックして設定を開きます。その後、以下をカスタマイズできます。
インターセプトを閉じる設定：
- インターセプトを閉じる「X」アイコンを含める場合は、 閉じるアイコンを含めるを有効にします。「X」を含める必要はありません。代わりにインターセプトを閉じるボタンを追加できます。
- アイコンの色を設定します。
- ピクセル単位で垂直および水平オフセットを決定します。
レイアウト設定では、以下をコントロールします。
- 表示タイプ：クリエイティブの配置を決定します。オーバーレイ（サイトコンテンツの上にフロート表示）またはインライン（ページに埋め込み、コンテンツを上下にプッシュ）から選択します。
- 幅(px): 表示の最大幅をピクセル単位で制御します。 [全幅] を切り替えて、コンテナが常にウェブページの全幅になるように設定することもできます。
- 要素の間隔(px): コンテナ内に積み重ねられた要素間のデフォルトの垂直方向の間隔を定義します。
- パディング(px): コンテナの境界線の内側にある余白のサイズを制御し、すべての内部要素を内側に押し込みます。［均等なパディングを使用］を選択すると、4辺すべてに同じ値が適用されます。選択を解除すると、［上］、［下］、［左］、［右］のパディングを個別に設定できます。
表示タイプがオーバーレイに設定されている場合は、水平方向と垂直方向の配置を設定し、余白を含めるかどうかを選択して、ウェブページ上のコンテナの 位置を選択します。
スタイルで、コンテナの外観をカスタマイズします。
- 背景色：色を選択するか、HEX値またはRGBA値を入力します。「色なし」オプションを使用すると、透明色を選択することもできます。
- 枠線：枠線の幅(px)と色を定義します。
- 角の丸み(px): インターセプトの外側の角の曲線を大きくします。「角の丸みをカスタマイズ」を選択すると上下左右に異なる曲線が設定でき、「角の丸みを均等にする」を選択すると各角に同じ設定が適用されます。
- ドロップシャドウ：インターセプトフレームの背後に影を付けます。なし、弱、中、強から選択します。
ヒント： ［間隔ガイドラインを表示］を有効にすると、選択した要素の間隔とパディングがピンク色でハイライト表示されます。コンテナレベル、行レベル、および個々の要素レベルでスペーシングのガイドラインを表示できます。スペーシングガイドラインは、各要素が相互にどのようにレイアウトされているかを視覚化するのに役立ちます。
テキストの書式設定
レイアウトのテキストはカスタマイズできます。これには、テキスト要素や、ボタンやフィードバックボタンなどのテキストコンポーネントを持つその他の要素が含まれます。
このセクションでは、テキスト要素の追加方法について説明しますが、一般的なテキスト編集の原則は、Appearance Studioでテキストを編集できるすべての場所に適用されます。
コンテナに追加をクリックします。
テキストを選択します。
テキストボックスにテキストを追加してください。書式を適用したいテキストをハイライト表示します。
ツールバーを使用して、テキストの書式を調整します。
- フォントファミリー：使用される書体。インターセプトがデプロイされているウェブサイトのフォントを自動的に継承するには、「システムのデフォルト」を選択します。
- フォントサイズ：テキストのサイズ（ピクセル単位）。デフォルトは12です。
- テキスト形式：オプションには、太字、斜体、下線、テキストの色、ハイライトの色が含まれます。
- 配置：テキストをコンテナブロックの左、中央、または右に揃えます。
- ハイパーリンク: 外部URLにリンクするか、連携済みのアンケートを起動します。
- 書式をクリア：選択したテキストの書式を削除し、デフォルト設定に戻します。
レイアウトの以下の設定で、テキストボックスのサイズを調整できます。
- 幅：ボックスの幅を調整します。
- パーセント(%): コンテナを基準にテキストボックスのサイズをスケールします。
- 固定 (px): テキストボックスの幅をピクセル単位で固定します。
- パディング(px): パディングを調整して、テキストブロックの背景内にスペースを追加します。上下左右の辺に、均等なパディングまたはカスタムパディングを使用できます。
テキストボックスの幅がコンテナの幅の100%未満の場合、左、中央、右の配置を選択して 位置を設定できます。
スタイル設定では、以下をカスタマイズできます。
- 背景と枠線: 特定の背景色、枠線の幅、枠線の色を適用します。
- 角の丸み：全体的な外観コンテナとは別に、テキストボックスの角の丸みを調整します。4つの角に、均等な角丸またはカスタムの角丸を使用できます。
グラフィックの追加
グラフィック要素を使用すると、外観レイアウトに画像を挿入できます。
ヒント：対応しているファイル形式はJPEG、PNG、GIFです。最大ファイルサイズは 25MB です。
Click Add to container.
グラフィックを選択します。
レイアウトセクションで画像サイズを設定します。
- 幅：画像を特定のピクセル幅に設定するには、 ［固定 (px)］を選択します。コンテナを基準に画像のスケールを調整するには、 パーセント(%)を選択します。
- パディング(px): パディングを調整して、画像の周りにフレームを作成します。画像の各辺に同じパディングを適用するか、[カスタムパディングを使用] をクリックして各辺に個別のパディング幅を設定できます。
画像の幅がコンテナの幅の 100% 未満である場合、 ［位置］セクションでその位置を設定できます。画像の配置を「左」、「中央」、または「右」に設定します。
スタイルセクションでは、枠線とドロップシャドウを設定できます。
- 枠線、枠線の色、角の丸み：グラフィックに色付きの枠線を追加し、角の半径を調整して、角の丸い画像や円形の画像を作成します。
- ドロップシャドウ：影の効果を適用します。オプションには、なし、細、中、太があります。
ボタン要素
ボタンは、訪問者のアクションを促進します。外観レイアウトにボタンを追加し、ボタンがクリックされたときの動作を定義したり、さまざまなインタラクティブな状態での外観をカスタマイズしたりできます。
Click Add to container.
［ボタン］を選択します。
ボタンのテキストをカスタマイズします。上部のツールバーを使用して、フォントやサイズを設定したり、アイコンなどの書式を追加したりします。詳細については、テキストのカスタマイズを参照してください。
ヒント：「システムデフォルト」を選択すると、インターセプトが導入されているウェブサイトのフォントが自動的に継承されます。アクセシビリティのため、ボタンのテキストとアイコンは同じ色にする必要があります。そのため、ボタンでは単語ごとまたは文字ごとの色書式設定は利用できません。
ボタンタイプ を選択し、追加オプションを設定します。
- 接続を起動：インターセプトの 接続設定で設定された、リンク済みのクアルトリクス接続を開きます。接続を新しいタブ、新しいウィンドウ、現在のウィンドウ、または新しいオーバーレイで開くように選択できます。
ヒント：インターセプトごとに接続できるのは1つまでです。つまり、接続ボタンはいくつでも追加できますが、それらのボタンは単一の接続先にしかリンクできません。これは、接続の埋め込み要素によって参照されるのと同じ接続です。
- 外部リンク：ユーザーを指定のURLにリダイレクトします。完全なページのURLを入力してください。URLを新しいタブ、新しいウィンドウ、または現在のウィンドウで開くように選択できます。
- 閉じる: インターセプトを閉じます。
ボタンのレイアウトを設定します。
- ボタンの 幅を調整します。 幅（%）を選択すると、コンテナに合わせてボタンの幅がスケーリングされます。 固定幅を使用 (px) を選択すると、ボタンを特定のピクセル幅に固定できます。
- ボタンのテキストと枠線の間のスペースを調整する パディング(px)を変更します。 [カスタムパディングを使用]をクリックすると、ボタンの各辺のスペースを個別に調整できます。
ボタンの幅がコンテナの幅の 100% 未満である場合、 位置を設定できます。 配置を左揃え、中央揃え、右揃えから選択します。
各 ボタンの状態 の外観を個別にカスタマイズできます。
- デフォルト：ユーザーが操作する前のボタンの表示。
- ホバー：ユーザーがボタンにカーソルを合わせたときのボタンの表示です。
- アクティブ：ボタンがクリックされたときの表示です。
選択した状態のボタンの外観を設定します
- 色：背景色、テキストの色、アイコンの色（アイコンを使用する場合）を定義します。
- 枠線と角：枠線の幅、枠線の色、角の丸み(px)の半径を設定します(例：角の半径を大きく設定すると、ピル型のボタンを作成できます)。
- Drop shadow: Applies a shadow effect. Options include None, Light, Medium, or Heavy.
ヒント：各ステートの背景色、テキストの色、枠線を個別に設定できます。すべての状態で一貫したエクスペリエンスを提供し、時間を節約するには、デフォルトの状態を設定してから、 ［すべてのボタンの状態にスタイルを適用］オプションをクリックします。
ヒント： ［独自のボタンを使用］をクリックし、 グラフィックライブラリから画像を選択すると、ボタンのテキストをグラフィックに置き換えることができます。
接続を埋め込む
埋め込み接続要素を使用すると、 アンケート、 エージェント、または外部サイトをクリエイティブ内に埋め込むことができます。この要素は、他の要素と同様にレイアウト内で配置、サイズ変更、移動ができます。
ヒント: ボタン(フィードバックボタンまたはスライダー)に接続されたアンケートを埋め込みますか？代わりにフィードバックボタン要素を使用してください。
まず、クリエイティブへの接続を追加する必要があります。 ガイド付きインターセプト設定で ［接続を追加］をクリックし、表示するリソースを選択します。
次に、以下の手順に従って、レイアウトに要素を追加します。
Click Add to container.
接続を埋め込むを選択します。
アンケート完了後に自動で閉じる: 有効にすると、ユーザーがアンケート終了メッセージに到達した時点でインターセプトが自動的に閉じられます。
行動セクションには、訪問者に表示される内容が表示されます。 ［アンケートを表示］ をクリックすると、アンケートエディターでアンケートを表示できます。
レイアウト：クリエイティブにエレメントをどのように配置するかを調整します。
- 幅：塗りつぶし、固定 (px)、またはパーセント (%) から選択します。
- 塗りつぶし：アンケートが表示されているスペース全体に表示します。行内にある場合、その行で利用可能な幅全体に表示されます。接続が行内にない場合、外観に設定された幅（全幅、500pxなど）の100%を占めます。
- 固定 (px): 接続を特定のピクセル幅に設定します。設定できるピクセル幅は、表示幅より小さい値、または接続が配置されている列の幅より小さい値のみです。
- パーセント(%): コンテナを基準に接続の幅を設定します(1～100%)。行内にある場合、これはその行で使用可能な列幅のパーセンテージです。行内にない場合は、利用可能な表示幅に対するパーセンテージになります。
ヒント：他のデザイン上の制約に基づいてサイズやスペースをより細かくカスタマイズする必要がない限り、「塗りつぶし」から始めてください。
- 高さ: 自動または高さ(px)から選択:
- 自動：アンケートの設定に基づいて接続サイズを設定します（例：質問が1つのアンケートは、質問が3～4つのアンケートよりも自動設定の高さが小さくなります）。高さの自動調整では、すべての質問と「次へ」ボタンが表示されるよう試みます。アンケートの高さがウェブページの高さを超える場合、アンケートはウェブページのサイズに合わせて縮小されます。
- 高さ (px): 接続の高さをピクセル単位で手動設定しますが、アンケートの高さに注意してください。アンケートが設定した高さを超える場合、スクロールバーが追加されます。アンケートが設定された高さよりも短い場合、余分な空白が追加されます。
位置：要素の配置（左揃え、中央揃え、右揃え）を選択します。埋め込み接続の幅が 100% 未満の場合 (「塗りつぶし」を使用せず、% を使用する場合は 100% 未満)、配置を設定できます。
スタイル：エレメントに色付きの枠線を追加します。
埋め込みアンケート調査の最適化
外観レイアウトに追加されたアンケート調査には、 アンケートエディター内で独自の編集、色、設定を行うこともできます。これにより、堅牢で高度にカスタマイズされたアンケート調査を構築できますが、外観とアンケートの間に連続性を持たせるようにcareする必要があります。以下に、役立つヒントやコツをご紹介します。
- 1か所にロゴを追加します。アンケートにロゴがある場合は、デザインにロゴを追加する必要はないでしょう。逆もまた同様です。
- アンケートと同じプライマリ16進コードを、テキスト、ボタン、アウトラインなどの外観に使用します。
- ウェブサイトやモバイル環境でアンケートをよりコンパクトにするには、次のテーマ設定をお試しください。
- アンケートに カスタムCSSを追加して、外観をさらにカスタマイズできます。
注意：カスタムコーディング機能は現状有姿で提供されており、実装にはプログラミングの知識が必要です。Qualtricsサポートでは、カスタムコーディングに関するサポートやコンサルティングを提供していません。いつでも 熱心なユーザーが集まるコミュニティで質問することもできます。カスタムコーディングサービスの詳細については、 クアルトリクスのアカウントエグゼクティブまでお問い合わせください。
例：このCSSを使用すると、質問と「次へ」ボタンの間隔を狭めることができます。
#navigation { padding-bottom: 0rem; padding-top: 1rem; }このCSSでヘッダーコンテナを削除できます(テーマのヘッダーに設定されているものはすべて非表示になります)：
#header-container { display: none !important; }
ヒント：アンケートは3つの方法で表示できます。埋め込み接続要素を使用して外観に直接埋め込む、ボタンを介して起動接続としてリンクする、または（匿名リンクを使用して）外部リンクとして追加する方法です。アンケートを埋め込み接続として設定することは、事前に構築された接続カードから編集、切り替え、管理が最も簡単に行えるため、ベストプラクティスです。
［フィードバック］ボタン
フィードバックボタンは、外観に追加できる特別な要素です。クリエイティブの横にボタンが追加され、ユーザーがクリックするとインターセプトが開きます。
注意：レイアウトにフィードバックボタンを追加すると、既存のコンテンツはすべて削除されます。
Click Add to container.
［フィードバック］ボタンを選択します。
Customize the text for your button. Use the toolbar at the top to set the font, size, and add additional formatting like an icon. See Customizing Text for more information.
Qtip: Select “System Default” to automatically inherit the font of the website where the intercept is deployed. For accessibility, the button text and icon must share the same color, so per-word or per-letter color formatting isn't available on buttons.
フィードバックボタンに外部接続が自動的に追加されます。ここで接続されている内容を評価できます。接続が不要な場合は、埋め込み接続要素を削除できます。
Qtip: You are limited to 1 connection per intercept. This means that while you can add as many connection buttons as you like, those buttons can only link to the single connection destination. This is the same connection referenced by the Embed Connection element.
ボタンの レイアウトを設定します。
- Adjust the Width of the button. ページ全体に合わせてボタンの幅を調整するには、 幅(%)を選択します。 ［固定幅を使用 (px)］ を選択すると、ボタンが特定のピクセル幅に固定されます。
ヒント：幅は 15～30% にすることをお勧めします。
- Change the Padding (px), which controls the space between the button text and border. カスタムパディングを使用をクリックすると、ボタンの各辺のスペースを個別に調整できます。
ボタンの 位置 を設定します。これにより、サイト上でボタンとインターセプトが表示される場所が決まります。
- 配置：ボタンをインターセプトの右、左、または上にするかを選択します。これにより、ページ上のインターセプトの表示場所が影響を受けます(たとえば、ボタンが上部中央に配置されている場合、インターセプトはページの下部に表示されます)。
- 配置：左、中央、右、またはカスタム配置から選択します。
各 ボタンの状態 の外観を個別にカスタマイズできます。
- Default: How the button looks before the user interacts with it.
- Hover: How the button looks when the user hovers their cursor over it.
- Active: How the button looks when clicked.
選択した状態のボタンの外観を設定します。
- Colors: Define the Background color, Text color, and Icon color (if an icon is used).
- Border & Corners: Set the Border width, Border color, and Rounded corner (px) radius (e.g., set a high corner radius to create pill-shaped buttons).
- Drop shadow: Applies a shadow effect. Options include None, Light, Medium, or Heavy.
Qtip: You can set the Background color, Text color, and Border for each state independently. すべての州で一貫したエクスペリエンスを提供して時間を節約するには、デフォルトの州を設定してから、 [すべてのボタンの州にスタイルを適用] オプションをクリックします。
コンテナをクリックし、ボタンの 表示方法を選択します。
- スライダー： コンテナはボタンに接続されています。ユーザーがボタンをクリックすると、コンテナがその下または横にスライドして表示されます。
- オーバーレイ：コンテナがボタンに接続されていません。ユーザーがボタンをクリックすると、ページの中央にオーバーレイウィンドウが表示されます。オーバーレイでは、オーバーレイウィンドウの背後にフェード背景を選択することもできます。
- 新規ウィンドウ：コンテナを新しいブラウザウィンドウで開きます。
ヒント：これは新しいブラウザウィンドウであるため、コンテナには埋め込み接続のみを配置できます。その他の要素（テキスト、グラフィック、ボタン、行、スペーサー）は、新しいウィンドウではサポートされていません。レイアウト、高さ、スタイルの各コントロールも、ブラウザウィンドウによって制御されるため使用できません。
コンテナをスライダーまたはオーバーレイとして表示する場合、 レイアウトと スタイルをカスタマイズできます。
- 幅と高さ：コンテナの幅をページのパーセンテージまたは固定ピクセル幅で選択し、高さを固定ピクセルまたはパーセンテージで選択します。
- パディング／要素の間隔：標準のコンテナコントロールと同じです。
- パディング (px): コンテナの境界線内の余白を調整し、内部の要素を内側に押し込みます。
ヒント：「均等なパディングを使用」をクリックすると、4辺すべてに同じ値が適用されます。または、上、下、左、右を個別に設定することもできます。
- Element spacing (px): Defines the default vertical gap between elements stacked within the container.
- 色、背景、角の丸み、ドロップシャドウ：標準のコンテナコントロールと同じです。
フィードバックボタンに追加の要素を加えることができます（例：プライバシーポリシーを含めるためのテキストの追加）。
モバイル版
モバイルデバイス向けにフィードバックボタンの配置と整列を個別にカスタマイズできます。
モバイルビューを有効にします。
フィードバック ボタンをクリックして、以下の設定を編集します。
- 配置：フィードバックボタンをエレメントのどこに表示するかを選択します。
- 配置：フィードバックボタンを画面上のどこに表示するかを選択します。
- モバイルデバイスで要素を非表示にする：これを有効にすると、モバイルでフィードバックボタンが完全に非表示になります。
コンテナをクリックして 表示方法を編集し、モバイルでのフィードバックボタンの表示方法を決定します。
- プルアップ：コンテナが画面の下から上にスライドします。プルアップがモバイル画面に占める割合を選択します。
- 新規タブ：フィードバックボタンをタップすると、コンテナのコンテンツがスライダーやオーバーレイとしてではなく、ブラウザの新しいタブで開きます。
ヒント：個々の要素（グラフィックなど）をモバイルで非表示にする方法については、モバイルでの要素の非表示を参照してください。
行
デフォルトでは、アピアランススタジオはクリエイティブ内の要素を垂直に積み重ねます。ただし、 行内に要素をグループ化することで、要素を水平方向に再配置できます。行は、要素を水平に配置するためのサブコンテナと考えることができます。
ヒント：要素が行に配置されている場合、要素自体にはレイアウトセクションのサイズ機能はありません。行内のエレメントのサイズは、代わりに行レベルで設定されます。
行に要素を追加するには：
Click Add to container.
行を選択します。
行に新しい要素を追加するには、 ［行に追加］をクリックします。行内にテキスト、グラフィック、ボタン、スペーサーの各要素を追加できます。これらの要素のカスタマイズに関する詳細は、リンク先のセクションを参照してください。
行コンテナ内に既存の要素をドラッグアンドドロップして移動できます。
ヒント：1つの行に最大5つの要素を含めることができます。エディターに表示されているのと同じ順序で、クリエイティブの要素が左から右に表示されます。
行をクリックすると、行の外観をカスタマイズするためのサイドパネルが開きます。行の管理には、以下のオプションを使用できます。
- 行のグループ化を解除：要素のグループ化を解除し、行の要素を削除します。
- コピー：行とその行に含まれるすべての要素のコピーを作成します。このオプションは、均一なグリッドのアイテムを構築するのに最適です。
- 削除：行と行内のすべての要素を削除します。
注意：行を削除すると、その行に含まれるすべてのコンテンツが削除されます。必要に応じて、変更をすぐに元に戻すことができます。
レイアウトオプションには、行内のエレメントのレイアウトをカスタマイズするための以下の設定が含まれています。
- 幅：行全体の幅を調整します。
- 固定 (px): 行の幅をピクセル単位で指定します。
- パーセント(%): クリエイティブコンテナを基準に行をスケーリングします。
- 要素の幅：行内の個々の要素の幅を調整します。
- 等幅: 行の幅が要素間で均等に分割されます。
- カスタム：各要素の幅の割合をカスタム設定します。 合計パーセンテージは100%を超えることはできませんが、100%未満にすることは可能です。100%未満の場合、クアルトリクスは適宜スケールを調整し、要素間にスペースを追加します。
- 間隔：行内の要素の間隔を調整します。
- 要素の間隔（px）：横並びの要素間の水平方向のギャップを直接コントロールします。要素が近すぎると感じる場合は、この値を大きくします。
- パディング (px): 行の内側にスペースを追加し、すべての内部要素を行の外側の境界から離します。
要素の配置を選択します。これにより、行内の各要素が垂直方向にどのように配置されるかが決まります。上、中央、下から選択できます。
ヒント：垂直方向の配置は、行の全体の高さよりも短い要素にのみ影響します。高さが 100% に設定されている要素は行全体に表示され、影響を受けません。
スタイルオプションで、行の表示を設定します。
- 背景色を定義します。
- 枠線と角：枠線の幅、枠線の色、角の丸み(px)の半径を設定します(例：角の半径を大きく設定すると、行がカプセル型になります)。
- Drop shadow: Applies a shadow effect. Options include None, Light, Medium, or Heavy.
ヒント：行の色と編集は、コンテナに設定された色を上書きします。行を透明にしてコンテナの色を継承させたい場合は、行を「色なし」に設定します。
ヒント：行とそのスタイル設定を使用して、外観レイアウト内にさまざまなボックスやブレイクアウトを作成できます。例えば、外観を半分白、半分青にしたい場合は、2つの行を追加して、それぞれの色を設定します。
スペーサー
スペーサー要素は、他の要素間に正確な垂直方向のギャップを追加します。行に追加すると、同じ行にある要素間に水平方向の間隔ができます。
コンテナに追加をクリックします。
スペーサーを選択します。
スペーサーの高さ(px)をピクセル単位で調整します。デフォルトは 50 px です。
ヒント：スペーサーが行内にある場合、これは行の設定によって制御されます。
モバイル向けエクスペリエンスのカスタマイズ
モバイルでのみ特定の要素を非表示にすることで、モバイルデバイスでのエクスペリエンスをカスタマイズできます。
モバイルビューを有効化します。
- モバイルデバイスで要素を非表示にするオプションをクリックします。
ヒント：モバイルビューには、クリエイティブのレスポンシブプレビューに加えて、モバイル専用のコントロール（要素の非表示、フィードバックボタンの配置/位置合わせ/表示）が表示されます。その他すべてのレイアウトとスタイルの編集は、デスクトッププレビューで行う必要があります。
レイアウトテンプレート
クリエイティブの作成をjumpstartするのに役立つ、さまざまなレイアウトテンプレートが用意されています。テンプレートから開始するか、後でテンプレートに切り替えるかを選択できます。
レイアウトを変更するには、［コンテナに追加］ボタンの横にある3点ドットメニューをクリックし、オプションを選択します。
- 現在のレイアウトをリセット：テンプレートを使用して開始した場合、テンプレートは元の設定に戻ります。
- 新しいレイアウトを選択: 別のレイアウトテンプレートに切り替えます。テンプレートを選択すると、クリエイティブに現在設定されている内容はすべて上書きされます。
- すべての設定を削除: 空の外観から開始します。
注意：リセットまたは別のレイアウトに切り替えることでクリエイティブを削除または上書きした場合、以前のビルドを復元することはできません。
デフォルトのオーバーレイテンプレート
以下の事前設定済みレイアウトが含まれます。
- 中央ポップオーバー：サイトのコンテンツ上にフローティング表示される、視認性の高いオーバーレイです。ユーザーの注意を単一のメッセージに集中させます。
- 情報バー：ページコンテンツの上部または下部に配置される、あるいはページコンテンツを上下にプッシュできる全幅のストリップです。
- コーナー通知：ビューポートの隅にスライド表示される、丁寧な通知です。メインビューをブロックすることなくユーザーに通知します。
- 埋め込みアンケート：完全に統合されたアンケートを通じてユーザー入力を収集するために、画面のedgeで開くサイドバーオーバーレイ。
- フィードバックボタンスライダー：ブラウザウィンドウのいずれかの側面に固定されるボタンです。クリックすると、ページからスライドアウトして接続に移行します。
- フィードバックボタンオーバーレイ：ブラウザウィンドウのいずれかの側面に固定されるボタンです。ボタンをクリックすると、コネクションがオーバーレイウィンドウで開きます。
デフォルトの埋め込みテンプレート
次の事前設定済みレイアウトは、 埋め込みクリエイティブで利用できます。
- インラインアンケート： ウェブサイトに直接埋め込まれ、ユーザーがブラウジングを中断することなく回答できるアンケートです。
- 行動喚起プロンプト： ウェブサイト上のインラインプロンプトで、ユーザーがページ内でインタラクションできるようにします。
- コールアウトカード： 周囲のレイアウトを崩すことなく、ページコンテンツ内に埋め込まれ、重要なメッセージを強調表示するインラインカードです。
埋め込みクリエイティブ
このセクションでは、埋め込みクリエイティブの編集と、埋め込みクリエイティブで特に利用できるオプションについて説明します。Appearance Studio内で埋め込みクリエイティブを編集するには、ガイド付きインターセプトを作成する際に、インターセプトのタイプとして ［埋め込み］ を選択します 。オーバーレイクリエイティブの編集に関する詳細は、このページの他のセクションを参照してください。
デザインレイアウト
外観エディター内で、既存の レイアウトテンプレートから選択するか、レイアウトをゼロから構築するか、 テンプレート化されたフィードバックを選択できます。
ヒント： テンプレート化されたフィードバックを選択した場合を除き、作成後に異なるレイアウトに切り替えることができます。テンプレート化されたフィードバックでは、インターセプトとデザインにリンクされたアンケートが自動的に作成されます。テンプレート化されたフィードバックから開始してそれを削除した場合、元の外観やリンクされたアンケートを復元することはできません。
埋め込み時の表示の違い
埋め込みの外観は、オーバーレイの外観と同様に、コンテナ、行、要素を使用して構築されます。埋め込みクリエイティブの外観を編集する際は、以下のヒントにご留意ください。
- コンテナの背景: コンテナの背景色を次のように設定します 色なし ウェブページの背景を外観に継承させたい場合。
- コンテナの境界線: ページ上で個別のカードとして表示させたい場合は、コンテナに境界線を追加します。
- サポートされていない要素： 以下の要素は、埋め込み表示では利用できません。
- コンテナの閉じるボタン
- コンテナのドロップシャドウ
- 表示/非表示のアニメーションまたは表示タイマー
- フィードバックボタン／スライダーエレメント
CSSセレクターの追加
埋め込みインターセプトは、CSSセレクターを使用して、ウェブページ上のどこに表示するかを決定します。
ブラウザの開発者ツールを開き、埋め込みの外観を含むべきページ上の要素を見つけます。
要素を右クリックしてセレクターをコピーします。
外観スタジオ内で ［CSSセレクターを選択］ をクリックします。
CSSセレクターフィールドにセレクターを貼り付けます。
必要に応じて、セレクターが複数の要素に一致する場合に、ページにインターセプトを表示する回数を設定します。例えば、ページ上の各記事セクションの後ろに同じ外観を挿入できます。
「 CSSセレクターを保存」をクリックします。
ヒント： 埋め込みの外観は、常にCDSSセレクターで一致した要素の末尾に追加されます。要素内の別の位置に挿入することはできません。
埋め込みのサイズ設定
埋め込み表示の幅と高さは、オーバーレイ表示よりもカスタマイズオプションが豊富です。これらの設定は、CSSセレクターでターゲット設定された要素内で、外観のサイズがどのように変更されるかを決定します。
幅：
- 塗りつぶし: コンテナは親要素の幅の100%になります。
- 固定： コンテナの幅が設定されます。
高さ：
- 自動： コンテナの高さはコンテンツに応じて調整されます。例えば、質問が1つのアンケートは、質問が3～4つあるアンケートよりも高さが小さくなります。
- 高さ: コンテナの高さが設定されます。
ヒント： エージェントを埋め込む場合は、高さを固定することをお勧めします。エージェントの回答は変動する可能性があるため、高さの自動スケーリングよりもサイズを一定に保つことをお勧めします。あらゆる画面サイズに合わせて動的に調整したり、コンテンツに合わせて拡張したりする必要があるコンテンツを埋め込む場合は、高さと幅を自動に設定することをお勧めします。
素晴らしい！ フィードバックありがとうございます！
フィードバックありがとうございます！