1. Pendoヘルプセンター
  2. ガイド
  3. ガイドを設定する

オーバーレイガイドのアクティベーションオプション

最終更新日:

この記事は、訪問者にオーバーレイガイドを起動するためのさまざまなアクティベーションオプションについての情報を提供します。オーバーレイガイドの作成方法については、「オーバーレイガイドを作成する」を参照してください。埋め込みガイドのアクティベーションに関する情報をお探しの場合は、「埋め込みガイドを作成する」を参照してください。

ガイドのアクティベーションオプション

訪問者にオーバーレイガイドを起動するためのアクティベーションオプションは4つあります。これらはビジュアルデザインスタジオ（Visual Design Studio）の［アクティベーション設定（Activation Settings）］ウィンドウから選択され、オーバーレイガイドの作成時とそれ以降の両方で設定できます。

  • 自動（Automatically）。ガイドを自動的に表示し、訪問者がガイドを進めるか、ガイドを閉じるまで表示するように設定します。この設定を変更して、訪問者にガイドを再表示させたり、ガイドのスロットリング設定を上書きすることができます。このオプションの詳細については、この記事の「自動アクティベーション」を参照してください。
  • バッジ（Badge）。アプリケーションの上に配置したアイコンを訪問者が操作すると、ガイドが表示されるように設定します。このオプションの詳細については、この記事の「バッジアクティベーション」を参照してください。
  • 確認（Confirmation）。訪問者が選択したボタンやリンクのアクションを完了する代わりに、ガイドを表示するように設定します。ガイドは訪問者に、ボタンまたはリンクの操作を続行するかどうかの確認を求めます。このオプションの詳細については、この記事の「確認アクティベーション」を参照してください。
  • ターゲット要素（Target Element）。訪問者がアプリケーションのUI要素またはタグ付きフィーチャーを操作するとガイドが表示されるように設定します。このオプションの詳細については、この記事の「要素アクティベーション」を参照してください。

［アクティベーション設定（Activation Settings）］でこれらのオプションにアクセスする方法については、この記事の「アクティベーション設定ウィンドウ」を参照してください。

ガイドの目的の動作を実現するために、最大2つのアクティベーション方法を選択できます。具体的には、以下を選択できます。

  • ガイドを［自動（Automatically）］、［バッジ（Badge）］でアクティベーションします。たとえば、バッジでアクティベーションされたツールチップは、訪問者が最初に表示した時には自動で開き、その後は訪問者がバッジを直接選択したときにのみ開くように設定できます。
  • ガイドを［自動］、［ターゲット要素（Target Element）］でアクティベーションします。たとえば、ライトボックスは、タグ付きフィーチャーを含むページを訪問者が最初に開いたときに自動で開き、その後はガイドが紐付けられているタグ付きフィーチャーを訪問者が選択したときにのみ開くように設定できます。

自動アクティベーションはバッジアクティベーションや要素アクティベーションよりも優先されます。

アクティベーションオプションが選択されていない場合、デフォルトはプログラムによるアクティベーションとなり、ガイドの［設定（Settings）］ページの［アクティベーション（Activation）］セクションに［API］という単語が表示されます。

プログラムによるアクティベーションは、ガイドの他のアクティベーションオプションと組み合わせて使用できます。プログラムによる（API）アクティベーションにより、次の方法でガイドを起動できます。

選択したアクティベーション方法にかかわらず、ガイドを特定の期間表示する場合は、ガイドの開始日時と終了日時を設定することができます。詳細については、「ガイドをテストして配信する」を参照してください。

ガイドのアクティベーション条件

ガイドは、誰に、いつ、どこでガイドを表示するかを制御するための要素の組み合わせに基づいて起動されます。ガイドが想定通りに起動しない場合は、次の点を確認してください。

  • ガイドのステータス（Guide status）。ガイドを表示するには、［ステージング（Staged）］または［公開（Public）］に設定されている必要があります。［ステージング］の場合、ステージング環境でのみガイドを展開します。［公開］の場合、ステージング環境と本番環境にガイドを展開します。詳細については、「ガイドのテストと配信」を参照してください。
  • セグメント（Segment）。ガイドを表示するには、訪問者がガイドのセグメントに含まれている必要があります。ガイドのテスト時にガイドが表示されない場合は、自分がガイドのセグメントに含まれていることを確認してください。詳細については、「ガイドをテストして配信する」を参照してください。
  • ターゲットページ（Page Location）。ガイドのターゲットページは、ガイドのステップ1から設定されます。詳細については、「オーバーレイガイドのステップ設定を編集する」を参照してください。
    • ［サイト全体（Sitewide）］は、Pendoが稼働しているアプリケーションのすべてのページにガイドを展開します。［サイト全体］を選択し、ガイドをアプリケーション内の要素に紐付けることを選択した場合、選択した要素を含むすべてのページにガイドが表示されます。
    • ［当該ページのみ（Only on this page）］は、アプリケーション内の指定されたタグ付きページにガイドを展開します。ガイドのURLは、タグ付きページルールと一致する必要があります。
  • ガイドの紐付け（Guide anchoring）。ガイドのステップ1で選択した要素が、ガイドを紐付ける場所です。ガイドのステップ1で要素を選択することは、自動ガイドと要素でアクティベーションされたガイドでは任意ですが、バッジでアクティベーションされたガイドと確認でアクティベーションされたガイドでは必須です。詳細については、この記事の「ガイドの紐付け」を参照してください。
  • ターゲット要素（Target Element）。ターゲット要素をアクティベーションオプションとして選択した場合、アクティベーション要素とガイドの最初のステップを紐付ける要素の両方が存在している必要があります。ガイドが起動される要素と、ガイドの最初のステップを紐付ける要素は、同じでも異なっていても構いません。詳細については、この記事の「要素アクティベーションのオプション」を参照してください。
  • デバイスタイプ。対象となる訪問者のデバイスタイプは、アクティベーション設定で選択したデバイスタイプカテゴリ（すべてのデバイス、デスクトップとタブレットのみ、モバイルのみ）と一致する必要があります。詳細については、この記事の「デバイスタイプ」をご覧ください。
  • スロットリング（Throttling）。ガイドスロットリングと順序設定により、他の公開ガイドが自分のガイドよりも優先され、自動ガイドの表示頻度が制限される場合があります。詳細については、「ガイドの順序設定とスロットリング」を参照してください。
  • ローカライズ（Localization）。ガイドが対象の訪問者の言語に翻訳されていない場合、ローカライズ設定によりガイドを表示しないことができます。詳細については、「ローカライズ」を参照してください。
  • コードブロック（Code blocks）。一部のカスタムコードでは、ガイド設定で使用可能な範囲を超えて、ガイドの表示タイミングを意図的に制限することができます。コードブロックにJavaScriptの構文エラーなどのバグがあると、ガイドが正しく表示されないことがあります。

