ビルディングブロックは、ガイドにコンテンツを追加し、テキスト、ボタン、画像、投票とアンケート調査、埋め込み動画を簡単に追加し、フォーマットを設定するために使用します。利用可能なテーマを使用して、テキストとボタンのビルディングブロックのスタイルを事前に設定できます。詳細については、 テーマを使用してガイドのスタイルを管理するを参照してください。一連のビルディングブロックを一貫して使用する場合は、レイアウトとして保存します。詳細については、ガイドレイアウトを使用するを参照してください。
要件
- ビジュアルデザインスタジオ（Visual Design Studio）
- ガイドコンテンツ編集者またはガイドコンテンツ作成者のユーザーの役割、またはガイドの作成/編集のカスタム権限
- いくつかのビルディングブロックには、エージェントバージョンの要件があります。
ビルディングブロックを追加する
ヒント：MacではOptionキーを長押し、WindowsではAltキーを長押しすると、現在のすべてのビルディングブロックとその境界ボックスが表示されます。
1. ビジュアルデザインスタジオでガイドを開き、ガイドステップを表示します。
2. 空白のステップがある場合は、選択してコンテンツを追加します。
すでにステップにコンテンツがある場合：
- 既存のビルディングブロックの上または下にカーソルを合わせて、新しい行を追加します。
- テキスト、ボタン、または画像のビルディングブロックの左または右にカーソルを合わせて、新しい列を追加します。
3. メニューからビルディングブロックの種類を選択します。
4. 既存のビルディングブロックを選択して編集メニューを開き、変更を加えます。
行とブロックのフォーマットを設定する
ビルディングブロックは、新しい行を追加することで垂直方向に、または新しい列を追加することで水平方向にガイドに追加できます。ガイドステップでビルディングブロックを配置および編集するために、いくつかのフォーマットオプションが用意されています。
行のフォーマット設定
［行を編集（Edit Row）］をクリックすると［行を編集］メニューが開き、背景色、パディング、マージン、および配置を設定できます。配置は、コンテンツを行全体で横方向に、または同じ行のコンテンツに対して垂直方向に配置します。
［複製（Duplicate）］は行全体のクローンを作成し、同じ内容の新しい隣接行を作成します。これは、ブロック内のコンテンツに変更を加えている場合でも、ビルディングブロックで使用されているスタイル設定を複製する場合に便利です。
［行の配置（Row positioning）］により、行全体を上下に移動させ、現在あるコンテンツと入れ替えます。ビルディングブロックの順序を簡単に調整できるため、さまざまなレイアウトを試して最適なデザインを見つけることができます。
ブロックのフォーマット設定
［ビルディングブロックを編集（Edit Building Block）］では、ビルディングブロックの編集メニューを開き、コンテンツとスタイルの設定を編集できます。ほとんどの場合、ビルディングブロックを選択することでこのメニューに直接アクセスできますが、動画などの一部のビルディングブロックでは、選択しても編集メニューが開かず、コンテンツを再生したり、他のネイティブな動作をしたりする場合があります。
［複製（Duplicate）］では、行の上限にまだ達していない場合に、テキスト、ボタン、および画像のビルディングブロックを同じ行に複製できます。これにより、そのビルディングブロックの種類の列を追加するのと同様に、選択したコンテンツが同じ行に複製されます。
［削除（Delete）］は、そのビルディングブロックを完全に削除します。ビルディングブロックを削除する際には注意してください。警告モーダルは表示されず、元に戻すボタンもありません。
［列の配置（Column positioning）］によりビルディングブロックが左右に移動し、同じ行の隣のコンテンツと入れ替えることができます。ビルディングブロックを移動できない場合は、矢印がグレーアウトし、選択できません。列の配置は、テキスト、ボタン、画像のブロックでのみ設定可能です。
ビルディングブロックの種類
- テキスト
- ボタン
- 水平線
- 日付ブロック
- 画像
- 自由記入式の投票調査
- 「はい/いいえ」の投票
- 数字による投票調査
- 多項選択式の投票調査
- 動画
- コードブロック
テキスト
テキストブロックで使用できるMarkdownは制限されており、テキストとコンテナを対象とした追加のスタイルオプションがあります。テキストブロックは、サポートしているMarkdownを示すフィラーテキストを読み込みます。［スタイル（Styling）］メニューで適用されるスタイルオプションは、テキストブロック全体に適用されます。タイトルや段落など、異なるテキスト要素に異なるスタイルを適用するには、別のテキストブロックを作成します。
同じ行の［列を追加（Add Column）］を選択して別のテキストのビルディングブロックを選ぶと、2列のテキストを並べて配置できます。テキストのビルディングブロックの隣にボタンや画像を配置することもできます。テキストのビルディングブロックが別のビルディングブロックの隣にある場合、個々のビルディングブロックの幅を設定できます。設定しない場合は、デフォルトの幅はコンテナの幅になります。
WYSIWYGコントロールやマークダウンを使用して、テキスト内のスタイルを設定できます。スタイルオプションを選択すると、マークダウン構文がテキストに適用され、スタイルがプレビューにレンダリングされます。サポートされているマークダウンスタイルについては、ガイドのテキストスタイリングのためのMarkdown構文を参照してください。
サポートされているMarkdown
- **太字**
- *斜体* または _斜体_
- ++下線++
- --取り消し線--
- ［リンク］(https://www.pendo.io/)
- 1. 順序付きリスト
2. 項目2
3. 項目3 - -順序付けられていないリスト
-項目2
-項目3
*順序付けられていないリスト
*項目2
*項目3
+順序付けられていないリスト
+項目2
+項目3 - {color: #ec2059}個別の色付きテキスト{/color}
| テキストブロックのスタイル設定オプション | 例 |
| この例では、テキストに太字を適用しています。 | |
| テキストブロックは、テーマを使ってタイトル、サブタイトル、段落のスタイルを適用できます。［カスタム（Custom）］では、テキストブロック全体に適用されるすべてのスタイルと間隔のオプションを利用できます。 | |
| テキストのビルディングブロックの配置、リンク形式、間隔は、［テキストを編集（Edit Text）］メニューから設定できます。 |
ガイドのライティングアシスタントでガイドのコンテンツを改善する
ガイドのライティングアシスタント機能は、Googleの生成AIを活用して、ガイドの作成中にビジュアルデザインスタジオでガイドのテキストコンテンツを要約・拡張・改善します。スペル、文法、句読点の誤りをチェックし、選択したトーンに基づいてテキストを修正し、AIを活用して語彙を増やします。
- テキストのビルディングブロックで［編集（Edit）］を選択します。
- テキストボックスの下にある杖のアイコンを選択すると、ガイドのライティングアシスタントが表示されます。
- ［スクリプトウィザード（Script Wizard）]で、テキスト変更のオプションを選択します。
- ［トーンを変更（Change Tone）］で、テキストのトーン変更のオプションを選択します。
- テキストを変更前のバージョンに戻したい場合は、［元に戻す（Undo）］選択します。コンテンツを更新したい場合は、［更新（Refresh）］を選択します。
注：［元に戻す］を選択すると、テキストの直前のバージョンが復元されます。変更を複数回実施した場合、［元に戻す］を選択する前のテキストに戻るだけで、最初のテキストには復元されません。
ボタン
ボタンのビルディングブロックは、［次のステップ（Next Step）］や［閉じる（Dismiss）］などのボタンアクションをトリガーできる単一のボタンをガイドに追加します。テキスト、ボタン、画像などのビルディングブロックの横に、新しいボタンを追加できます。行には最大4つのボタン、またテキストやイメージのビルディングブロックの隣には1つのボタンを追加できます。
各ボタンのスタイル、ボタンのテキスト、アクションを個別に選択できます。
ボタンのスタイル
ボタンは、一次、二次、三次のスタイルを使用して、ガイドテーマからデザインを素早く取り込むことができます。また、ユーザーがゼロからガイドを構築できる場合は、カスタムスタイルを使用することもできます。
スタイルには、ボタンに使用できるすべてのデザインオプションが含まれています。テーマを使用している場合、オプションはマージンのみです。
カスタムスタイル設定
- テキスト
- 背景
- 枠
- 幅
- マージン
- パディング（Padding）
- テキスト、背景、枠のホバースタイル
ボタンのテキスト
［一般（General）］セクションには、ボタンのテキストフィールドが含まれています。入力されたテキストは、ボタンの中に表示されます。ボタンの幅が［自動（Auto）］に設定されている場合、ボタンはガイドコンテナの幅に達するまで広がります。ボタンコンテナが［固定（fixed）］に設定されている場合、テキストは改行され、ボタンの高さが高くなります。ボタンのテキストは、短く直接的な言葉にすることをお勧めします。
アクション
ガイドのボタンアクション（Guide Buttons Actions）は、ユーザーがボタンを選択したときの動作を設定します。最も一般的な使用例で利用できるアクションが多数あります。
利用可能なボタンアクション
- ガイドを閉じる（Dismiss Guide）
- 次のステップ（Next Step）
- すべての投票を送信＋ガイドを進める（Submit All Polls + Advance Guide）
- URLリンク（URL Link）
- ガイドの起動（Launch Guide）
- 前のステップ（Previous Step）
- ガイドのスヌーズ（Snooze Guide）
- ステップに移動（Go to Step）
ボタンアクションの中には、ボタンが選択されると2つのアクションが組み合わさり、複合的に動作するものがあります。たとえば、［ガイドを閉じる］と［URLリンク］を組み合わせて使用すると、ガイドを閉じた後にユーザーを新しいページへと誘導できます。
日付ブロック
日付ブロックは、お知らせガイドでガイドの公開日を表示するためにのみ使用されます。日付は変更できません。
水平線
水平線を使用して、ガイド内のテキストと画像を区切ります。
線のスタイル設定
線のスタイルをお好みの値に設定し、終了したら［適用（Apply）］を選択します。
画像
画像のビルディングブロックは、ガイドに写真やGIFを追加するために使用します。画像をアップロードしてPendoでホストすることも、ご自分でホストしているコンテンツのURLを追加することもできます。読み込み時間を短縮し、最適なガイドパフォーマンスを実現するために、ファイルサイズは5MB以下を推奨します。サイズ上限は30MBです。
画像は、人目を引くヘッダー、プロダクトのスクリーンショット、テキストの横にあるアイコン、新しいワークフローを示すGIFなどに使用できます。［列を追加（Add Column）］を使用すると、2つの画像、画像とテキスト、または画像とボタンを同じ行に並べて配置できます。
サポートされているファイル形式
- .jpeg
- .png
- .svg
- .gif
画像のスタイル設定
画像をアップロードすると、追加オプションが表示されます。
- 画像の代替テキスト（Image Alt Text） - 画像の読み込みに失敗したときに画面に表示され、スクリーンリーダーで読み上げることもできます
- 塗りつぶし（Fill） - ガイドコンテナのサイズまたは実際の画像解像度に対するパーセンテージとして画像サイズを設定します
- マージン（Margin） - 画像の外側の余白を設定します
投票とアンケート調査
投票とアンケート調査は、ユーザーがアプリ内で貴社のことを考えているまさにその時に、ユーザーからのフィードバックを収集するために設計されたアプリ内メッセージです。投票とアンケート調査の回答は、将来的にユーザーをセグメント化してアナリティクスを細分化したり、より具体的なガイドのターゲティングを行うために使用できます。投票とアンケート調査のガイドの詳細については、ガイドのレイアウト内のレイアウトのタイプを参照してください。
注意：公開後に投票とアンケート調査のビルディングブロックを編集すると、そのビルディングブロックの以前の投票とアンケート調査のデータはすべて失われます。ガイドを複製し、複製したガイドの投票とアンケート調査のビルディングブロックを編集して、過去の投票とアンケート調査のデータを保持することを強くお勧めします。
自由記入式の投票調査
自由記入式の投票オプションを選択すると、質問を編集するように求められます。
注：投票とアンケート調査の質問を削除しないように注意してください。 投票とアンケート調査の質問がない場合、送信時に回答が収集されません。
質問ができたら、［適用（Apply）］を選択します。自由記入フィールドのサイズを調整したい場合は、フィールドの上にカーソルを合わせて編集アイコンを選択します。
「はい/いいえ」の投票
「はい/いいえ」の投票では、質問をすばやく追加し、投票の回答を［はい］、［いいえ］として自動的に追加できます。
注：ガイドステップに追加できる「はい/いいえ」の投票は1つのみです。
数字による投票調査
数字で表すスケールを自動で表示する場合は、このビルディングブロックを使用します。最小値は1、最大値は10です。
多項選択式の投票調査
このブロックを使って、独自の複数の選択肢を追加することができます。ビルディングブロックを選択すると、質問を追加できます。
次に、複数の選択肢のドロップダウンにカーソルを合わせると、ユーザーに提供するすべての選択肢を編集・追加できます。
動画
動画のビルディングブロックは、対応するストリーミングプラットフォームの動画を、動画のURLのみで埋め込むことができます。埋め込みコードは必要ありません。埋め込みフォーマットは自動的に適用されます。ガイドの操作性を高めるため、自動再生は自動的にオフになります。
注：モバイルガイドでサポートされている動画プラットフォームは、YouTubeのみです。
1. 動画のビルディングブロックを選択します。
2. 動画プロバイダーを選択し、動画のURLとタイトルを入力します。動画のサムネイルは、ガイドステップで自動的に表示されます。デフォルトの幅は、ガイドコンテナの100％に設定されています。
3. ［コンテナを塗りつぶす（Fill Container）］をオフに切り替えると、幅を手動で設定できます。
警告：動画ストリーミングプロバイダーは、通常、Internet Explorer以外のすべてのブラウザをサポートしています。最高の操作性を提供するため、動画プラットフォームとユーザーのブラウザの互換性を確認することをお勧めします。他の動画ストリーミングプロバイダーを利用している場合でも、カスタムコードブロックを利用して動画を埋め込むことができます。
サポートされている動画形式とURL
| 動画形式 | URLの詳細 |
| YouTube |
YouTubeのアドレスバー、または共有ボタンで提供される形式のいずれかを使用できます。
|
| Vimeo |
アドレスや共有ボタンに記載されているURLを利用できます。
|
| Wistia |
アドレスバーまたは［埋め込みと共有（Embed & Share）］リンクの形式を使用できます。
|
| Brightcove |
BrightcoveのURLはこの形式と一致する必要があります。短縮された動画のリンクは機能しません。
|
|
Microsoft Stream (Classic) |
|
|
Microsoft Stream (Sharepoint) |
|
|
Vidyard |
|
カスタムコード
ビジュアルデザインスタジオは、技術者ではないユーザーにも使いやすいように作られていますが、技術者の方はコードブロックを使用することで、ガイドのカスタムコンテンツや動作をコーディングすることができます。コードブロックを編集すると［コード編集（Edit Code）］モジュールが表示され、コードを含むガイドステップの表示時に実行されるHTML、CSS、Javascriptを入力できます。コードブロックの詳細については、コードでガイドをカスタマイズするを参照してください。
注：ガイドステップごとに設定できるコードブロックは1つのみです。コードブロックはガイドステップが表示されたときに実行され、コードはガイドまたはアプリのあらゆるものに影響を与えます。
ビルディングブロックを並べて配置する
すべてのビルディングブロックの種類を並べて配置できるわけではありません。並べて配置できるのは、テキスト、ボタン、画像のビルディングブロックのみです。1行に配置できるビルディングブロックの数には制限があり、ボタンは最大4つ、ビルディングブロックは最大2つです。ビルディングブロックは、テキスト、ボタン、画像から任意で組み合わせることができます。たとえば、2つのテキストブロックを並べて配置したり、ボタンとテキストブロックを並べて配置したりできます。
新しい「並べて配置」機能では、既存のボタンやマルチボタンのビルディングブロックは動作しますが、テキストと画像のビルディングブロックに関しては、新しいビルディングブロックのみ並べて配置できます。2021年5月26日に「並べて配置」のビルディングブロックがリリースされる前に作成されたテキストと画像のビルディングブロックは、列の追加に対応していません。ビルディングブロックを複製すると、並べて配置せずにレガシー機能のクローンが作成されます。並べて配置するためには、新しいテキストや画像のビルディングブロックを新しい行に追加する必要があります。旧ビルディングブロックのコンテンツを新ビルディングブロックにコピー＆ペーストしたあと、旧ビルディングブロックを削除することで、既存のコンテンツで新機能を利用できます。