ビジュアルデザインスタジオを使用する

注：この記事では、2019年2月18日にリリースされた新しいビジュアルデザインスタジオガイド（Visual Design Studio Guide）の操作性を取り上げます。この日付以前からのお客様で、クラシックデザイナーを使用したいとお考えの場合は、前のバージョンを参照してください。

この記事では、ビジュアルデザインスタジオの機能と、これを活用したガイドの作成方法について詳しく説明します。

ガイドの作成プロセスを開始するには、左側のナビゲーションメニューにある［ガイド（Guides）］を選択します。

要件

ビジュアルデザインスタジオを使用するには、Pendoユーザーは次のいずれかの権限が必要です。

• Pendo管理者権限
• Pendoユーザー権限
  • 公開されたガイドを管理する
  • ガイドとテンプレートを最初から作成する
  • ガイドをテンプレートから作成する

テーマとレイアウト

テーマとレイアウトでは、ガイドの作成者が使用する特定のテーマやレイアウトをPendo管理者が設定できるため、ガイドのブランディング管理に役立ちます。

テーマ

テーマは、ガイドコンテナ、仕上がり、ボタンなどのデフォルトのテーマのスタイル設定に使用します。デフォルトのテーマを編集するには、［ガイド］セクション右上のドロップダウンオプションを選択し、［デフォルトのテーマを編集（Edit Default Theme）］を選択します。デザイナーを開くことを確認するメッセージが表示され、デフォルトのテーマの編集オプションを確認できます。

レイアウト

レイアウトは、必要に応じてガイドステップで同じ構造を再利用できるガイドのテンプレートです。ガイドのレイアウトを保存すると、オプションに表示されます。ここでは、表示されるオプションの例を示します。

 

詳しくは「レイアウト」の記事をご覧ください。

 

ガイドデザイナー

初めてビジュアルデザインスタジオを開くと、アプリケーションの上部でガイドデザイナーが起動します。ガイドデザイナーには複数のツールが用意されており、ガイドのプレビューも可能です。［読み取り専用（Read Only）］権限のユーザーを除き、すべてのPendoユーザーがデザイナーにアクセスできます。

 

アクションバー

ガイドデザイナーの上部にアクションバーが表示されます。アクションバーには次のものが含まれます。

• ガイドのタイトル（1）
• 手順の表示（2）- ステップトレイへのアクセス
• レイアウトの保存（3）- ガイドを新しいレイアウトとして保存するか、既存のレイアウトを更新します
• アクティベーション（4）- 変更ガイドのアクティベーション
• ナビゲーションモード（5）- 別のページに移動するか、モーダルを開きます
• プレビュー（6）- ガイドをプレビューします
• 終了（7）- デザイナーを終了します
• 現在の作業を保存（8）- デザイナーを保存して終了します
• 該当するアラート（9）- エラーがある場合は黄色で表示されます
• 移動（10）- ページ上部のアクションバーの背後にアプリケーションの要素がある場合に、ナビゲーションバーをデザイナーの上部/下部に移動します
• ガイドステップのプレビュー（11）

ステップトレイ

アクションバーの中央にある矢印を選択すると、ステップトレイが開きます。ステップトレイには、アクティベーション方法のカスタマイズや、ガイドへのステップ追加のためのオプションが表示されます。

アクティベーション

アクティベーションでは、ユーザーへのガイドの表示方法を決定します。ガイドのアクティベーションオプションにアクセスするには、アクションバーのボタンからアクセスするか、ステップトレイを開いて左側の［アクティベーション（Activation）］ボックスを選択します。

次の3つのアクティベーションオプションから選択できます。

• 自動（Automatic）：ガイドは、閉じるまたは次に進むまで自動的に1回表示されます。
• バッジ（Badge）：訪問者がバッジアイコンにカーソルを合わせるかクリックすると、ガイドが表示されます。
• ターゲット要素（Target Element）：訪問者がターゲット要素をクリックすると、ガイドが表示されます。

また、ガイドは意図した動作を実現するために、異なるアクティベーション方法を併用できます。たとえば、ガイドの自動表示とバッジ表示を両方同時に設定することができます。

詳しくは「ガイドのアクティベーションオプション」の記事をご覧ください。

 