ガイドの紐付け

ガイド内のステップ（最初のステップを含む）に設定する場所のことを、ガイドの紐付けと呼びます。これは、ガイドが示すアプリケーション内のUI要素またはタグ付きフィーチャーを選択することを含みます。次のステップに対してはガイドの紐付けが必須です。

  • ツールチップコンテナを使用するガイド内の任意のステップ。
  • バッジでアクティベーションされたガイドの最初のステップ。
  • 確認でアクティベーションされたガイドの最初のステップ。

ガイドステップを場所に紐付ける方法については、「オーバーレイガイドのステップ設定を編集する」の［場所（Location）］タブ>［ガイドの場所（Guide location）］を参照してください。

ガイドのアクティベーション場所（ガイドを起動する要素）は、ガイドの場所（ガイドステップが紐付いた要素）とは異なります。ガイドのアクティベーション場所をガイドのステップ1の場所と同じにする必要があるアクティベーション方法もあれば、その必要が無いものもあります。

アクティベーション方法 ガイドの紐付けの動作
自動 ガイドのステップ1で設定されたターゲットページ以外に、自動でアクティベーションされたガイドのアクティベーション場所はありません。ただし、必要に応じてガイドの最初のステップをUI要素またはタグ付けされたフィーチャーに紐付けし（たとえば、ガイドの最初のステップがツールチップである場合）、その要素またはフィーチャーが存在するときにガイドが自動的に開くように設定できます。
バッジ ガイドのアクティベーションの場所はガイドのステップ1から継承され、バッジとガイドの紐付け場所も定義されます。つまり、ガイドのステップ1で定義した要素またはタグ付きフィーチャーに紐付けられたバッジを、対象となる訪問者が操作したときにガイドが起動されます。
確認 ガイドのアクティベーションの場所はガイドのステップ1から継承され、ガイドの紐付け場所も定義されます。つまり、ガイドのステップ1で定義したUI要素またはタグ付きフィーチャー（通常は選択可能なボタンまたはリンク）を、訪問者が操作したときにガイドが起動されます。
ターゲット要素 ガイドのアクティベーションの場所（アクティベーション設定で設定）とガイドの場所（ガイドのステップ1で設定）は、ガイドを同じUI要素もしくはガイドを起動するタグ付きフィーチャーに紐付けるかによって、同じ場合もあれば異なる場合もあります。詳細については、この記事の「要素アクティベーションのオプション」を参照してください。

アクティベーション設定ウィンドウ

ガイドのアクティベーション方法は、オーバーレイガイドを作成する、または既存のオーバーレイガイドを編集する際に、ビジュアルデザインスタジオ（Visual Design Studio）の［アクティベーション設定（Activation Settings）］から選択します。アクティベーション方法として［自動（Automatically）］を選択した場合、任意で［バッジ（Badge）］または［ターゲット要素（Target Element）］を選択することもできます。詳細については、この記事の「ガイドのアクティベーションオプション」を参照してください。

アクティベーション方法を選択したら、この記事の関連手順に従って、［自動］を選択した場合は自動アクティベーション、［バッジ］を選択した場合はバッジアクティベーション、［確認（Confirmation）］を選択した場合は確認アクティベーション、［ターゲット要素］を選択した場合は要素アクティベーションの手順で設定します。

既存のオーバーレイガイドの［アクティベーション設定］を開くには、［ガイド（Guides）］>［ガイド］に移動し、指定のガイドを見つけて開きます。［設定（Settings）］タブから［アクティベーション（Activation）］カードを見つけて、［自分のアプリで管理（Manage in My App）］を選択します。アプリケーションのURLを入力し、［デザイナーを起動（Launch Designer）］を選択します。新しいタブでアプリケーション上にアプリケーション上にビジュアルデザインスタジオ（Visual Design Studio）が開き、デフォルトで［アクティベーション設定（Activation Settings）］ウィンドウが開きます。

既にビジュアルデザインスタジオ（Visual Design Studio）を使用している場合、ガイドを作成するか既存のガイドを編集する際は、ガイドの最初のステップの前にあるツールバーから［アクティベーション］カードを選択するか、ツールバーの右上の、［ナビゲート（Navigate）］ショートカットの横にある［アクティベーション］ショートカットを選択します。［アクティベーション設定］ウィンドウが開きます。

自動アクティベーション

対象の訪問者がアクションを起こさなくてもガイドを起動する場合は、アクティベーション方法として［自動］を選択します。自動アクティベーションでは、ガイドを表示するためのすべての条件が満たされると訪問者にガイドが表示されます。詳細については、この記事の「ガイドのアクティベーション条件」を参照してください。このセクションでは、次の内容について説明します。

  • 自動ガイドの動作。ガイドのアクティベーション方法として［自動］を選択した場合に想定されるガイドの動作。（ガイドのアクティベーション方法として［バッジ（Badge）］または［確認（Confirmation）］なども一緒に選択した場合の動作を含む）

  • 自動ガイドアクティベーション設定。自動ガイドの表示を繰り返すオプション、ガイドスロットリング設定と順序設定を上書きするオプション。

