1. Pendoヘルプセンター
  2. ガイド
  3. ビジュアルデザインスタジオ（Visual Design Studio）

ガイドの作成

最終更新日:

この記事では、ビジュアルデザインスタジオ（Visual Design Studio）でガイドを作成する方法について詳しくご紹介します。ガイドを使用して、新機能の紹介や、好ましい動作についての説明、また状況に応じたサポートを提供できます。ガイドのタイプには、バッジでアクティベートされるツールチップ、ユーザーから直接フィードバックを収集する投票とアンケート調査、自動的にアクティベートされるライトボックスとバナーなどがあります。

権限

ビジュアルデザインスタジオ（Visual Design Studio）を使用してガイドを作成するには、次のいずれかの権限セットが必要です。

  • Pendoの管理者レベルの権限：これは、ユーザーにガイド関連のすべてのアクティビティを実行する権限を付与する、サブスクリプションレベルの権限セットです。
  • Pendoのデフォルトのアプリレベルの役割：ガイドに関連してユーザーに付与したいアクセスレベルに応じて、次のすべてまたは一部を選択します。
    • ガイド作成者（Guide Creator）：この役割には、最初からまたはレイアウトからガイドを作成および編集できる権限、およびステージング中のガイドやドラフトガイド、および無効化されたガイドを削除する権限が含まれます。
    • ガイド公開者（Guide Publisher）：この役割には、ガイドの公開とスケジュール設定の権限、およびステージング中のガイド、ドラフトガイド、および無効化されたガイドを削除する権限が含まれます。
    • ガイドコンテンツ編集者（Guide Content Editor）：この役割には、レイアウトからガイドを作成および編集できる権限、およびステージング中のガイドやドラフトガイド、および無効化されたガイドを削除する権限が含まれます。
  • Pendoのカスタムでのアプリレベルの役割：デフォルトのアプリレベルの役割ではなく、役割をカスタマイズして作成し、以下のガイド権限を付与することもできます。
    • ゼロからのガイドの作成と編集
    • レイアウトからガイドを作成および編集する
    • ガイドを公開する

また、カスタムの役割に以下の権限を含めることもできます。なお、上記3つの権限があれば、ガイドは作成できます。

  • 公開ガイドの編集を許可する（公開ガイドの削除と編集）
  • ドラフト、ステージング中、無効化されたガイドを削除する

ガイドの権限とPendoユーザーへの割り当て方法については、役割と権限を参照してください。

ガイドの作成

  1. 左側のメニューで［ガイド（Guides）］>［ガイド（Guides）］に移動します。
  2. 右上にある［ガイドを作成（Create Guide）］を選択します。もしくは、矢印を選択して［ガイドを作成］を選ぶこともできます。Adoptスタジオでガイドを作成する場合は［Adoptスタジオガイドを作成（Create Adopt Studio guide）］を選択し、AIを使用してガイドを作成する場合は［AIでガイドを作成（Create guide with AI）］を選択します。
  3. Pendoアカウントに複数のウェブアプリケーションを設定している場合は、［ガイドを作成］ページで、ガイドを表示するアプリケーションを選択します。

    Create_Guide_page.png

  4. ガイドのカテゴリーを選択します。すると、デフォルトのPendoレイアウトもしくは［保存済みレイアウト（Saved Layouts）］のいずれかから、選択したカテゴリーの推奨レイアウトが表示されます。

    注：ガイドは、1つのアプリにしか割り当てられません。

  5. ［オーバーレイ（Overlay）］を選択すると、ガイドがページのコンテンツの上に表示されます。

  6. ［レイアウト（Layouts）］セクションで、レイアウトを選択します 。用意されているデフォルトのレイアウト、または過去にガイド作成に使用した保存済みのレイアウトから選択できます。レイアウトを選択すると、ガイドの詳細ページが表示されます。詳細についてはガイドレイアウトを使用するを参照してください。
  7. ガイドに名前を付け、ガイドを表示するアプリのプロダクトエリアを選択します。
    ヒント：複数のガイドがある場合、検索しやすいように命名規則を設け、識別しやすいように色分けされたグループを用意することをお勧めします。
  8. 必要に応じて、新しいプロダクトエリアを作成するには ［+プロダクトエリアを作成（+Create Product Area）］ を選択し、名前を付けて、 ［プロダクトエリアを作成］を選択してください。
  9. ［コンテンツ（Content）］エリアを選択し、ビジュアルデザインスタジオを開きたいアプリケーションのURLを入力し、［デザイナーを起動（Launch Designer）］を選択します。デザイナーが新しいタブで開きます。

