ガイドコンテンツはビルディングブロックを使用して追加します。この記事では、利用可能なビルディングブロックとその編集方法について説明します。ガイドにビルディングブロックを追加する手順については、「ガイドコンテンツを追加、編集する」を参照してください。
オーバーレイガイドと埋め込みガイドには、次のビルディングブロックを追加できます。
| オーバーレイ | 埋め込み | |
| テキスト | ✔ | ✔ |
| ボタン | ✔ | ✔ |
| 水平線 | ✔ | ✔ |
| 画像 | ✔ | ✔ |
| 動画 | ✔ | ✔ |
| 自由記入式の投票調査 | ✔ | ✘ |
| 「はい/いいえ」の投票調査 | ✔ | ✘ |
| 数字による投票調査 | ✔ | ✘ |
| 多項選択式の投票調査 | ✔ | ✘ |
| コードブロック | ✔ | ✔ |
| タスクリスト | ✔ | ✔ |
ビルディングブロックとして追加されてはいませんが、この記事では、ガイドステップ内で閉じる（X）ボタンを追加、削除、編集する方法も説明しています。閉じるボタンは、オーバーレイガイドと埋め込みガイドの両方に追加できます。
注：日付ビルディングブロックはリソースセンターのお知らせモジュールでのみ表示され、アナウンスが公開された日付を示します。日付は変更できません。詳細については、「お知らせモジュール」を参照してください。
テキスト
ガイドにテキストビルディングブロックを追加すると、「テキストの編集」ウィンドウで、フォーマットやスタイルなどのコンテンツを編集できます。［テーマスタイル（Theme Style）］として［カスタム（Custom）］を選択するかどうかで、使用できるフォーマットとスタイルのオプションが異なります。
- テキスト本文のフォーマットとスタイルの設定オプションについては、この記事の「テキストのフォーマットとスタイル」を参照してください。
- デフォルト状態とホバー状態のリンクの外観をスタイル設定する方法については、この記事の「リンクの外観」を参照してください。
テキストビルディングブロックを使用すると、次のこともできます。
- 基本的なMarkdown構文を使用して、テキストのフォーマットとスタイルを編集する。詳細については、「ガイドのテキストスタイリングのためのMarkdown構文」の記事を参照してください。
- AIを利用して、テキストの長さを変更し、スペルチェックを行い、トーンを変更する。詳細については、この記事の「AIアシスタンス」を参照してください。
- 2つ目のテキスト列を追加するか、テキストビルディングブロックの横に画像またはボタンを含める。詳細については、この記事の「テキストの列と行」を参照してください。
- テキストビルディングブロックのマージンを編集する。ガイドの［テーマスタイル］として［カスタム］を選択すると、テキストビルディングブロックのパディングを編集することもできます。詳細については、この記事の「間隔」を参照してください。
テキストのフォーマットとスタイル
［テキスト編集（Edit Text）］ウィンドウの［テーマスタイル（Theme Style）］、［スタイル（Styles）］、［間隔（Spacing）］セクションで適用されたスタイリングオプションは、テキストビルディングブロック全体に適用されます。テキスト本文の上にタイトルを追加するなど、さまざまなテキスト要素に異なるスタイルを適用するには、別のテキストビルディングブロックを追加します。手順については、この記事の「テキストの列と行」と「ガイドコンテンツを追加、編集する」を参照してください。
テーマスタイル
テキストビルディングブロックのスタイルを編集するには、［段落（Paragraph）］、［サブタイトル（Sub Title）］、［タイトル（Title）］、または［カスタム（Custom）］のオプションがあります。［カスタム］を除いて、スタイルはPendoの管理者ユーザーが設定するガイドテーマによって決まります。［カスタム］はガイドテーマより優先されるため、さらに多くのテキストスタイルオプションを利用できます。ガイドテーマの詳細については、「テーマを使用してガイドのスタイルを管理する」を参照してください。
Markdown構文
テキストのフォーマットとスタイルを編集する場合、［テキストを編集（Edit Text）］ウィンドウでは対応するMarkdown構文が含まれ、ガイドプレビューでは訪問者ビューのテキスト（Markdown構文なし）が同時に更新されます。Markdown構文については、「ガイドのテキストスタイリングのためのMarkdown構文」を参照してください。
標準フォーマットとスタイル
選択するテーマスタイルにかかわらず、次の方法でテキストビルディングブロック内のコンテンツのフォーマットとスタイルを編集できます。
-
テキストを太字、斜体、下線付き、取り消し線付き、ハイパーリンク付きにします。スタイルオプションを選択すると、Markdownの構文がテキストに適用され、スタイルがプレビューにレンダリングされます。
-
箇条書きと番号付きリストを使用します。
-
コンテンツを左揃え、中央揃え、または右揃えになるように編集します。［スタイル（Styles）］セクションを展開して、配置オプションを確認します。
カスタムフォーマットとスタイル
テキストスタイルとして［カスタム（Custom）］を選択すると、さらに多くのスタイルオプションを利用できます。［テキストを編集（Edit Text）］ウィンドウの［スタイル（Styles）］セクションを展開すると、［テキスト（Text）］の下に次のドロップダウンメニューが表示されます。
- ファミリー（Family）：異なるフォントを選択できます。
- 太さ（Weight）：フォントの基本的な太さを設定できます。
- サイズ（Size）：フォントのサイズを選択できます。
- 色（Color）：フォントに別の色を選択できます。16進数、RGB数値、ビジュアルカラーセレクター、またはカラースライダーで設定します。
-
テキスト変換（Text Transform）：テキストの大文字小文字を変換できます。
- 単語の先頭の文字をすべてに大文字にするには、［先頭大文字（capitalize）］を選択します。
- すべての文字を大文字にするには［大文字（uppercase）］を選択します。
- すべての文字を小文字にするには［小文字（lowercase）］を選択します。
- 線の高さ（Line Height）：行の高さをパーセンテージ（%）で編集できます。
- 文字間隔（Letter spacing）：文字の間隔をピクセル（px）単位で編集できます。
リンクの外観
テキストスタイルとして［カスタム（Custom）］を選択し、ガイドのコンテンツにリンクを含める場合、デフォルト状態とカーソルを合わせた状態でリンクのスタイルを変更できます。具体的には、以下の内容を変更できます。
- 太さ（Weight）：リンクテキストの基本的な太さを設定します。
- 色（Color）：リンクテキスト用に異なる色を選択します。アプリケーションのCSSを使用してリンクの色を決定する場合は、［色を継承（Inherit Color）］を選択します。
- テキスト装飾。テキストの下線を追加または削除する。
AIアシスタンス
AIを活用してコンテンツを編集できます。ガイドのライティングアシスタント機能は、Googleの生成AIを活用して、ガイドの作成中にガイドのテキストコンテンツを要約・拡張・改善します。スペル、文法、句読点の誤りをチェックし、選択したトーンに基づいてテキストを修正し、AIを活用して語彙を増やします。
［テキストを編集（Edit Text）］ウィンドウ内のガイドコンテンツの下にある［AIを活用して書く（Write with AI）］（杖）アイコンを選択し、次のいずれかを選択します。
- コンテンツを長くしたり短くしたりする。
- コンテンツのスペルチェックをおこなう。
- コンテンツのトーンを、［プロフェッショナル（Professional）］、［カジュアル（Casual）］、［会話風（Conversational）］、［直接的（Direct）］、［専門的（Expert）］、または［フレンドリー（Friendly）］のいずれかに変更する。
必要に応じて、［元に戻す（Undo）］アイコンを選択してテキストを以前のバージョンに復元するか、［テキストを再生成（Regenerate Text）］アイコンを選択してコンテンツを更新します。［元に戻す］を選択すると、テキストの前のバージョンが復元されます。変更を複数回実施した場合、［元に戻す］を選択する前のテキストに戻るだけで、最初のテキストには復元されません。
テキストの列と行
既存のテキストブロックの上、下、または横に別のテキストブロックを追加できます。テキストブロックの左または右にボタンまたは画像を配置することもできます。ビルディングブロックの列を追加、編集する方法の詳細については、「ガイドコンテンツを追加、編集する」を参照してください。
既存のテキストビルディングブロックの上または下に新しいビルディングブロックを追加するには、既存のテキストビルディングブロックの上または下のスペースにカーソルを合わせ、表示される青いプラス（＋）アイコンを選択します。たとえば、既存のテキスト本文の上に別のテキストブロックを追加して、見出しを付けることができます。
ガイドに2列のテキストを含めるか、既存のテキストビルディングブロックの横に画像またはボタンを追加するには、既存のテキストビルディングブロックにカーソルを合わせ、その左または右にある青いプラス（＋）アイコンを選択します。その後、別のテキストビルディングブロック、画像ビルディングブロック、またはボタンビルディングブロックを追加できます。
1行に2列のテキストがある場合、各列の幅をピクセル（px）単位で調整できます。
間隔
［テキストを編集（Edit Text）］ウィンドウの［間隔（Spacing）］セクションを展開して、テキストブロックの周りのマージンとパディングを編集します。マージンはテキストブロックの外側のスペースを制御し、パディングはテキストブロックの内側のスペースを制御します。テキストスタイルとして［カスタム（Custom）］を選択した場合にのみ、パディングを編集できます。
テキストブロックのマージンを編集する
マージンを編集すると、テキストブロックとガイド（ガイドコンテナ）の端との間のスペース、またはテキストブロックとそれに隣接するビルディングブロックとの間のスペースを追加または削除できます。上下、左右のマージンを個別に編集できます。
テキストブロックのパディングを編集する
テキストスタイルとして［カスタム（Custom）］を選択すると、テキストブロック周りのパディングを編集できます。これにより、テキストとそのコンテナの間のスペースを追加または削除できます。上下、左右のパディングを個別に編集できます。
ボタン
ガイドにボタンビルディングブロックを追加すると、［ボタンを編集（Edit Button）］ウィンドウでボタンのテキスト、スタイル、アクション、間隔、ARIA名を編集できます。ボタンのデザイン、コピー、アクションは、それぞれのボタンに個別に適用されます。
- ボタン内のコピーの編集については、この記事の「ボタンのテキスト」を参照してください。
- ボタンのデザイン編集については、この記事の「ボタンのスタイル」を参照してください。［ボタンのスタイル（Button Style）］として［カスタム］を選択するかどうかで、使用できるスタイル設定オプションが異なります。
- 複合ボタンアクションを含めて、ボタンアクションの選択については、「ガイドのボタンアクション」の記事を参照してください。
- スクリーンリーダー用のボタンにARIAラベル（代替のアクセシブルな名前）を追加する方法については、この記事の「ボタンのアクセシビリティ」を参照してください。
ボタンビルディングブロックを使用すると、次のこともできます。
- ガイドステップ内の1つの行に最大4つのボタンを追加する。ガイドステップ内のボタンの横にテキストブロックまたは画像を追加することもできます。詳細については、この記事の「ボタンレイアウト」を参照してください。
- ボタンビルディングブロックのマージンを編集する。ガイドの［テーマスタイル（Theme Style）］として［カスタム（Custom）］を選択した場合、ボタンビルディングブロックのパディングを編集することもできます。詳細については、この記事の「ボタンの間隔」を参照してください。
注：モバイルガイドの場合のみ、［マルチボタン（Multi Button）］を追加するオプションが利用できます。ウェブガイド内の1つのステップに複数のボタンを追加するには、この記事の「ボタンレイアウト」の手順に従ってください。
ボタンレイアウト
ガイドでは、1行に最大4つのボタンを追加できます。ガイドステップのボタンの横にテキストビルディングブロックまたは画像ビルディングブロックを追加することもできます。既存のボタンの隣にボタン、画像、またはテキストのビルディングブロックを追加するには、既存のボタンにカーソルを合わせ、ボタンの左または右に表示される青いプラス（＋）アイコンを選択します。
ボタンの配置を編集することも可能です。既存のボタンにカーソルを合わせ、表示されるツールバーの配置アイコンを選択します。
［行を編集（Edit Row）］ウィンドウが開き、次の項目について編集ができます。
- 行の周囲の間隔（パディングとマージン）。
- 行内の他のビルディングブロックに対するボタンの水平方向の配置（積み重ね）。
- ボタンの垂直方向の配置（行の上部、中央、または下部）。
行間隔と配置の編集が完了したら、［行を編集］ウィンドウの右下にある［完了（Done）］を選択します。ビルディングブロックの行の編集についての詳細は、「ガイドコンテンツを追加、編集する」を参照してください。
同じ行内にある複数のボタンの順序を変更するには、どれか1つのボタンにカーソルを合わせ、左矢印または右矢印を選択して行内で移動させます。
ボタンのスタイル
ボタンビルディングブロックのスタイルを編集するには、［カスタム（Custom）］、［第1ボタン（Primary Button）］、［第2ボタン（Secondary Button）］、［第3ボタン（Tertiary Button）］のオプションがあります。
［カスタム（Custom）］を除いて、ボタンのスタイルは、Pendoの管理者ユーザーが設定するガイドテーマによって決まります。［カスタム］はガイドテーマより優先されるため、さらに多くのボタンのスタイル設定オプションを利用できます。ガイドテーマの詳細については、「テーマを使用してガイドのスタイルを管理する」を参照してください。
カスタムボタンテキストのスタイル
ボタンのスタイルとして［カスタム（Custom）］を選択すると、さらに多くのスタイルオプションを利用できます。［ボタンを編集（Edit Button）］ウィンドウの［スタイル（Styles）］セクションを展開すると、［テキスト（Text）］の下に次のドロップダウンメニューが表示されます。
- ファミリー（Family）：異なるボタンテキストフォントを選択できます。
- 太さ（Weight）：ボタンのテキストの基本的な太さを設定できます。
- サイズ（Size）：ボタンのテキストフォントのサイズを選択できます。
- 色（Color）：ボタンのテキストフォントに別の色を選択できます。16進数、RGB数値、ビジュアルカラーセレクター、またはカラースライダーで設定します。
-
テキスト変換（Text Transform）：ボタンのテキストの大文字小文字を次のように変換できます。
- 単語の先頭の文字をすべてに大文字にするには、［先頭大文字（capitalize）］を選択します。
- すべての文字を大文字にするには［大文字（uppercase）］を選択します。
- すべての文字を小文字にするには［小文字（lowercase）］を選択します。
- 文字間隔（Letter spacing）：ボタンテキストの文字の間隔をピクセル（px）単位で編集できます。
カスタムボタンのデザイン
ボタンのスタイルとして［カスタム（Custom）］を選択すると、さらに多くのボタンカラーを利用できます。［ボタンを編集（Edit Button）］ウィンドウの［スタイル（Styles）］セクションを展開すると、次の追加オプションが表示されます。
- ［背景（Background）］>［色（Color）］：ボタンの背景色と透明度を変更できます。16進数、RGBA数値、ビジュアルカラーセレクター、または色と透明度のスライダーで設定します。
- ［枠（Border）］>［色（Color）］：ボタンの枠に別の色を選択できます。16進数、RGB数値、ビジュアルカラーセレクター、またはカラースライダーで設定します。
- ［枠（Border）］>［幅（Width）］：ボタンの枠の太さをピクセル（px）単位で設定できます。
- ［枠（Border）］>［半径（Radius）］：ボタンの角丸をピクセル（px）単位で設定できます。
-
［幅（Width）］：ボタンの幅を特定の値に設定できます。
- コンテナの幅に達するまでボタン内のテキストに合わせて自動的にボタンのサイズを変更する場合は、［自動（Auto）］を選択します。
- ［固定（Fixed）］を選択して、ボタンの幅をピクセル（px）で指定します。指定されたボタンの幅に達すると、テキストは改行され、新しい行が形成されます。
カスタムボタンのホバースタイル
ボタンのスタイルとして［カスタム（Custom）］を選択すると、ボタンのホバー状態のスタイルを変更できます。［ボタンを編集（Edit Button）］ウィンドウの［ホバースタイル（Hover Styles）］セクションを展開すると、次の追加オプションが表示されます。
- ［テキスト（Text）］>［色（Color）］：ボタンのホバーテキストのフォントに別の色を選択できます。16進数、RGB数値、ビジュアルカラーセレクター、またはカラースライダーで設定します。
- ［テキスト（Text）］>［太さ（Weight）］：ボタンのホバーテキストの太さを設定できます。
- ［背景（Background）］>［色（Color）］：カーソルを合わせた際のボタンの背景色と透明度を変更できます。16進数、RGBA数値、ビジュアルカラーセレクター、または色と透明度のスライダーで設定します。
- ［枠（Border）］>［色（Color）］：ホバー時のボタンの枠に別の色を選択できます。16進数、RGB数値、ビジュアルカラーセレクター、またはカラースライダーで設定します。
ボタンのテキスト
ボタンのテキストは短く、直接的な表現にすることをお勧めします。
ボタンのテキストを編集するには、［一般（General）］の下にある既存のエントリを選択し、新しいテキストを入力して置き換えます。ボタンのスタイルとして［カスタム］を選択した場合は、ボタンの幅も指定できます。詳細については、この記事の「カスタムボタンの外観」を参照してください。
ボタンのアクセシビリティ
ボタン内のテキストを［ARIAラベル（ARIA Label）］で強化することができます。これはスクリーンリーダーで使用される代替のアクセシブルな名前です。
ボタンアクション
ガイドボタンのアクションでは、［次のステップ（Next Step）］や［ガイドを閉じる（Dismiss Guide）］など、訪問者がボタンを選択したときの動作を定義します。
ボタンアクションの中には、ボタンが選択されると2つのアクションが組み合わさり、複合的に動作するものがあります。たとえば、［ガイドを閉じる（Dismiss Guide）］と［URLリンク（URL Link）］を組み合わせることで、訪問者がボタンを選択するとガイドを閉じた後に新しいページへと誘導できます。
複合アクションを含むすべての可能なボタンアクションの説明については、「ガイドのボタンアクション」を参照してください。閉じる（X）ボタンに関する情報については、この記事の「閉じる（X）ボタン」をご確認ください。
［コンテナを編集（Edit Container）］ウィンドウの［動作（Behavior）］タブからボタンアクションを編集することもできます。詳細については、「オーバーレイガイドのステップ設定を編集する」を参照してください。
ボタンの間隔
ボタンの周囲のマージンを編集するには、［ボタンを編集（Edit Button）］ウィンドウの［スタイル（Styles）］セクションを展開します。マージンはボタンの外側のスペースを制御し、パディングはボタンの内側のスペースを制御します。ボタンのスタイルとして［カスタム（Custom）］を選択した場合にのみ、［パディング（Padding）］を編集できます。
ボタンのマージンを編集する
ボタンのマージンを編集して、ボタンの枠とボタンのビルディングブロックの間のスペースを追加または削除します。上下、左右のマージンを個別に編集できます。
ボタンのパディングを編集する
ボタンのスタイルとして［カスタム］を選択した場合、ボタン内のテキスト周りのパディングを編集できます。この編集により、ボタンのテキストとボタンの枠の間にスペースを追加または削除します。上下、左右のパディングを個別に編集できます。
水平線
ガイドに水平線を追加すると、［水平線を編集（Edit Horizontal Line）］ウィンドウが開きます。
- ［水平線のスタイル（Horizontal Line Style）］ドロップダウンメニューから［水平線（Horizontal Line）］を選択すると、線のスタイルはデフォルトでガイドテーマに定義されているスタイルになります。ガイドテーマの詳細については、「テーマを使用してガイドのスタイルを管理する」を参照してください。
- ［水平線のスタイル］ドロップダウンメニューから［カスタム］を選択すると、線のスタイルを編集できます。
［カスタム］はガイドテーマより優先されるため、次の項目を編集できます。
- ［Line Properties（線のプロパティ）］>［色（Color）］：線に別の色を選択できます。16進数、RGB数値、ビジュアルカラーセレクター、またはカラースライダーで設定します。
- ［Line Properties（線のプロパティ）］>［太さ（Thickness）］：線の太さをピクセル（px）単位で設定できます。
- ［マージン（Margin）］線とガイドステップの端との間、または線とそれに隣接するビルディングブロックの端との間のスペースを追加、削除できます。上下、左右のマージンを個別に編集できます。
- 線の種類（Line Type）：実線（solid）、点線（dotted）、破線（dashed）、または二重線（double line）から選択できます。
画像
画像ビルディングブロックを使用して、ガイドに写真やGIFを追加します。サポートされている画像ファイルの種類は、JPEG、PNG、SVG、GIFです。
ガイドに画像を使用することで、次のことが可能になります。
- 視覚的なヘッダーを追加する。
- プロダクトのスクリーンショットを追加する。
- テキストの横にアイコンを挿入する。
- ワークフローを示すGIFを含める。
ガイドステップに画像を追加した後、次のオプションが選択できます。
- サイズと間隔を設定する。詳細については、この記事の「画像のサイズと間隔」を参照してください。
- 画像と同じ行に列を追加し、その隣にテキスト、ボタン、または別の画像を追加する。詳細については、「画像のレイアウト」を参照してください。
- スクリーンリーダーで使用するために、画像の名前を入力します。詳しくは、この記事の「画像のアクセシビリティ」を参照してください。
画像を追加する
ガイドに画像ビルディングブロックを追加すると、［画像ブロックを編集（Edit Image Block）］ウィンドウで次の操作が可能です。
- Pendoでホストされている画像をアップロードする。［クリックして画像をアップロード（Click to upload image）］を選択し、パソコンで画像を選択します。
- 他の場所でホストされている画像の場合は、［画像のURL（Image URL）］を入力する。
最大画像サイズは30MBです。読み込み時間とガイドのパフォーマンスを良好にするために、5MB未満の画像を推奨します。
画像のサイズと間隔
画像ビルディングブロックに画像を追加すると、画像のサイズをガイドコンテナのサイズに対するパーセンテージで設定するか、画像の解像度に基づいて設定するかを選択できます。
- 画像の相対サイズを変更するために、［塗りつぶし（Fill）］でパーセンテージを編集する。デフォルトは100％です。
- 画像の解像度に合わせて画像を設定するには、トグルを使用して［実際の画像サイズ（Actual Image Size）］をオンにします。
上下、左右の余白を個別に編集して、画像と画像のビルディングブロックの間のスペースを追加または削除できます。左右のマージンを増やすほど、画像は小さくなります。
画像のレイアウト
ガイドの画像の横に列を追加できるため、以下の操作が可能です。
- 2つの画像を並べて配置する。
- 画像の左または右にテキストを追加する。
- 画像の左または右にボタンを追加する。
ガイドステップの画像の横に列を追加するには、既存の画像にカーソルを合わせ、画像の左または右にある青いプラス（＋）アイコンを選択します。利用可能なビルディングブロックの1つを選び、必要に応じて編集します。
画像のアクセシビリティ
スクリーンリーダーに対応させるために、［画像の代替テキスト（Image Alt Text）］の下にアクセシブルな名前を入力できます。
動画
動画のビルディングブロックを使用して、対応するプラットフォームから動画をガイドに埋め込みます。ガイドに埋め込まれた動画は自動再生がオフになっています。
ガイドステップに動画を追加した後、次のオプションが選択できます。
- 動画のサイズとアスペクト比を設定します。詳細については、この記事の「動画のサイズとアスペクト比」を参照してください。
- スクリーンリーダーで使用するために、動画の名前を入力します。詳細については、この記事の「動画のアクセシビリティ」を参照してください。
動画を追加する
ガイドに動画ビルディングブロックを追加すると、［動画ブロックの編集（Edit Video Block）］ウィンドウが表示され、動画プロバイダーを選択して動画URLを入力するように求められます。サポートされている動画プロバイダーと使用可能なURL形式の一覧については、この記事の「サポートされている動画プロバイダー」を参照してください。
サポートされている動画プロバイダー
動画ストリーミングプロバイダーは、通常、Internet Explorer以外のすべてのブラウザをサポートしています。お使いの動画プラットフォームでサポートしているブラウザを確認してください。
モバイルベースのガイドは、YouTube動画のURLのみサポートしています。ウェブベースのガイドは、以下のすべての動画プロバイダーとURLをサポートしています。リストに記載されているプロバイダー以外の動画プロバイダーを使用する場合は、カスタムコードブロックを使用して動画を埋め込むことができます。
| 動画形式 | URLの詳細 |
| Brightcove |
Brightcove URLは次の形式と一致する必要があります。短縮された動画リンクは機能しません。 |
|
Kaltura |
http(s)://cdnapisec.kaltura.com/p/[partner_id]/sp/[service_provider_id]/embedIframeJs/uiconf_id/[…]?iframeembed=true&playerId=[Player_ID]&entry_id=[Video_ID] |
|
Loom |
http(s)://www.loom.com/share[Video ID] |
|
Microsoft Stream (Classic) |
|
|
Microsoft Stream (Sharepoint) |
|
|
Vidyard |
|
| Vimeo |
アドレスバーまたは共有ボタンに表示されているURLを使用します。 |
| Wistia |
アドレスバーまたは［埋め込みと共有（Embed & Share）］リンクの形式を使用します。
|
| YouTube |
これはモバイルガイドでサポートしている唯一の動画形式です。 YouTubeがアドレスバーまたは共有ボタンで提供する次のいずれかの形式を使用します。
|
動画のサイズとアスペクト比
動画のURLを追加する場合、動画のサイズ設定に関して次の2つの追加オプションがあります。
- 動画の幅を設定（Set video width）：動画の幅をピクセル（px）単位で設定できます。
- コンテナの塗りつぶし（Fill Container）：動画の幅をガイドステップコンテナの幅に設定できます。
また、動画のアスペクト比を設定に関して、［16:9］と［4:3］の2つのオプションがあります。
動画のアクセシビリティ
スクリーンリーダーに対応させるために、［動画タイトル（Video Title）］の下にアクセシブルな名前を入力できます。
アンケート調査
ガイドステップに追加できる投票とアンケート調査の種類には、次の4つがあります。
- 自由記入式の投票調査：自由記入式のテキスト回答を収集するために使用します。
- 「はい/いいえ」の投票調査：簡単な質問に対する二択の回答を収集するために使用します。
- 数字による投票調査：訪問者から10段階での評価を収集するために使用します。デフォルトのスケールは1（最悪）から5（最高）に設定されています。
- 多項選択式の投票調査：ドロップダウンリストまたはラジオボタンのリストで表示される複数の選択肢の中から1つを選択するようユーザーに促すために使用します。
ガイドに投票とアンケート調査を追加すると、その投票とアンケート調査のタイプに必要な個々のビルディングブロックが追加され、それらを個別に編集できます。
- 投票とアンケート調査の質問のテキストビルディングブロック。詳細については、この記事の「質問テキスト」を参照してください。
- 訪問者が自由記入式の投票調査に回答を入力するための自由記入式のフィールド。自由記入式のフィールドの編集については、この記事の「自由記入式のフィールド」を参照してください。
- 「はい/いいえ」の投票調査の「はい」と「いいえ」のボタン。必要に応じてこれらのボタンのテキストとスタイルを編集できます。手順については、この記事の「投票調査のボタン」を参照してください。
- 数字による投票調査の1から5までの段階。必要に応じて、スケールの数字やラベルを追加または削除できます。詳細と手順については、この記事の「数字による選択肢」を参照してください。
- 多項選択式の投票調査のドロップダウンメニュー。オプションを追加、削除し、必要に応じてラジオボタンとして表示することができます。詳細については、この記事の「多項選択式の回答」を参照してください。
- ガイドにまだコンテンツがない場合、自由記入式の投票調査、数字による投票調査、または多項選択式の投票調査の［送信（Submit）］ボタンが自動的に追加されます。必要に応じて、ボタンのテキスト、スタイル、アクションを編集できます。手順については、この記事の「投票調査のボタン」を参照してください。
注意：公開後に投票とアンケート調査のビルディングブロックを編集すると、そのビルディングブロックの以前の投票とアンケート調査のデータはすべて失われます。履歴データを保持するために、複製したガイドで投票ビルディングブロックを編集することを強くお勧めします。
質問テキスト
投票とアンケート調査の質問は削除しないでください。投票とアンケート調査の質問がない場合、投票とアンケート調査への回答は送信時に収集されません。
投票とアンケート調査の質問を編集するには、質問のテキストを選択します。［テキストを編集（Edit Text）］ウィンドウが開き、ガイド内のテキストブロックを編集する場合と同じオプションが利用できます。質問に問題が無ければ、［テキストを編集］ウィンドウの右下にある［完了（Done）］を選択します。
詳細については、この記事の「テキストのフォーマットとスタイル」を参照してください。
自由記入式のフィールド
自由記入式の投票調査を編集するには、テキストフィールドを選択し、編集アイコンを選択します。［自由記入式を編集（Edit Open Text）］ウィンドウが開きます。
テキストのスタイルオプション
標準として、テキストフィールドボックス内のテキストに対して次の項目を編集できます。
- ヘルパーテキスト（Helper Text）：回答者が質問を理解して回答しやすくするために、テキストフィールド内のプロンプトまたはヒントテキストを編集できます。
- ヘルパーテキストの色（Helper Text Color）：ヘルパーテキストの色と透明度を編集できます。16進数、RGBA数値、ビジュアルカラーセレクター、または色と透明度のスライダーで設定します。
- 幅（Width）：テキストフィールドボックスの幅を、コンテンツブロック全体の幅のパーセンテージ（%）として編集できます。
- 高さ（Height）：テキストフィールドボックスの高さをピクセル（px）単位で編集できます。
- 背景色（Background Color）：テキストフィールドボックスの色と透明度を編集できます。16進数、RGBA数値、ビジュアルカラーセレクター、または色と透明度のスライダーで設定します。
- ［テキスト（Text）］>［ファミリー（Family）］：テキストフィールドボックス内のヘルパーテキストのフォントに別のフォントを選択できます。
- ［テキスト（Text）］>［太さ（Weight）］：テキストフィールドボックス内のヘルパーテキストの基本的な太さを設定できます。
- ［テキスト（Text）］>［サイズ（Size）］：テキストフィールドボックス内のヘルパーテキストのフォントサイズを選択できます。
- ［テキスト（Text）］＞［色（Color）］：訪問者がテキストフィールドボックスに入力したテキストに別の色を選択できます。16進数、RGB数値、ビジュアルカラーセレクター、またはカラースライダーで設定します。
テキストフィールドボックス内のテキストの間隔オプションを表示するには、［さらに表示（Show more）］メニューを展開します。
テキストの間隔オプション
［さらに表示］を選択して、［その他のテキストスタイル（Additional Text Styles）］を表示します。ここでは、次の項目を編集できます。
- 線の高さ（Line Height）：テキストフィールドボックスに入力されたテキストの行間隔を編集できます。最大200%で、行の高さがダブルスペースに設定されます。
- 文字間隔（Letter Spacing）：テキストフィールドに入力されたテキストの文字間隔をピクセル（px）単位で編集できます。
枠のスタイル
［さらに表示］を選択して、［枠（Border）］のスタイル設定オプションを表示します。ここでは、次の項目を編集できます。
- ［枠（Border）］>［色（Color）］：テキストフィールドボックスの枠の色と透明度を編集できます。16進数、RGBA数値、ビジュアルカラーセレクター、または色と透明度のスライダーで設定します。
- ［枠（Border）］>［幅（Width）］：テキストフィールドボックスの枠の太さをピクセル（px）単位で設定できます。
- ［枠（Border）］>［半径（Radius）］：テキストフィールドボックスの角丸をピクセル（px）単位で設定できます。
マージン
［さらに表示］を選択して、［マージン（Margin）］オプションを表示します。ここでは、テキストフィールドボックスの上下、左右の余白をピクセル（px）単位で個別に編集できます。デフォルトでは、テキストフィールドボックスの上部と下部に10pxのマージンがあります。
数字による選択肢
［数字による投票調査（Number Scale Poll）］のスケールを編集するには、数値が付いたスケールを選択し、編集アイコンを選択します。［数字による選択肢を編集（Edit Number Scale）］ウィンドウが開き、デフォルトで［コンテンツ（Content）］タブが開きます。
［数字による選択肢を編集］ウィンドウから、以下の操作ができます。
- スケール内に含まれるオプションの数字を編集する。詳細については、この記事の「スケールの数字」を参照してください。
- スケール内の数字に割り当てられたラベルを編集する。詳細については、この記事の「スケールのラベル」を参照してください。
- スケール内の数字に割り当てられたラベルを非表示にする。詳細については、この記事の「スケールのラベル」を参照してください。
- 数字とラベルのスタイルを編集する。詳細については、この記事の「スケールのスタイル」を参照してください。
数字による選択肢の間隔と配置を編集することもできます。スケールの数字の上にカーソルを合わせ、表示されるツールバーの配置アイコンを選択します。［行の編集（Edit Row）］ウィンドウが開き、数字による選択肢周りの間隔と、水平、垂直の配置を編集できます。詳細については、この記事の「スケールの間隔と配置」を参照してください。
スケールの数字
デフォルトのスケールには1から5までの数字が含まれていますが、0から10までの任意の数字を選択できます。［数字による選択肢の編集（Edit Number Scale）］ウィンドウの［コンテンツ（Content）］タブを開き、下部のドロップダウンメニューを使用して、スケールの最小値（［min］）と最大値（［max］）を設定します。
スケールのラベル
デフォルトのスケールでは、1をひどい、5をすばらしいとラベル付けしています。「数値スケールの編集」ウィンドウの「コンテンツ」タブから、これらのラベルを削除、編集、間の数値にラベルを追加、またはスケールに追加した数値にラベルを追加できます。
スケール内の数字に割り当てられたラベルを非表示にすることもできます。スケール項目の上にある［ラベルを表示（Show Labels）］トグルを使用して、訪問者に対してスケールの数字のみを表示し、関連するラベルは表示しないようにします。
スケールのスタイル
スケールの数字とラベルのスタイルを編集するには、［数字による選択肢を編集］ウィンドウの［スタイリング（Styling）］タブを開きます。ここから、次の項目を編集できます。
- ［評価ラベル（Rating Labels）］＞［フォントサイズ（Font Size）］：評価ラベルのフォントサイズを編集できます。
- ［評価ラベル（Rating Labels）］＞［色（Color）］：評価ラベルの色を編集できます。16進数、RGB数値、ビジュアルカラーセレクター、またはカラースライダーで設定します。
- ［数字（Numbers）］＞［フォントサイズ（Font Size）］：評価数字のフォントサイズを編集できます。
- ［数字（Numbers）］＞［間隔（Space Between）］：数字間のスペースをピクセル（px）で編集できます。
- ［数字（Numbers）］＞［フォントの色（Font Color）］：評価数字の色を編集できます。16進数、RGB番号、またはビジュアルカラーセレクターで設定します。
- ［数字（Numbers）］＞［背景色（Background Color）］：数字の背後にあるボックスの色と透明度を編集できます。16進数、RGBA数値、ビジュアルカラーセレクター、または色と透明度のスライダーで設定します。
- ［ホバー時の数字（Numbers Hover）］＞［フォントサイズ（Font Size）］：評価数字にカーソルを合わせたときの色。16進数、RGB数値、ビジュアルカラーセレクター、またはカラースライダーで設定します。
- ［ホバー時の数字（Numbers Hover）］＞［背景色（Background Color）］：数字にカーソルを合わせたときの背景色。16進数、RGB数値、またはビジュアルカラーセレクターで設定します。
スケールの間隔と配置
スケールの数字の上にマウスを合わせ、表示されるツールバーの配置アイコンを選択します。［行を編集（Edit Row）］ウィンドウが開きます。
ここから、数字による選択肢の間隔と配置を編集できます。行の編集についての詳細は、「ガイドコンテンツを追加、編集する」を参照してください。編集が完了したら、［行を編集］ウィンドウの右下にある［完了（Done）］を選択します。
多項選択式の回答
［多項選択式の投票調査（Multi Choice Poll）］内の回答を編集するには、投票調査の選択肢から選択し、編集アイコンを選択して編集します。［多項選択式の投票調査を編集（Edit Multi Choice Poll）］ウィンドウが開き、デフォルトで［コンテンツ（Content）］タブが開きます。
［多項選択式の投票調査を編集］ウィンドウから、次の操作が可能です。
- 選択可能な回答の数字とコンテンツを編集する。詳細については、この記事の［多項選択式の回答を編集（Edit multi-choice answers）］を参照してください。
- 回答をドロップダウンリストとして表示するか、ラジオボタンとして表示するかを選択する。デフォルトはドロップダウンリストです。詳細については、この記事の「多項選択式のスタイル」を参照してください。
- 投票調査における回答のスタイルを編集する。詳細については、この記事の「多項選択式のスタイル」を参照してください。
また、多項選択式の回答の間隔や配置を編集することもできます。ドロップダウンメニューまたはラジオボタンにカーソルを合わせ、表示されるツールバーの配置アイコンを選択します。［行を編集］ウィンドウが開き、回答周りの間隔や水平方向、垂直方向の配置を編集できます。詳細については、この記事の「多項選択式の間隔と配置」を参照してください。
多項選択式の回答を編集する
［多項選択式の投票調査を編集（Edit Multiple Choice Poll）］ウィンドウの［コンテンツ（Content）］タブから、候補となる回答（選択肢）を追加、削除、編集します。
選択肢を追加するには、［＋選択肢を追加（+ Add Choice）］を選択し、回答を入力します。選択肢のテキストを編集するには、テキストを選択し、別の回答に置き換えます。
選択肢を削除するには、削除する回答の右端にあるゴミ箱アイコンを選択します。
多項選択式のスタイル
多項選択式の投票調査では、デフォルトで回答（選択肢）がドロップダウンリストに表示されます。このスタイルを維持することを選択した場合、以下の項目を編集できます。
- フォントサイズ（Font Size）：ドロップダウンリスト内のテキストサイズを編集できます。
- フォントの色（Font Color）：ドロップダウンリストのテキストの色を編集できます。16進数、RGB数値、ビジュアルカラーセレクター、またはカラースライダーで設定します。
- 背景色（Background Color）：ドロップダウンリストの色と透明度を編集できます。16進数、RGBA数値、ビジュアルカラーセレクター、または色と透明度のスライダーで設定します。
- 高さ（Height）：ドロップダウンリストの高さを編集できます。ピクセル（px）単位で設定します。
-
枠（Border）：ドロップダウンリストの周囲の線を編集できます。トグルを使用して、ドロップダウンメニューの枠を含めるか、または削除します。枠を含めると、以下の項目を編集できます。
- 色（Color）：ドロップダウンリストの枠の色。16進数、RGB数値、ビジュアルカラーセレクター、またはカラースライダーで設定します。
- 幅（Width）：ドロップダウンリストの枠の幅。ピクセル（px）単位で設定します。枠を使用しないことも選択できます。
- 半径（Radius）：ドロップダウンリストの枠の角丸。ピクセル（px）単位で設定します。
多項選択式の投票調査における選択肢のスタイルをラジオボタンに変更するには、［多項選択式の投票調査を編集（Edit Multiple Choice Poll）］ウィンドウの［スタイル設定（Styling）］タブを開き、［表示（Display）］ドロップダウンメニューから［ラジオボタン（Radio Button）］を選択します。
その後、必要に応じて次の項目を編集します。
- フォントサイズ（Font Size）：ラジオボタンのテキストサイズを編集できます。
- フォントの色（Font Color）：ラジオボタンのテキストの色を編集できます。16進数、RGB数値、ビジュアルカラーセレクター、またはカラースライダーで設定します。
- 間隔（Space Between）：選択肢間のスペースを編集できます。ピクセル（px）単位で設定します。
多項選択式の間隔と配置
選択肢の上にマウスを合わせ、表示されるツールバーの配置アイコンを選択します。［行を編集（Edit Row）］ウィンドウが開きます。
ここから、多項選択式の投票調査の間隔や配置を編集できます。行の編集についての詳細は、「ガイドコンテンツを追加、編集する」を参照してください。編集が完了したら、［行を編集］ウィンドウの右下にある［完了（Done）］を選択します。
投票調査のボタン
投票調査はボタンを通じてガイド分析に送信されます。投票調査のボタンのテキスト、スタイル、アクションを編集できます。
「はい/いいえ」ボタン
「はい/いいえ」ボタンは、ガイドに「はい/いいえ」の投票調査を追加すると自動的に含められます。「はい/いいえ」ボタンを削除しないでください。「はい/いいえ」ボタンの1つを削除すると、投票調査全体が削除されます。
「はい/いいえ」の投票調査ボタンのテキストを編集するには、編集するボタンを選択し、この記事の「ボタン」セクションの手順に従って、ボタンのテキスト、スタイル、アクセシビリティラベルを編集します。
「はい/いいえ」の投票調査ボタンのデフォルトアクションは［すべての投票を送信＋ガイドを進める（Submit All Polls + Advance Guide）］です。「はい」と「いいえ」のボタンアクションは両方とも次のいずれかである必要があります。
- すべての投票を送信＋ガイドを進める（Submit All Polls + Advance Guide）（デフォルト）
- すべての投票調査を送信 + ガイドを進める
送信ボタン
ガイドの空のステップに自由記入式の投票調査、数字による投票調査、または多項選択式の投票調査を追加すると、［送信（Submit）］ボタンが自動的に含められます。デフォルトの［送信］ボタンのアクションは、次のいずれかです。
- すべての投票を送信＋ガイドを進める（Submit All Polls + Advance Guide）（デフォルト）
- すべての投票調査を送信 + ガイドを進める
［送信］ボタンを編集するには、ボタンを選択し、この記事の「ボタン」セクションの手順に沿って操作してください。
カスタムコード
ユーザーが技術者で、ガイドのProサブスクリプションをお持ちの場合、コードブロックを使用してガイドにカスタムコンテンツや動作をコーディングすることができます。ガイド内の1つのステップに対してコードブロックを1つ追加することができます。
ガイドのステップにコードブロックを追加すると、［コードを編集（Edit Code）］ウィンドウで、コードを含むガイドステップが表示されたときに実行されるHTML、CSS、またはJavaScriptコードを入力できます。コードブロックの詳細については、「コードでガイドをカスタマイズする」 を参照してください。
タスクリスト
ガイドのProサブスクリプションをお持ちで、Pendoエージェントのバージョンが2.258.0以上の場合、ガイドのシーケンスをタスクリストのステップとして訪問者に表示できます。タスクリストは進捗を追跡し、完了したステップ（ガイド）の数を訪問者に伝えます。これは、ユーザーのガイドや進捗の追跡が効果的な、コンテキストに応じたオンボーディングフロー、チュートリアル、その他のアプリ内体験に役立ちます。
タスクリストの各ステップはガイドです。ガイドにタスクリストを追加すると、［タスクリストを編集（Edit Task List）］ウィンドウで次の操作が可能です。
- タスクリストのタイトルを編集する。詳細については、この記事の「タスクリストのタイトル」を参照してください。
- ガイドをタスクリストの項目として追加し、論理的な順序で整理することで、体系的な学習やタスクの完了を促進する。詳細については、この記事の「タスクを追加する」を参照してください。
- 訪問者がタスクリストのすべてのタスクを完了したときに、タスクリストの代わりにフォールバックテキストを追加する。詳細については、この記事の「フォールバックテキストを追加する」を参照してください。
- アプリケーションのデザインに合わせてタスクリストの外観をカスタマイズする。詳細については、この記事の「タスクリストのスタイル」を参照してください。
タスクリストのタイトル
タスクリストのテキストを選択して編集します。［テキストを編集（Edit Text）］ウィンドウが開き、ガイド内のテキストブロックを編集する場合と同じオプションが利用できます。詳細については、この記事の「テキストのフォーマットとスタイル」を参照してください。
タスクを追加する
空のタスクリストブロックを選択し、編集アイコンを選択して編集します。［コンテンツ（Content）］と［スタイル設定（Styling）］の2つのタブで構成される［タスクリストを編集（Edit Task List）］ウィンドウが開きます。
タスクは、［タスクリストを編集］ウィンドウの［コンテンツ］タブから追加されます。最初のタスクを追加するには、［ガイドを選択（Select a guide）］ドロップダウンメニューからガイドを選択し、ガイドのタスクリストに表示するテキストを入力します。
さらにタスクを追加するには、［+ ガイドを追加（+ Add guide）］を選択し、［ガイドを選択］ドロップダウンメニューから別のガイドを選択し、ガイドのタスクリストに表示するテキストを入力します。
タスクリストの項目を並べ替えるには、タスクカードの左上にある3つの点を選択し、タスクリストの上下にドラッグします。
フォールバックテキストを追加する
訪問者がリスト内のすべてのタスクを完了したときに、タスクリストの代わりにテキストを追加できます。［フォールバックテキスト（Fallback text）］セクションを展開して、訪問者に表示するテキストを入力します。
タスクリストのスタイル
タスクリストのスタイル設定を編集するには、［タスクリストを編集］ウィンドウの［スタイル設定］タブを開きます。ここから、次の項目を編集できます。
プログレスアイコンを編集する
プログレスアイコンは、各タスクリスト項目の左側に表示される箇条書きのような役割を果たします。空のプログレスアイコンと塗りつぶしのプログレスアイコンの色を選択できます。これらの色は、16進数、RGB数値、ビジュアルカラーセレクター、またはカラースライダーで設定します。
プログレスバーを編集する
プログレスバーはガイドステップのタスクリストの下にあります。プログレスバーの背景色と塗りつぶし色を選択できます。これらの色は、16進数、RGB数値、ビジュアルカラーセレクター、またはカラースライダーで設定します。
また、<と>の記号の外側にあるラベルの文言を変更することもできます。たとえば、「タスクリスト項目の50%が完了」を「オンボーディングタスクの50%が完了」のように、より具体的なラベルに変更する場合です。ラベルテキストをデフォルトに戻すには、［ラベルをリセット（Reset Label）］を選択します。
警告：<と>の記号内のテキストは変更しないでください。
テキストスタイルを編集する
タスクリスト項目のデフォルトテキストとホバーテキストのスタイルを変更できます。
［デフォルト（Default）］テキストのスタイルを編集するオプションには、以下のものがあります。
- ファミリー（Family）：リスト項目のデフォルトテキストのフォントを選択できます。
- 太さ（Weight）：リスト項目のデフォルトテキストの基本的な太さを設定できます。
- サイズ（Size）：リスト項目のデフォルトテキストのフォントサイズを選択できます。
- 色（Color）：リスト項目のデフォルトテキストに別の色を選択できます。16進数、RGB数値、ビジュアルカラーセレクター、またはカラースライダーで設定します。
- テキスト装飾（Text Decoration）：リスト項目のデフォルトテキストとその下のサブタイトルテキストの下線を追加、削除できます。
- 間隔（Space Between）：タスクリストの項目の間隔を編集できます。
- 文字間隔（Letter spacing）：リスト項目のデフォルトテキストの文字間隔を編集できます。
ホバーテキストのスタイルを編集するオプションには、次のものがあります。
- 太さ（Weight）：リスト項目のホバーテキストの基本的な太さを設定できます。
- 色（Color）：リスト項目のホバーテキストに別の色を選択できます。16進数、RGB数値、ビジュアルカラーセレクター、またはカラースライダーで設定します。
- テキスト装飾（Text Decoration）：リスト項目のホバーテキストとその下のサブタイトルテキストの下線を追加、削除できます。
サブタイトルテキストを編集する
サブタイトルは、タスクリストの各ステップの下に表示されます。<と>記号の外側のサブタイトルの文言を変更できます。たとえば、「ステップ」を「タスク」に変更して「2つのタスクのうち1つを完了しました」という文言にする場合です。サブタイトルのテキストをデフォルトに戻すには、［サブタイトルのリセット（Reset Subtitle）］を選択します。
警告：<と>の記号内のテキストは変更しないでください。
閉じる（X）ボタン
オーバーレイガイドと埋め込みガイドの両方について、ビジュアルデザインスタジオ（Visual Design Studio）内の［コンテナを編集（Edit Container）］ウィンドウの［スタイリング（Styling）］タブから閉じる（X）ボタンを追加または削除できます。手順については、「オーバーレイガイドのステップ設定を編集する」または「埋め込みガイドを作成する」を参照してください。
閉じるボタンをガイドに含めると、ビジュアルデザインスタジオ（Visual Design Studio）内でビルディングブロックを編集するのと同じように編集できます。ガイド内の閉じるボタンの場所から［X］アイコンを選択し、［閉じるボタンのスタイル（Close button style）］ドロップダウンメニューから［カスタム（Custom）］を選択して、以下を編集します。
- 色（Color）：閉じるボタンアイコンのデフォルトの色を、16進数、RGB数値、ビジュアルカラーのセレクターまたはスライダーで設定します。
- カーソルを合わせた時の色（Hover Color）：訪問者が閉じるボタンアイコンの上にマウスを置いたときの色を、16進数、RGB数値、ビジュアルカラーのセレクターまたはスライダーで設定します。
- パディング（Padding）：閉じるボタンアイコンとその境界線の間のスペースを設定します。上下、左右のパディングを個別に編集できます。
- マージン（Margin）：閉じるボタンアイコンの境界線と、ガイドステップの端に最も近いアイコンの両端との間のスペースを設定します。上下、左右のマージンを個別に編集できます。
- アライメント（水平）。閉じるボタンアイコンがガイドステップの左側または右側に配置されているかどうか。