ガイドデザイナー：Adoptスタジオ（Adopt Studio）

Adoptスタジオは、技術的な専門知識を必要とせずにアプリ内ガイド、コミュニケーション、投票調査、コンテンツを作成できるデザイナーの名前です。

Adoptスタジオ（Adopt Studio）のパネル

初めてAdoptスタジオを開くと、アプリケーションの上にサイドパネルが起動します。サイドパネルは2つの部分で構成されています。上部では、ガイドの名前を編集し、ガイドを保存し、デザイナーを終了することができます。下部では、ガイドの作成を開始できます。

Adoptスタジオ（Adopt Studio）のサイドパネルは、ページの左側や右側に移動できます。

 

 

上部と下部の間にある矢印を選択して、下部を非表示にすることもできます。再びパネルの下部を表示したい場合は、下矢印を選択します。

 

 

Adoptスタジオにアクセスしたら、タブを閉じるのではなく［終了（Exit）］を選択して Adoptスタジオを終了することが重要です。これにより、ガイドの詳細ページに戻ります。

 

 

ガイドのタイプ

ガイドには、次の2種類があります。

• ステップバイステップのウォークスルーガイド。ツールチップとライトボックスの両方で構成することができます。
• インラインサポート。アプリケーションに付けたバッジを介してアクセスできます。

 

これらのオプションを有効にしてカスタマイズする方法については、ガイドのアクティベーション方法を参照してください。

ライトボックス

ライトボックスは、アプリにガイドをオーバーレイします。ライトボックスは、通常、サービス停止や主要な新機能リリースなどの共通のお知らせに使用されます。

ガイドの最初のステップがライトボックスの場合、要素がページに表示されたときに［ガイドの持続性（Guide Persistence）］を使用してガイドを有効にできます。詳しくは、この記事のステップ設定および、ガイドのアクティベーションの記事をご覧ください。

ツールチップ

ツールチップは、UIの特定の要素の横に表示されるアプリ内メッセージです。

ガイドのステップとしてツールチップを選択した後、選択モードに入り、ツールチップガイドを添付するページ上の要素を選択できます。ツールチップが最初のステップである場合、要素包含判定ルールで、ターゲット要素のコンテンツに基づいて条件付きでガイドを表示することもできます。詳しくは、ガイドのアクティベーションの記事をご覧ください。

バッジ

バッジは、常時表示するとUIが煩雑になるインラインサポートを開きます。

［バッジを配置（Place Your Badge）］を選択した後、選択モードに入り、バッジを貼り付けるページ上の要素を選択することができます。バッジアイコンでは、使用する画像、位置、オフセット、色、Zインデックスなどの編集が可能です。要素包含判定ルールを使用して、ターゲット要素の内容に基づいてバッジを条件付きで表示することもできます。バッジの設定について詳しくは、ガイドのアクティベーションの記事をご覧ください。

ガイドの作成

Adoptスタジオ（Adopt Studio）で新しいアプリ内ガイドを作成するには、以下の手順で行います。

1. 左側のナビゲーションで、［ガイド（Guide）］を選択します。

2. ページ右上の［+ ガイドを作成（Create Guide）］を選択します。

 

 

3. ガイドに名前を付け、アプリケーションを選択し、アプリ内ガイドを設置するURLを入力します。

4. ガイド（プロダクトウォークスルー）またはバッジ（インラインサポート）を作成するかどうかを選択します。

 

 

5. 右下の［Adoptスタジオを起動（Launch Adopt Studio）］を選択して、ガイドデザイナーを開きます。これにより、アプリケーション上でAdoptスタジオが起動します。

6. ガイドを作成するページに移動し、Adoptスタジオのパネルでガイドの作成を開始します。