ガイドにコンテンツを追加するためのビルディングブロックを追加する

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

ビジュアルデザインスタジオを開くと、アプリケーションの上部で起動します。［読み取り専用（Read Only）］権限のユーザーを除き、すべてのPendoユーザーがデザイナーにアクセスできます。

［コンテナを編集（Edit Container）］ボックスでガイドの初期編集を行うことができます。［コンテナを編集］ボックスを使用してガイドのスタイルを設定する方法について詳しくは、ビジュアルデザインスタジオのツアーに参加するを参照してください。

  1. ビジュアルデザインスタジオを開いた状態で［ステップを表示（View Steps）］を選択すると、［ステップトレイ（Step Tray）］が表示されます。これには、カスタマイズのオプションとガイドのステップがすべて表示されます。
    create_guide_viewsteps.png


    ヒント：要素をターゲットにしたいのに［アクションバー］がそれを覆っている場合は、画面右上の両矢印ボタンをクリックして、画面下に移動させてください。

  2. ガイドにステップを追加するには、［ステップトレイ］で［+ステップを追加（+ Add Step）］を選択します。
  3. ステップのガイド設定を編集するには、ステップを選択しプレビューの上にカーソルを合わせると［コンテナを編集（Edit Container）］ボックスが開きます。

［コンテナを編集］メニューでガイドをデザインする

［コンテナを編集］メニューには、ガイドのスタイル設定、位置の編集、動作のコントロールなど、複数のオプションがあります。

  1. ［コンテナを編集］ボックスで［スタイル（Styling）］、［場所（Location）］、および［行動（Behavior）］タブを移動して、設定に必要な変更を加えます。
  2. ガイドコンテナを編集するには、設定を編集するステップでガイドコンテナ（ガイドの端）にカーソルを合わせます。ガイドコンテナの端をクリックすると、［スタイル］、［場所］、［行動］のオプションが表示され、さらにカスタマイズできます。
    hover-guide-container.gif
  3. 新しいビルディングブロックをガイドに追加する必要がある場合は、アイテム間にカーソルを合わせると青い線が表示され、ビルディングブロックを追加できるようになります。ビルディングブロックは、ガイドにコンテンツを追加し、テキスト、ボタン、画像、投票とアンケート調査、埋め込み動画を追加し、フォーマットを設定するために使用します。ビルディングブロックの詳細については、ビルディングブロックを使用してガイドコンテンツを追加するを参照してください。

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

    hover-edit-add-bb.gif

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

  4. 終了するには、 ［完了（Done）］を選択します。
  5. 終了したら、［保存（Save）］を選択して変更内容を保存し、［終了（Exit）］を選択してビジュアルデザインスタジオを終了します。

スタイル設定