自動ガイドの動作

自動で表示されるガイドは、対象の訪問者がガイドを操作するまで開いたままとなります。ガイドの対象となる訪問者には、そのガイドを操作する（ガイドを完了まで進める、またはタイミングを問わずガイドを終了させる）まで自動ガイドが何度も表示されます。

対象となる訪問者がガイドステップでアクションを実行する前にブラウザウィンドウを閉じた場合、Pendoは訪問者がいたステップを最大12時間記憶し、アプリケーションを再度開いたときに同じガイドステップを表示します。

アクティベーション方法として［自動］を選択し、別のアクティベーション方法（［バッジ］または［ターゲット要素］）も一緒に選択した場合、訪問者が初めて対象となる基準を満たしたときは、自動アクティベーションが優先されます。他のアクティベーション方法の頻度設定で、対象となる訪問者がガイドを複数回閲覧できる場合、ガイドは他のアクティベーション方法でも引き続き表示可能です。詳細については以下を参照してください。

自動ガイドアクティベーション設定

このセクションでは、［ガイドの繰り返し表示（Repeat Guide Display）］と［ガイドスロットリングの設定を無視（Ignore Guide Throttling Settings）］という自動アクティベーション設定について設定方法と使用方法を説明します

ガイド疲れを避けるため、これらの設定は控えめに使用することをお勧めします。ガイドを見た訪問者が行動を起こさない場合、訪問者に対してむやみに大量のメールを送るのではなく、ガイドのデザイン、メッセージ、または摩擦について再検討します。アクティベーション、ターゲティング、セグメントの設定を組み合わせて、適切または必要な場合にのみガイドを表示することをお勧めします。

たとえば、Pendoでフィーチャーとしてタグ付けした重要な設定を訪問者が更新するまでガイドを繰り返し表示するとします。その場合、タグ付けされたフィーチャーを使用したことがない訪問者にのみガイドを表示するルールをセグメントに追加し、フィーチャーが表示されている場合にのみガイドが表示されるように構成します。

ガイドの繰り返し表示

対象の訪問者がガイドを閉じた後に自動的に再起動するには、［ガイドの繰り返し表示］をオンにします。これを行うには、アクティベーション方法として［自動］を選択した時に、以下の手順を実行します。

  1. ［ガイドの繰り返し表示］を選択します。
  2. ［繰り返し間隔（Repeat every）］フィールドに、ガイドが対象訪問者に自動的に再表示されるまでの間隔（日数または時間）を入力します。繰り返し間隔は、訪問者のガイド閲覧時に開始されます。間隔には1～10,000の数値を設定し、［日（Day）］または［時間（Hour）］のいずれかを選択できます。



  3. 有効期限を設定し、訪問者にガイドが表示される回数を繰り返し間隔で制限します。［有効期限のタイプ（Expiration Type）］を選択します。
    • ［なし（Never）］を選択した場合、ガイドがオフになるか、訪問者がガイドのセグメントから外れるまでガイドは繰り返し間隔で再度表示されます。



    • ［ガイドを閉じる回数の設定（A set number of dismissals）］を選択した場合、対象となる訪問者に対して自動ガイドが無効になるまでに自動ガイドを何回閉じる必要があるかを入力します。最小値は2回で、これにはガイドの完了も含まれます。

ガイドの繰り返し表示では、次の場合に閉じたと見なされます。

  • 訪問者がガイドの閉じるボタン（X）を選択します。ガイドの閉じるボタンの追加と編集に関する情報は、「ガイドビルディングブロック」を参照してください。
  • 訪問者が、ガイド内の［閉じる（Dismiss）］アクションのあるボタンを選択します。ボタンアクションについては、「ガイドのボタンアクション」を参照してください。
  • 訪問者がパソコンのEscキーを使用します。
  • コードブロックまたはアプリケーションコードでpendo.onGuideDismissed()を呼び出します。
  • 訪問者がガイドの最後の（または唯一の）ステップでボタンを選択し、［次のステップ（Next Step）］または［すべての投票を送信＋ガイドを進める（Submit All Polls + Advance Guide）］のいずれかのアクションを実行します。ボタンアクションについては、「ガイドボタンアクション」を参照してください。
  • コードブロックまたはアプリケーションコード内のガイドの最後の（または唯一の）ステップでpendo.onGuideAdvanced()を呼び出します。

ガイドは、引き続き次のガイド設定に従います。

  • ボタンアクションのスヌーズ。訪問者がガイド内のガイドのスヌーズ（Snooze Guide）アクションを含むボタンを選択した場合、指定されたスヌーズ時間が経過するまで、ガイドは自動的に再表示されません。ガイド内のボタンにスヌーズアクションを追加する方法については、「ガイドのボタンアクション」を参照してください。
  • スケジュールされた有効期限。ガイドに終了日時を設定した場合、ガイドの繰り返し表示はその終了日時までしか行われません。詳細については、「ガイドをテストして配信する」を参照してください。
  • スロットリング設定。ガイドは、ガイドスロットリングで設定した間隔（分、時間、日）の中で複数回再起動することはできません。詳しくは、「ガイドの順序設定とスロットリング」を参照してください。これらの設定を無効にするには、次に説明するように［ガイドスロットリングの設定を無視］をオンにします。

ガイドスロットリングの設定を無視する

スロットリングは、ガイドリストの［順序（Ordering）］タブから設定します。スロットリング設定は、すべての公開された自動ガイドの表示頻度を制御します。自動ガイドが複数ある場合に便利です。ガイドの順序とスロットリングを活用して複数の自動ガイドのタイミングを調整することで、指定された時間枠内で訪問者に過剰なガイドが表示されないようにすることができます。

