ビルディングブロックは、ガイドにコンテンツを追加するためのものです。ビルディングブロックでは、テキスト、ボタン、画像、アンケート調査、埋め込み動画などを簡単に追加したり、フォーマットしたりできます。テキストとボタンのビルディングブロックは、テーマを使用して事前にスタイルを設定できます。一連のビルディングブロックを一貫して使用する場合は、レイアウトとして保存します。
ビルディングブロックの種類
- テキスト
- ボタン
- 水平線
- 日付ブロック
- 画像
- 自由記入式の投票調査
- 「はい/いいえ」の投票
- 数字による投票調査
- 多項選択式の投票調査
- 動画
- コードブロック
要件
- ビジュアルデザインスタジオ（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の構文がテキストに適用され、スタイルがプレビューにレンダリングされます。サポートされているMarkdownスタイルの詳細については、Markdown構文の記事をご覧ください。
サポートされているMarkdown
- **太字**
- *斜体* または _斜体_
- ++下線++
- --取り消し線--
- ［リンク］(https://www.pendo.io/)
- 1. 順序付きリスト
2. 項目2
3. 項目3 - -順序付けられていないリスト
-項目2
-項目3
*順序付けられていないリスト
*項目2
*項目3
+順序付けられていないリスト
+項目2
+項目3 - {color: #ec2059}個別の色付きテキスト{/color}
テキストブロックは、テーマを使ってタイトル、サブタイトル、段落のスタイルを適用できます。［カスタム（Custom）］では、テキストブロック全体に適用されるすべてのスタイルと間隔のオプションを利用できます。
テキストビルディングブロックのテキストの配置、リンクスタイル、および間隔は、［テキストを編集（Edit Text）］メニューから制御できます。
ボタン
ボタンのビルディングブロックは、［次のステップ（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
- Vimeo
- Wistia
- Brightcove
- Microsoft 365 Stream
- Vidyard
注：モバイルガイドでサポートされている動画プラットフォームは、YouTubeのみです。
1. 動画のビルディングブロックを選択します。
2.［動画プロバイダー（Video Provider）］を選択し、動画のURLとタイトルを入力します。 
3. 動画のサムネイルは、ガイドステップで自動的に表示されます。デフォルトの幅は、ガイドコンテナの100％に設定されています。［コンテナの塗りつぶし（Fill Container）］をオフに切り替えると、幅を手動で設定できます。
警告：動画ストリーミングプロバイダーは、通常、Internet Explorer以外のすべてのブラウザをサポートしています。最高の操作性を提供するため、動画プラットフォームとユーザーのブラウザの互換性を確認することをお勧めします。他の動画ストリーミングプロバイダーを利用している場合でも、カスタムコードブロックを利用して動画を埋め込むことができます。
サポートされている動画URL形式
YouTube
YouTubeのアドレスバー、または共有ボタンで提供される形式のいずれかを使用できます。
- http(s)://www.youtube.com/watch?v=[Video ID]
- http(s)://youtu.be/[Video ID]
Vimeo
アドレスや共有ボタンに記載されているURLを利用できます。
- http(s)://vimeo.com/[Video ID]
Wistia
アドレスバーまたは［埋め込みと共有（Embed & Share）］リンクの形式を使用できます。
- http(s)://[Your Account ID].wistia.com/medias/[Video ID]
- http(s)://[Your Account ID].wistia.com/embed/[Video ID]
- http(s)://[Your Account ID].wi.st/medias/[Video ID]
- http(s)://[Your Account ID].wi.st/embed/[Video ID]
Brightcove
BrightcoveのURLはこの形式と一致する必要があります。短縮された動画のリンクは機能しません。
- http(s)://brightcove.net/account_id/player_type/index.html?videoId=[Video ID]
Microsoft 365 Stream
- http(s)://[Your Account ID].microsoftstream.com/video/[Video ID]
Vidyard
- http(s)://embed.vidyard.com/[Video ID]
- http(s)://play.vidyard.com/[Video ID]
- http(s)://share.vidyard.com/[Video ID]
- http(s)://[Your AccountID].hubs.vidyard.com/[Video ID]
カスタムのコード
ビジュアルデザインスタジオは、技術者ではないユーザーにも使いやすいように作られていますが、技術者の方はコードブロックを使用することで、ガイドのカスタムコンテンツや動作をコーディングすることができます。コードブロックを編集すると［コード編集（Edit Code）］モジュールが表示され、コードを含むガイドステップの表示時に実行されるHTML、CSS、Javascriptを入力できます。コードブロックの詳細はこちら。
注：ガイドステップごとに設定できるコードブロックは1つのみです。コードブロックはガイドステップが表示されたときに実行され、コードはガイドまたはアプリのあらゆるものに影響を与えます。
よくある質問
列を追加したり、ビルディングブロックの横に別のビルディングブロックを追加したりできません。
すべてのビルディングブロックの種類を並べて配置できるわけではありません。並べて配置できるのは、テキスト、ボタン、画像のビルディングブロックのみです。1行に配置できるビルディングブロックの数には制限があり、ボタンは最大4つ、ビルディングブロックは最大2つです。ビルディングブロックは、テキスト、ボタン、画像から任意で組み合わせることができます。たとえば、2つのテキストブロックを並べて配置したり、ボタンとテキストブロックを並べて配置したりできます。
新しい「並べて配置」機能では、既存のボタンやマルチボタンのビルディングブロックは動作しますが、テキストと画像のビルディングブロックに関しては、新しいビルディングブロックのみ並べて配置できます。2021年5月26日に「並べて配置」のビルディングブロックがリリースされる前に作成されたテキストと画像のビルディングブロックは、列の追加に対応していません。ビルディングブロックを複製すると、並べて配置せずにレガシー機能のクローンが作成されます。並べて配置するためには、新しいテキストや画像のビルディングブロックを新しい行に追加する必要があります。旧ビルディングブロックのコンテンツを新ビルディングブロックにコピー＆ペーストしたあと、旧ビルディングブロックを削除することで、既存のコンテンツで新機能を利用できます。