バッジを作成する場合は、ページ右側のAdoptスタジオのパネルで［バッジを配置］を選択します。これにより、［選択モード（Selection Mode）］が開き、バッジを配置することができます。次に、［エディターモード（Editor Mode）］に入ると、コンテンツを追加するように求められます。アイコンの外観やその他の表示オプションを変更することもできます。バッジのカスタマイズについて詳しくは、ガイドのアクティベーションの記事のインラインサポートのバッジオプションをご覧ください。

ウォークスルーガイドを作成する場合は、ページ右側のAdoptスタジオのパネルで［ガイド作成を開始（Start Building Guide）］を選択し、［ライトボックス（Lightbox）］または［ツールチップ（Tooltip）］の2つのタイプからいずれかを選択します。ガイドの後続のステップでも、どちらのタイプも選択できます。最初のステップがツールチップの場合、最初にページ上の場所を選択するように求められます。詳しくは、本記事の選択モードをご覧ください。ガイドにコンテンツを追加・編集する方法については、本記事のエディターモードをご覧ください。

選択モード

［選択モード（Selection Mode）］は、ガイドを付加するUIの要素やフィーチャーを選択する必要がある場合に起動されます。ウォークスルーガイドのツールチップコンテンツタイプを選択する場合、またはインラインサポートを提供するためにバッジを追加する場合に、選択モードに入ります。

［紐付け（Anchor）］ツールを使用してUIのサーフェス要素に固定するか、既存のタグ付けされたフィーチャーに付加するという2つのオプションがあります。

 

紐付け

ガイドをすばやく作成したり、フィーチャーにタグ付けせずにUIのサーフェス要素に基づいてバッジを配置したりする場合は、［紐付け］を選択します。アナリティクスを収集するために作成されるフィーチャーとは異なり、紐付けではUI要素の基になるHTMLを検証する必要はありません。

［紐付け］ツールの使用を選択した場合、画面上の要素が選択され（要素を囲む赤い枠が表示）、編集することができます。別の要素を選択するには、コンテナの左下にある［紐付けの編集（Edit Anchor）］アイコンを選択しCSSを調整するか、 ［紐付けの設定（Anchor Settings）］ウィンドウの上部から［再選択（Re-select）］を選択します。

 

 

紐付けの設定では、［一致候補（Suggested Match）］で要素の基礎となるCSSを、また［要素の合計クリック数（Total Element Clicks）］で過去12、24、36時間にその要素を使用した人数を表示し、選択しやすくしています。

 

タグ付けされたフィーチャー

既存のフィーチャーにガイドまたはバッジを配置する場合は、［タグ付けされたフィーチャー（Tagged Feature）］を選択します。

フィーチャーは、アナリティクスに使用される名前付きオブジェクトで、フィーチャーが配置されているページに変更を加えても、永続的に存在します。つまり、ガイドとバッジは、サーフェス要素に固定されたガイドとバッジよりも、フィーチャーに基づいて配置された方が安定しますが、設定に時間がかかります。選択モードでは、フィーチャーにタグを付けることはできません。フィーチャーについての詳細は、フィーチャーのタグ付けと表示を参照してください。

タグ付けされたフィーチャーは、ピンク色でハイライトされます。タグ付けされたフィーチャーにカーソルを合わせると、その名前が表示されます。

注：ページ上でクリック可能なすべての要素が、タグ付け可能というわけではありません。

エディタモード（Editor Mode）

ライトボックスを選択するか、ツールチップまたはバッジを配置すると、エディターモード（Editor Mode）になります。エディターモードでは、ガイドにコンテンツを追加できます。

コンテンツの追加

ガイドにコンテンツを追加するには、点線の長方形内にあるテキストを選択して入力を開始します。

エディターコンテナでプラス（+）アイコンの1つを選択して、コンテンツを追加します。追加できるコンテンツの種類については、後述のコンテンツブロックの種類を参照してください。

 

エディタモードの終了