ガイドの順序とスロットリングの設定を上書きする場合は、アクティベーション方法として［自動（Automatically）］を選択したときに［ガイドスロットリングの設定を無視（Ignore Guide Throttling Settings）］をオンにします。この設定を［ガイドの繰り返し表示（Repeat Guide Display）］と組み合わせて使用すると、ガイドの順序とスロットリングで設定した制限に関係なく、ガイドを継続して起動することができます。

ベストプラクティスを含む詳細については、「ガイドの順序設定とスロットリング」を参照してください。

バッジの有効化

バッジの動作の設定方法に応じて、アプリケーション上に配置されたバッジにカーソルを合わせたり選択して、対象となる訪問者がバッジを操作したときに、その訪問者にガイドを起動するには、アクティベーション方法として［バッジ］を選択します。

バッジでアクティベーションされたガイドでは、常時表示すると画面が煩雑になってしまうような補足情報を表示します。訪問者は、アプリケーションに配置されたバッジを操作してガイドを起動できます。たとえば、アプリケーション内の新しい設定の横にある「？」バッジを選択することで開くツールチップガイドを提供し、訪問者にその設定について説明する、といった使い方が考えられます。

バッジアクティベーションは自動アクティベーションと組み合わせることができます。詳細については、この記事の「自動アクティベーション」を参照してください。

このセクションでは、次の内容について説明します。

  • バッジとガイドの場所。バッジとガイドの場所を選択して編集する方法。
  • バッジとガイドの動作。バッジとガイドの想定動作を設定する方法。バッジがガイドを起動する方法、バッジを常時表示するかどうか、バッジを表示する頻度などを含みます。
  • バッジのスタイル設定。バッジのアイコンを選択またはアップロードする方法、バッジの位置、テキスト、スタイル、アクセシビリティを設定する方法。

バッジとガイドの場所

アクティベーション方法として［バッジ（Badge）］を選択すると、アプリケーション内の要素を選択してバッジ（とガイド）を紐付けるように求められます。バッジとガイドを既存のタグ付けされたフィーチャーに紐付けたい場合は、UIで初回の選択を行った後に行うことができます。

選択モード中は、選択可能な要素が赤い点線のボックスで囲まれ、そのボックスはアプリケーション内のページ上をマウスに合わせて動きます。UI要素を選択すると、赤い点線が赤い実線に変わり、その横にデフォルトのバッジアイコンが表示されます。

ビジュアルデザインスタジオ（Visual Design Studio）も、［バッジ設定（Badge Settings）］ウィンドウが開いた状態でアプリケーションの上部に再表示され、［場所（Location）］タブの［要素の場所（Element Location）］で選択した要素のCSSが表示されます。

Element location for badge.png

ビジュアルデザインスタジオ（Visual Design Studio）でガイドの最初のステップから、この選択とガイドの位置を編集できます。具体的には、［コンテナを編集（Edit Container）］ウィンドウの［場所］タブから、次の操作を行うことができます。

バッジとガイドの動作

バッジアクティベーションでは、アプリケーションにアイコンを追加し、訪問者がそのアイコンからガイドを起動できるようにします。バッジアクティベーションの動作を正確に設定するためのオプションは複数あります。バッジの動作を選択するには、次の手順に従います。

  1. ビジュアルデザインスタジオ（Visual Design Studio）の上部にあるツールバーから、ガイドの最初のステップの前の［アクティベーション（Activation）］カードを選択するか、ツールバーの上部にある［ナビゲート（Navigate）］ショートカットの横の［アクティベーション］ショートカットを選択します。



  2. ［バッジ（Badge）］アクティベーションオプションで、［設定を編集（Edit Settings）］を選択します。［バッジ設定（Badge Settings）］ウィンドウが開きます。



  3. ［バッジ設定（Badge Settings）］ウィンドウの［動作（Behavior）］タブを開きます。ここから、［ガイドの動作（Guide Behavior）］、［バッジの動作（Badge Behavior）］、バッジの表示頻度である［頻度（Frequency）］を編集できます。

ガイドの動作

［ガイドの動作］にある次の2つのオプションから1つを選択します。

  • バッジの上にカーソルを合わせるか、クリックして表示（Show on badge hover or click）。訪問者がバッジにカーソルを合わせたとき、または自分でバッジを選択したときの両方でガイドが開きます。
  • バッジのクリック時のみ表示（Show only on badge click）。訪問者がバッジアイコンを自分で選択した場合にのみ、ガイドが開きます。

バッジの動作

［バッジの動作］にある次の2つのオプションから1つを選択します。

  • 常にバッジを表示（Always show badge）。バッジが紐付けられているUI要素またはタグ付きフィーチャーがページ上にある場合、常にバッジが表示されます。
  • 要素にカーソルを合わせた時のみバッジを表示（Show badge only on element hover）。バッジが紐付けられているUI要素またはタグ付きフィーチャーに訪問者がマウスを置くとバッジが表示されます。

頻度

［頻度］にある次の2つのオプションから1つを選択します。

  • 毎回表示（Show every time）。バッジが紐付けられているUI要素またはタグ付きフィーチャーを含むページを読み込むたびに訪問者にバッジが表示されます。
  • 一度だけ表示（Show only once）。ガイドが表示された訪問者のバッジは非表示となります。

バッジのスタイル設定

バッジアイコンとその位置は、［バッジ設定］ウィンドウの［スタイル設定（Styling）］タブで編集できます。

  1. ビジュアルデザインスタジオ（Visual Design Studio）の上部にあるツールバーから、ガイドの最初のステップの前の［アクティベーション（Activation）］カードを選択するか、ツールバーの上部にある［ナビゲート（Navigate）］ショートカットの横の［アクティベーション］ショートカットを選択します。



  2. ［バッジ（Badge）］アクティベーションオプションで、［設定を編集（Edit Settings）］を選択します。［バッジ設定（Badge Settings）］ウィンドウが開き、デフォルトで［スタイル設定（Styling）］タブが開きます。



  3. ［バッジアイコン（Badge Icon）］のタイプを選択して編集します。

