オーバーレイガイドを作成する

この記事では、ツールチップ、投票とアンケート調査、複数ステップのツアーなど、ウェブアプリケーションのコンテンツ上に表示されるガイドを作成する手順を説明します。

アプリケーションの上に表示されるガイドではなく、埋め込みガイドを作成したい場合は、「埋め込みガイドを作成する」を参照してください。

権限

ガイドの役割には、ガイド作成者、ガイド公開者、およびガイドコンテンツ編集者という3つがあり、それぞれ権限が異なります。管理者ユーザーは以下のすべての権限を持っています。

• ガイド作成者の役割の権限を持つPendoユーザーは、ゼロからガイドを作成および編集することができます。また、公開されていない既存のガイドを編集することもできます。
• ガイド作成者またはガイドコンテンツ編集者の役割の権限を持つPendoユーザーは、レイアウトやテンプレートからガイドを作成および編集することができます。
• ガイド公開者の役割の権限を持つPendoユーザーは、ガイドを公開し、スケジュールすることができます。
• すべてのガイドの役割は、ドラフト、ステージング、無効のガイドを削除することができます。

必要に応じて、以下のガイド権限を組み合わせてカスタムユーザーの役割を作成することもできます。

• ゼロからガイドを作成、編集する。
• レイアウトからガイドを作成および編集する。
• ガイドを公開する。
• 公開ガイドを編集、削除する。
• ドラフト、ステージング、無効のガイドを削除する。

詳細については、「役割と権限」を参照してください。

プロセス概要

オーバーレイガイドの設定には、次の手順が含まれます。

1. ガイドの作成を開始する。ガイド構成オプションを選択し、ビジュアルデザインスタジオ（Visual Design Studio）を開きます。
2. ビルディングブロックを使用してコンテンツを追加および編集する。
3. ステップを追加および編集する。必要に応じて、ガイドにステップを追加し、各ガイドステップのスタイル、場所、動作を編集します。
4. ガイドのアクティベーション方法を設定する。
5. ガイドを保存してプレビューする。

次にガイドの配信をテストし、設定を行うことができます。

1. ガイドをテストする。ステージング環境と本番環境で実行できます。
2. ガイドをセグメント化して、特定の訪問者をターゲットにする。
3. ガイドを公開する。必要に応じて、ガイドをスケジュールすることもできます。

手順については、「ガイドをテストして配信する」を参照してください。

ステップ1. ガイドの作成を開始する

オーバーレイガイドの作成を開始するには、次の手順に従います。

1. 左側のメニューから、［ガイド（Guides）］>［ガイド］に移動します。
2. ページの右上にある［ガイドを作成（Create guide）］を選択します。AIを使用してガイドを作成する場合は、矢印を選択し、［AIでガイドを作成（Create guide with AI）］を選択します。この機能の詳細については、「AIを活用したガイドの作成」を参照してください。
   
   
   
   
3. Pendoサブスクリプションに複数のウェブアプリケーションを設定している場合、ガイドを表示するアプリケーションを選択します。ガイドはサブスクリプション内の1つのアプリケーションでのみ配信されます。
   
   
   
   
4. 必要に応じて、ガイドのカテゴリーを選択します。これにより、複数のステップを含むオンボーディングウォークスルー用のライトボックスや、訪問者に対する重要なメッセージ用のバナーなど、カテゴリーの推奨レイアウトを確認できます。詳細については、「ガイドレイアウトを使用する」を参照してください。
   
   
   
   
5. アプリケーションのコンテンツの上にガイドを表示するには、［オーバーレイ（Overlay）］を選択します。
   
   
   
   
6. 保存済みレイアウトまたはPendoのデフォルトレイアウトからレイアウトを選択します。
   
   
   
   
7. ガイドに名前を付けます。ページの上部にあるデフォルトのタイトルを選択するか、新しいガイド名を入力します。
   
   
   
   
8. ガイドのタイトルの下のドロップダウンメニューを使用して、プロダクトエリアを追加します。既存のプロダクトエリアを選択するか、［+プロダクトエリアを作成（+Create Product Area）］を選択して新しいプロダクトエリアを作成することができます。Pendoのプロダクトエリアの詳細については、「プロダクトエリア」を参照してください。
   
   
   
   
9. ［設定（Settings）］タブの［コンテンツ（Content）］エリアで、アプリケーションURLを入力し、［デザイナーを起動（Launch Designer）］を選択します。これにより、アプリケーション上でビジュアルデザインスタジオ（Visual Design Studio）が新しいタブで開き、ガイドの編集を開始できます。ここで入力するURLは、アプリケーション内で訪問者にガイドを表示する場所を制御するものではありません。ガイドの場所は、［コンテナを編集（Edit Container）］ウィンドウの［場所（Location）］タブで個別に設定します。詳細については、「オーバーレイガイドのステップ設定を編集する」を参照してください。
   
   
   
   
10. ビルディングブロックを使用して、ガイドのコンテンツを追加、編集します。手順については、この記事の「ガイドコンテンツを追加、編集する」を参照してください。

ステップ2。コンテンツを追加して編集する

テキスト、ボタン、画像、投票とアンケート調査、埋め込み動画の追加、フォーマットのガイドビルディングブロックが複数用意されています。詳細については、「ガイドコンテンツを追加、編集する」を参照してください。

ガイドにビルディングブロックを追加するには：

