ビルディングブロックの種類

最終更新日:

この記事では、ガイドのデザインとスタイルを設定できるさまざまなビルディングブロックについて詳しく説明します。ビルディングブロックには、以下が含まれます。

  • テキスト
  • ボタン
  • 水平線
  • 日付ブロック
  • 画像
  • 自由記入式の投票調査
  • 「はい/いいえ」の投票
  • 数字による投票調査
  • 多項選択式の投票調査
  • 動画
  • コードブロック
  • タスクリスト

テキスト

TextBB.png

テキストブロックで使用できる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}
テキストブロックのスタイル設定オプション 例:
この例では、テキストに太字を適用しています。 wysiwyg.gif
テキストブロックは、テーマを使ってタイトル、サブタイトル、段落のスタイルを適用できます。[カスタム(Custom)]では、テキストブロック全体に適用されるすべてのスタイルと間隔のオプションを利用できます。 edit-text-styles.gif
テキストのビルディングブロックの配置、リンク形式、間隔は、[テキストを編集(Edit Text)]メニューから設定できます。 edit-text-styles.gif

 

ガイドのライティングアシスタントでガイドのコンテンツを改善する

ガイドのライティングアシスタント機能は、Googleの生成AIを活用して、ガイドの作成中にビジュアルデザインスタジオでガイドのテキストコンテンツを要約・拡張・改善します。スペル、文法、句読点の誤りをチェックし、選択したトーンに基づいてテキストを修正し、AIを活用して語彙を増やします。

  1. テキストのビルディングブロックで[編集(Edit)]を選択します。
  2. テキストボックスの下にある杖のアイコンを選択すると、ガイドのライティングアシスタントが表示されます。
    Menu.png
  3. [スクリプトウィザード(Script Wizard)]で、テキスト変更のオプションを選択します。
  4. [トーンを変更(Change Tone)]で、テキストのトーン変更のオプションを選択します。
  5. テキストを変更前のバージョンに戻したい場合は、[元に戻す(Undo)]選択します。コンテンツを更新したい場合は、[更新(Refresh)]を選択します。

    注:[元に戻す]を選択すると、テキストの直前のバージョンが復元されます。変更を複数回実施した場合、[元に戻す]を選択する前のテキストに戻るだけで、最初のテキストには復元されません。

    undo_refresh.png

ボタン

ButtonBB.png

ボタンのビルディングブロックは、[次のステップ(Next Step)]や[閉じる(Dismiss)]などのボタンアクションをトリガーできる単一のボタンをガイドに追加します。テキスト、ボタン、画像などのビルディングブロックの横に、新しいボタンを追加できます。行には最大4つのボタン、またテキストやイメージのビルディングブロックの隣には1つのボタンを追加できます。

各ボタンのスタイル、ボタンのテキスト、アクションを個別に選択できます。

EditButton.png

ボタンのスタイル

ボタンは、一次、二次、三次のスタイルを使用して、ガイドテーマからデザインを素早く取り込むことができます。また、ユーザーがゼロからガイドを構築できる場合は、カスタムスタイルを使用することもできます。

ButtonStyling.png

スタイルには、ボタンに使用できるすべてのデザインオプションが含まれています。テーマを使用している場合、オプションはマージンのみです。

カスタムスタイル設定

  • テキスト
  • 背景
  • マージン
  • パディング(Padding)
  • テキスト、背景、枠のホバースタイル

ボタンのテキスト

[一般(General)]セクションには、ボタンのテキストフィールドが含まれています。入力されたテキストは、ボタンの中に表示されます。ボタンの幅が[自動(Auto)]に設定されている場合、ボタンはガイドコンテナの幅に達するまで広がります。ボタンコンテナが[固定(fixed)]に設定されている場合、テキストは改行され、ボタンの高さが高くなります。ボタンのテキストは、短く直接的な言葉にすることをお勧めします。

アクション