バッジアイコンを編集する際は、次のいずれかで実行できます。

デフォルトバッジアイコンのスタイル設定オプション

デフォルトのバッジアイコンを選択すると、次のスタイル設定オプションが表示されます。

  • 位置（Position）。バッジアイコンの相対位置を、バッジが紐付けられているUI要素またはタグ付きフィーチャーに設定します。［右上（Top Right）］、［左上（Top Left）］、［インライン右（Inline Right）］、または［インライン左（Inline Left）］から選択します。
  • オフセット（Offset）。［上/下（Up/Down）］オフセットの場合、負の数を入力するとバッジアイコンが下に移動し、正の数を入力するとバッジアイコンが上に移動します。［左/右（Left/Right）］のオフセットの場合、負の数を入力するとバッジアイコンが左に移動し、正の数を入力するとバッジアイコンが右に移動します。
  • 色（Color）。16進数、RGBA数値、ビジュアルカラーセレクター、または色と透明度のスライダーを使用して、バッジアイコンの色と透明度を設定します。
  • サイズ（Size）。アイコンの高さと幅をピクセル単位で設定します。
  • Zインデックス（Z-Index）。バッジのスタック順序を指定して、バッジをページ上の別の要素の前に表示するか後ろに表示するかを指定します。バッジがアプリケーション内の他の要素の上に表示されるように、デフォルトでは非常に大きな数値（19,000）になっています。
  • ARIAレベル - アクセシブルな名前（ARIA Lavel - Accessible Name）。バッジアイコンのスクリーンリーダー用ラベル（アクセシブルな名前）を入力します。

カスタム画像スタイル設定オプション

バッジアイコンのカスタム画像を選択すると、色とサイズを除き、デフォルトのバッジアイコンと同じ編集オプションが提供されます。アップロードする前に、カスタム画像の色とサイズが正しいことを確認してください。最大サイズは30MBですが、550KB未満かつ512×512ピクセル未満の画像を選択することをお勧めします。

  • 位置（Position）。バッジアイコンの相対位置を、バッジが紐付けられているUI要素またはタグ付きフィーチャーに設定します。［右上（Top Right）］、［左上（Top Left）］、［インライン右（Inline Right）］、または［インライン左（Inline Left）］から選択します。
  • オフセット（Offset）。［上/下（Up/Down）］オフセットの場合、負の数を入力するとバッジアイコンが下に移動し、正の数を入力するとバッジアイコンが上に移動します。［左/右（Left/Right）］のオフセットの場合、負の数を入力するとバッジアイコンが左に移動し、正の数を入力するとバッジアイコンが右に移動します。
  • Zインデックス（Z-Index）。バッジのスタック順序を指定して、バッジをページ上の別の要素の前に表示するか後ろに表示するかを指定します。バッジがアプリケーション内の他の要素の上に表示されるように、デフォルトでは非常に大きな数値（19,000）になっています。
  • ARIAレベル - アクセシブルな名前（ARIA Lavel - Accessible Name）。バッジアイコンのスクリーンリーダー用ラベル（アクセシブルな名前）を入力します。

テキストバッジのスタイル設定オプション

テキストバッジ を選択すると、色とサイズを除き、デフォルトのバッジアイコンとほぼ同じ編集オプション、テキストバッジアイコンのテキスト、枠、パディング、ドロップシャドウに対して追加でいくつかスタイル設定オプションが提供されます。

  • 位置（Position）。バッジアイコンの相対位置を、バッジが紐付けられているUI要素またはタグ付きフィーチャーに設定します。［右上（Top Right）］、［左上（Top Left）］、［インライン右（Inline Right）］、または［インライン左（Inline Left）］から選択します。
  • オフセット（Offset）。［上/下（Up/Down）］オフセットの場合、負の数を入力するとバッジアイコンが下に移動し、正の数を入力するとバッジアイコンが上に移動します。［左/右（Left/Right）］のオフセットの場合、負の数を入力するとバッジアイコンが左に移動し、正の数を入力するとバッジアイコンが右に移動します。
  • テキスト（Text）。テキストバッジアイコンのコピーを入力します。
  • Zインデックス（Z-Index）。バッジのスタック順序を指定して、バッジをページ上の別の要素の前に表示するか後ろに表示するかを指定します。バッジがアプリケーション内の他の要素の上に表示されるように、デフォルトでは非常に大きな数値（19,000）になっています。
  • ［テキスト（Text）］＞［色（Color）］。16進数、RGBA数値、ビジュアルカラーセレクター、または色と透明度のスライダーを使用して、バッジ内のテキストの色と透明度を設定します。
  • ［テキスト（Text）］>［サイズ（Size）］。バッジ内のテキストのフォントサイズを選択します。
  • ［背景（Background）］>［色（Color）］。16進数、RGBA数値、ビジュアルカラーセレクター、または色と透明度のスライダーを使用して、テキストバッジの背景色と透明度を設定します。
  • パディング（Padding）。テキストとテキストバッジの端との間隔を設定します。［上（Top）］、［右（Right）］、［下（Bottom）］、［左（Left）］のパディングを個別に編集します。
  • 枠（Border）。テキストバッジの枠の外観を設定します。
    • 色（Color）。16進数、RGBA数値、ビジュアルカラーセレクター、または色と透明度のスライダーを使用して、テキストバッジの枠の背景色と透明度を設定します。
    • 幅（Width）。枠の太さをピクセル（px）で設定します。
    • 半径（Radius）。枠の角の丸みをピクセル（px）で設定します。
  • ドロップシャドウ。テキストバッジの影の外観を設定します。
    • 色（Color）。16進数、RGBA数値、ビジュアルカラーセレクター、または色と透明度のスライダーを使用して、テキストバッジのドロップシャドウの背景色と透明度を設定します。
    • テキストバッジのドロップシャドウの角度（X）、長さ（Y）、濃度（Blur）、サイズ（Spread）を設定します。
  • ARIAレベル - アクセシブルな名前（ARIA Lavel - Accessible Name）。テキストバッジアイコンのスクリーンリーダー用ラベル（アクセス可能な名前）を入力します。

