オーバーレイガイドのステップ設定を編集する

この記事では、オーバーレイガイドのスタイル、場所、行動を編集するためのオプションをまとめています。埋め込みガイドのスタイル、場所、行動設定については、「ガイドの概要」および「埋め込みガイドを作成する」をご参照ください。

編集コンテナ

ビジュアルデザインスタジオの［コンテナの編集］ウィンドウからオーバーレイガイドのステップを編集できます。［コンテナの編集］ウィンドウは［スタイル設定］（デフォルト）、［場所］、［行動］の3つのタブで構成されています。ここから、ガイドの各ステップの外観、配置、インタラクティブ性をカスタマイズすることができます。

［コンテナの編集］ウィンドウは、次の状況で表示されます。

• ガイドに新しいステップを追加します。
• ガイド内の既存のステップの1つで［ステップの編集］を選択します。
• すでに編集中のステップのコンテナを選択します。ステップのコンテナを選択するには、ガイドステップの端にカーソルを合わせ、端が青色に変わったら選択します。

ガイドステップの追加と編集に関する情報は、「オーバーレイガイドを作成する」を参照してください。

［スタイル設定］タブ

ガイドステップの以下を編集するには、［コンテナの編集］ウィンドウの［スタイル設定］タブのオプションを使用します。

• テーマ。ガイド全体のスタイリング。
• コンテナ設定。ステップの名前、キャレット、背景、閉じるボタン、寸法。
• 背景。ガイドステップの背景色。
• アクセシビリティ。ステップのインクルーシブ性オプション。

テーマのスタイル設定

テーマの下のドロップダウンメニューを使用して、ガイドステップに使用するレイアウトとビルディングブロックの保存済みスタイルを選択します。詳細については、「テーマを使用してガイドのスタイルを管理する」を参照してください。

ここでの選択は、［スタイル設定］タブの他の部分に表示される内容に影響を与えます。

コンテナ設定

標準では、コンテナ設定から次の操作を実行できます。

• ステップ名。Pendo のガイドの［設定］ページに表示されるステップの名前を編集します。既存の名前を選択し、新しい名前を入力します。
• キャレット。ガイドがページ上の要素を基準として配置されている場合は、その要素を指すガイドステップにキャレット（三角形の矢印）を追加または削除します。スタイルテーマとして［カスタム］を選択した場合、以下に詳細が記載されているその他のスタイリングオプションを利用できます。
• 背景。アプリケーション内のガイドの背後に表示されるサーフェスを追加または削除します。ガイドがページ上の要素に対して相対的に配置されている場合、以下に詳述する追加のオプションがあります。
• 閉じるボタン。ガイドステップの右上隅または左上隅にある閉じるボタン（X）を追加または削除します。閉じボタンのスタイリングや場所を編集するには、ガイドビルディングブロックに従ってください。
• 寸法。ガイドステップのレスポンシブ幅を編集します。
  • ウィンドウ長さ全体にガイドを表示する場合は、［最大幅］を選択します。
  • ウィンドウのサイズに関係なくガイドのサイズを固定したい場合は、［固定］を選択します。固定ガイドの幅はピクセル（px）で設定されます。
  • ガイドをウィンドウのサイズに応じて自動的に調整したい場合は、［流動的］ を選択します。流体ガイドの幅はパーセンテージ（%）で設定されます。最小幅と最大幅をピクセル（px）で設定することもできます。
    
    

ガイドがページ上の要素に対して相対的に配置されており、ガイドステップの［背景］をオンにしている場合は、［背景の上にターゲット要素を表示］もオンにすることができます。これにより、要素が背景に覆われることを防ぎ、強調表示されます。このオプションを選択すると、次の操作も可能になります。

• 拡張可能なクリック領域を編集して、背景の上に表示される選択した要素の周囲の露出領域のサイズを拡大します。
• ページ上の他のUI要素のCSSセレクターがわかっていて、それらを背景の背後から表示したい場合は、［CSS要素を追加］フィールドを使用して、関連するCSSセレクターを1つ以上、カンマで区切って入力します。これは、入力したすべてのUI要素をカプセル化する最小の矩形領域を示します。
  
  

