Pendoは2019年2月18日付で、ビジュアルデザインスタジオ（Visual Design Studio）のガイド体験を更新しました。この記事は、ビジュアルデザインスタジオの命名手順を説明します。
ガイドの作成プロセスを開始するには、左側のナビゲーションメニューにある［ガイド（Guides）］を選択します。
テーマとレイアウト
テーマとレイアウトは、ガイドの作成者が使用できる特定のテーマやレイアウトをPendo管理者が設定できるため、ガイドのブランディングの管理に役立ちます。
テーマ
テーマは、ガイドコンテナ、体裁、ボタンなどのデフォルトのテーマのスタイルを決めるために使用します。デフォルトのテーマを編集するには、［ガイド（Guides）］セクションの右上にあるドロップダウンオプションを選択し、［デフォルトのテーマを編集（Edit Default Theme）］を選択します。その後デザイナーが表示され、デフォルトのテーマを編集するためのオプションが表示されます。
レイアウト
レイアウトをガイドのテンプレートで保存しておけば、必要に応じてガイドのステップで同じ構造を再利用することができます。ガイドのレイアウトを保存すると、オプションに表示されます。ここでは、表示されるオプションの例を示します。
ガイドデザイナー
初めてビジュアルデザインスタジオ（Visual Design Studio）を開くと、アプリケーションの上部で［ガイドデザイナー（Guide Designer）］が起動します。ガイドデザイナーには複数のツールが用意されており、ガイドのプレビューも可能です。「読み取り専用」に設定されているユーザーを除き、すべてのPendoユーザーがアクセスできます。
アクションバー
ガイドデザイナーの上部にアクションバーが表示されます。アクションバーには次のものが含まれます。
- ガイドのタイトル（1）
- 手順の表示（2）- ステップトレイへのアクセス
- レイアウトの保存（3）- ガイドを新しいレイアウトとして保存するか、既存のレイアウトを更新します
- アクティベーション（4）- 変更ガイドのアクティベーション
- ナビゲーションモード（5）- 別のページに移動するか、モーダルを開きます
- プレビュー（6）- ガイドをプレビューします
- 終了（7）- デザイナーを終了します
- 現在の作業を保存（8）- デザイナーを保存して終了します
- 該当するアラート（9）- エラーがある場合は黄色で表示されます
- 移動（10）- ページ上部のアクションバーの背後にアプリケーションの要素がある場合に、ナビゲーションバーをデザイナーの上部/下部に移動します
- ガイドステップのプレビュー（11）
ステップトレイ
アクションバーの中央にある矢印をクリックすると、ステップトレイにアクセスできます。ステップトレイには、アクティベーション方法のカスタマイズや、ガイドへのステップ追加のためのオプションが表示されます。
アクティベーション
アクティベーションでは、ユーザーへのガイドの表示方法を決定します。ガイドのアクティベーションオプションにアクセスするには、アクションバーのボタンからアクセスするか、ステップトレイを開いて左側の［アクティベーション（Activation）］ボックスをクリックします。
次の3つのアクティベーションオプションから選択できます。
- ［自動（Automatic）］：ガイドは、閉じるまたは次に進められるまで自動的に1回表示されます。
- ［バッジ（Badge）］：訪問者がバッジアイコンにカーソルを合わせるかクリックすると、ガイドが表示されます。
- ［ターゲット要素（Target Element）］：訪問者が対象となる要素をクリックした後に表示されるガイドです。
また、ガイドは目的の動作を実現するために、異なる方法を同時に使用してアクティベーションすることができます。例えば、ガイドが自動的に表示されるか、バッジで表示されるかを設定することができます。
詳しくは「ガイドのアクティベーションオプション」の記事をご覧ください。
ガイドコンテナ
ガイドコンテナとは、ガイドの端にカーソルを置いたときに表示される青い枠のことです。ガイドコンテナをクリックすると、［コンテナを編集（Edit Container）］メニューが表示され、ガイドのスタイルや位置、動作を変更することができます。
コンテナメの編集メニュー
［コンテナを編集（Edit Container）］メニューには、「ガイド」のスタイル設定、位置の編集、動作のコントロールなど、複数のオプションがあります。以下は、このメニューの各要素の内訳です。必要な変更を加えることができます。
スタイリング（Styling）
注： 「テーマ」を使用してガイドを編集している場合、これらのオプションを表示するには、テーマを「カスタム」に変更する必要があります。
- テーマ（Theme）
- ステップ名（Step Name）
- 背景色（Background Color）
- 寸法（ガイドの幅（Width）（px））
- パディング（Padding）（px）
- 枠（Border）：色（Color）、幅（Width）（px）、半径（Radius）（丸コーナーの場合）
- 影（Drop Shadow）：色（Color）、サイズ（Size）（ガイドコンテナを囲む影）
- キャレット（Caret）：（必要な場合）幅（Width）（px）、高さ（Hight）（px）（ツールチップのポインター）
- 閉じるボタン（Close Button）（ユーザーは「X」でガイドを閉じることができます）
- 背景（Backdrop）：色と不透明度（ツールチップガイドを使用する場合は、［背景の上にターゲット要素を表示（Show target element above backdrop）］を必ずチェックしてください。
- Zインデックス（Z-index）（Zインデックスが高いモーダルなどによってガイドが非表示になっている場合にのみ編集します。Zインデックスが高いほど、「前方の」要素になります）。
場所
- ページ上の位置（Position on Page）
- 要素の場所（Element Location）（必要な場合）
- ターゲットページ（Page Location）：サイト全体（Sitewide）または当該ページのみ（Only on this page）
- 設定（Settings）- ターゲット上の動的要素をフィルタリング（Filter Dynamic Elements on Target）：この設定をオンにすると、フィーチャー要素上の動的要素がすべて除外されます。たとえば、一部の要素ではユーザー固有の文字列があり、各ユーザーがアプリを操作すると、常に変化します。こうした文字列を除外すると、フィーチャーまたは要素にタグを付けるときのパフォーマンスが向上し、より正確にタグが付けられます。また、データの重複を回避できます。
-
要素に紐付ける：
- 一致候補。これはPendoが自動的に作成するルールです。場合によっては、これでは理想的に必要なものを捕捉できない、ページ上で一意に一致しない、他のページにも存在する、または静的でないことがあるため、以下のルールの作成オプションを追加しました。
- 親要素。これは、アプリケーションで領域をハイライトして選択するために使用される赤い境界ボックスが、クリック可能な領域全体をカバーしていない場合に便利です。このオプションでは、元々選択されていた要素（ボタン内のテキスト）に対して、それに次ぐ大きさのコンテナ（ボタン全体）が選択されます。
-
カスタムCSS。Google Chromeの［検証（Inspect）］を使ってアプリケーションのHTMLとCSSを調査することに慣れている場合、このオプションを使うと、選択した領域で利用できる要素と属性に基づいてカスタムルールを追加することができます。
行動（Behavior）
- 閉じるボタン
- ［アクションを追加（Add Action）］
ビルディングブロック
ガイドはビルディングブロックで構成されています。各ビルディングブロックには、追加オプションが用意されています。
- テキスト（Text）
- ボタン
- 水平線
- マルチボタン（Multi Button）
- 画像
- YouTube動画（YouTube Video）
- 自由記入式の投票調査
- 「はい/いいえ」の投票
- 数字による投票調査
- 多項選択式の投票調査
- カスタムコードブロック（Custom Code Block）
ガイドの内側にカーソルを置き、表示される青い水平線をクリックすると、［ビルディングブロック（Building Blocks）］メニューにアクセスできます。以下のように表示されます。
よくある質問
ビジュアルデザインスタジオを使用するには、どのようなPendoユーザーの権限が必要ですか？
ビジュアルデザインスタジオを使用するには、Pendoユーザーは次のいずれかの権限が必要です。
- Pendo管理者権限
- Pendoユーザー権限
- 公開されたガイドを管理する
- ガイドとテンプレートを最初から作成する
- ガイドをテンプレートから作成する
ユーザーの役割（マトリックスビュー）を見て、それぞれの権限でPendoで何ができるのかを確認してください。
関連記事
ここまで新しい用語を一通りご紹介しました。次はビジュアルデザインスタジオでガイドを作成する方法を見てみましょう。