ガイドのボタンアクション(Guide Buttons Actions)は、ユーザーがボタンを選択したときの動作を設定します。最も一般的な使用例で利用できるアクションが多数あります。

利用可能なボタンアクション

  • ガイドを閉じる(Dismiss Guide)
  • 次のステップ
  • すべての投票を送信+ガイドを進める
  • URLリンク(URL Link)
  • ガイドの起動(Launch Guide)
  • 前のステップ
  • ガイドのスヌーズ
  • ステップに移動(Go to Step)

ボタンアクションの中には、ボタンが選択されると2つのアクションが組み合わさり、複合的に動作するものがあります。たとえば、[ガイドを閉じる]と[URLリンク]を組み合わせて使用すると、ガイドを閉じた後にユーザーを新しいページへと誘導できます。

水平線

水平線を使用して、ガイド内のテキストと画像を区切ります。

線のスタイル設定

線のスタイルをお好みの値に設定し、終了したら[適用(Apply)]を選択します。

Horizontalline_noradius.png

日付ブロック

日付ブロックは、お知らせガイドでガイドの公開日を表示するためにのみ使用されます。日付は変更できません。

画像

ImageBB.png

画像のビルディングブロックは、ガイドに写真やGIFを追加するために使用します。画像をアップロードしてPendoでホストすることも、ご自分でホストしているコンテンツのURLを追加することもできます。読み込み時間を短縮し、最適なガイドパフォーマンスを実現するために、ファイルサイズは5MB以下を推奨します。サイズ上限は30MBです。

画像は、人目を引くヘッダー、プロダクトのスクリーンショット、テキストの横にあるアイコン、新しいワークフローを示すGIFなどに使用できます。[列を追加(Add Column)]を使用すると、2つの画像、画像とテキスト、または画像とボタンを同じ行に並べて配置できます。

AddImageBB.png

サポートされているファイル形式

  • .jpeg
  • .png
  • .svg
  • .gif

画像のスタイル設定

EditImageBB.png

画像をアップロードすると、追加オプションが表示されます。

  • 画像の代替テキスト(Image Alt Text):画像の読み込みに失敗したときに画面に表示され、スクリーンリーダーで読み上げることもできます
  • 塗りつぶし(Fill):ガイドコンテナのサイズまたは実際の画像解像度に対するパーセンテージとして画像サイズを設定します
  • マージン(Margin):画像の外側の余白を設定します

動画

VideoBB.png

動画のビルディングブロックは、対応するストリーミングプラットフォームの動画を、動画のURLのみで埋め込むことができます。埋め込みコードは必要ありません。埋め込みフォーマットは自動的に適用されます。ガイドの操作性を高めるため、自動再生は自動的にオフになります。

注:モバイルガイドでサポートされている動画プラットフォームは、YouTubeのみです。

  1. 動画のビルディングブロックを選択します。

    BBVideoSelect.png
  2. 動画プロバイダーを選択し、動画のURLとタイトルを入力します。動画のサムネイルは、ガイドステップで自動的に表示されます。デフォルトの幅は、ガイドコンテナの100パーセントに設定されています。


    BBEditVideo.png
  3. [コンテナを塗りつぶす(Fill Container)]をオフに切り替えると、幅を手動で設定できます。

    BBVideoPreview.png

警告:動画ストリーミングプロバイダーは、通常、Internet Explorer以外のすべてのブラウザをサポートしています。最高の操作性を提供するため、動画プラットフォームとユーザーのブラウザの互換性を確認することをお勧めします。他の動画ストリーミングプロバイダーを利用している場合でも、カスタムコードブロックを利用して動画を埋め込むことができます。

サポートされている動画形式とURL

動画形式 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 Stream (Classic)

  • http(s)://[Your Account ID].microsoftstream.com/video/[Video ID]

