この記事では、ビジュアルデザインスタジオ(Visual Design Studio)でガイドを作成する方法について詳しく説明します。新機能の紹介や、好ましい動作についての説明、また状況に応じたサポートを提供します。
簡単な概要はこちらのビデオをご覧ください。
要件
ビジュアルデザインスタジオを使用するには、Pendoユーザーは以下の2つの権限のいずれかが必要です。
- Pendo管理者権限
-
以下が実行できるPendoユーザー権限:
- レイアウトからガイドを作成する
- 公開されたガイドを管理する
- ガイドとレイアウトを最初から作成する
さっそく始める
-
ナビゲーションバーで[ガイド(Guides)]>[ガイド]と進み、 [+ガイドを作成(+Create Guide)]を選択します。
- Pendoアカウントに複数のウェブアプリケーションを設定している場合は、[ガイドを作成]ページで、ガイドを表示するアプリケーションを選択します。
- ガイドのカテゴリーを選択します。すると、デフォルトのPendoレイアウトもしくは[保存済みレイアウト(Saved Layouts)]のいずれかから、選択したカテゴリーの推奨レイアウトが表示されます。
注:ガイドは、1つのアプリにしか割り当てられません。
- [レイアウト(Layouts)]セクションで、レイアウトを選択します 。用意されているデフォルトのレイアウト、または過去にガイド作成に使用した保存済みのレイアウトから選択できます。レイアウトを選択すると、ガイドの詳細ページが表示されます。
- ガイドに名前を付け、ガイドを表示するアプリのプロダクトエリアを選択します。
ヒント:すぐに複数のガイドを持つことになるので、検索しやすいように命名規則を設け、識別しやすいように色分けされたグループを用意することをお勧めします。詳細については、命名のベストプラクティスに関するヘルプ記事をご覧ください 。 - 必要に応じて、新しいプロダクトエリアを作成するには [+プロダクトエリアを作成(+Create Product Area)] を選択し、名前を付けて、 [プロダクトエリアを作成]を選択してください。
- [コンテンツ(Content)]エリアをクリックし、ビジュアルデザインスタジオを開きたいアプリケーションのURLを入力し、[デザイナーを起動(Launch Designer)]をクリックします。デザイナーが新しいタブで開かれます。
ガイドのデザイン
初めてビジュアルデザインスタジオを開くと、アプリケーションの上に[ガイドデザイナー(Guide Designer)]が起動されます。ガイドデザイナーには複数のツールが用意されており、ガイドのプレビューも可能です。[読み取り専用(Read Only)]に設定されているユーザーを除き、すべてのPendoユーザーがアクセスできます。
詳細については、ビジュアルデザインスタジオについてを参照してください。
[コンテナを編集(Edit Container)]ボックスでガイドの初期編集を行うことができます。[コンテナを編集]ボックスを使用してガイドのスタイルを設定する方法について詳しくは、ビジュアルデザインスタジオ(Visual Design Studio)を使用するを参照してください。
-
デザイナーを開いた状態で[ステップを表示(View Steps)]をクリックすると、[ステップトレイ(Step Tray)]が表示されます。これには、カスタマイズのオプションとガイドの手順がすべて表示されます。要素をターゲットにしたいが「アクションバー(Action Bar)」に隠れている場合は、画面右上の両矢印ボタンをクリックして、バーを画面下に移動させます。
ヒント:要素をターゲットにしたいのに[アクションバー]がそれを覆っている場合は、画面右上の両矢印ボタンをクリックして、画面下に移動させてください。 - ガイドにステップを追加するには、[ステップトレイ]で [+ステップを追加(+ Add Step)]をクリックします。
- ステップのガイド設定を編集するには、ステップを選択しプレビューの上にカーソルを合わせると[コンテナを編集(Edit Container)]ボックスが開きます。
- [コンテナを編集]ボックスで[スタイル(Styling)]、[場所(Location)]、および[行動(Behavior)]タブを移動して、設定に必要な変更を加えます。
-
ガイドコンテナを編集するには、設定を編集するステップでガイドコンテナ(ガイドの端)にカーソルを合わせます。ガイドコンテナの端をクリックすると、[スタイル]、[場所]、[行動]のオプションが表示され、さらにカスタマイズできます。
-
新しいビルディングブロックをガイドに追加する必要がある場合は、アイテム間にカーソルを合わせると青い線が表示され、ビルディングブロックを追加できるようになります。ビルディングブロックは、ガイドにコンテンツを追加し、テキスト、ボタン、画像、投票とアンケート調査、埋め込み動画を簡単に追加し、フォーマットを設定するために使用します。ビルディングブロックの詳細については、 ビルディングブロックを使用してガイドコンテンツを追加するを参照してください。
ヒント:MacではOptionを押しながら、WindowsではAltを押したままにすると、現在のすべてのビルディングブロックとその境界ボックスが表示されます。
ヒント:ガイドを編集する際には、定期的に変更内容を保存してください。これは、作成途中の内容を保存するのに役立ちます。
- 終了するには、 [完了(Done)]を選択します。
- 終了したら、[保存(Save)]を選択して変更内容を保存し、[終了(Exit)]を選択してデザイナーを終了します。
ガイドのプレビュー
ガイドのプレビューを使用すると、ガイドを公開せずに、またはセグメントの制限を受けずに、ガイドを起動できます。プレビューのUIを見ると、アクティベーションの方法、ターゲット要素、ターゲットページがわかり、そのガイドの表示基準を満たしているかどうかもインジケーターで表示されます。また、そのすべての機能をテストでき、再起動も簡単に実施できます。
上部のナビゲーションバーで [プレビュー(Preview)]を選択します。
ガイドの管理
ガイドの作成が完了したら、次の操作を実行できます。
- ガイドのテスト
- ガイドのアクティベーション
- セグメント化と即時の公開
- ガイドの公開時期の設定
ガイドのテスト
ガイドをテストするには、以下を実行してください。
- 自分自身に対してガイドをセグメント化します。詳しくは、セグメントをご覧ください。
- [ガイドの詳細(Guide Details)]ページの[セグメント(Segment)]タイルで、[編集(Edit)]アイコンを選択します。
- ドロップダウンを選択して、[カスタムセグメント(Custom Segment)]を選択し、[訪問者ID(Visitor ID)]が自分自身と同じになるようにセグメントルールを追加します。
たとえば、訪問者IDがメールアドレスの場合、ルールは次のようになります。
- 完了したら、[カスタムセグメントを保存(Save Custom Segment)]を選択し、[セグメント]タイル内の[保存]を選択します。
- ガイドの詳細を確認し、ガイドのステータスを[ステージング(Staging)]に更新して(ステージング設定がある場合)、ステージング環境でガイドをプレビューします。
- ステージング設定がない場合は、ステータスを[公開(Public)]に更新します。このガイドは自分自身にセグメント化されているので、自分のみに表示されます。
ガイドのアクティベーション
ガイド作成時にアクティベーション方法を設定していない場合は、すぐに設定できます。
-
[ガイド(Guide)]ページの[アクティベーション(Activation)]タイルで[自分のアプリで管理(Manage in My App)]を選択すると、ガイドを表示するアプリに戻り、[アクティベーション設定(Activation Settings)]ボックスが表示されます。
- ガイドをアクティベーションするには、アクティベーションオプションを選択します。
-
-
[自動(Automatic)]:ガイドは、閉じるまたは次に進むまで自動的に1回表示されます。
- [ガイドスロットリングの設定を無視(Ignore Guide Throttling Settings)] - これらの設定と、無視のために選択できる理由については スロットリングと順序の設定を参照してください。
- [リピートガイド表示(Repeat Guide Display)] - リピートガイド表示についてはガイドのアクティベーションオプションを参照してください。
- バッジ(Badge):訪問者がバッジアイコンにカーソルを合わせるかクリックすると、ガイドが表示されます。詳細については、ガイドのアクティベーションオプションを参照してください
- ターゲット要素(Target Element):訪問者が対象となる要素をクリックした後に表示されるガイドです。詳細については、ガイドのアクティベーションオプションを参照してください
- ガイドの表示場所(Show my guide on):起動時にガイドを表示するデバイスを選択します。
-
[自動(Automatic)]:ガイドは、閉じるまたは次に進むまで自動的に1回表示されます。
ガイドのセグメントと公開
作成したガイドに問題がなければ、ガイドの詳細ページに戻って、セグメントを正しいオーディエンスに再調整します。
ガイドを公開するには、2つのオプションから選ぶことができます。
- ガイドのステータスを[公開]に更新すると、ガイドを今すぐ公開できます。
- ガイドがいつ公開されるか(必要であれば、いつ公開を停止するか)をスケジュールします。
ガイドのステータスを設定する
詳しくは、ガイドのステータスを変更するをご覧ください。
- ドラフト(Draft) - ガイドはどの環境にも表示されませんが、編集は可能です。
- レビュー待ち(Pending Review)- ガイドの作成者と投稿者は、このステータスで、ガイドがレビュー待ちであることを示すことができます。公開担当者やレビュー担当者は、このステータスでガイドリストをフィルタリングし、レビュー待ちのガイドを確認できます。ガイドのステータスを「レビュー待ち」に設定しても、ガイドはステージングにプッシュされません。
- ステージング(Staged) - このガイドは、テストと検証の準備が整った、指定したステージングサーバーにのみ表示されます。ステージングサーバーは、お客様のサブスクリプション管理者がこちらから管理できます。ステージングの詳細については、こちらをご覧ください。
- 公開(Public) - ガイドのセグメントで対象とするすべての訪問者に公開され、Pendoがインストールされているすべての環境で、指定した「場所」に表示されます。公開ガイドは、指定したステージングサーバーに継続して表示されます。
- 無効(Disabled)- ガイドを非公開にします。これを使用して、公開するガイドをフィルターできます。
- 削除(Delete) - ガイドとそのすべてのデータが完全に削除されます。
ガイドのスケジュール
-
[ガイドの詳細]ページの[スケジューリング(Scheduling)]タイルで、[編集]を選択します。
- [開始日時(Start Date/Time)]ボタンを切り替えて、必要な設定を定義します。
- [終了日時(Expiration Date/Time)]ボタンを切り替えて、必要な設定を定義します。
注:終了日時を設定しない場合は、ガイドが長期間表示されないように手動で削除する必要があります。開始日が設定されたガイドを ステージングステータスのままにしておくと、開始日時になってもガイドは公開になりません。これらの変更は、ステージング環境のみに反映されます。ガイドを公開に設定してから、開始日時を設定する必要があります。そうすると、ステータスがスケジュール済みに変わります。
その他のリソース
複数ページにわたるウォークスルーガイドの作成については、Pendo Academyでご確認ください。米国ドメインの方はUS Pendo Academyに、EUドメインの方はEU Pendo Academyにアクセスしてください。