ガイドコンテナ

ガイドコンテナとは、ガイドの端にカーソルを置いたときに表示される青い枠のことです。ガイドコンテナを選択すると、［コンテナを編集（Edit Container）］メニューが表示され、ガイドのスタイルや位置、動作を変更することができます。

コンテナの編集メニュー

［コンテナを編集（Edit Container）］メニューには、ガイドのスタイル設定、場所の編集、動作のコントロールなど、複数のオプションがあります。このメニューの各要素の内訳は以下のとおりです。これらの要素は、必要に応じて変更が可能です。

スタイリング（Styling）

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

• テーマ（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インデックスが大きい要素ほど「前面」に配置されます。）

 

場所（Location）

• ページ上の位置（Position on Page）
• 要素の場所（Element Location）（必要な場合）
• ターゲットページ（Page Location）：サイト全体（Sitewide）または当該ページのみ（Only on this page）
• 設定（Settings）- ターゲット上の動的要素をフィルタリング（Filter Dynamic Elements on Target）：この設定をオンにすると、フィーチャー要素上の動的要素がすべて除外されます。たとえば、一部の要素にはユーザー固有の文字列があり、各ユーザーがアプリを操作すると、常に変化します。こうした文字列を除外すると、フィーチャーまたは要素にタグを付けるときのパフォーマンスが向上し、より正確にタグが付けられます。また、データの重複を回避できます。
• 要素に紐付ける（Anchor to Element）：UI上の表面要素に固定するか、既存のタグ付けされたフィーチャーに付加するという2つのオプションがあります。
  

• • ターゲット要素（Target Element）：ガイドまたはバッジをUI要素に紐付けます。システムは画面上の要素を選択し、選択された要素は赤い境界線で囲まれます。この選択により、紐付けを定義する以下のオプションが追加されます。
    • 一致候補。これはPendoが自動的に作成するルールです。場合によっては、これでは理想的に必要なものを捕捉できない、ページ上で一意に一致しない、他のページにも存在する、または静的でないことがあるため、以下のルールの作成オプションを追加しました。
    • 親要素。これは、アプリケーションで領域をハイライトして選択するために使用される赤い境界ボックスが、クリック可能な領域全体をカバーしていない場合に便利です。このオプションでは、元々選択されていた要素（ボタン内のテキスト）に対して、それに次ぐ大きさのコンテナ（ボタン全体）が選択されます。
    • カスタムCSS。Google Chromeの［検証（Inspect）］を使ってアプリケーションのHTMLとCSSを調査することに慣れている場合、このオプションを使うと、選択した領域で利用できる要素と属性に基づいてカスタムルールを追加することができます。
      
      
  • 既存のフィーチャーを選択（Select Existing Feature）：既存のフィーチャーにガイドまたはバッジを配置する場合は、これを選択します。フィーチャーは、アナリティクスに使用される名前付きオブジェクトで、フィーチャーが配置されているページに変更を加えても、永続的に存在します。つまり、ガイドとバッジは、表面要素に固定されるよりも、フィーチャーに基づいて配置される方が安定しますが、その設定には時間がかかります。選択モードでは、フィーチャーにタグを付けることはできません。フィーチャーの詳細については、フィーチャーのタグ付けと表示を参照してください。

行動（Behavior）

• 閉じるボタン
• ［アクションを追加（Add Action）］
  

ビルディングブロック

ガイドはビルディングブロックで構成されています。ビルディングブロックを使用して追加できるものは以下のとおりです。

• テキスト（Text）
• ボタン
• 水平線
• マルチボタン（Multi Button）
• 画像
• YouTube動画（YouTube Video）
• 自由記入式の投票調査
• 「はい/いいえ」の投票
• 数字による投票調査
• 多項選択式の投票調査
• カスタムコードブロック（Custom Code Block）

ガイドの内側にカーソルを置き、表示される青い水平線を選択すると、ビルディングブロックメニューにアクセスできます。

詳細については、ビルディングブロックを参照してください。

 

関連記事

ビジュアルデザインスタジオでのガイドの作成については、こちらをご覧ください。

• ガイドの作成
• ビルディングブロックを使用してガイドコンテンツを追加する
• ガイドのアクティベーションオプション