Microsoft Stream (Sharepoint)

  • https://[ORG_ID].sharepoint.com/[NAMESPACE]/[USER_ID]/_layouts/15/embed.aspx?UniqueId=[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]

投票とアンケート調査

投票とアンケート調査は、ユーザーがアプリ内で貴社のことを考えているまさにその時に、ユーザーからのフィードバックを収集するために設計されたアプリ内メッセージです。投票とアンケート調査の回答は、将来的にユーザーをセグメント化してアナリティクスを細分化したり、より具体的なガイドのターゲティングを行うために使用できます。投票とアンケート調査のガイドの詳細については、ガイドのレイアウト内のレイアウトのタイプを参照してください。

注:ステップ1でガイドが投票とアンケート調査を送信するように設定されていない場合、回答の収集を期待するステップに[すべての投票とアンケート調査を送信する(Submit All Polls)]というアクションを必ず含める必要があります。

注意:公開後に投票とアンケート調査のビルディングブロックを編集すると、そのビルディングブロックの以前の投票とアンケート調査のデータはすべて失われます。ガイドを複製し、複製したガイドの投票とアンケート調査のビルディングブロックを編集して、過去の投票とアンケート調査のデータを保持することを強くお勧めします。

自由記入式の投票調査

OpenTextPollBB.png

自由記入式の投票オプションを選択すると、質問を編集するように求められます。

open-text-poll-block.png

注:投票とアンケート調査の質問を削除しないように注意してください。 投票とアンケート調査の質問がない場合、送信時に回答が収集されません。

質問ができたら、[適用(Apply)]を選択します。自由記入フィールドのサイズを調整したい場合は、フィールドの上にカーソルを合わせて編集アイコンを選択します。

open-text-field-edit-options.gif

「はい/いいえ」の投票

Yes_No_Poll_BB.png

「はい/いいえ」の投票では、質問をすばやく追加し、投票の回答を[はい]、[いいえ]として自動的に追加できます。

 

注:ガイドステップに追加できる「はい/いいえ」の投票は1つのみです。

 

yes-no-poll-block.png

数字による投票調査

NumberScalePollBB.png

数字で表すスケールを自動で表示する場合は、このビルディングブロックを使用します。最小値は1、最大値は10です。

number-scale-block.png

多項選択式の投票調査

MultiChoicePollBB.png

このブロックを使って、独自の複数の選択肢を追加することができます。ビルディングブロックを選択すると、質問を追加できます。

multi-choice-block-question.png

次に、複数の選択肢のドロップダウンにカーソルを合わせると、ユーザーに提供するすべての選択肢を編集・追加できます。

multi-choice-block-options.png

カスタムコード

注:この機能は、ガイドのProエディションがパッケージに含まれているPendoサブスクリプションでのみ利用できます。ご利用のプランにこの機能が含まれているかどうか不明な場合、またはこの機能に関心をお持ちの場合は、Pendoのアカウント担当者にお問い合わせください。

ビジュアルデザインスタジオは、技術者ではないユーザーにも使いやすいように作られていますが、技術者の方はコードブロックを使用することで、ガイドのカスタムコンテンツや動作をコーディングすることができます。

CodeBlockBB.png

コードブロックを編集すると[コード編集(Edit Code)]ウィンドウが開き、コードを含むガイドステップの表示時に実行されるHTML、CSS、Javascriptを入力できます。コードブロックの詳細については、コードでガイドをカスタマイズするを参照してください。

custom-code-block.png

注:各ガイドステップで使用できるコードブロックは1つだけです。コードブロックはガイドステップが表示されたときに実行され、コードはガイドまたはアプリのあらゆるものに影響を与えます。

タスクリスト

注:この機能は、ガイドのProエディションがパッケージに含まれているPendoサブスクリプションでのみ利用できます。ご利用のプランにこの機能が含まれているかどうか不明な場合、またはこの機能に関心をお持ちの場合は、Pendoのアカウント担当者にお問い合わせください。

