ガイドの作成(クラシック)

最終更新日:

注: この記事はビジュアルデザインスタジオ向けではありません。2019年2月18日以前にリリースされたガイド体験を取り上げます。この日付以降にお客様になられ、ビジュアルデザインスタジオをご利用の場合は、ガイドの作成を参照してください。

 

ガイドは、アプリ内ガイドデザイナーで作成されます。デザイナーの概要については、アプリ内デザイナー(クラシック)を参照してください。

ガイドのタイプ

ガイドデザイナーにアプリケーションが読み込まれたら、左下の[新規ガイドを追加(Add New Guide)]をクリックしてガイドを作成します。4つのタイプのガイドが表示されます。

guideType.png

ツールチップ

ツールチップガイドは、アプリケーション内のターゲット要素に紐付いています。これらは、要素またはフィーチャーの強調表示に最もよく使用されます。

ヒント:次に特定の要素またはフィーチャーに注意を促すときは、バッジでアクティベートするツールチップを使用します。そうすれば、ユーザー体験を中断することはありません。

ライトボックス

ライトボックスは、ページの中央に配置されるタイプのガイドです。ライトボックスは、通常、サービス停止や主要な新機能リリースなどの共通のお知らせに使用されます。

バナー

バナーガイドは、ワークフローを中断することなく、情報 (新機能のお知らせ)を提供したり、ユーザーからフィードバック(投票調査やアンケート) を求めたりするのに優れた方法です。バナーは、ウィンドウの上部または下部からポップアップ表示されます。

ウォークスルー

ウォークスルーは、上記のガイドタイプをグループ化したものです。ユーザーオンボーディングによく使用されます。ユーザーが戸惑うようなワークフローがある場合は、ウォークスルーを作成するとユーザーがプロセスを理解したりタスクを完了したりするのに役立ちます。

最新情報

このガイドタイプは、ガイドセンターの[最新情報(What’s New)]セクションに表示される通知用に予約されています。

ガイドのステータス

公開

ガイドのセグメントで対象とするすべての訪問者に公開され、Pendoがインストールされているすべての環境で、指定した「場所」に表示されます。公開ガイドは、指定したステージングサーバーに継続して表示されます。

ステージング

このガイドは、指定したステージングサーバーにのみ表示されます。ステージングサーバーは、お客様のサブスクリプション管理者がこちらから管理できます。ステージングの詳細については、ガイドをステージングするを参照してください。

ドラフトおよび無効

ガイドはどの環境にも表示されませんが、編集は可能です。ドラフトと無効に機能的な違いはありませんが、これらのステータスはガイドの整理に役立ちます。

削除

ガイドとそのすべてのデータが完全に削除されます。

ウォークスルーの作成:パート1

ガイドのリストページにある[アプリ内のガイド管理(Manage Guides In-App)]をクリックして、ガイドデザイナーに移動します。

注:ガイドデザイナーを初めてお使いの場合は、アプリ内デザイナー(クラシック)で詳細をご確認ください。

 

この例では、ウォークスルータイプのガイドの作成について説明します。まず、左下の[新規ガイドを追加(Add New Guide)]をクリックして、[ウォークスルー(Walkthrough)]を選択します。ステップは後で追加します。

ガイドの命名

[名前なし(Unnamed)]をクリックして、ガイドに名前を付けます。

walkthroughOne.png

セグメント

ガイドを表示する対象を設定します。すべての訪問者にガイドを表示する場合はデフォルトの[全員(Everyone)]を使用し、テスト中で自分だけにガイドを表示する場合は[自分のみ(Only Me)]を使用します。また、デザイナーの外部から過去に作成したセグメントを使用したり、その場でカスタム版を作成したりすることもできます。

segment.png

アクティベーション

ガイドをアクティベートするにはいくつか方法があります。ガイドは、これらのアクティベーション方法を同時に使用できます。たとえば、1つのガイドを[自動(Automatic)]と[ガイドセンター]アクティベーションの両方に設定して、ユーザーがページを開いたときにガイドを自動的に表示することができます。しかしユーザーが再びガイドを参照したい場合はガイドセンターから利用することになります。​

  • 自動(Automatically):ページの読み込み時または前のステップの完了時 (ウォークスルーを作成している場合)に、ガイドが対象セグメントに自動的に表示されます。

  • ガイドセンター:ユーザーがガイドセンターでガイドをクリックした場合のみ、ガイドが表示されます。ガイドを見つけやすくするために、ガイドセンターでの検索を有効にしている場合は、検索するキーワードを指定することもできます。ガイドセンターを有効にする方法については、ガイドセンター(クラシック)を参照してください。
activation.png
  • バッジ(Badge):ユーザーがアクティベートしてガイドを表示できるように紐付けられた要素の横に、小さなバッジのアイコンが表示されます。アクティベーション方法としてバッジを選択すると、追加のスタイル設定および位置オプションが下に表示されます。

ガイドのアクティベーション方法の詳細については、ガイドのアクティベーションをご覧ください。

badge-activation.png

スケジューリング

ガイドを特定の期間だけ表示したい場合は、[ガイド開始日(Guide Start Date)]と[ガイドの有効期限(Guide Expires)]の日時を追加できます。

expiration.png

 

注:ガイドの開始日を選択した場合、選択した日付にガイドを公開するために、ガイドのステータスをスケジュール済みに設定する必要があります。

 

高度な設定

ここでは、ガイドを表示したいデバイスを指定したり、ガイドがオンボーディング用かどうかを指定したりできます。[オンボーディング用ガイド(Guide meant for onboarding)]を選択すると、アクティベーション方法に関係なく、ウォークスルーをアクティベートするためのリンクがガイドセンターに配置されます。

advanced-walkthrough.png

左上の[保存]をクリックして、ウォークスルー全体の設定を確認します。

ウォークスルーの作成:パート2

ステップの追加

この例では、いくつかの異なるガイドタイプで構成されるウォークスルーを作成します。まず、[ステップを追加(Add a Step)]をクリックし、最初のステップとして[ライトボックス(Lightbox)] を選択します。

addStep.png

コンテンツ

ドロップダウンからテンプレートを選択したり、表示が最適になるようにHTML、CSS、およびJavaScriptを変更してライトボックスのコンテンツやデザインをカスタマイズしたりできます。

content.png

レイアウト

これらのオプションを使用して、layout.pngを調整できます。

 

遷移

ガイドを次のステップに進める方法を設定します。​

  • 要素をクリックして進む(Advance on Element Click):このオプションは、ツールチップタイプのガイドでのみ使用できます。ガイドは、アプリケーション内のターゲット要素がクリックされると進みます。

  • カーソルを合わせると進む(Advance on Hover):このオプションは、ツールチップタイプのガイドでのみ使用できます。ガイドは、アプリケーション内のターゲット要素にカーソルを合わせると進みます。

  • ボタン/リンク/スクリプトで進む(Advance on Button/Link/Script):ガイドは、ユーザーがガイド内のボタン、リンク、またはコードスクリプトをクリックすると進みます。
transition.png

場所

  • このページのみ(Only on this Page):ガイドを表示する特定のURL(複数指定が可能)を選択できます。デザイナーは、デザイナーフレームに読み込まれたURLに基づいて、Pendoで作成したページを自動的にお勧めします。

  • サイト全体(Sitewide):ガイドは、アプリケーションの任意の場所(Pendoがインストールされている場所)に表示されます。
location.png

要素マッチング

ツールチップの場合のみ必要)アプリケーションの特定の要素が表示されるときにだけこのガイドを表示したい場合は、[ターゲットHTML(Target HTML)]機能を使用できます。その要素がエンドユーザーに表示されると、ガイドが表示されます。このターゲット要素は、ツールチップガイドが紐付いた要素です。

アンケート調査

投票とアンケート調査を追加したい場合は、このタブから追加できます。投票とアンケート調査の詳細については、投票とアンケート調査(クラシック)を参照してください。

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