ビジュアルデザインスタジオのツアーに参加する

最終更新日:

:この記事は、2019年2月18日にリリースされた新しいビジュアルデザインスタジオの操作について説明しています。この日付以前からのお客様で、クラシックデザイナー(Classic Designer)をご利用になりたい方は、アプリ内デザイナー(クラシック)を参照してください。

ビジュアルデザインスタジオを使用すると、ガイドを作成したり、フィーチャーやページにタグを付けたりすることができます。この記事では、ビジュアルデザインスタジオを使用してガイドを作成する方法について説明します。ページやフィーチャーにタグを付けるためのビジュアルデザインスタジオの使用方法については、ビジュアルデザインスタジオ(Visual Design Studio)によるタグ付けを参照してください。

テーマとレイアウト

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

テーマを使用すると、ガイドのレイアウトとビルディングブロックのフォーマットやスタイルを設定できるため、ガイドのスタイルを管理しやすくなります。ガイドデザイナーは、デフォルトのスタイルを持つテーマを使うと、視覚的に一貫したガイドコンテンツを迅速に作成できます。レイアウトを使用すると、ガイドデザイナーはガイドのスタイルを組織全体で簡単に統一できます。テーマについて詳しくは、「テーマを使用してガイドのスタイルを管理する」を、レイアウトの詳細については、「ガイドレイアウトを使用する」をご確認ください。

ビジュアルデザインスタジオのアクションバー

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

designer_action_bar.png

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

  • 左上にガイドのタイトル
  • 中央に[ステップを表示(View Steps)]アクセストレイ
  • 右上に以下のオプションと通知
    • レイアウトを保存(Save Layout):新しいレイアウトの保存や既存のレイアウトの更新時に使用します。
    • 起動(Activation):ガイドの起動時に使用します。
    • ナビゲーション(Navigation)モード:アプリケーション内のページ移動やモーダルを開くときに使用します。
    • プレビュー(Preview):ガイドのプレビュー時に使用します。
    • 終了(Exit):ビジュアルデザインスタジオを終了するときに使用します。ビジュアルデザインスタジオを終了するときは、タブを閉じるのではなく、[終了]を選択することが重要です。これにより、ガイドの詳細ページに戻ります。
    • 保存(Save):現在の作業を保存するときに使用します。また、[保存]の横にある下矢印(v)を使用すると、[保存して終了(Save and Exit)]を選択できます。
    • アラート(Alerts):条件に一致する通知を表示します。エラーは黄色で表示されます。
    • 移動(Move):ナビゲーションバーをビジュアルデザインスタジオの上部または下部に移動できます。アプリケーションの要素がページ上部のアクションバーの背面に隠れている際に便利です。

ステップトレイ

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

step-tray.png
 

アクティベーション

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

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

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

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

詳細については、ガイドのアクティベーションオプションを参照してください。

ガイドコンテナ

ガイドコンテナとは、ガイドの端にカーソルを合わせたときに表示される青い枠のことです。ガイドコンテナを選択すると、[コンテナを編集(Edit Container)]メニューが表示され、ガイドのスタイルや位置、動作を変更することができます。ガイドコンテナを使用してガイドのスタイルを設定する方法については、「ガイドの作成」をご覧ください。

hover-guide-container.gif

ビルディングブロック

ガイドはビルディングブロックで構成されています。ビルディングブロックを使用すると、ガイドの各ステップに次の要素を追加できます。

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

ガイドの内側にカーソルを置き、表示される青い水平線を選択すると、ビルディングブロックメニューにアクセスできます。詳細については、「ビルディングブロックを使用してガイドコンテンツを追加する」をご確認ください。

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