ステップの編集が終わったら、エディタボックスの下部にある［保存して閉じる（Save & Close）］を選択します。これでそのステップのエディタモードが終了し、Adoptスタジオパネルが再び開かれ、ステップの追加と編集ができます。

［削除（Delete）］を選択すると、エディタモードが閉じ、作成していたステップが削除され、 Adoptスタジオパネルが再び開きます。

 

コンテンツブロックの種類

ガイドにテキスト、画像、投票調査を追加することができます。エディタモードでプラス（＋）アイコンを選択した後、テキスト（Text）ブロック、画像（Image）ブロック、自由記入式の投票調査（Open Text Poll）、数字による投票調査（Number Scale Poll）、動画（Video）のいずれかを選択します。

 

テキストブロック

テキストを太字、斜体、下線付き、ハイパーリンクにしたり、再配置したりすることができます。テキストのスタイル（タイトル、サブタイトル、または段落）を選択し、番号付きリストまたは箇条書きリストを使用することもできます。テキストを選択し、目的の書式オプションを選択します。

 

画像ブロック

コンテンツブロックに画像を追加するには、次のいずれかを実行します。

• コンピューターから画像をアップロードします。
• Imgur、Flickr、Dropboxなどの画像ホスティングサービスに画像をアップロードし、画像のURLを ［画像URL（Image URL）］ フィールドにコピーします。

 

ガイドコンテナのパーセンテージ（%）またはピクセル（px）幅に基づいて画像のサイズを変更できます。デフォルトでは、画像は100%幅でアップロードされます。

 

パーセンテージからピクセル幅に切り替えると、デフォルトのピクセル幅の数値がガイドコンテナの幅の100%に変換されます。デフォルトの数値は、画像がライトボックスガイド用かツールチップガイド用かによって決まります。

アクセシビリティのために、画像に代替テキストを追加します。代替テキストはスクリーンリーダーによって読み上げられ、画像の読み込みに失敗した場合にページに表示されます。

動画

ガイドへの動画の埋め込みについては、次のプラットフォームに対応しています。

• YouTube
• Vimeo
• Wistia
• Brightcove
• Microsoft 365 Stream
• Vidyard
• Loom

 

動画のURLを使用して、対応するストリーミングプラットフォームから動画を埋め込みます。埋め込みフォーマットは自動的に適用されます。ガイドの操作性を高めるため、自動再生は自動的にオフになります。

ガイドコンテナのパーセンテージ（%）またはピクセル（px）幅に基づいて動画のサイズを変更できます。デフォルトでは、動画は100%幅でアップロードされます。

パーセンテージからピクセル幅に切り替えると、デフォルトのピクセル幅の数値がガイドコンテナの幅の100%に変換されます。デフォルトの数値は、画像がライトボックスガイド用かツールチップガイド用かによって決まります。

アクセシビリティのために、動画に代替テキストを追加します。代替テキストはスクリーンリーダーによって読み上げられ、動画の読み込みに失敗した場合にページに表示されます。

自由記入式の投票調査

自由記入式の投票調査（Open Text Poll）は、質問と回答の2つの要素で構成されます。テキストブロックと同じ方法で、質問とテキストの書式を編集します。

 

 

数字による投票調査

数字による投票調査は、ユーザーから評価を収集します。ユーザーに評価を求めて特定のフィーチャーやプロセスに関するフィードバックを引き出したり、ユーザーが体験にどの程度満足しているかを判断したりできます。

テキストブロックと同じ方法で質問とテキストの書式を編集し、投票調査にカーソルを合わせて右側の編集アイコンを選択することで、回答者に提供したいオプションを編集します。

 

 

スケールは、0から10の間で選択することができます。また、質問に合わせてラベルを付け替えることができます。編集ウィンドウの上部にあるトグルを使用して、ラベルを表示しないように選択することもできます。数字による投票調査の編集が完了したら、［更新（Update）］を選択して続行します。

 

投票調査の回答を表示する