スタイルテーマとして［カスタム］を選択した場合、以下も編集できます。

• キャレット。ガイドステップにキャレットを含めることを選択した場合は、キャレットの幅と高さをピクセル（px）単位で編集することもできます。
• パディング。ステップの内容とステップのコンテナの端の間のピクセル（px）単位のスペース。パディングは、上、右、左、下から別々に設定します。
• 枠。ステップのコンテナ境界の色、幅、半径（角の丸み）。
  • 枠の色は、16進数、RGB数値、ビジュアルカラーセレクター、またはカラースライダーで設定します。
  • 幅と半径はピクセル（px）で設定されます。
• ドロップシャドウ。ステップコンテナの影の色、角度（X）、距離（Y）、ぼかし（Blur）、サイズ（Spread）。
  • ドロップシャドウの色は、16進数、RGBA数値、ビジュアルカラーセレクター、または色のスライダーで設定します。
  • ドロップシャドウの透明度は、RGBA番号のアルファチャンネル（A）、またはカラーピッカーとスライダーの下にあるスライダーを使って、色と同時に設定します。
  • ドロップシャドウのX、Y、Blur、Spreadはピクセル（px）単位で設定されます。
• Zインデックス。ページ上の重なり合う要素のコンテナの順序。Zインデックス値が大きいほど、その要素はUIで前面に表示されます。ガイドがモーダルやバックドロップなど、Zインデックスがより高いものによって隠されている場合にのみ、これを変更することをお勧めします。

背景色（Background Color）

スタイルテーマとして［カスタム］を選択した場合、ガイドステップの背景色を編集することができます。色は、16進数、RGBA数値、ビジュアルカラーセレクター、またはカラースライダーで設定します。背景色の透明度は、RGBA数値のアルファチャンネル（A）またはカラーピッカーの下にあるスライダーを使用して、色と同時に設定されます。

アクセシビリティ

スクリーンリーダーの利便性向上のために、以下のいずれかを追加することができます。

• ARIAラベル - アクセシブルな名前。ガイドステップの代替名で、わかりやすいもの。
• 役割。ガイドステップに割り当てられたセマンティックな意味（例：ダイアログ、フォーム、ナビゲーション）。ARIA役割についての情報は、Mozillaの「WAI-ARIAの役割」を参照してください。
• このステップに自動フォーカスする。ガイドステップが画面に表示されると同時に、スクリーンリーダーが最初に読み取る要素にします。
• ARIAラベル - 閉じるボタン。閉じるボタンの代替でアクセシブルな名前。

［場所］タブ

ガイドステップの以下を編集するには、［コンテナの編集］ウィンドウの［場所］タブのオプションを使用します。

• ガイドの位置。ページ上でガイドを開く場所。
• ガイドの場所。ガイドステップが紐付けられるUI要素またはタグされたフィーチャー（オプション）。ガイドがバッジでアクティベートされているか、確認でアクティベートされている場合、ガイドのステップ1の場所を選択する必要があります。
  • バッジでアクティベートされたガイドの場合、ステップ1のガイドの場所はバッジの場所と同じです。
  • 確認によってアクティブ化されるガイドの場合、ステップ1のガイドの場所は、ガイドを読み込む要素と同じです。
• 条件付き表示。要素のテキストまたは数値の内容が特定の条件に一致する場合にのみガイドをリリースできる機能。
• ガイドの持続性。ガイドのステップを紐付けた要素が消えても、ガイドを画面に残すことができる機能。
• ターゲットページ。ガイドステップをアプリケーション全体で開くか、特定のページからのみ開くかを選択します。
• 動的要素のフィルタリング。動的な要素やDOMツリーに常に存在するわけではない要素をフィルタリングすることをお勧めします。

ガイドの位置

［ページ上の位置］のドロップダウンメニューを使用して、ページ上のガイドステップの位置を選択します。複数の固定された場所から選択するか、ページ内の要素を選択してガイドをその隣に配置することができます（要素に対して相対的に）。