注：テーマを使用してガイドを編集している場合、すべてのオプションを表示するには、テーマを［カスタム（Custom）］に変更する必要があります。

  • テーマ（Theme）：ガイドのスタイル設定に使用しているガイドテーマです。
  • ステップ名（Step Name）：ガイドで現在プレビューしているステップの名前です。
  • 背景色（Background Color）
  • パディング（Padding）：コンテナのパディングです。コンテナの上、右、下、左を表す数字を使用してピクセル（px）単位で設定します。
  • 枠の色（Border Color）：コンテナの枠の色です。16進数、RGB数値、またはビジュアルカラーセレクターで設定します。
  • 枠の幅（Border Width）：コンテナの枠の幅をピクセル（px）単位で設定します。
  • 枠の半径（Border Radius）：枠の半径をピクセル（px）単位で設定します。
  • ドロップシャドウの色（Drop Shadow Color）：コンテナの影の色です。16進数、RGB数値、またはビジュアルカラーセレクターで設定します。
  • ドロップシャドウのX値、Y値、ぼかし、サイズ（Drop Shadow X, Y, Blur, and Spread）：コンテナの影の角度（X）、長さ（Y）、濃度（Blur）、サイズ（Spread）を設定します。
  • キャレット（Caret）：該当する場合、コンテナに付属する三角形の矢印の幅と高さをピクセル（px）単位で設定します。
  • 背景色（Backdrop Color）：ガイド背後のUI色です。16進数、RGB数値、またはビジュアルカラーセレクターで設定します。ビジュアルカラーセレクターの下にあるスライダーを使用して、背景の不透明度を設定することもできます。
  • 閉じるボタン（Close Button）：右上に（X）を表示して、ユーザーがガイドを閉じられるようにします。
  • 寸法（Dimensions）：ガイドの幅をピクセル（px）単位で設定します。
  • Zインデックス（Z-Index）：UIで要素が重なる場合のコンテナの順序を設定します。Zインデックス値が大きいほど、その要素はUIで前面に表示されます。モーダルなどのZインデックス値がより大きい要素によって、ガイドが隠れている場合にのみ変更してください。

場所

  • ページ上の位置（Position on Page）：UI内のガイドの配置を設定します。
  • オフセット（Offset）：ガイドの位置をピクセル（px）単位で調整し、位置合わせに沿ってガイドを配置できるようにします。
  • 要素の場所（Element Location）：必要な場合に設定します。
  • ターゲットページ（Page Location）：サイト全体（Sitewide）または当該ページのみ（Only on this page）を設定します。
  • 設定 > ターゲット上の動的要素をフィルタリング（Settings > Filter Dynamic Elements on Target）：この設定をオンにすると、フィーチャー要素上の動的要素がすべて除外されます。たとえば、一部の要素にはユーザー固有の文字列があり、この文字列は各ユーザーのアプリ操作に応じて変化します。こうした文字列を除外すると、フィーチャーにタグを付けるときのパフォーマンスが向上し、より正確にタグが付けられます。また、データの重複を回避できます。
  • 要素に紐付ける（Anchor to Element）：UI上の表面要素に固定するか、既存のタグ付けされたフィーチャーに付加するという2つのオプションがあります。
    anchor_to_element_new.png
    • ターゲット要素（Target Element）：ガイドまたはバッジをUI要素に紐付けます。システムは画面上の要素を選択し、選択された要素は赤い境界線で囲まれます。この選択により、紐付けを定義する以下のオプションが追加されます。
      • 一致候補（Suggested Match）。これはPendoが自動的に作成するルールです。これでは必要な情報を収集できない、ページ上で一意に一致しない、アプリケーションの他のページにも存在する、または静的でない場合があるため、以下のルール作成オプションを追加しました。

        anchor_to_element.png
    • 親要素（Parent Element）：これは、アプリケーションで領域をハイライトして選択するために使用される赤い境界ボックスが、クリック可能な領域全体をカバーしていない場合に便利です。このオプションを使用すると、元々選択されていた要素（例：ボタン内のテキスト）に対して、それに次ぐ大きさのコンテナ（例：ボタン全体）を選択できます。

      注：拡張機能アプリケーションには、親要素を表示するオプションはありません。

    • カスタムCSS（Custom CSS）：Google Chromeの［検証（Inspect）］を使ってアプリケーションのHTMLとCSSを調査することに慣れている場合、このオプションを使うと、選択した領域で利用できる要素と属性に基づいてカスタムルールを追加することができます。
      css_selector_green.png
      CSSパフォーマンスメーターは、選択したCSSがガイドのパフォーマンスにどのように影響するかをハイライトします。このメーターは、セレクターに早期のフィードバックを提供します。CSSを使用してガイドを効果的にターゲティングできるように、低速セレクターの改善を提案しています。詳細については、 「ガイドのターゲット設定に対するCSSセレクターのパフォーマンス」をご参照ください。
  • 既存のフィーチャーを選択（Select Existing Feature）：既存のフィーチャーにガイドまたはバッジを配置する場合は、これを選択します。フィーチャーは、アナリティクスに使用される名前付きオブジェクトで、フィーチャーが配置されているページに変更を加えても、永続的に存在します。つまり、ガイドとバッジは、表面要素に固定されるよりも、フィーチャーに基づいて配置される方が安定しますが、その設定には時間がかかります。選択モードでは、フィーチャーにタグを付けることはできません。フィーチャーの詳細については、フィーチャーのタグ付けと表示を参照してください。
  • ガイドの持続性：特定の要素がページに表示されたときにガイドを有効にし、その要素が消えてもガイドが持続するようにするには、［ガイドの持続性（Guide Persistence）］をオンにします。ガイドの持続性は、ガイドのどのステップでも有効にすることができます。詳細については、「ガイドのアクティベーション」をご参照ください。
    guide_persistance_1.png

