ガイドレイアウトを使用する

最終更新日:

レイアウトを使うことで、組織内のガイドデザイナーは、組織全体で統一したガイドの外観をスタイリングできます。これにより、管理者は特定のガイドテンプレートを使用してガイドのブランディングを管理しやすくなります。ガイドレイアウトの例には、バッジでアクティベートされるツールチップ、ユーザーから直接フィードバックを収集する投票とアンケート調査、自動的にアクティベートされるライトボックスとバナーなどがあります。

レイアウトにカテゴリーを適用することも可能です。カテゴリーを適用するには、[レイアウト(Layouts)]ページの[カテゴリー(Category)]フィルターを使用します。これで、デフォルトのPendoレイアウトまたは保存済みのレイアウトから推奨されるレイアウトを表示できます。カテゴリーの詳細については、カテゴリーを使用したガイドとレイアウトの管理を参照してください。

この記事では、ビジュアルデザインスタジオで利用できるさまざまなレイアウトと、レイアウトの作成・更新方法について詳しく説明します。

必要なユーザー権限

カスタムレイアウトを作成または更新するには、次の権限の1つが必要です。

  • Pendo管理者権限
  • ユーザー:ガイドとレイアウト(テンプレート)を最初から作成

カスタムレイアウトを削除するには、次の権限の1つが必要です。

  • Pendo管理者権限

レイアウトのタイプ

Pendoのデフォルトのレイアウトのいずれかを使用することも、各レイアウトの複数の特徴を組み合わせたカスタムレイアウトを作成することもできます。たとえば、投票とアンケート調査を含むライトボックスや、一連のツールチップで構成されるウォークスルーへと誘導するバナーを作成できます。

注:管理者はデフォルトのレイアウトを削除したり、カスタムレイアウトを追加したりできるため、レイアウトライブラリには、以下の例の一部が含まれていない場合があります。

ライトボックス

ライトボックスは、アプリまたはページの上に表示されるカスタマイズ可能なボックスです。どのようなサイズまたは寸法にもすることができ、テキスト、画像、または動画などのあらゆるタイプのコンテンツを含めることができます。ライトボックスはほぼ何にでも使えますが、一般的なお知らせをする場合に優れたツールとなります。

弊社では、5つのデフォルトのライトボックスレイアウトをご用意しています。

成功を祝うライトボックス

このレイアウトでは、お祝いの言葉を標準的な方法で伝えることができます。メッセージは編集することができます。

congrats-lightbox.png

ウォークスルーの完了を伝えるライトボックス

このレイアウトは、ウォークスルーを終了し、ユーザーに追加情報を提供する場合に最適です。

walkthrough-complete.png

カスタマーサクセスマネージャー紹介ライトボックス

このレイアウトは、ユーザーに直接のコンタクトを促してカスタムデモや追加サポートを提供する場合に最適です。

csm-intro.png

新機能のお知らせライトボックス

このレイアウトではシンプルな方法で、ユーザーに新しい機能やアップデートを確実に伝えられます。

new-feature.png

新機能のお知らせ(画像付き)ライトボックス

このレイアウトは上記のものと同様ですが、画像が付加されます。

new-feature-img.png

 

バナー

バナーの機能はライトボックスと同様ですが、ページの最上部または最下部の横幅全体に沿って表示されます。そのため、ユーザーの画面全体を邪魔せずに重要なメッセージを伝える場合に最適です。

Pendoでは1つのデフォルトのバナーレイアウトをご用意しています。

システム停止バナー

このレイアウトは、メンテナンスのための計画的な停止や不測の事態によるサービスの低下を告知する場合に最適です。システムステータスページへのリンクを貼ると役立ちます。

system-outage.png

 

ツールチップ

ツールチップは、ユーザーに特定の機能を状況に沿って簡潔に説明する場合に使用します。これはページのどこにでも配置できます。特定の要素のそばに配置するには、[コンテナを編集(Edit Container)]ボックスで位置設定を編集します。

Pendoでは、2つのデフォルトのツールチップレイアウトをご用意しています。

コンテキスト内のヘルパーツールチップ

このレイアウトでは、ユーザーに特定の機能をシンプルに説明できます。