さまざまなガイドレイアウトには配置が自動的に割り当てられますが、これは変更できます。

• ライトボックスのデフォルトは［中央揃え］です。
• ツールチップのデフォルトは［要素に合わせる］です。
• バナーのデフォルトは［下揃え］です。

固定された場所の場合、選択肢は次のとおりです：

• ページの中心（中央）。
• ページの四隅のいずれか（例：左上揃え）。これらのオプションのいずれかを選択すると、ページの角に最も近いガイドステップの両側のオフセット（ピクセル単位）を編集することもできます。
• ページの上下左右の真ん中（例：上揃え）。これらのオプションのいずれかを選択すると、ページの端に最も近いガイドステップの側のオフセット（ピクセル単位）を編集することも可能です。

固定場所ではなく［要素に合わせる］を選択すると、ガイドステップは選択したUI要素に対して相対的に配置されます。

• ガイドがバッジによってアクティブ化されるか、確認によってアクティブ化される場合、ステップ1のガイドの位置では、ガイドを起動するバッジ、ボタン、またはリンクを基準としてガイドが開く位置も指定します。
• ［要素に合わせる］を選択すると、［要素に対する配置］の下に以下のオプションが追加されます。
  • 自動（デフォルト）では、バッジまたは要素を基準にしてガイドを開く最適な位置を選択しようとします。
  • または、ガイドがバッジまたは要素の上、下、左、右のいずれに開くかを選択します。
    
    

ガイドの場所

［要素に紐付ける］オプションを使用して、ガイドステップを紐付けるエレメントまたはタグ付きフィーチャーを選択します。これは、ツールチップレイアウトを使用する手順、バッジでアクティブ化されるガイドや確認でアクティブ化されるガイドの最初の手順に必要です。

注： ガイドがバッジでアクティブ化されている場合、ガイドのステップ1をアンカーする要素は、バッジアイコンがアンカーされている要素と同じです。ガイドが確認によってアクティブ化される場合、ガイドのステップ1を紐付ける要素（通常はボタンまたはリンク）は、確認ガイドをリリースする要素と同じです。詳細については、 「オーバーレイガイドのアクティベーションオプション」 を参照してください。

ステップの要素をまだ選択していない場合は、［要素に紐付ける］の下にある［要素を選択］ドロップダウンメニューを開き、次のいずれかのオプションを選択してください。

• ターゲット要素。ここから、選択範囲を拡大または絞り込むことができます。
• 既存のフィーチャーを選択。ページにフィーチャーがタグ付けされていない場合、このオプションはグレー表示されます。フィーチャーのタグ付けに関する情報については、フィーチャーのタグ付けを参照してください。
  
  

すでに要素やフィーチャーを選択またはタグ付けしていて、それを変更したい場合は、選択をクリアして再度開始するか、次のいずれかを選択できます。

• UI 要素の場合は、この記事の「ターゲット要素」で説明されている選択範囲を拡張または絞り込むためのオプションのいずれかを選択してください。
• タグ付けされたフィーチャーに対して、「要素を再ターゲット」を選択し、別のタグ付けされたフィーチャーを選択します。

ターゲット要素

［要素を選択］ドロップダウンメニューから［ターゲット要素］ を選択すると、要素選択モードが開きます。ページ上でマウスを動かすと、アプリケーション内の要素が赤い点線のボックスで囲まれます。UI要素を選択すると、この線は赤い実線に変わります。次のいずれかを選択できます。

• ［一致候補］を選択して、選択したUI要素に対応するCSSセレクターを保持します。
  
  
  
• ［親要素］を選択することで、選択範囲をより大きなクリック可能な要素に拡張します。これにより、DOMツリー内で最初に選択された要素の上にあり、その要素に接続された要素のCSSセレクターを選択できます。
  
  
   
• カスタムCSSを使用して選択を絞り込みます。これにより、DOMツリー内の特定のCSSセレクターに基づいて、目的の要素を指定することができます。ガイダンスについては、「ガイドのターゲット設定にCSSルールを使用する」を参照してください。
  
  