確認アクティベーション

対象となる訪問者が本来はアクションを開始する要素（通常はボタンやリンク）を選択した際に、確認ガイドを毎回起動するには、アクティベーション方法として［確認（Confirmation）］を選択します。

確認を求めるガイドによりアクションが中断し、訪問者に続行するかどうかを確認します。これにより、訪問者が意図せず破壊的なアクション（アカウントの削除など）を選択することや、後戻りできないフォームの記入といった時間のかかるプロセスを開始することを防ぐことができます。

［確認］アクティベーションは、他のアクティベーション方法と組み合わせて使用することはできません。別のアクティベーション方法を選択した場合、［確認］アクティベーションをオンにすることはできません。［確認］アクティベーションを選択した場合、他のアクティベーション方法はすべてオフになります。

このセクションでは、次の内容について説明します。

ボタンまたはリンクの選択

アクティベーション方法として初めて［確認］を選択すると、訪問者が操作するたびにガイドを起動するアプリケーション内の要素を選択するように求められます。これは通常、ボタンやリンクなど、アクションを開始する要素です。

選択モード中は、選択可能な要素が赤い点線のボックスで囲まれ、そのボックスはアプリケーション内のページ上をマウスに合わせて動きます。UI要素を選択すると、赤い点線が赤い実線に変わります。

Link selection.png

ビジュアルデザインスタジオ（Visual Design Studio）も、［バッジ設定（Badge Settings）］ウィンドウが開いた状態でアプリケーションの上部に再表示され、［場所（Location）］タブの［要素の場所（Element Location）］で選択した要素のCSSが表示されます。

ビジュアルデザインスタジオ（Visual Design Studio）でガイドの最初のステップから、この選択とガイドの位置を編集できます。具体的には、［コンテナを編集（Edit Container）］ウィンドウの［場所］タブから、次の操作を行うことができます。

確認アクティベーションの動作

確認が必要と定義したボタンまたはリンクを訪問者が選択すると、ガイドはそのアクションを実行し、次の2つのオプションをユーザーに表示します。

  • ［続行（Proceed）］は、訪問者がボタンまたはリンクを選択して開始した元のアクションを完了させます。
  • ［キャンセル（Cancel）］は、訪問者がボタンまたはリンクを選択して開始した元のアクションを中止します。

確認アクティベーションでは、これら2つのオプションに対応するガイドの最初のステップに2つのボタンを追加します。これらのボタンを削除したり、ガイドの別のステップに移動することはできません。2つのデフォルトボタンのいずれかを削除するか、いずれかのアクションを編集すると、［確認］アクティベーションがオフになります。

ただし、次のことは実行できます。

  • 各ボタンのスタイル、テキスト、アクセシビリティラベルを編集します。たとえば、「続行」ボタンを「確認」と表示したり、ボタンの1つのスタイルを変更して、推奨するアクションとして強調表示することができます。
  • 別のボタンを追加します。確認アクティベーションの動作に影響を与えずに、追加のボタンのアクションを編集できます。

ボタンを追加、編集する方法の詳細については、「ガイドビルディングブロック」を参照してください。

要素の有効化

UI内の要素を操作した際にガイドを起動する場合は、アクティベーションの方法として［ターゲット要素（Target Element）］を選択します。

要素でアクティベーションされたガイドでは、訪問者がアプリケーション内の特定のUI要素またはタグ付きフィーチャーを操作することでガイドを起動します。これを自動アクティベーションと組み合わせることができます。詳細については、この記事の「自動アクティベーション」を参照してください。

このセクションでは、次の内容について説明します。

  • アクティベーション要素の選択。ガイドを起動する場所（アクティベーションの場所）を選択して編集する方法。これは、ガイドのステップ1が紐付けられている場所（ガイドの場所）とは異なる場所にすることができます。アクティベーションの場所とガイドの場所の違いについては、この記事の「ガイドの紐付け」を参照してください。
  • ガイドの場所。ステップ1で利用可能な場所の設定に基づいて、ガイドの位置と場所を選択、編集する方法。UI要素またはタグ付けされたフィーチャーが存在するアプリケーション内のすべてのページでガイドを開くか、特定のページでのみ開くかを選択できます。
  • 要素アクティベーションの動作。UI要素またはタグ付きフィーチャーがガイドを起動する方法や、UI要素またはタグ付きフィーチャーを操作する訪問者にガイドを表示する頻度など、ガイドに対して想定する動作を設定する方法。
  • 要素アクティベーションのオプション。アクティベーションの場所をガイドの場所と組み合わせて使用し、独自のガイド動作（ガイドを起動する場所とは別の場所にガイドを表示するなど）を実現する方法のユースケース。アクティベーションの場所とガイドの場所の違いについては、この記事の「ガイドの紐付け」を参照してください。

アクティベーション要素の選択

要素の選択の動作は、ガイドの最初のステップとして選択するコンテナによって異なります。

ガイドの最初のステップがツールチップである場合、ガイド作成プロセスの一部として既にUI要素またはタグ付きフィーチャーに紐付けられているため、アクティベーション要素の場所はステップ1のガイドの場所から継承されます。このシナリオでは、［ターゲット要素（Target Element）］をアクティベーション方法として選択すると、［ターゲット要素設定（Target Element Settings）］ウィンドウの［要素の場所（Element Location）］セクションはデフォルトで［ステップ1から継承（Inherit from Step 1）］になります。アクティベーション要素を変更して、ステップ1でガイドが紐付けられている要素とは異なる要素を使用することができます。詳細については、この記事の「要素アクティベーションのオプション」を参照してください。

Inherit element from step 1.png

ガイドの最初のステップがライトボックスまたはバナーであり、ガイド作成プロセスの一部としてUI要素またはタグ付きフィーチャーに紐付けされていない場合は、ガイドのアクティベーションのための要素を選択する必要があります。このシナリオでは、アクティベーション方法として［ターゲット要素］を選択すると、選択モードが自動的に開きます。選択モード中は、選択可能な要素が赤い点線のボックスで囲まれ、そのボックスはアプリケーション内のページ上をマウスに合わせて動きます。UI要素を選択すると、選択した要素を囲む赤い点線が赤い実線に変わり、［場所］タブが開いた状態で［ターゲット要素設定］ウィンドウが表示され、そこで選択対象を拡大したり、絞り込むことができます。

Link selection.png

アクティベーション要素の場所を編集するには、［ターゲット要素設定］ウィンドウの［場所］タブを開き、次のいずれかを選択します。

  • ［一致候補（Suggested Match）］を選択して、選択したUI要素に対応するCSSセレクターを保持します。



  • ［親要素（Parent Element）］を選択して、選択対象をより大きなクリック可能な要素に拡大します。これにより、DOMツリー内で最初に選択された要素の上にあり、その要素に接続されたCSSセレクターを選択できます。



  • ［カスタムCSS（Custom CSS）］を選択して、選択対象を絞り込みます。これにより、DOMツリー内の特定のCSSセレクターに基づいて、目的の要素を指定することができます。ガイダンスについては、「ガイドのターゲット設定にCSSルールを使用する」を参照してください。



  • ［ステップ1から継承（Inherit from Step 1）］を選択して、ガイドの最初のステップを紐付けた要素と同じ要素を使用します。このオプションは、ガイドのステップ1の要素を選択した場合にのみ利用可能です。ガイドのステップ1の場所を編集する手順については、「オーバーレイガイドのステップ設定を編集する」を参照してください。

アクティベーションの場所をUI要素ではなくタグ付けされたフィーチャーにしたい場合は、ガイドのステップ1から継承する必要があります。タグ付けされたフィーチャーをガイド内のステップに対して選択する手順については、「オーバーレイガイドのステップ設定を編集する」を参照してください。

ガイドの場所

選択したUI要素またはタグ付きフィーチャーがアプリケーション内のどこに存在しても表示する［サイト全体（Sitewide）］、またはアプリケーション内の特定のページにガイドを表示する［当該ページのみ（Only on this page）］を選択できます。［当該ページのみ］を選択した場合、アプリケーション内のタグ付きページを選択するように促されます。

Only on this page.png

ガイドの最初のステップがツールチップ、ライトボックス、バナーのいずれであるか、またはアプリケーション内の要素もしくはタグ付けされたフィーチャーに紐付けられているかに関係なく、常にガイドの最初のステップからターゲットページを編集します。これは、ガイドの最初のステップを開くターゲットページであり、ガイドの他のステップで選択されたターゲットページとは異なる場合があります。手順については、「オーバーレイガイドのステップ設定を編集」の「ターゲットページ」を参照してください。

ガイドの最初のステップから以下を編集することもできます。具体的には、［コンテナを編集（Edit Container）］ウィンドウの［場所］タブから、次の操作を行うことができます。

要素アクティベーションの動作

要素のアクティベーションの動作を正確に設定するための複数のオプションがあります。アクティベーションの動作を選択するには、以下の手順に従います。

  1. ビジュアルデザインスタジオ（Visual Design Studio）の上部にあるツールバーから、ガイドの最初のステップの前の［アクティベーション（Activation）］カードを選択するか、ツールバーの上部にある［ナビゲート（Navigate）］ショートカットの横の［アクティベーション］ショートカットを選択します。



  2. ［ターゲット要素（Target Element）］」アクティベーションオプションで、［設定を編集（Edit Settings）］を選択します。［ターゲット要素設定（Target Element Settings）］ウィンドウが開きます。



  3. 「ターゲット要素設定」ウィンドウの［動作］タブを開きます。ここから、［ガイドの動作］とガイドの表示頻度（［頻度］）を編集できます。

ガイドの動作

［ガイドの動作］にある次の2つのオプションから1つを選択します。

  • 要素の上にカーソルを合わせるか、クリックして表示（Show on badge hover or click）。訪問者が要素にカーソルを合わせたとき、または自分で要素を選択したときの両方でガイドが開きます。
  • バッジのクリック時のみ表示（Show only on badge click）。訪問者が自分で要素を選択したときにのみ、ガイドが開きます。

頻度

［頻度］にある次の2つのオプションから1つを選択します。

  • 毎回表示（Show every time）。アクティベーションのために選択した要素を訪問者が操作するたびにガイドが表示されます。
  • 一度だけ表示（Show only once）。すでにガイドが表示された訪問者には、ガイドは表示されません。

要素アクティベーションのオプション

選択した要素をバッジのように動作させたい場合は、ガイドのステップ1を紐付けるように選択した場所からアクティベーションの場所を継承できます。つまり、ガイドをアクティベーションする要素は、ガイドが紐付けられている要素と同じです。

バッジでアクティベーションされたガイドとは異なり、ステップ1でガイドが開いたときに、ガイドに紐付けられている要素とは別の要素を選択してガイドをアクティブにできます。これは、対象となる訪問者が特定の要素を操作（メニューを開くなど）し、ガイドの最初のステップがUIの他の場所（そのメニューの項目など）を指しているときにガイドを起動するのに便利です。たとえば、次のようなことが可能です。

  • ユーザーが操作を行う（セクションを展開して、そのセクションで表示される機能の横にガイドを表示するなど）まで表示されない要素にガイドを紐付けます。
  • 訪問者がアプリケーションの特定の機能を操作した際にガイドをアクティベーションし、ウォークスルーの最初のステップとしてガイドが画面上の別の要素を指すようにします。

ガイドの最初のステップに別の場所を選択するには、「オーバーレイガイドのステップ設定を編集する」の手順に従います。

ガイドの最初のステップがライトボックスやバナーである場合など、ガイドの場所ではなくアクティベーションの場所を設定することもできます。

デバイスのタイプ

選択するアクティベーションの方法に関係なく、ビジュアルデザインスタジオ（Visual Design Studio）の［アクティベーション設定（Activation Settings）］ウィンドウから、ガイドを表示するデバイスタイプを選択できます。［ガイドの表示場所（Show Guide On）］で、以下の3つのオプションから選択します。

  • すべてのデバイス（All devices）
  • PCとタブレットのみ（Desktop & tablets only）
  • モバイルのみ（Mobile only）

Show Guide On.png

条件に応じたガイドの表示

ガイドの最初のステップで［要素包含判定ルールの有効化（Enable Element Contains Rule）］をオンにすると、アプリケーションのUI要素のコンテンツ（テキストまたは数値）に基づいて条件に応じたガイドの表示ができます。

  1. ビジュアルデザインスタジオ（Visual Design Studio）の上部にあるツールバーから、ガイドのステップ1にカーソルを合わせ、［ステップを編集（Edit Step）］を選択します。［コンテナを編集（Edit Container）］ウィンドウが開きます。

    Edit first step.png

  2. ［コンテナを編集］ウィンドウの［場所］タブを開きます。

    Location tab edit container.png

  3. 変更可能な値を含むアプリケーション内の要素を選択します。動的またはユーザーが入力したコンテンツ（input、div、spanなど）を含むCSSセレクターを使用します。:contains()ルールは、内容が完全に一致するとガイドステップが強制的に表示され、要素包含判定（element contains）ルールが意図したとおりに動作しなくなる場合があるため避けてください。
    • ステップがアプリケーション内の要素にまだ紐付けられていない場合は、［要素に紐付ける（Anchor To Element）］ドロップダウンメニューから［ターゲット要素］を選択し、「オーバーレイガイドのステップ設定を編集する」の［場所（Location）］タブ>［要素の場所（Element location）］の手順に従います。

      Target element.png

    • ステップがアプリケーション内の要素にすでに紐付けられている場合は、動的コンテンツまたはユーザー入力コンテンツを含むCSSセレクターに対応していることを確認します。

      CSS selection.png

  4. ［要素包含判定ルールの有効化］をオンにして、ルールを設定します。選択した要素に含まれる現在のコンテンツが表示されます。

    Enable element contains rule.png

  5. ［コンテンツタイプ（Content Type）］で、［テキスト（Text）］または［数値（Number）］を選択します。これらのコンテンツタイプの詳細については、この記事の「テキストルール」と「数値ルール」を参照してください。

    Content type.png

  6. ［ガイドを表示するのはこの要素の値が...（Only display guide when the value of this element...）］でドロップダウンメニューから一致式（［含む（Contains）］や［等しい（Equals）］など）を選択し、値を入力します。
    • コンテンツタイプが［テキスト］の場合、［含む］、［含まない（Does Not Contain）］、［完全一致（Exactly Matches）］、［一致しない（Does Not Match）］から選択できます。
    • コンテンツタイプが［数値］の場合、［等しい］、［等しくない（Not Equal To）］、［より大きい（Is Greater Than）］、［より小さい（Is Less Than）］から選択できます。
  7. ［コンテナを編集（Edit Container）］ウィンドウの右下にある［完了（Done）］を選択してルールを保存します。

ルールビルダーは、選択した要素の現在のコンテンツを包含判定ルールで検証します。現在のコンテンツは動的な値である必要があるため、設定時にルールを通過しなくても問題ありません。ルールを通過しない場合でも、ルールが意図したとおりに機能することの確認にもなります。

ルールを通過した場合、ガイドが訪問者に表示されます。ルールを通過しなかった場合、ガイドは訪問者に表示されません。

テキストルール

テキスト検証オプションには、［含む］、［含まない］、［完全一致］、［一致しない］があります。

Text contains.png

テキスト検証は、要素のコンテンツを文字列として扱い、文字列内のテキストを、「要素包含判定」ルールの一部として定義する値で検索します。たとえば、フォームの入力フィールドにルールを作成する場合、［含まない］+@というルールを使用して、訪問者が無効なメールアドレスを入力するたびにガイドを起動できます。

テキストに@.pngが含まれています

テキスト検証では以下に従います。

  • テキストの大文字と小文字は区別されません。
  • ルールには、句読点や記号も設定できます。

数値ルール

数値検証オプションには「等しい」、「等しくない」、「より大きい」、および「より小さい」があります。

Number equals.png

数値検証では、要素のコンテンツをfloat型として扱います。詳細については、この記事の「サポートしている形式」と「サポートしていない形式」を参照してください。

数値では以下に従います。

  • 日付、時刻、通貨、小数点以外の句読点など、特定の形式は認識されません。
  • カンマは無視されます。
  • 先行する句読点は以下のような場合を除いて無視されます。
    • 数値の後に続くピリオド（例：12.34）。
    • 負の数を示すマイナス記号（例：-1234）。
  • 数値の後のピリオドまたは記号は、その数値の終了を意味するものとして扱われます。

サポートしている形式

  要素のコンテンツ ルールの中の値
正の数 1234 1234
負の数 -1234 -1234
前に数値がある小数点 0.1234 0.1234
currency $1234 1234
パーセンテージ 12.34% 12.34
カンマ区切り 1,234 1234
ゼロで始まる数値 01234 1234
値無し    

サポートしていない形式

  要素のコンテンツ ルールの中の値
小数点の前に数値がない 0.1234 1234
分数 12/34 12
時間 12:34AM 12
日付 12/12/25 12
IPアドレス 1.2.3.4 1.2
国際通貨におけるカンマの使用 €12,34 1234
句読点を含む電話番号 (123)456-7890 123
スペースで区切られた数値 12, 34, 56 12
この記事は役に立ちましたか？
40人中16人がこの記事が役に立ったと言っています

このセクションの記事