投票調査の回答は、公開したガイドの［投票調査の回答（Poll Responses）］タブに集約されます。投票調査を選択すると、その投票調査の質問の詳細が表示されます。

投票調査の詳細テーブルには、その投票調査の表示アプリ、タイプ、ステップ、閲覧した訪問者数が表示されます。

 

 

ステップ設定

マルチステップガイドでコンテンツを追加したり、ステップを編集したりするときに、画面の位置、背景、ターゲットページなど、ステップ設定を編集できます。

 

 

ステップ設定を開くには、エディターモードの下部にある歯車アイコンを選択します。ステップ設定を選択し、完了したら［完了（Done）］を選択します。

• ［次へ（Next）］ボタンではなく画面上の要素を使用してユーザーをウォークスルーに移動する場合は、［アンカーのクリックで進む（Advance on Anchor Click）］または［フィーチャーのクリックで進む（Advance on Feature Click）］をオンに切り替えます。
• ライトボックスを画面の最大幅にするには、［コンテナを最大化（Full Width Container）］をオンにします。これは、ガイドでライトボックスのステップを編集している場合にのみ使用できます。
• ［コンテナ幅（Container Width）］を使用して、この手順のガイドのサイズを変更します。ライトボックスを編集する場合、この設定を使用するには、［コンテナを最大化］をオフにする必要があります。
• ［画面位置（Screen Position）］を使用して、ライトボックスステップの配置を変更します。これは、ガイドでライトボックスのステップを編集している場合にのみ使用できます。
• Z-Indexを使用して、UIのガイドステップのZオーダーを設定します。
• ［背景を表示（Show Backdrop）］トグルを使用して、このステップでガイドの背後のページを暗くするかどうかを選択します。
• ［ターゲットページ（Page Location）］を使用して、このステップをサイト全体に表示するか、現在のページに表示するかを選択します。
• 最初のステップがライトボックスの場合、［ガイドの持続性（Guide Persistence）］を切り替えて、特定の要素がページに表示されたときにガイドをアクティブにし、その要素がその後消えてもガイドが持続するようにします。詳しくは、ガイドのアクティベーションをご覧ください。
• ［ステップ番号を表示（Show Step Number）］をオンに切り替えて、ステップのカウンターを表示します。

 

注：上記のオプションは、各ステップに固有です。ガイド全体で同じ設定を適用する場合は、各ステップで設定を確認してください。

ボタンの追加、編集、削除

ガイドの下部でボタンを追加、編集して、次のステップを開く、投票調査を送信する、ガイドをリリースするなどの意図したプロセスにユーザーを案内することができます。

ボタンを追加するには、エディタ下部のデフォルトボタンの横にあるプラス（+）アイコンを選択するか、ボタンがない場合は［+ボタンの追加（+ Add Button）］を選択します。

1つまたは複数のボタンを追加した後、再配置できます。左揃え、中央揃え、右揃え、分散配置のオプションがあります。選択した配置オプションは、ステップ内のすべてのボタンに適用されます。ステップ内のいずれかのボタンにカーソルを合わせ、配置アイコンを選択し、ドロップダウンメニューから配置オプションのいずれかを選択します。

 

 

アクションやスタイルを含め、既存のボタンを編集または削除するには、ボタンの上にカーソルを置き、必要に応じて編集アイコンまたはごみ箱アイコンを選択します。

新しいボタンを作成するときや編集モードでは、次のことができます。

• さまざまなボタンコントロールとナビゲーションアクションの選択。使用できるさまざまなボタンアクションについては、ガイドのボタンアクションをご覧ください。
• 「次へ（Next）」、「閉じる（Dismiss）」、「送信（Submit）」など、ボタンラベルのテキストのカスタマイズ。
• 支援技術を使用しているユーザー向けの、アクセシビリティ対応ボタンの代替名（ARIA）の作成。
• ボタンのスタイルの選択：第1、第2、または第3。