行動（Behavior）

［行動（Behavior）］タブには、コンテナ内のすべてのボタンのアクションが表示されます。これらのアクションにより、複雑なガイドコントロールやナビゲーションをコーディングなしで追加することができます。詳細については、ガイドのボタンアクションを参照してください。

edit_container.png

 

ガイドのプレビュー

ガイドのプレビューを使用すると、ガイドを公開せずに、またはセグメントの制限を受けずに、ガイドを起動できます。プレビューのUIを見ると、アクティベーションの方法、ターゲット要素、ターゲットページがわかり、そのガイドの表示基準を満たしているかどうかもインジケーターで表示されます。また、そのすべての機能をテストでき、再起動も簡単に実施できます。

ガイドをプレビューすると、そのガイドのみが表示されます。このガイドで使用されている追加ガイドはプレビューできません。追加のガイドが期待どおりに動作することを確認するには、プレビューモード以外でガイドをテストする必要があります。

プレビューモードは、ガイドがどのように見えるかを確認する最も信頼性の高い方法です。ビジュアルデザインスタジオ（Visual Design Studio）とプレビューのどちらもご利用の環境に読み込まれるため、それぞれの表示はその環境の設定の影響を受けます。この違いは、独自のサイトのCSSがガイドとどのように相互作用するかによって生じます。Pendoのメインガイドページはアプリのコードにアクセスできないため、ガイドが実際にどのように表示されるかはこのページには表示されません。

上部のナビゲーションバーで ［プレビュー（Preview）］を選択します。

preview.png

ガイドの管理

ガイドの作成が完了したら、次の操作を実行できます。

  • ガイドのテスト
  • ガイドのアクティベーション
  • セグメント化と即時の公開
  • ガイドの公開時期の設定

ガイドのテスト

ガイドをテストするには、以下を実行してください。

  1. 自分自身に対してガイドをセグメント化します。詳細については、セグメントを参照してください。
  2. ガイドの詳細ページの［セグメント（Segment）］タイルで、［編集（Edit）］を選択します。
  3. ドロップダウンで［カスタムセグメント（Custom Segment）］を選択し、［訪問者ID（Visitor ID）］が自分自身と同じになるようにセグメントルールを追加します。

    たとえば、訪問者IDがメールアドレスの場合、ルールは次のようになります。
    segment-example.png
  4. 完了したら、［カスタムセグメントを保存（Save Custom Segment）］を選択し、［セグメント］タイル内の［保存］を選択します。
  5. ガイドの詳細を確認し、ガイドのステータスを［ステージング（Staging）］に更新して（ステージング設定がある場合）、ステージング環境でガイドをプレビューします。
  6. ステージング設定がない場合は、ステータスを［公開（Public）］に更新します。このガイドは自分自身にセグメントされているので、自分のみに表示されます。

