ガイドの概要

この記事では、Pendoのビジュアルデザインスタジオで作成されたガイドの概要を、ガイドの種類、使用例、ベストプラクティスを含めて説明します。

この記事では、個々のガイドタイプとその使用方法に焦点を当てています。GuidesとGuides Proプロダクトプランに含まれる内容の比較については、 「Guidesプロダクトとプランの違いを理解する」を参照してください。

ガイドのタイプ

Pendoのビジュアルデザインスタジオで作成されるガイドには、主に2つのタイプがあります。

• オーバーレイガイド。オーバーレイガイドはアプリケーションの上にライトボックス、バナー、またはツールチップとして表示されます。オーバーレイガイドは、ステップごとのウォークスルー、アプリケーション内の特定の要素を強調するガイダンス、ユーザーに気づいてもらいたい情報を提供する際に有効です。
• 埋め込みガイド。埋め込みガイドはアプリケーションに直接統合され、アプリケーション内のページの他の部分と連動してコンテキスト情報を提供します。バッジでアクティベートされるガイドがメッセージに対して控えめすぎる場合や、ライトボックスやバナーが目立ちすぎる場合には、埋め込みガイドが適しています。

注：埋め込みガイドは、サブスクリプションにGuides Proが含まれている場合にのみ利用できます。

次の表は、ガイドの種類ごとの主な違いをまとめたものです。

テーマとレイアウト

Pendoの管理者は、ガイド作成者が使用する特定のテーマやレイアウトを設定することで、組織がガイドのブランディングを管理しやすくなります。

• テーマはガイドで使う構成要素のフォーマットやスタイルを設定できるものです。これにより、ガイド作成者は視覚的に一貫性のあるガイドコンテンツを効率的に作成できます。詳細については、「テーマを使用してガイドのスタイルとテーマを管理する」を参照してください。
• レイアウトを使用すると、特定の構成要素で構成されるテンプレートを保存して再利用できます。また、レイアウトをカテゴリー別に整理することで、ガイド作成者がガイドの目的を達成するために最も効果的なガイドレイアウトを選択できるようにすることも可能です。詳細については、「ガイドレイアウトを使用する」をご参照ください。

オーバーレイガイドの使用例

オーバーレイガイドは次のような場合に使用します。

• バッジを使ってアプリケーション内の特定の要素に訪問者を案内する。
• 訪問者に新しいプロセスを案内する。ボタンや特定のUI要素を指すことで、訪問者をウォークスルーに移行させることができます。
• 特定の機能や要素の横に開くツールチップを作成する。
• 画面の上部にバナーとして表示される警告または通知を作成する。
• プロダクトフィードバックアンケートや NPS などのアンケートや調査を訪問者に配信する。

オーバーレイガイドには、ライトボックス、バナー、ツールチップなど、さまざまな目的に使用できるいくつかの種類があります。これらのガイドは、用途に応じてさまざまな方法で起動できます。以下が可能です。

• 訪問者がアプリケーション内のページを開くたびに自動的に開くガイドを設定します。これはライトボックスやバナーに最も一般的です。
• 訪問者がバッジまたはUI要素を操作するたびにガイドが起動するように構成します。ツールチップガイドにはこれが必要です。
• リソースセンターにガイドを追加して、訪問者が都合の良いときに開けるようにオンデマンドアクセスを提供します。
• 特定のボタン選択を使用するようにガイドを構成し、訪問者にアクションの確認を求めるガイドを起動します。

オーバーレイガイドのステップタイプを選択する前に、ガイドの目的を考慮してください。

ツールチップ

ツールチップはアプリケーションのUI内の場所を指し示します。これらは、バッジを使用して自動的にアクティブ化することも、アプリケーション内の要素を操作することによってアクティブ化することもできます。次のような、役に立つが緊急ではないマイクロコンテンツにはツールチップを使用します。

• ヒントまたは実用的なアドバイス。
• ラベルのないアイコンの説明。
• 新機能のお知らせ。
• キーボードショートカットに関する情報。
• 詳細情報へのリンク。
• グレーアウトされた機能にアクセスするためのアップグレードのプロンプト。

次の用途にはツールチップを使用しないでください。

• タスクの完了に不可欠な重要な情報。
• ボタンのコピーの繰り返しなど、明白または冗長なテキスト。

ライトボックス

ライトボックスはポップアップウィンドウであり、自動的に、ページ上のバッジやターゲット要素を介して、または訪問者がアプリケーション内のボタンやリンクを選択した際に確認モーダルとして起動されます。次のようなミッションクリティカルなメッセージやエンゲージメントにはライトボックスを使用します。

