ガイドのレイアウト

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

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

この記事では、レイアウトを作成および更新する方法について説明し、Pendoのデフォルトのレイアウトをそれぞれ見ていきます。

必要なユーザー権限

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

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


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

  • Pendo管理者権限

 

レイアウトを作成する

レイアウトはガイドのステップに適用されます。ガイドを作成するときには、[コンテナの編集(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

注:既存のガイドからカスタムレイアウトを再保存できます。レイアウトページには、削除を取り消すオプションはありません。

 

レイアウトのタイプ

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

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

以下のオプションのいずれかをクリックすると、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