注：DOMツリーはウェブページのHTML構造を表現しており、CSSセレクターはこの構造内の要素を識別するために使用されます。

間違った要素を選択した場合は、［選択をクリア］をクリックしてやり直すことができます。

既存のフィーチャーを選択する

［要素を選択］ドロップダウンメニューから［既存のフィーチャーを選択］を選択すると、フィーチャー選択モードが開きます。アプリケーション内でフィーチャーとしてタグ付けされた要素の上にマウスを移動すると、ページ上でその要素に赤いハイライトボックスが表示されます。タグ付けされたフィーチャーを選択すると、その周りの線が赤い実線に変わります。

間違ったタグ付き機能を選択した場合は、次の操作を実行できます。

• ドロップダウンメニューを使用して、ページ上の他のフィーチャーを選択します。
  
  
  
• 再度開始するには、［選択をクリア］を選択してください。
  
  
   
• フィーチャー選択モードで別のフィーチャーを選択するには、「要素を再ターゲット」を選択します。
  
  

Pendoのフィーチャーの詳細については、フィーチャーのタグ付けを参照してください。

条件付き表示

［要素包含判定ルールの有効化］ をオンにすると、ガイドのステップ 1 で選択した要素の内容に基づいて条件付きでガイドが表示されます。このオプションをオンにすると、選択した要素の内容（テキストまたは数値）が指定された条件に一致した場合にのみガイドをリリースするルールを作成するよう求められます。

詳細については、「オーバーレイガイドのアクティベーションオプション」を参照してください。

ガイドの持続性

選択した要素が表示されなくなってもガイドが画面に表示されたままになるようにするには、［ガイドの持続性］をオンにします。

ガイドの持続性は次の場合にのみ使用できます。

• ガイドステップを要素に紐付けている。
• ［要素包含判定ルールの有効化］がオフになっている。
• 確認ガイドを編集しているわけではない。

詳細情報と手順については、「オーバーレイガイドのアクティベーションオプション」を参照してください。

ページの場所

［ターゲットページ］で、以下のいずれかを選択できます。

• ［サイト全体］で、訪問者がアプリケーションのどのページにいるかに関係なく、アプリケーション全体にガイドステップを表示します。ガイドステップを要素またはタグ付きフィーチャーに紐付けた場合、このガイドステップは、その要素またはタグ付きフィーチャーが存在するすべてのページで利用可能です。
• ［当該ページのみ］で、アプリケーション内の特定のタグ付きページにガイドステップを表示します。ガイドのステップを表示するページにタグを付けていない場合は、「ページのタグ付け」の内容に従ってください。

ガイドがバッジによってアクティブ化されるか、要素によってアクティブ化される場合（確認ガイドのアクティブ化を含む）、ガイドのステップ1の上記のオプションは、ガイドを起動するバッジまたは UI 要素の存在にも適用されます。

動的要素フィルタリング

［選択時に動的要素をフィルタリング］をオンにしておくと、ガイドステップを紐付けるCSSセレクターが、時間が経っても変化しにくい安定した識別子であることを確認できます。

一部のコードライブラリは、変更される要素にIDやクラスを追加するため、この設定をオンのままにしておくことをお勧めします。これらは適切なCSSセレクターではないため、この設定により使用が防止されます。

［行動］タブ

ガイドステップの以下を編集するには、［コンテナの編集］ウィンドウの［行動］タブのオプションを使用します。

• ガイドステップのボタンアクション。ガイドステップ内のボタンを直接選択して［ボタンを編集］ウィンドウを開くことで、ボタンアクションを編集することもできます。詳細については、「ボタン」セクションをガイドのビルディングブロックとガイドのボタンアクションで参照してください。
  
  
  
• ガイドステップが要素に紐付けられている場合、訪問者が要素を選択するか、要素にカーソルを合わせたときにガイドを進めることができるようにします。この場合、ガイドを進めるためのアクションを持つボタンを追加する必要はありません。［アクションを追加］ ドロップダウンメニューを開き、［要素のクリックで進む］または［要素のホバーで進む］を選択してください。