1. ガイドの正しいステップにいることを確認します。ガイドのステップが表示されない場合は、ビジュアルデザインスタジオ（Visual Design Studio）のツールバーの［ステップを表示（View Steps）］タブを選択します。ここから、コンテンツを追加するステップにカーソルを合わせ、［ステップを編集（Edit step）］を選択します。
   
   
   
2. ビルディングブロックを追加します。
   • ガイドにまだコンテンツがない場合は、ガイドの中央にカーソルを合わせ、［クリックしてコンテンツを追加（Click to Add Content）］を選択します。
     
     
     
   • 既存のビルディングブロックの上または下にビルディングブロックを追加するには、追加する場所にカーソルを合わせ、表示される［行を追加（Add Row）］のプラス（＋）アイコンを選択します。
     
     
     
   • 既存のビルディングブロックの左または右にテキスト、ボタン、または画像のビルディングブロックを追加するには、ビルディングブロックの上にカーソルを合わせ、表示される［列を追加（Add Column）］のプラス（＋）アイコンを選択します。ビルディングブロックの列の幅を編集することができます。
     
     
3. ［ビルディングブロック（Building Blocks）］ウィンドウからコンテンツビルディングブロックを選択します。
4. ビルディングブロックのコンテンツを編集します。各ビルディングブロックタイプで編集できる内容については、「ガイドビルディングブロック」を参照してください。

ヒント：MacではOptionキー、WindowsではAltキーを使用すると、現在のすべてのビルディングブロックとその境界ボックスが表示されます。

ガイドの既存のビルディングブロックを編集するには、次の手順に従います。

1. ガイドの正しいステップにいることを確認します。ガイドのステップが表示されていない場合は、ビジュアルデザインスタジオ（Visual Design Studio）のツールバーの［ステップを開く（Open Steps）］タブを選択します。ここから、編集するステップにカーソルを合わせて、［ステップを編集（Edit Step）］を選択します。
   
   
2. コンテンツを編集するステップ内のビルディングブロックを選択します。
3. 「ガイドのビルディングブロック」で説明されているオプションを使用して、ビルディングブロックを編集します。

ヒント：ガイドを編集する際には、定期的に変更を保存して作成途中の内容を保存してください。

ステップ3. ステップを追加、編集する

新しいステップを追加、編集するには、次の手順に従います。

1. ビジュアルデザインスタジオ（Visual Design Studio）のツールバーから［+ ステップを追加（+ Add Step）］を選択します。ガイドのステップが表示されていない場合は、ビジュアルデザインスタジオ（Visual Design Studio）の［ステップを開く（Open Steps）］タブを選択します。
   
   
   
   
2. この記事の「ガイドコンテンツを追加、編集する」の手順に従います。
3. ステップ設定を編集します。ステップの設定は、ビジュアルデザインスタジオ（Visual Design Studio）の ［コンテナを編集（Edit Container）］ ウィンドウから編集でき、ステップのスタイル、場所、動作を調整できます。詳細については、「オーバーレイガイドのステップ設定を編集する」を参照してください。
4. ステップの設定の編集が完了したら、［コンテナを編集（Edit Container）］ウィンドウの右下にある［完了（Done）］を選択します。

既存のステップの設定を編集するには、ビジュアルデザインスタジオ（Visual Design Studio）のツールバーで編集するステップにカーソルを合わせ、［ステップを編集（Edit Step）］を選択します。［コンテナを編集（Edit Container）］ウィンドウが開き、ステップのスタイル、場所、動作を編集できます。詳細については、「オーバーレイガイドのステップ設定を編集する」を参照してください。

ステップ4. ガイドのアクティベーションを設定する

ガイドのアクティベーションは、ガイド作成プロセス中またはガイド作成後にビジュアルデザインスタジオ（Visual Design Studio）内で設定できます。ガイドをすでに作成している場合は、Pendo内でガイドの［設定（Settings）］タブを開き、［アクティベーション（Activation）］カードの右上にある［自分のアプリで管理（Manage In My App）］を選択します。

ビジュアルデザインスタジオ（Visual Design Studio）が開き、デフォルトで［アクティベーション設定（Activation Settings）］ウィンドウが開きます。ここから、適切なアクティベーション方法を選択します。詳細については、「オーバーレイガイドのアクティベーションオプション」を参照してください。

すでにガイドを編集している場合は、次のいずれかを実行します。

• ガイドの最初のステップの前にあるツールバーから［アクティベーション］カードを選択する。
• ツールバーの右上で、［ナビゲート（Navigate）］ショートカットの横にある［アクティベーション］ショートカットを選択する。
  
  

ステップ5. ガイドを保存してプレビューする

ガイドの作成と編集が完了したら、次の手順に従います。

1. ［保存（Save）］を選択し、ビジュアルデザインスタジオ（Visual Design Studio）のツールバーの右上にある［終了（Exit）］を選択します。ガイドが保存され、ビジュアルデザインスタジオ（Visual Design Studio）が閉じられ、デフォルトで［設定］タブが開いてガイドの詳細が表示されます。
   
   
   
   
2. ガイドの［設定］タブから、［プレビュー（Preview）］を選択します。新しいタブ内でアプリケーション上にガイドが表示されます。
   
   
   
   
3. 完了したら、ページの右上にある［プレビューを終了（Exit preview）］を選択します。
   
   

次のステップ

オーバーレイガイドを作成してプレビューした後、テスト、セグメント化、スケジュール設定、公開が可能です。手順については、「ガイドをテストして配信する」を参照してください。