簡易エディターを使用したガイドの作成(ベータ版)

最終更新日:

[Pendoで編集(Edit in Pendo)]オプションは、Visual Design Studioを開くことなく、Web用のオーバーレイガイドや埋め込みガイド、モバイル用のお知らせを作成、更新できる簡易ガイドエディターです。エディター内で直接、ガイドコンテンツの追加や編集、ステップの管理、テーマの更新、ガイドのプレビューを行うことができます。

サブスクリプションでAIによるガイド作成が有効になっている場合、Pendoの編集画面でもAIアシスタントを利用できます。伝えたい内容を記述すると、アシスタントがガイドコンテンツを生成または改善し、保存前に確認できます。AIアシスタントは、アプリケーションや訪問者データにはアクセスしません。セキュリティおよびプライバシーへの取り組みの詳細については、「Pendoにおける人工知能(AI)」を参照してください。

スタイル設定、アクティベーション、ターゲティング、要素の配置などの高度なガイド設定については、ガイドの詳細ページから[自分のアプリで編集(Edit in my app)]を選択して、Visual Design Studioでガイドを開く必要があります。

要件

Edit in Pendoでガイドを作成または編集するには、以下を行う必要があります:

  • Pendoに米国またはEUの環境(app.pendo.ioまたはapp.eu.pendo.ioからサインイン)からアクセスしている。
  • ガイド作成者(Guide Creator)]または[ガイドコンテンツ編集者(Guide Content Editor)]の役割が割り当てられていること。

[Pendoで編集]でAIアシスタントを使用するには、さらに次の条件を満たす必要があります。

  • Guides ProがPendoのプランに含まれている。
  • AIガイド作成のサブスクリプション設定がオンになっていること。サブスクリプション管理者は、[設定(Settings)] > [サブスクリプション設定(Subscription settings)] > [AIアクセス(AI access)]でこの設定を管理できます。詳細については、「サブスクリプション設定」を参照してください。 

新しいガイドを作成する 

[Pendoで編集]でガイドを作成するには:

  1. 左側のメニューから、[ガイド(Guides)]>[ガイド]に移動します。
  2. [ガイドを作成(Create Guide)]を選択します。
  3. [アプリケーション]を選択し、必要に応じて整理を助けるカテゴリーも選択してください。
  4. ガイドの種類を[オーバーレイ]または[埋め込み]から選択します。
  5. ガイドの種類に応じて、開始オプションを選択してください。
    • オーバーレイガイド。以下の3つのオプションから選択してください。
      • プロンプトから開始(Start with a prompt)]。(AIによるガイド作成が必要です。)希望する内容を入力し、[ガイドを作成(Create guide)]を選択します。AIアシスタントが最適な構成を作成します。
      • ウォークスルー(Walkthrough)]。このオプションにカーソルを合わせ、[レイアウトを選択(Select layout)]を選択します。タスクの完了を支援するマルチステップのエクスペリエンスに最適です(Webのみ)。
      • お知らせ(Announcement)]。このオプションにカーソルを合わせ、[レイアウトを選択(Select layout)]を選択します。これは、プロダクトの更新、リマインダー、アラートなどの1回限りのメッセージに最適です。


         
    • 埋め込みガイド(Embedded guides)]。2つのオプションから選択します:
      • プロンプトから開始(Start with a prompt)]。(AIによるガイド作成が必要です。)バナーで伝えたい内容を記述し、[ガイドを作成(Create guide)]を選択します。
      • 埋め込みバナー(Embedded banner)]。[レイアウトから開始(Start with a layout)]で、[埋め込みバナー(Embedded banner)]にカーソルを合わせて[レイアウトを選択(Select layout)]を選択します。
    • これらのオプションはいずれも、ガイド内のコンテンツを編集するための2パネルビューを開きます。
  6. 完了したら、右上の[ガイドを保存(Save guide)]を選択します。これによりガイドの詳細ページが表示され、簡易エディターでは利用できない設定を行うためにVisual Design Studioでガイドを開くことができます。Visual Design Studioを使用したガイド作成の詳細については、「オーバーレイガイドを作成する」または「埋め込みガイドを作成する」を参照してください。

ガイドコンテンツの編集

新しいガイドを作成する場合でも、既存のガイドを編集する場合でも、プレビューパネルで直接コンテンツを更新できます。

プレビューでは、以下の操作が可能です:

  • テキストとボタンのコンテンツを編集する。ガイド内のテキストを直接選択して編集します。
  • 新しいステップを追加する。ガイドのステップの下にある+アイコンを選択し、レイアウトを適用します。
  • ステップを複製または削除する。ステップにカーソルを合わせて、該当するアイコンを選択します。
  • ガイドのテーマを更新する。ページの上部にある[テーマ(Theme)]ドロップダウンを選択します。