• インパクトのある新プロダクトや新機能の発表。
• 潜在的に破壊的なアクションの確認。
• ユーザーのオンボーディング、セットアップ、開始のための主要な機能。
• セグメントに直接関連するイベントのお知らせ。
• セグメントに直接関連する魅力的なオファー。
• 訪問者を解決策やサポートの提供元に導くエラーメッセージまたはアラート。
• 調査とテスト。
• ベータ版の募集、デモ、ウェビナーへの参加などのサインアップフォーム。

すべてのリリースがユーザーの流れを妨げるポップアップウィンドウを必要とするわけではありません。以下の場合はライトボックスの使用は避けてください。

• 緊急性がなく、影響度が低く、対処不可能なコンテンツの場合。
• 重要なタスクフロー中に表示される場合。
• ログインページまたはランディングページ（オンボーディング手順を通じてユーザーをガイドする場合を除きます）。
• ツールチップの候補として適している可能性のある低レベルの情報の場合。

バナー

バナーは、アプリケーションの上部または下部にページ全体にわたって表示される通知です。次のような、重要または緊急を要する単純なメッセージや、ユーザーの操作を必要とする簡単なメッセージにはバナーを使用します。

• 障害とバグの認識。
• 顧客に大きな影響を与える問題。
• サポートチケットの流入を引き起こす可能性のある問題。
• 季節限定セールなどの時間限定のオファー。
• 支払い問題への対応など、必要とされる行動。
• NPSやCSATなどの簡単な投票とアンケート調査。

以下の目的でバナーを使用しないでください。

• マルチステップガイド。
• より詳細な情報。
• 重要でないアップデート。
• 埋め込みガイドなど、より統合された方法で提示できる情報。詳細については、「埋め込みガイドの作成」をご参照ください。

埋め込みガイドの使用例

訪問者の気を散らしたり邪魔したりしたくないとき、またはナビゲーションの重要な部分をカバーせずに重要なメッセージを伝えたいときには、埋め込みガイドを使用します。次のような状況では埋め込みガイドを使用します。

• ログインページで新しい機能、イベント、またはウェビナーを宣伝し、エンゲージメントを促進してインバウンドの関心を高める。
• サービスメンテナンスのお知らせ、新しい利用規約、更新されたプライバシーポリシーなどの定期的なメッセージや法的通知の配信。
• 顧客がまだアクセスできないアプリケーションの機能や機能の横に、アップセルまたはクロスセルのメッセージを埋め込む。
• 訪問者がフォームに記入する際に追加情報を提供する。
• ログインページで新機能やイベントを宣伝する。
• 訪問者に特定の期限までに行動を促すリマインダー。
• 新しいUI要素をテストし、開発前にその影響を測定する。
• アプリケーション内に指定された情報スペースを設ける。

ベストプラクティス

ガイドの種類に関係なく、次の点を考慮することをお勧めします。

• 目標。ガイドを作成する前に、引き出したい行動の種類を定義する必要があります。
• 対象者。ガイドを配信するセグメントを定義します。
• テスト。ガイドを開発環境でテストし、ガイドに関連するデータを除外するためにステージングサーバーをセットアップします。詳細については、「ガイドをステージングする」を参照してください。
• 簡潔さ。できるだけ少ないステップで、訪問者に十分な情報を提供し、関心を持ってもらうために、短くて効果的なメッセージを使用します。
• 直感性。直感的なインタラクティブ要素（ボタンやリンク）を使用し、訪問者が期待するように、明確で簡潔なテキストに基づいて動作するようにします。
• 関連性。ユーザー体験を中断するのではなく、強化するガイドを作成します。訪問者の行動や好みに基づいてガイドをパーソナライズすることで、アプリ内ガイドの効果を高め、訪問者にとってより関連性が高く魅力的なものにすることができます。

一部のベストプラクティスは、選択したガイドの種類によって異なります。

オーバーレイガイドのベストプラクティス

ガイドの明確な目標を心に置き、可能な限り中断を避けたり、ガイドの疲労を減らすなど、ユーザー体験を考慮しましょう。