helper-tooltip.png

ウォークスルーツールチップ

このレイアウトを使用すると、タスクを完了させる方法やアプリのナビゲーション方法をユーザーに示すマルチステップウォークスルーの1つのステップを作成できます。

walkthrough-tooltip.png

投票調査

アンケート調査を使用すると、ユーザーからフィードバックを直接簡単に得られます。それには、自由記入用のテキストボックス、数字による評価スケール、または多項選択法を用意します。

Pendoでは、3つのデフォルトの投票とアンケート調査レイアウトをご用意しています。

自由記入式の投票調査

このレイアウトではテキストボックスを使って、ユーザーに自由記入式のフィードバックを提出してもらいます。

open-text-poll.png

数字による投票調査

このレイアウトでは数字による評価スケールを使って、ユーザーにフィードバックを提出してもらいます。

number-poll.png

多項選択式の投票調査

このレイアウトでは、複数の定義済みのオプションから項目を選択することで、ユーザーにフィードバックを提出してもらいます。

multi-choice-poll.png

レイアウトを作成する

レイアウトはガイドのステップに適用されます。ガイドを作成するときには、[コンテナを編集(Edit Container)]ボックスの設定を使用して、ガイドステップにさまざまなデザイン設定を適用します。これらの設定はレイアウトとして保存して、ガイドの別のステップに適用したり、組織内の他のデザイナーが使用したりすることができます。

レイアウトを作成するには:

  1. ビジュアルデザインスタジオを起動し、レイアウトをステップとしてデザインします。
  2. 完了したら、ツールバーの[レイアウトを保存(Save Layout)]を選択してレイアウトを保存します。[レイアウトを保存]ウィンドウが開きます。
    savelayoutbutton.png

    Save___New_layout___Overde_enabled.png
  3. レイアウトに名前を付け、レイアウトのカテゴリーを選択します。
  4. [レイアウトを作成(Create Layout)]を選択して、レイアウトを保存します。保存されたレイアウトは[保存済みレイアウト(Saved Layouts)]セクションに追加され、自身または他のユーザーが再利用できます。
    mceclip2.png

レイアウトを更新する

既存のデザインに変更を加え、それを更新されたレイアウトとして保存することで、レイアウトを簡単に更新できます。

注:元のデザインは、レイアウトを更新すると上書きされます。

レイアウトを更新するには:

  1. デザイナーを起動し、レイアウトをステップとしてデザインします。
  2. ツールバーの[レイアウトを保存(Save Layout)]を選択します。
  3. [レイアウトを保存]ウィンドウで、[既存のレイアウトを更新する(Update an existing layout)]を選択します。[保存済みレイアウト]ウィンドウが表示されます。
    Update_existing_layout-1.png
  4. 更新するレイアウトを選択します。[レイアウトを保存]ウィンドウが再度開きます。

    ヒント:選択したレイアウトを変更する場合は、[レイアウトを変更(Change Layout)]を選択して[保存済みレイアウト]ウィンドウを再度開き、別のレイアウトを選択するか、[削除(Delete)]をクリックしてください。

  5. レイアウトのカテゴリーを更新または適用します。

    ヒント:レイアウトのカテゴリーを選択した場合、デザイナーでそのカテゴリーのレイアウトとして保存しておくと、再度そのカテゴリーを選択したときに、デフォルトのPendoレイアウトや保存済みレイアウトから、そのカテゴリーのおすすめレイアウトを表示することができます。

  6. [レイアウトを更新(Update Layout)]を選択して終了します。更新されたレイアウトは、新しいデザインと新しいカテゴリーが選択された状態で[保存済みレイアウト]ウィンドウに保存され、古いレイアウトは上書きされます。

レイアウトを削除する

Pendo管理者は、任意のカスタムレイアウトを削除できます。レイアウトライブラリでカスタムレイアウトにカーソルを合わせ、ゴミ箱アイコンを選択します。

delete-layout.png

注:レイアウトを削除すると、完全に削除されます。レイアウトが必要な場合は、そのレイアウトを使用する既存のガイドのカスタムレイアウトとして再保存できます。

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