概要
Pendoは2019年2月18日付で、ガイド体験をビジュアルデザインスタジオ（Visual Design Studio）に更新しました。この記事は、ユーザーがビジュアルデザインスタジオの命名手順に慣れるためのものです。ガイドの作成プロセスを開始するには、左側のナビゲーションメニューにある［ガイド（Guides）］をクリックします。
テーマとレイアウト
テーマとレイアウトは、ガイドの作成者が使用できる特定のテーマやレイアウトをPendo管理者が設定できるため、ガイドのブランディングの管理に役立ちます。
テーマ
現在はベータ版です。テーマは、ガイドコンテナ、体裁、ボタンなどのデフォルトのテーマのスタイルを決めるために使用します。デフォルトのテーマを編集するには、［ガイド（Guides）］セクションの右上にあるドロップダウンオプションを選択し、［デフォルトのテーマの編集（Edit Default Theme）］を選択します。その後デザイナーが表示され、デフォルトのテーマを編集するためのオプションが表示されます。
レイアウト
レイアウトをガイドのテンプレートで保存しておけば、必要に応じてガイドのステップで同じ構造を再利用することができます。ガイドのレイアウトを保存すると、オプションに表示されます。ここでは、表示されるオプションの例を示します。
ガイドデザイナー
初めてビジュアルデザインスタジオを開くと、アプリケーションの上にガイドデザイナーが起動します。ガイドデザイナーには複数のツールが用意されており、ガイドのプレビューも可能です。「読み取り専用」に設定されているユーザーを除き、すべてのPendoユーザーがアクセスできます。
アクションバー
ガイドデザイナーの上部にアクションバーが表示されます。アクションバーには以下が含まれています。
- ガイドのタイトル
- 公開ステータス
- アクティベーション設定
- ガイドの改訂履歴
- ナビゲーションモード
- デザイナーの終了
- 現在の作業を保存
- レイアウトとして保存
- 該当するアラート
- アクションバーの移動機能
ページ上部のアクションバーの後ろにアプリケーションの要素がある場合、右上にある上下の矢印のアイコンをクリックすると、アクションバーが画面の下部に移動します。
ステップトレイ
アクションバーの中央にある矢印をクリックすると、ステップトレイにアクセスできます。ステップトレイには、アクティベーション方法のカスタマイズや、ガイドへのステップ追加のためのオプションが表示されます。
アクティベーション
アクティベーションでは、ユーザーへのガイドの表示方法を決定します。ガイドのアクティベーションオプションにアクセスするには、アクションバーのボタンからアクセスするか、ステップトレイを開いて左側の［アクティベーション（Activation）］ボックスをクリックします。
アクティベーションには3つのオプションがあります。
- ［自動（Automatic）］：ガイドは、終了または続行されるまで自動的に1回表示されます。
- ［バッジ（Badge）］：訪問者がバッジアイコンにカーソルを合わせるかクリックすると、ガイドが表示されます。
- ［ターゲット要素（Target Element）］：訪問者が対象となる要素をクリックした後に表示されるガイドです。
また、ガイドは目的の動作を実現するために、異なる方法を同時に使用してアクティベーションすることができます。例えば、ガイドが自動的に表示されるか、バッジで表示されるかを設定することができます。
詳しくは「ガイドのアクティベーションオプション」の記事をご覧ください。
ガイドコンテナ
ガイドコンテナとは、ガイドの端にカーソルを置いたときに表示される青い枠のことです。ガイドコンテナをクリックすると、［コンテナの編集（Edit Container）］メニューが表示され、ガイドのスタイルや位置、動作を変更することができます。
コンテナメの編集メニュー
［コンテナの編集（Edit Container）］メニューには、「ガイド」のスタイル設定、位置の編集、動作のコントロールなど、複数のオプションがあります。このメニューの各要素の詳細は次の通りです。
スタイリング（Styling）
注： 「テーマ」を使用してガイドを編集している場合、これらのオプションを表示するには、テーマを「カスタム」に変更する必要があります。
- 背景色（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）
- デバイスのタイプ（Device Type）：すべてのデバイス（All devices）、PCとタブレットのみ（desktop & tablets only）、もしくはモバイルウェブのみ（mobile web only）
行動（Behavior）
- 閉じる「X」ボタン（Close “x” Button）
- 動作（Action）
ビルディングブロック
ガイドはビルディングブロックで構成されています。各ビルディングブロックには、追加オプションが用意されています。
- テキスト（Text）
- ボタン
- マルチボタン（Multi Button）
- 画像
- YouTube動画（YouTube Video）
- 自由記入式の投票調査
- 「はい/いいえ」の投票
- 数字による投票調査
- 多項選択式の投票調査
- カスタムコードブロック（Custom Code Block）
ガイドの内側にカーソルを置き、表示される青い水平線をクリックすると、［ビルディングブロック（Building Blocks）］メニューにアクセスできます。以下のように表示されます。
よくある質問
ビジュアルデザインスタジオを使用するには、どのようなPendoユーザーの権限が必要ですか？
ビジュアルデザインスタジオを使用するには、Pendoユーザーは次のいずれかの権限が必要です。
- Pendo管理者権限
- Pendoユーザー権限
- 公開されたガイドを管理する
- ガイドとテンプレートを最初から作成する
- ガイドをテンプレートから作成する
ユーザーの役割（マトリックスビュー）を見て、それぞれの権限でPendoで何ができるのかを確認してください。
関連記事
ここまで新しい用語を一通りご紹介しました。次はビジュアルデザインスタジオでガイドを作成する方法を見てみましょう。