レイアウトは、ガイドの外観と印象を一貫してスタイル設定するのに役立ちます。これにより、管理者は特定のガイドスタイルを使用してガイドのブランディングを管理できます。ガイドレイアウトの例には、バッジでアクティベートされるツールチップ、ユーザーから直接フィードバックを収集する投票とアンケート調査、自動的にアクティベートされるライトボックスやバナーなどがあります。
この記事では、ビジュアルデザインスタジオで利用できるレイアウトと、レイアウトの作成・更新方法について詳しく説明します。
前提条件
カスタムレイアウトを作成または更新するには、次の権限の1つが必要です。
- サブスクリプション管理者
- ガイドコンテンツ編集者
- ガイド作成者
カスタムレイアウトを削除するには、サブスクリプション管理者である必要があります。
レイアウトを作成する
ガイドのスタイルを再利用したい場合は、ガイド作成中にビジュアルデザインスタジオからレイアウトとして保存できます。レイアウトは他のステップに適用したり、ガイド間で再利用したりできます。これはウェブおよびモバイルのガイドの両方に当てはまります。目的のアプリケーションを選択し、ビジュアルデザインスタジオを起動してレイアウトオプションにアクセスしてください。
レイアウトを作成するには：
- ビジュアルデザインスタジオ（Visual Design Studio）を起動し、再利用したいスタイルを使用してガイドをデザインします。
- 完了したら、ツールバーの［レイアウトを保存］を選択します。［レイアウトを保存］ウィンドウが表示されます。
-
ガイド内の選択したステップを保存するか、すべてのステップを保存するかを選択します。
- レイアウトに名前を付け、カテゴリーを選択します。レイアウトは将来の使用のために保存され、新しいガイドを作成する際にそのカテゴリーでフィルタリングすると表示されます。カテゴリの詳細については、「カテゴリーを使用したガイドとレイアウトの管理」を参照してください。
- ［レイアウトを作成（Create layout）］を選択して、レイアウトを保存します。レイアウトはカスタムレイアウトとして保存され、［既存のレイアウト］セクションに追加されます。これにより、他のガイドを作成または編集する際に再利用できます。
注：ガイド内の各ステップを個別に選択し、それぞれのレイアウトを保存することで、各ステップのレイアウトを作成できます。
レイアウトを更新する
既存のデザインに変更を加え、更新されたレイアウトとして保存することで、レイアウトを更新できます。
注：元のデザインは、レイアウトを更新すると上書きされます。
レイアウトを更新するには：
- ビジュアルデザインスタジオ（Visual Design Studio）を起動し、再利用したいスタイルを使用してガイドをデザインします。
-
ツールバーの［レイアウトを保存（Save Layout）］を選択します。
- これにより［レイアウトを保存］ウィンドウが開きます。
- ［既存のレイアウトを更新する］を選択します。
-
更新するレイアウトを選択します。［レイアウトを保存］ウィンドウが再度開きます。
ヒント：選択したレイアウトを変更したい場合は、［レイアウトを変更］を選択して［レイアウトを変更］ウィンドウを再度開き、別のレイアウトを選択するか、［削除］を選択して削除してください。
- 必要に応じてレイアウトカテゴリーを更新します。レイアウトは将来の使用のために保存され、そのカテゴリーでフィルタリングすると表示されます。カテゴリーの詳細については、カテゴリーを使用したガイドとレイアウトの管理を参照してください。
- ［レイアウトを更新（Update Layout）］を選択して終了します。レイアウトはカスタムレイアウトとして保存され、［既存のレイアウト］セクションに追加され、他のガイドを作成または編集するときに再利用できます。古いレイアウトは上書きされます。
レイアウトを削除する
サブスクリプション管理者として、任意のカスタムレイアウトを削除できます。レイアウトライブラリでカスタムレイアウトにカーソルを合わせ、ゴミ箱アイコンを選択します。
注：レイアウトを削除すると、完全に削除されます。レイアウトが必要な場合は、そのレイアウトを使用する既存のガイドのカスタムレイアウトとして再保存できます。
レイアウトのタイプ
Pendoのデフォルトのレイアウトのいずれかを使用することも、各レイアウトの複数の特徴を組み合わせたカスタムレイアウトを作成することもできます。たとえば、投票とアンケート調査を含むライトボックスや、一連のツールチップで構成されるウォークスルーへと誘導するバナーを作成できます。
ライトボックス
ライトボックスは、アプリまたはページの上に表示されるカスタマイズ可能なボックスです。どのようなサイズまたは寸法にもすることができ、テキスト、画像、または動画などのあらゆるタイプのコンテンツを含めることができます。ライトボックスはほぼ何にでも使えますが、一般的なお知らせをする場合に優れたツールとなります。
弊社では、5つのデフォルトのライトボックスレイアウトをご用意しています。
成功を祝うライトボックス
このレイアウトでは、お祝いの言葉を標準的な方法で伝えることができます。メッセージは編集することができます。
ウォークスルーの完了を伝えるライトボックス
このレイアウトは、ウォークスルーを終了し、ユーザーに追加情報を提供する場合に最適です。
カスタマーサクセスマネージャー紹介ライトボックス
このレイアウトは、ユーザーに直接のコンタクトを促してカスタムデモや追加サポートを提供する場合に最適です。
新機能のお知らせライトボックス
このレイアウトではシンプルな方法で、ユーザーに新しい機能やアップデートを確実に伝えられます。
新機能のお知らせ（画像付き）ライトボックス
このレイアウトは上記のものと同様ですが、画像が付加されます。
バナー
バナーの機能はライトボックスと同様ですが、ページの最上部または最下部の横幅全体に沿って表示されます。そのため、ユーザーの画面全体を邪魔せずに重要なメッセージを伝える場合に最適です。
Pendoでは1つのデフォルトのバナーレイアウトをご用意しています。
システム停止バナー
このレイアウトは、メンテナンスのための計画的な停止や不測の事態によるサービスの低下を告知する場合に最適です。システムステータスページへのリンクを貼ると役立ちます。
ツールチップ
ツールチップは、ユーザーに特定の機能を状況に沿って簡潔に説明する場合に使用します。これはページのどこにでも配置できます。特定の要素のそばに配置するには、［コンテナを編集（Edit Container）］ボックスで位置設定を編集します。
Pendoでは、2つのデフォルトのツールチップレイアウトをご用意しています。
コンテキスト内のヘルパーツールチップ
このレイアウトでは、ユーザーに特定の機能をシンプルに説明できます。
ウォークスルーツールチップ
このレイアウトを使用すると、タスクを完了させる方法やアプリのナビゲーション方法をユーザーに示すマルチステップウォークスルーの1つのステップを作成できます。
投票調査
アンケート調査を使用すると、ユーザーからフィードバックを直接簡単に得られます。それには、自由記入用のテキストボックス、数字による評価スケール、または多項選択法を用意します。
Pendoでは、3つのデフォルトの投票とアンケート調査レイアウトをご用意しています。
自由記入式の投票調査
このレイアウトではテキストボックスを使って、ユーザーに自由記入式のフィードバックを提出してもらいます。
数字による投票調査
このレイアウトでは数字による評価スケールを使って、ユーザーにフィードバックを提出してもらいます。
多項選択式の投票調査
このレイアウトでは、複数の定義済みのオプションから項目を選択することで、ユーザーにフィードバックを提出してもらいます。