タスクリストビルディングブロックを使用すると、ユーザー向けに一連のタスクを設計し、表示することができます。アクションや学習目標を明確で管理しやすいステップに分解することで、ユーザーがアプリケーション内で学習、進歩、または特定のタスクを達成できるようにプロセスを通じてユーザーをガイドできます。

タスクリストビルディングブロックを使用すると次のことができます。

  • 連続的な進行:ガイドを論理的な順序で整理することで、スムーズで構造化された学習やタスクを完了しやすくなります。
  • 進捗状況の追跡:完了したガイドを表示し、ユーザーに達成感を与えて、継続を促します。
  • カスタマイズ可能な外観:タスクリストの外観と操作性をアプリのデザインやユーザー体験に合わせて調整します。

ユースケース

タスクリストの主なユースケースは、オンボーディングフローを開発することです。リソースセンター内のオンボーディングモジュールを使用する代わりに、ユーザーの現在のワークフローに基づいて、ガイドを使用してタスクリストを追加し、状況に応じたフローを作成します。

他の使用例には、チュートリアルや、ユーザーガイダンスと進捗追跡が重要な他のアプリ内体験が含まれます。

タスクリストは特定のユーザーに配信するために、スケジュール化、セグメント化、ターゲット設定を行うことが可能です。ユーザーがタスクリストを繰り返し参照し、戻ってくることができるように、タスクリストに対してバッジまたはターゲット要素のアクティベーションを使用することがベストプラクティスです。

要件

エージェントのバージョンは2.258.0以上である必要があります。

タスクリストを作成する

タスクリストビルディングブロックを使用して、ガイド内にタスクリストを作成します。

  1. 新しいガイドを作成するか、ガイドリストから既存のガイドを選択します。
  2. ガイドの詳細ページの[設定(Settings)]タブで、[自分のアプリで管理(Manage in my app)]を選択します。ビジュアルデザインスタジオ(Visual Design Studio)が開きます。
  3. 必要なガイドステップで、[ビルディングブロック(Building Block)]メニューを開き、[詳細設定(Advanced)]までスクロールして[タスクリスト(Task List)]を選択します。
  4. ガイドステップで、コンテンツボックスを選択して、[タスクリストを編集(Edit Task List)]ウィンドウを開きます。
  5. [コンテンツ(Content)]タブで、[ガイドを追加(Add guide)]を選択します。
  6. [タスクリスト構成(Task List Composition)]で、[ガイドを選択(Select a guide)]ドロップダウンリストからガイドを選択します。
  7. [表示テキスト(Display text)]フィールドに、ガイドのタスクリストに表示するテキストを入力します。

    add_guide.png

    task_list_name.png
  8. 必要に応じて続けて他のガイドを追加し、タスクリストを完了します。

フォールバックテキストを追加する

訪問者がすべてのタスクを完了した場合、リストの代わりにテキストを追加して、訪問者がプロセスのどの段階にいるかを把握できるようにします。

  1. 矢印を選択して[フォールバックテキスト(Fallback text)]セクションを展開します。
  2. フィールドにテキストを入力します。

    fallback_text.png

タスクリストのスタイルを設定する

タスクリストのさまざまな要素にスタイルを設定できます。[タスクリストを編集(Edit Task List)]ウィンドウで[スタイリング(Styling)]タブを選択します。

  • プログレスアイコン(Progress Icon):タスクリストの進捗状況を示すアイコンを選択します。

    progress_icon.png
  • プログレスバー(Progress Bar):プログレスバーのスタイルを選択し、プログレスバーの下に表示するテキストを[ラベル(Label)]フィールドに入力します。

    progress_bar.png
  • テキストスタイル(Text Styles):タスクリストのテキストスタイルを設定します。

    text_style.png
  • サブタイトル(Subtitles):タスクリストの各ステップの下に表示されるサブタイトルを追加します。

    subtitle.png
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています