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

最終更新日:

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

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

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

権限

ビジュアルデザインスタジオを使用してガイドを作成するには、次のいずれかの権限セットが必要です。

  • Pendoの管理者レベルの権限:これは、ユーザーにガイド関連のすべてのアクティビティを実行する権限を付与する、サブスクリプションレベルの権限セットです。
  • Pendoのデフォルトのアプリレベルの役割:ガイドに関連してユーザーに付与したいアクセスレベルに応じて、次のすべてまたは一部を選択します。
    • ガイド作成者(Guide Creator):この役割には、最初からまたはレイアウトからガイドを作成および編集できる権限、およびステージング中のガイドやドラフトガイド、および無効化されたガイドを削除する権限が含まれます。
    • ガイド公開者(Guide Publisher):この役割には、ガイドの公開とスケジュール設定の権限、およびステージング中のガイド、ドラフトガイド、および無効化されたガイドを削除する権限が含まれます。
    • ガイドコンテンツ編集者(Guide Content Editor):この役割には、レイアウトからガイドを作成および編集できる権限、およびステージング中のガイドやドラフトガイド、および無効化されたガイドを削除する権限が含まれます。
  • Pendoのカスタムでのアプリレベルの役割:デフォルトのアプリレベルの役割ではなく、役割をカスタマイズして作成し、以下のガイド権限を付与することもできます。
    • ゼロからのガイドの作成と編集
    • レイアウトからガイドを作成および編集する
    • ガイドを公開する

また、カスタムの役割に以下の権限を含めることもできます。なお、上記3つの権限があれば、ガイドは作成できます。

  • 公開ガイドの編集を許可する(公開ガイドの削除と編集)
  • ドラフト、ステージング中、無効化されたガイドを削除する

ガイドの権限とPendoユーザーへの割り当て方法については、役割と権限を参照してください。

テーマとレイアウト

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

テーマを使用すると、ガイドのレイアウトとビルディングブロックのフォーマットやスタイルを設定できるため、ガイドのスタイルを管理しやすくなります。ガイド作成者は、デフォルトのスタイルを持つテーマを使うと、視覚的に一貫したガイドコンテンツを迅速に作成できます。

レイアウトを使用すると、ガイドのデザイナーはガイドのスタイルを組織全体で簡単に統一できます。これにより管理者も、特定のガイドテンプレートを使用してガイドのブランディングを管理しやすくなります。

テーマ

テーマは、ガイドコンテナ、仕上がり、ボタンのスタイルを設定するために使用します。デフォルトのテーマは、以下のステップで編集できます。

  1. [ガイド(Guides)]>[テーマ(Themes)]に移動します。
  2. デフォルトのテーマのいずれかにカーソルを合わせ、[テーマを編集(Edit Theme)]を選択します。
  3. アプリのURLを入力し、[デザイナーを起動(Launch Designer)]を選択します。これにより、[テーマ設定(Theme Settings)]が開きます。

    theme_settings.png

レイアウト

レイアウトはテンプレートの役割を果たします。これを保存して、ガイドの各ステップの設定時に使用します。保存したガイドレイアウトはレイアウトオプションに表示されるため、ガイドの作成時にいつでも使用できます。レイアウトの作成と検索方法の詳細については、ガイドのレイアウトを参照してください。

layouts.png
注: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

コンテナの編集メニュー

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

スタイリング(Styling)

注:テーマを使用してガイドを編集している場合、すべてのオプションを表示するには、テーマを[カスタム(Custom)]に変更する必要があります。

  • テーマ(Theme):ガイドのスタイル設定に使用しているガイドテーマです。
  • ステップ名(Step Name):ガイドで現在プレビューしているステップの名前です。
  • 背景色(Background Color)
  • パディング(Padding):コンテナのパディングです。コンテナの上、右、下、左を表す数字を使用してピクセル(px)単位で設定します。
  • 枠の色(Border Color):コンテナの枠の色です。16進数、RGB数値、またはビジュアルカラーセレクターで設定します。
  • 枠の幅(Border Width):コンテナの枠の幅をピクセル(px)単位で設定します。
  • 枠の半径(Border Radius):枠の半径をピクセル(px)単位で設定します。
  • ドロップシャドウの色(Drop Shadow Color):コンテナの影の色です。16進数、RGB数値、またはビジュアルカラーセレクターで設定します。
  • ドロップシャドウのX値、Y値、ぼかし、サイズ(Drop Shadow X, Y, Blur, and Spread):コンテナの影の角度(X)、長さ(Y)、濃度(Blur)、サイズ(Spread)を設定します。
  • キャレット(Caret):該当する場合、コンテナに付属する三角形の矢印の幅と高さをピクセル(px)単位で設定します。
  • 背景色(Backdrop Color):ガイド背後のUI色です。16進数、RGB数値、またはビジュアルカラーセレクターで設定します。ビジュアルカラーセレクターの下にあるスライダーを使用して、背景の不透明度を設定することもできます。
  • 閉じるボタン(Close Button):右上に(X)を表示して、ユーザーがガイドを閉じられるようにします。
  • 寸法(Dimensions):ガイドの幅をピクセル(px)単位で設定します。
  • Zインデックス(Z-Index):UIで要素が重なる場合のコンテナの順序を設定します。Zインデックス値が大きいほど、その要素はUIで前面に表示されます。モーダルなどのZインデックス値がより大きい要素によって、ガイドが隠れている場合にのみ変更してください。

場所

  • ページ上の位置(Position on Page):UI内のガイドの配置を設定します。
  • オフセット(Offset):ガイドの位置をピクセル(px)単位で調整し、位置合わせに沿ってガイドを配置できるようにします。
  • 要素の場所(Element Location):必要な場合に設定します。
  • ターゲットページ(Page Location)サイト全体(Sitewide)または当該ページのみ(Only on this page)を設定します。
  • 設定 > ターゲット上の動的要素をフィルタリング(Settings > Filter Dynamic Elements on Target):この設定をオンにすると、フィーチャー要素上の動的要素がすべて除外されます。たとえば、一部の要素にはユーザー固有の文字列があり、この文字列は各ユーザーのアプリ操作に応じて変化します。こうした文字列を除外すると、フィーチャーにタグを付けるときのパフォーマンスが向上し、より正確にタグが付けられます。また、データの重複を回避できます。
  • 要素に紐付ける(Anchor to Element):UI上の表面要素に固定するか、既存のタグ付けされたフィーチャーに付加するという2つのオプションがあります。
    anchor_to_element_new.png
    • ターゲット要素(Target Element):ガイドまたはバッジをUI要素に紐付けます。システムは画面上の要素を選択し、選択された要素は赤い境界線で囲まれます。この選択により、紐付けを定義する以下のオプションが追加されます。
      • 一致候補(Suggested Match):これはPendoが自動的に作成するルールです。これでは必要な情報を収集できない、ページ上で一意に一致しない、アプリケーションの他のページにも存在する、または静的でない場合があるため、以下のルール作成オプションを追加しました。
      • 親要素(Parent Element):これは、アプリケーションで領域をハイライトして選択するために使用される赤い境界ボックスが、クリック可能な領域全体をカバーしていない場合に便利です。このオプションを使用すると、元々選択されていた要素(例:ボタン内のテキスト)に対して、それに次ぐ大きさのコンテナ(例:ボタン全体)を選択できます。

        :拡張機能アプリケーションには、親要素を表示するオプションはありません。

        カスタムCSS(Custom CSS):Google Chromeの[検証(Inspect)]を使ってアプリケーションのHTMLとCSSを調査することに慣れている場合、このオプションを使うと、選択した領域で利用できる要素と属性に基づいてカスタムルールを追加することができます。

        anchor_to_element.png
    • 既存のフィーチャーを選択(Select Existing Feature):既存のフィーチャーにガイドまたはバッジを配置する場合は、これを選択します。フィーチャーは、アナリティクスに使用される名前付きオブジェクトで、フィーチャーが配置されているページに変更を加えても、永続的に存在します。つまり、ガイドとバッジは、表面要素に固定されるよりも、フィーチャーに基づいて配置される方が安定しますが、その設定には時間がかかります。選択モードでは、フィーチャーにタグを付けることはできません。フィーチャーの詳細については、フィーチャーのタグ付けと表示を参照してください。

行動(Behavior)

[行動(Behavior)]タブには、コンテナ内のすべてのボタンのアクションが表示されます。これらのアクションにより、複雑なガイドコントロールやナビゲーションをコーディングなしで追加することができます。詳細については、ガイドのボタンアクションを参照してください。

edit_container.png

 

ビルディングブロック

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

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

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

hover-add-bb-blank.gif

詳細については、ビルディングブロックを使用してガイドコンテンツを追加するを参照してください。

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