ガイドのアクティベーション

ガイド作成時にアクティベーション方法を設定していない場合は、すぐに設定できます。

  1. ガイドの詳細ページの［アクティベーション（Activation）］タイルで［自分のアプリで管理（Manage in My App）］を選択すると、ガイドを表示するアプリに戻り、［アクティベーション設定（Activation Settings）］ボックスが表示されます。
    device_type.png
  2. ガイドを有効化するには、有効化オプションを選択します。
    • 自動（Automatic）：ガイドは、閉じるまたは次に進むまで自動的に1回表示されます。
    • バッジ（Badge）。訪問者がバッジアイコンにカーソルを合わせるかクリックすると、ガイドが表示されます。詳細については、ガイドのアクティベーションオプションを参照してください。
    • ターゲット要素（Target Element）。：訪問者が対象となる要素をクリックした後に表示されるガイドです。詳細については、ガイドのアクティベーションオプションを参照してください。
    • ガイドの表示場所（Show my guide on）。起動時にガイドを表示するデバイスを選択することができます。

ガイドのセグメントと公開

作成したガイドに問題がなければ、ガイドの詳細ページに戻って、セグメントを正しいオーディエンスに再調整します。

ガイドを公開するには、2つのオプションから選ぶことができます。

  • ガイドのステータスを［公開（Public）］に変更すると、ガイドを今すぐ公開できます。
  • ガイドをいつ公開するか（または、いつ公開を停止するか）をスケジュール設定することもできます。

ガイドのステータスを設定する

詳しくは、ガイドのステータスを変更するをご覧ください。

  • ドラフト（Draft）：ガイドはどの環境にも表示されませんが、編集は可能です。
  • レビュー待ち（Pending Review）：ガイドの作成者と投稿者は、このステータスで、ガイドがレビュー待ちであることを示すことができます。公開担当者やレビュー担当者は、このステータスでガイドリストをフィルタリングし、レビュー待ちのガイドを確認できます。ガイドのステータスを「レビュー待ち」に設定しても、ガイドはステージングにプッシュされません。
  • ステージング（Staged）：このガイドは、テストと検証の準備が整った、指定したステージングサーバーにのみ表示されます。ステージングサーバーは、お客様のサブスクリプション管理者がこちらから管理できます。
  • 公開（Public）：ガイドのセグメントで対象とするすべての訪問者にガイドが公開され、Pendoがインストールされているすべての環境で、指定した「場所」に表示されます。公開ガイドは、指定したステージングサーバーに継続して表示されます。
  • 無効（Disabled）：ガイドを非公開にします。これを使用して、公開済みのガイドをフィルターできます。
  • 削除（Delete）。ガイドとそのすべてのデータが完全に削除されます。

ガイドのスケジュール

  1. ガイドの詳細ページの［スケジューリング（Scheduling）］タイルで、［編集（Edit）］を選択します。
  2. ［開始日時（Start Date/Time）］ボタンをオンにして、必要な設定を定義します。
  3. ［終了日時（Expiration Date/Time）］ボタンをオンにして、必要な設定を定義します。

注：終了日時を設定しない場合は、ガイドが長期間表示されないように手動で削除する必要があります。開始日が設定されたガイドを ステージングステータスのままにしておくと、開始日時になってもガイドは公開になりません。これらの変更は、ステージング環境のみに反映されます。ガイドを［公開（Public）］に設定してから、開始日時を設定する必要があります。そうすると、ステータスが［スケジュール済み（Scheduled）］に変わります。

この記事は役に立ちましたか？
10人中4人がこの記事が役に立ったと言っています

このセクションの記事

もっと見る