完了したら、右上の[ガイドを保存(Save guide)]を選択して変更を適用します。

既存のガイドの編集 

  1. 左側のメニューから、[ガイド(Guides)] > [ガイド]に移動します。
  2. 編集するガイドを選択します。
  3. ガイドの詳細ページから[Pendoで編集]を選択してください。
  4. プレビューパネルで変更を行います。
    Edit in Pendo panel.png
     
  5. 右上の[ガイドを保存(Save guide)]を選択します。これによりガイドの詳細ページに移動し、簡易エディターでは利用できない設定を行うためにビジュアルデザインスタジオ(Visual Design Studio)で開くことができます。

注:クロスアプリガイド、リソースセンター内のお知らせ、または編集権限のないガイドなど、特定のガイドタイプでは、「Pendoで編集」オプションを利用できない場合があります。これは、特定の実験状態にあるガイドにも適用されます。

AIを使用してガイドを作成または編集する

Guides Proをご利用で、AIによるガイド作成がオンになっている場合、エディターの左側にチャットパネルが表示されます。これを使用して、作成したいガイドや加えたい変更を説明します。

[プロンプトから開始(Start with a prompt)]でガイドを作成すると、AIアシスタントが下書きを生成し、含めるステップ数を見積もります。ステップはいつでも編集、追加、削除できます。

プレビューでコンテンツを直接選択してインラインで変更を加えるか、チャットを使用してAIアシスタントに以下の操作を依頼できます:

  • テキストブロック、画像、ボタンを編集します。
  • ステップを追加、削除、または複製します。
  • ウォークスルー形式とアナウンス形式を切り替えます(オーバーレイガイドのみ)。
  • トーンを調整します(よりフォーマルまたは簡潔にするなど)。
  • 長さを調整します。例えば、長くしたり短くしたりできます。

準備ができたら、右上の[ガイドを保存(Save guide)]を選択します。

AIベータ版の制限事項

以下のアクションは、ベータ版では会話AIでは利用できません。リクエストがサポートされていない場合は、AIアシスタントが知らせてくれます。ビジュアルデザインスタジオを使用してこれらのタスクを完了します。

  • 投票とアンケート調査の追加または編集
  • アクティベーション設定またはステップターゲティングを調整する
  • ローカライズを作成する
  • 要素のスタイル設定または配置の制限

カスタムコードブロックを編集

ガイドにカスタムコードブロックが含まれている場合は、[Edit in Pendo]を選択すると表示される2ペインビューで、コードを編集して変更内容をプレビューできます。

  1. 右側のプレビューウィンドウから、コードブロック <> を選択してコードエディターを開きます。左側のパネルには、HTMLCSSJavaScriptの3つのタブが表示されます。

  2. コードブロックへの編集を行うためのタブを選択します。 
  3. [ガイドを保存] を選択して変更を適用します。
  4. ガイドのプレビューに戻るには、[ステップ1:コードを編集する(Step 1: Edit your code)]の横にある戻るアイコンを選択します。

ライブプレビューを起動する

[Pendoで編集]での作業中にライブプレビューを起動すると、作成しながらアプリケーションのコンテキストでガイドを確認できます。これにより変更をリアルタイムで確認できるため、ガイドが実際にどのように表示されるかを把握できます。 

要件:ライブプレビューには、Web SDKバージョン2.339.1以降が必要です。

ライブプレビューをリリースするには:

  1. [Pendoで編集(Edit in Pendo)]で、ツールバーの[プレビュー(Preview)]を選択します。 
    Edit in Pendo Preview.png
  2. アプリケーションのURLを入力し、ガイドのプレビューを新しいタブまたは新しいウィンドウのどちらで開くかを選択します。新しいウィンドウで開く場合は、プリセットの画面サイズ(モバイルまたはタブレット)を選択するか、カスタムサイズを入力して、そのサイズでガイドがどのように表示されるかを確認できます。 

    注: ブラウザが全画面モードの場合、選択したサイズで新しいウィンドウにプレビューを開くことはできません。代わりにデフォルトで新しいタブが開きます。

  3. [プレビューをリリース(Launch Preview)]を選択します。 
  4. アプリケーションが開き、ガイドが表示されます。 

プレビューがアクティブな間、[プレビュー]ボタンが[プレビュー中(Previewing)]に変わり、ライブプレビューがオンになっていることを確認できます。プレビューを閉じるか接続を終了すると、自動的に停止します。

Previewing.png


この記事は役に立ちましたか?
2人中1人がこの記事が役に立ったと言っています