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

最終更新日:

 

 

注: この記事では、以前に発売されたガイド体験を取り上げます(2019年2月18日以前)。この日付以降にお客様になられた場合は、Visual Design Studioを使ったこちらの更新版を参照してください。

 

概要

ガイドは、アプリ内ガイドデザイナーで作成されます。デザイナーの概要については、こちらをクリックしてください。

ガイドのタイプ

ガイドデザイナーにアプリケーションが読み込まれたら、左下の[新規ガイドを追加(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)]機能を使用できます。その要素がエンドユーザーに表示されると、ガイドが表示されます。このターゲット要素は、ツールチップガイドが紐付いた要素です。

アンケート調査

投票調査を追加したい場合、このタブから追加できます。投票調査の詳細については、こちらをクリックしてください