この記事では、アプリケーションのコンテンツの上に表示され、ツールチップ、投票とアンケート調査、または複数ステップのツアーに適したオーバーレイガイドを作成する方法について説明します。アプリケーションに直接埋め込まれたガイドを作成する場合は、「埋め込みガイドを作成する」を参照してください。
権限
ガイドの役割には、ガイド作成者、ガイド公開者、およびガイドコンテンツ編集者という3つがあり、それぞれ権限が異なります。管理者ユーザーは以下のすべての権限を持っています。
- ガイド作成者の役割の権限を持つPendoユーザーは、ゼロからガイドを作成および編集することができます。また、公開されていない既存のガイドを編集することもできます。
- ガイド作成者またはガイドコンテンツ編集者の役割の権限を持つPendoユーザーは、レイアウトやテンプレートからガイドを作成および編集することができます。
- ガイド公開者の役割の権限を持つPendoユーザーは、ガイドを公開し、スケジュールすることができます。
- すべてのガイドの役割は、ドラフト、ステージング、無効のガイドを削除することができます。
必要に応じて、以下のガイド権限を組み合わせてカスタムユーザーの役割を作成することもできます。
- ゼロからガイドを作成、編集する。
- レイアウトからガイドを作成および編集する。
- ガイドを公開する。
- 公開ガイドを編集、削除する。
- ドラフト、ステージング、無効のガイドを削除する。
詳細については、「役割と権限」を参照してください。
ステップ1. オーバーレイガイドを作成する
オーバーレイガイドの作成を開始するには、次の手順に従います。
- 左側のメニューから、［ガイド（Guides）］>［ガイド］に移動します。
- 右上にある［ガイドの作成］を選択します。1つのアプリ用にガイドを作成するか、複数のウェブアプリにわたって作成するかを選択します。クロスアプリガイドはGuides Proでのみ利用可能です。詳細については、「クロスアプリガイドを作成する」をご参照ください。
- ガイドを表示するアプリケーションを選択します。
- 必要に応じて、ガイドのカテゴリーを選択します。カテゴリーは、ガイドを整理し、複数ステップのオンボーディングウォークスルー用のライトボックスや、訪問者への重要なメッセージ用のバナーなど、推奨レイアウトを表示するために使用されます。詳細については、「ガイドレイアウトを使用する」を参照してください。
- ガイドをアプリケーションのコンテンツの上に表示するには、［オーバーレイ］を選択します。
- ガイドのレイアウトを見つけます。レイアウトは、組織全体のガイドに一貫したスタイリングを適用するのに役立ちます。利用可能なレイアウトが多い場合は、カテゴリーおよびレイアウトタイプのフィルターを使用してリストを絞り込むか、名前で検索します。
- カスタムレイアウトはサブスクリプションに保存され、再利用可能なテンプレートです。これらのレイアウトは、作成時のテーマを保持します。
- デフォルトレイアウトはPendoによって提供され、すべてのユーザーが利用可能です。
-
組織レイアウトは、複数のサブスクリプションを持ち、組織ライブラリを有効にしているお客様が利用できます。これらのテンプレートは組織によって作成・管理されており、サブスクリプション間で共有でき、作成時のテーマが保持されます。組織ライブラリの詳細を参照してください。
-
希望するレイアウトにカーソルを合わせて、［レイアウトを選択］をクリックします。
注：テーマは後でビジュアルデザインスタジオ（Visual Design Studio）またはPendoでガイドを編集する際に変更できます。
- ガイドに名前を付けます。ページの上部にあるデフォルトのタイトルを選択するか、新しいガイド名を入力します。
- 必要に応じて、ガイドのタイトルの下のドロップダウンメニューからプロダクトエリアとカテゴリーを選択します。プロダクトエリアとカテゴリーはガイドを整理するのに役立ちます。必要に応じて、サブスクリプション管理者は新しいプロダクトエリアやカテゴリーを追加して、組織をサポートできます。
-
［設定（Settings）］タブの［コンテンツ（Content）］エリアで、アプリケーションURLを入力し、［デザイナーを起動（Launch Designer）］を選択します。これにより、アプリケーション上でビジュアルデザインスタジオ（Visual Design Studio）が新しいタブで開き、ガイドの編集を開始できます。ここで入力するURLは、アプリケーション内で訪問者にガイドを表示する場所を制御するものではありません。ガイドの場所は、［コンテナを編集（Edit Container）］ウィンドウの［場所（Location）］タブで個別に設定します。詳細については、「オーバーレイガイドのステップ設定を編集する」を参照してください。
注：このフィールドは、ガイドがユーザーに表示される場所を制御するものではありません。これは 場所タブのターゲットページフィールドで個別に設定します。
- ビルディングブロックを使用して、ガイドのコンテンツを追加、編集します。手順については、この記事の「ガイドコンテンツを追加、編集する」を参照してください。
ステップ2。コンテンツを追加して編集する
テキスト、ボタン、画像、投票とアンケート調査、埋め込み動画の追加、フォーマットのガイドビルディングブロックが複数用意されています。詳細については、「ガイドコンテンツを追加、編集する」を参照してください。
ガイドにビルディングブロックを追加するには：
- ガイドの正しいステップにいることを確認します。ガイドのステップが表示されない場合は、ビジュアルデザインスタジオ（Visual Design Studio）のツールバーの［ステップを表示（View Steps）］タブを選択します。ここから、コンテンツを追加するステップにカーソルを合わせ、［ステップを編集（Edit step）］を選択します。
- ビルディングブロックを追加します。
- ガイドにまだコンテンツがない場合は、ガイドの中央にカーソルを合わせ、［クリックしてコンテンツを追加（Click to Add Content）］を選択します。
- 既存のビルディングブロックの上または下にビルディングブロックを追加するには、追加する場所にカーソルを合わせ、表示される［行を追加（Add Row）］のプラス（＋）アイコンを選択します。
- 既存のビルディングブロックの左または右にテキスト、ボタン、または画像のビルディングブロックを追加するには、ビルディングブロックの上にカーソルを合わせ、表示される［列を追加（Add Column）］のプラス（＋）アイコンを選択します。ビルディングブロックの列の幅を編集することができます。
- ガイドにまだコンテンツがない場合は、ガイドの中央にカーソルを合わせ、［クリックしてコンテンツを追加（Click to Add Content）］を選択します。
- ［ビルディングブロック（Building Blocks）］ウィンドウからコンテンツビルディングブロックを選択します。
- ビルディングブロックのコンテンツを編集します。各ビルディングブロックタイプで編集できる内容については、「ガイドビルディングブロック」を参照してください。
ヒント：MacではOptionキー、WindowsではAltキーを使用すると、現在のすべてのビルディングブロックとその境界ボックスが表示されます。
ガイドの既存のビルディングブロックを編集するには、次の手順に従います。
- ガイドの正しいステップにいることを確認します。ガイドのステップが表示されない場合は、ビジュアルデザインスタジオ（Visual Design Studio）のツールバーの［ステップを表示（View Steps）］タブを選択します。ここから、編集するステップにカーソルを合わせて、［ステップを編集（Edit Step）］を選択します。
- コンテンツを編集するステップ内のビルディングブロックを選択します。
- 「ガイドのビルディングブロック」で説明されているオプションを使用して、ビルディングブロックを編集します。
ヒント：ガイドを編集する際には、定期的に変更を保存して作成途中の内容を保存してください。
ステップ3. ステップを追加、編集する
新しいステップを追加、編集するには、次の手順に従います。
- ページの上部にあるビジュアルデザインスタジオ（Visual Design Studio）のツールバーからガイドにステップを追加できます。ステップが表示されない場合は、［ステップを表示］を選択します。［+ ステップを追加］を選択し、新しいステップのレイアウトを選択します。マルチステップレイアウトを選択すると、そのレイアウト内のすべてのステップがガイドに追加されます。
- この記事の「ガイドコンテンツを追加、編集する」の手順に従います。
- ステップ設定を編集します。ステップの設定は、ビジュアルデザインスタジオ（Visual Design Studio）の ［コンテナを編集（Edit Container）］ ウィンドウから編集でき、ステップのスタイル、場所、動作を調整できます。詳細については、「オーバーレイガイドのステップ設定を編集する」を参照してください。
- ステップの設定の編集が完了したら、［コンテナを編集（Edit Container）］ウィンドウの右下にある［完了（Done）］を選択します。
既存のステップの設定を編集するには、ビジュアルデザインスタジオ（Visual Design Studio）のツールバーで編集するステップにカーソルを合わせ、［ステップを編集（Edit Step）］を選択します。［コンテナを編集（Edit Container）］ウィンドウが開き、ステップのスタイル、場所、動作を編集できます。詳細については、「オーバーレイガイドのステップ設定を編集する」を参照してください。
ステップ4. ガイドのアクティベーション方法を設定する
ガイドのアクティベーションは、ガイド作成中またはガイド作成後にビジュアルデザインスタジオ（Visual Design Studio）内で設定できます。ガイドをすでに作成している場合は、Pendo内でガイドの［設定（Settings）］タブを開き、［アクティベーション（Activation）］カードの右上にある［自分のアプリで編集（Edit in my app）］を選択します。
ビジュアルデザインスタジオ（Visual Design Studio）が開き、デフォルトで［アクティベーション設定（Activation Settings）］ウィンドウが開きます。ここから、適切なアクティベーション方法を選択します。詳細については、「オーバーレイガイドのアクティベーションオプション」を参照してください。
すでにガイドを編集している場合は、次のいずれかを実行します。
- ガイドの最初のステップの前にあるツールバーから［アクティベーション］カードを選択する。
- ツールバーの右上で、［ナビゲート（Navigate）］ショートカットの横にある［アクティベーション］ショートカットを選択する。
ステップ5. ガイドを保存してプレビューする
ガイドの作成と編集が完了したら、次の手順に従います。
-
［保存（Save）］を選択し、ビジュアルデザインスタジオ（Visual Design Studio）のツールバーの右上にある［終了（Exit）］を選択します。ガイドが保存され、ビジュアルデザインスタジオ（Visual Design Studio）が閉じられ、デフォルトで［設定］タブが開いてガイドの詳細が表示されます。
- ガイドの［設定］タブから、［プレビュー（Preview）］を選択します。新しいタブ内でアプリケーション上にガイドが表示されます。
- 完了したら、ページの右上にある［プレビューを終了（Exit preview）］を選択します。
オーバーレイガイドを保存してプレビューした後、テスト、セグメント化、スケジュール設定、公開が可能です。手順については、「ガイドをテストして配信する」を参照してください。
簡易エディターで既存のガイドを編集する
ガイドの詳細ページで［Pendoで編集］を選択すると、簡易エディターで既存のガイドを更新できます。
このエディターでは、次のことができます。
- ガイド内のテキストを直接選択して、テキストとボタンの内容を編集します。
- 表示される矢印アイコンを選択して、最近のテキスト変更を元に戻します。このオプションは、フォーカスを移動すると消えます。
- ガイドステップの下にある+アイコンを選択して新しいステップを追加し、その後レイアウトを適用します。
- ステップの上にマウスを移動し、関連するアイコンを選択して、ステップを複製または削除します。
- 右上隅の［テーマ］ドロップダウンを選択して、ガイドのテーマを更新します。
完了したら、ページの右上隅にある［ガイドを保存］を選択して変更を適用します。
注： サブスクリプションでGuides ProとAIによるガイド作成をオンにしている場合、Guides AIエージェントがエディターの左側に表示されます。自然言語を用いて、テキストの変更を提案したり、トーンを調整したり、その他の編集を行うことができます。詳細については、「会話型AIを使用してガイドを作成する」を参照してください。
スタイリング、アクティベーション、ターゲティングなどの高度なガイド設定を行うには、ガイドの詳細ページで［自分のアプリで編集］を選択し、ビジュアルデザインスタジオを開きます。