• タイミング。多数のガイドを配信する場合は、ガイドの順序設定とスロットリングを活用してください。詳細については、「ガイドの順序設定とスロットリング」をご参照ください。
• 量。訪問者にガイドを多く提供しすぎないようにしましょう。ガイド戦略とガイドラインを採用し、Pendoユーザーがガイドの適切な使用時期を判断できるようにします。自動で起動するガイドには、［ガイドスロットリングの設定を無視］を控えめに使用してください。
• 繰り返し。ガイドを見た訪問者が行動を起こさない場合、訪問者に対してむやみに大量のメールを送るのではなく、ガイドのデザイン、メッセージ、または摩擦について再検討します。ガイドの繰り返し表示は控えめに使用してください。
• 計画。ガイドの目的を考えてから、ガイドコンテナ（ツールチップ、ライトボックス、バナー）やアクティベーション方法（自動、バッジによるアクティベーション、要素によるアクティベーション、確認）を選択します。ガイドコンテナの概要については、この記事のオーバーレイガイドの使用例を参照してください。アクティベーション方法については、オーバーレイガイドのアクティベーション方法をご覧ください。
• デザイン。ガイドがウェブやモバイルアプリケーションの全体的なデザインと視覚的に一貫していることを確認してください。ガイドテンプレートや共通のCSSスタイリングを使って、ガイド内で一貫したデザインを実現しましょう。

埋め込みガイドのベストプラクティス

• エンジニアリング。エンジニアリング チームと協力して次のことを行います。
  • 埋め込み場所として機能する一意のIDを持つdivまたはコンテナを設定します。これは必須ではありませんが、このようなコンテナを作成することで、ページの残りの部分が期待どおりに動作するようになります。
  • アプリケーション内の要素内に埋め込まれたガイドが適切に配置されていることを確認します。これは、要素とその親の位置と配置によって異なります。
• デザイン。デザインまたはUIパートナーと協力して、ガイドがコンテンツの残りの部分とうまく適合することを確認します。テーマとスタイルがブランドの他の部分と一致していることを確認します。
• 寸法。ガイドのコンテナの寸法を考慮してください。コンテンツは、アプリケーション内のコンテナのCSSの影響を受ける可能性があります。
• 場所。既存の要素を埋め込みガイドで置き換えるのは、ページに必須でない背景画像でない限り避けてください。
• カルーセル。同じ場所に複数のガイドを埋め込むのではなく、複数のステップを持つ埋め込みガイドを作成することを検討します。埋め込みガイドにはコンテンツの順序付けがないため、複数のガイドの順序を保証することはできませんが、埋め込みガイド内の手順の順序を制御することは可能です。

ガイド作成用のビジュアルデザインスタジオ

ビジュアルデザインスタジオでは、ガイドを作成したり、ページやフィーチャーにタグを付けることができます。このセクションでは、ガイド作成のためのビジュアルデザインスタジオを順に紹介します。ページとフィーチャーにタグを付けるためのビジュアルデザインスタジオの使用方法については、ビジュアルデザインスタジオ（ビジュアルデザインスタジオ）によるタグ付けを参照してください。

ガイドを編集すると、ビジュアルデザインスタジオがアプリケーションの上部に新しいタブで開きます。内容は次のとおりです。

• ページの上部のツールバー。必要に応じてページの最下部に移動することができます。
• 選択して編集できる、アプリケーション内のガイドステップのプレビュー。
• プレビューの左側にある編集ウィンドウは、選択した内容に応じて次の操作を可能にします。
  • アクティベーション設定の編集ウィンドウでガイドのアクティベーション設定をしてください。詳細については、オーバーレイガイドのアクティベーションを設定するまたは埋め込みガイドを作成するを参照してください。
  • ［コンテナの編集］編集ウィンドウで、ガイドステップのスタイル、場所、行動を編集します。詳細については、「オーバーレイガイドのステップ設定を編集する」または「埋め込みガイドを作成する」を参照してください。
  • ガイドにコンテンツ（ビルディングブロック）を追加・編集します。詳細については、「ガイドコンテンツを追加、編集する」を参照してください。

ツールバー

ガイドに付けた名前は、ビジュアルデザインスタジオの左上に表示されます。Pendoの［設定］ページからガイド名を編集できます。手順については、オーバーレイガイドを作成するまたは埋め込みガイドを作成するを参照してください。

ツールバーの右上隅には次のものが含まれます。

