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

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

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

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

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

 

 

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

 

 

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

 

 

ガイドタイプとオプション

ガイドは、ガイド、バッジ、確認の3タイプから選択できます。3つのガイドタイプの使用方法、アクティベーション方法、カスタマイズ方法については、ガイドのアクティベーションの記事をご覧ください。

選択したガイドタイプにかかわらず、ライトボックスおよびツールチップの任意の組み合わせで構成される複数のステップを追加できます。

ライトボックス

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

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

ツールチップ

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

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

ガイドの作成

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

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

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

 

 

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

4. ガイド、バッジ、確認のいずれを作成するかを選択します。これらのオプションの違いに関するガイダンスは、ガイドのアクティベーションの記事を参照してください。

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

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

7. 選択したガイドタイプ（ガイド、バッジ、確認）に応じたオプションを使用して、ガイドの作成を開始します。

ガイド

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

バッジ

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

確認

確認を作成する場合は、ページ右側のAdoptスタジオのパネルで［要素を選択（Pick an Element）］を選択し、［ライトボックス］または［ツールチップ］のいずれかを選択します。これにより、［選択モード］が開き、ユーザーに続行を許可する前に確認モーダルを開くボタンを選択できるようになります。次に［エディタモード ］に入ると、コンテンツを追加するように求められます。確認について詳しくは、ガイドのアクティベーションの記事をご覧ください。

選択モード

［選択モード］は、ガイドをアクティブ化する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）

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

コンテンツの追加

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

エディターコンテナでプラス（+）アイコンの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）］を選択します。

ステップ設定は、ウィンドウの左側にあるタブごとに整理されています。オプションは各ステップに固有です。ガイド全体で同じ設定を適用する場合は、各ステップで設定を確認してください。

プロパティ

すべてのステップタイプに［プロパティ（Properties）］タブが含まれます。タブ内の個々のオプションは、ライトボックスとツールチップのどちらを編集するかによって異なります。

• ライトボックスを画面の最大幅にするには、［コンテナを最大化（Full Width Container）］をオンにします。これは、ガイドでライトボックスのステップを編集している場合にのみ使用できます。
• ［コンテナ幅（Container Width）］を使用して、この手順のガイドのサイズを変更します。ライトボックスを編集する場合、この設定を使用するには、［コンテナを最大化］をオフにする必要があります。
• ［背景を表示（Show Backdrop）］トグルを使用して、このステップでガイドの背後のページを暗くするかどうかを選択します。
• ［ステップ番号を表示（Show Step Number）］をオンに切り替えて、ステップのカウンターを表示します。

 

場所

すべてのステップタイプに［場所（Location）］タブが含まれます。タブ内の個々のオプションは、ライトボックスとツールチップのどちらを編集するかによって異なります。

• ［ターゲットページ（Page Location）］を使用して、このステップをサイト全体に表示するか、現在のページに表示するかを選択します。
• Z-Indexを使用して、UIのガイドステップのZオーダーを設定します。
• ライトボックスステップでは、［画面位置（Screen Position）］を使用して、ライトボックスステップの配置を変更します。これは、ガイドでライトボックスステップを編集している場合にのみ使用できます。

 

• ツールチップステップでは、［要素に合わせて配置（Position to Element）］オプションを使用して、ページ上の要素を基準にしてツールチップの配置を指定します。オプションでは、自動（デフォルト）、要素の上、下、右、または左を選択できます。

 

バッジ

このタブは、バッジでアクティブ化されたガイドのみに含まれ、このタイプのガイドの最初のステップでのみ表示されます。このタブで利用可能なすべてのオプションを表示するには、右側のスクロールバーを使用します。バッジオプションの詳細については、ガイドのアクティベーションをご覧ください。

• ［バッジアイコン（Badge Icon）］を使用して、バッジのアイコンを変更または新規アイコンをアップロードします。
• ［位置（Position）］を使用して、バッジがUIに表示される位置を選択します。
• ［オフセット（Offset）］フィールドを使用して、ターゲット要素に対するバッジの位置を調整します。
• ［色（Color）］を使用して、デフォルトのアイコンの色を変更します。
• ［Zインデックス（Z-Index）］を使用して、UIでのバッジのZオーダーを設定します。
• ［ARIAラベル - アクセシブルな名前（ARIA Label - Accessible Name）］を使用して、バッジのアクセシブルな代替（ARIA）名を作成します。
• ［ガイドの動作（Guide Behavior）］を使用して、選択時にのみガイドを表示するか、ユーザーがバッジにカーソルを合わせたときにも表示するかを選択します。
• ［バッジの動作（Badge Behavio）］を使用して、バッジを常に表示するか、バッジが添付されている要素にユーザーがカーソルを合わせたときにのみ表示するかを選択します。

 

高度な設定

［高度な設定（Advanced）］タブは特定のシナリオでのみ表示され、そのシナリオのみに関連するオプションを選択できます。

• 最初のステップがライトボックスの場合、［ガイドの持続性（Guide Persistence）］を切り替えて、特定の要素がページに表示されたときにガイドをアクティブにし、その要素がその後消えてもガイドが持続するようにします。詳しくは、ガイドのアクティベーションをご覧ください。
• ツールチップとバッジの場合は、［要素包含判定ルールを有効化（Enable Element Contains Rule）］をオンに切り替えて、ページのターゲット要素の内容に基づいて条件に応じたステップを表示します。詳しくは、ガイドのアクティベーションをご覧ください。
• ［次へ（Next）］ボタンではなく画面上の要素を使用してユーザーをウォークスルーに移動する場合は、［アンカーのクリックで進む（Advance on Anchor Click）］または［フィーチャーのクリックで進む（Advance on Feature Click）］をオンに切り替えます。

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

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

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

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

 

 

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

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

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