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

最終更新日: 2026年10月13日 09:17

［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で編集］でガイドを作成するには：

左側のメニューから、［ガイド（Guides）］>［ガイド］に移動します。
［ガイドを作成（Create Guide）］を選択します。
［アプリケーション］を選択し、必要に応じて整理を助けるカテゴリーも選択してください。
ガイドの種類を［オーバーレイ］または［埋め込み］から選択します。
ガイドの種類に応じて、開始オプションを選択してください。
- オーバーレイガイド。以下の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パネルビューを開きます。
完了したら、右上の［ガイドを保存（Save guide）］を選択します。これによりガイドの詳細ページが表示され、簡易エディターでは利用できない設定を行うためにVisual Design Studioでガイドを開くことができます。Visual Design Studioを使用したガイド作成の詳細については、「オーバーレイガイドを作成する」または「埋め込みガイドを作成する」を参照してください。

ガイドコンテンツの編集

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

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

テキストとボタンのコンテンツを編集します。ガイド内のテキストを直接選択して編集します。
ブロックを追加、移動、削除します。ステップにテキスト、ボタン、画像、動画、コードを追加してから、配置します。詳細については、「ブロックを追加して配置する」を参照してください。
新しいステップを追加します。ガイドのステップの下にある［ステップを追加（Add step）］を選択し、レイアウトを適用します。
ステップを複製または削除する。ステップにカーソルを合わせて、該当するアイコンを選択します。
ガイドのテーマを更新する。ページの上部にある［テーマ（Theme）］ドロップダウンを選択します。

完了したら、右上の［ガイドを保存（Save guide）］を選択して変更を適用します。

ブロックを追加して配置する

ブロックとは、テキスト、ボタン、画像など、ガイドステップ内のコンテンツ要素です。［ビルディングブロック（Building blocks）］パネルまたはステップツールバーからブロックを追加し、移動、ボタンの並列配置、削除を行うことができます。ガイドタイプとアプリでサポートされているブロックのみ利用できます。

ブロックを追加するには、次のいずれかの操作を行います。

［ビルディングブロック（Building blocks）］パネルからドラッグします。左側のナビゲーションで［ビルディングブロック（Building blocks）］を選択し、ガイドのプレビューにブロックをドラッグします。ブロックが配置される場所が線で示されます。また、パネル内のブロックを選択して、パネルの上部に表示されているステップに追加することもできます。そのステップを変更するには、プレビューで別のステップを選択します。
ステップのツールバーから追加します。ステップにカーソルを合わせ、+アイコンを選択してから、ブロックを選択します。

move block.gif

利用可能なブロックは、テキスト（［タイトル（Title）］、［サブタイトル（Subtitle）］、［段落（Paragraph）］）、ボタン（［第1（Primary）］、［第2（Secondary）］、［第3（Tertiary）］）、［画像（Image）］、［動画（Video）］、［コード（Code）］です。新しいブロックが選択されているため、すぐに編集できます。

ブロックを移動または削除するには、プレビューでブロックを選択し、ブロックツールバーを使用します。

［上に移動（Move up）］または［下に移動（Move down）］により、ステップ内のブロックの位置が変更されます。
［ブロックを削除（Delete block）］はブロックを削除します。ブロックを選択した状態で、DeleteキーまたはBackspaceキーを押すこともできます。

ウェブガイドでは、最大4つのボタンを横一列に並べて配置できます。

行にボタンを追加します。［ビルディングブロック（Building blocks）］パネルからボタンを既存のボタン行にドラッグしてください。行にすでに4つのボタンがある場合、そのボタンは代わりに新しい行として追加されます。
行内のボタンを並べ替えます。ボタンを選択し、［行内で左に移動（Move left in row）］または［行内で右に移動（Move right in row）］を選択します。矢印キーを使用することもできます。
行全体を移動または配置します。2つ以上のボタンが並ぶ行の空白部分にカーソルを合わせ、その部分を選択します。上矢印と下矢印を使用して行を移動するか、左側のパネルで左（Left）、中央（Center）、または右（Right）を選択して、ボタンを配置します。

既存のガイドの編集

左側のメニューから、［ガイド（Guides）］ > ［ガイド］に移動します。
編集するガイドを選択します。
ガイドの詳細ページから［Pendoで編集］を選択してください。
プレビューパネルで変更を行います。
右上の［ガイドを保存（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ペインビューで、コードを編集して変更内容をプレビューできます。

右側のプレビューウィンドウから、コードブロック <> を選択してコードエディターを開きます。左側のパネルには、HTML、CSS、JavaScriptの3つのタブが表示されます。
コードブロックを編集するには、タブを選択してください。
変更を適用するには、［ガイドを保存（Save guide）］を選択します。
ガイドのプレビューに戻るには、［ステップ1：コードを編集する（Step 1: Edit your code）］の横にある戻るアイコンを選択します。

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

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

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

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

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

注：ブラウザが全画面モードの場合、選択したサイズで新しいウィンドウにプレビューを開くことはできません。代わりにデフォルトで新しいタブが開きます。
［プレビューを起動（Launch Preview）］を選択します。
ガイドが表示された状態でアプリケーションが開きます。

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

要件