• レイアウトを保存。ガイドを新しいレイアウトとして保存したり、既存のレイアウトを更新したりできます。詳細については、「ガイドレイアウトを使用する」をご参照ください。
• アクティベーション。オーバーレイガイドのアクティベーション方法を変更し、オーバーレイガイドと埋め込みガイドの両方のその他のアクティベーション設定を構成できます。詳細については、オーバーレイガイドのアクティベーションを設定するまたは埋め込みガイドを作成するを参照してください。
• ステップマップ。ガイドステップがボタン操作によってどのように接続されているかを全画面表示で確認できます。このマップは、前方パスと戻りパスを視覚化し、ボタンのロジックを編集し、分岐フローをプレビューするのに役立ちます。詳細については、ステップマップを参照してください。
• ナビゲーション。アプリケーション内のページ移動やモーダルを開くときに使用します。
• プレビュー。ガイドをプレビューすることができます。詳細については、オーバーレイガイドを作成するまたは埋め込みガイドを作成するを参照してください。
• 終了。ビジュアルデザインスタジオを終了して、ガイドの［設定］ページに戻ることができます。ビジュアルデザインスタジオを終了するときは、タブを閉じるのではなく、［終了］を選択することが重要です。
• 保存。進捗を保存することができます。［保存］ボタンの隣にある下向き矢印（v）を使用して、［保存して終了］を選択します。
• アラート。関連する通知をお知らせします。エラーは黄色です。
• 移動。ツールバーをページの上部または下部に移動できます。アプリケーション内にツールバーの背後やページの上部に要素がある場合に役立つかもしれません。

ステップトレイ

ステップトレイはツールバーのメイン部分の下にあります。ツールバーの中央にあるタブを選択すると、ステップトレイを閉じる (ステップを非表示) か、開く (ステップを表示) ことができます。

ステップトレイには以下が含まれます。

• アクティベーションカード。ガイドに選択したアクティベーション方法が表示され、その後、ガイドの各ステップが順番に表示されます。アクティベーション設定を表示および編集するには、アクティベーションカードにカーソルを合わせて、編集アイコンを選択してください。アクティベーション方法とオプションについては、「オーバーレイガイドのアクティベーションを設定する」または「埋め込みガイドを作成する」を参照してください。
  
  
  
• 時系列順のガイドの各ステップ。ガイド内のステップの順序を変更するには、ステップを別の場所にドラッグアンドドロップしてください。
  
  

ステップマップ

ステップマップは、ガイドの構造を全画面で視覚的に表示し、ボタンアクションを通じてステップがどのように接続されているかを示します。複数の経路がある複雑なガイドを理解し、維持するのに役立ちます。特に、ステップが前に進んだり、前のステップに戻ったり、却下や外部リンクで終わったりする場合に役立ちます。

注： ステップマップ内でステップを追加したり並べ替えたりすることはできません。ステップを管理するには、ビジュアルデザインスタジオのステップトレイを使用します。

ステップマップを開くには、ビジュアルデザインスタジオの上部ツールバーから［ステップマップ］を選択します。

この画面では、以下の操作を行うことができます。

• ボタンまたは要素アクションからの分岐パスを表示します。
• 戻りパスとエンドポイントを一目で確認できます。
• ステップまたはボタンを選択して、その内容をプレビューしたり、アクションを編集したりします。
• ビューをズームおよびパンして、より大きなガイド構造を探索します。

ヒント：ガイドに自動化やMarkdownロジックが含まれている場合、ステップマップにこれらのアクションが表示されないことを示すバナーが表示されます。

ガイドの編集

ガイドプレビューでは、一度に一つのガイドステップが表示されます。ガイドステップを選択すると、プレビューの左側に編集ウィンドウが表示されます。たとえば、ガイドの作成中に表示する必要がある画面の一部がウィンドウによって覆われている場合など、必要に応じてこのウィンドウをページ上で移動できます。

編集ウィンドウの名前と内容は、編集する内容によって異なります。

• ガイドステップに新しいビルディングブロックを追加する場合、このウィンドウはビルディングブロックと呼ばれます。
• ビルディングブロックを編集している場合、ウィンドウの名前はそのビルディングブロックにちなんで「テキストの編集」などと名付けられます。
• ガイドステップの設定を編集する場合、ウィンドウの名前は「コンテナの編集」になります。

編集ウィンドウから、次の操作を実行できます。

• ガイドステップにコンテンツを追加・編集します。新しいビルディングブロックを追加してステップにコンテンツを追加するか、既存のビルディングブロックを選択して編集ウィンドウから既存のコンテンツを編集できます。詳細については、「ガイドコンテンツを追加、編集する」を参照してください。
  
  
   
• ステップの設定を編集します。ガイドステップのコンテナを選択して［コンテナを編集］ウィンドウを開き、ガイドステップのスタイル、位置、動作を管理できます。コンテナとは、ガイドの端にカーソルを合わせたときに表示される青い枠のことです。詳細については、「オーバーレイガイドのステップ設定を編集する」をご覧ください。