ガイドには、次の2種類があります。
- ウォークスルーガイド。ツールチップとライトボックスを組み合わせて設定できます。
- バッジ。ページ上に配置されたアイコンを、エンドユーザーが選択したりカーソルを合わせたりしたときに、インラインでサポートします。
ウォークスルーガイドのアクティベーション方法
ウォークスルーガイドは、自動的に、あるいはリソースセンターを通じて、またはその両方を組み合わせてユーザーに表示できます。アクティベーションオプションが選択されていない場合、デフォルトで自動アクティベーションが適用されます。自動アクティベーションを無効にして、ガイドがまったく表示されないようにすることもできます。
自動アクティベーションをオンまたはオフにするには:
- 左側のナビゲーションで、[ガイド(Guide)]に移動します。
- リストからガイドを検索して開きます。
- アクティベーションカードの右上の[編集(Edit)]を選択します。
- 必要に応じて、自動アクティベーションをオンまたはオフにします。
- [保存]を選択します。
既存のガイドをリソースセンターに追加するには:
- 左側のナビゲーションで、リソースセンターに移動します。
- リストから[リソースセンター(Resource Center)]を開きます。
- ない場合は、[ガイドリストモジュール(Guide List Module)]を追加します。
- [ガイドリストモジュール]にカーソルを合わせ、[モジュール詳細を表示(View Module Details)]を選択します。
- コンテンツカードの右上の[編集]を選択します。
- ドロップダウンメニューから、目的のガイドを選択します。
- [保存]を選択します。
インラインサポートのバッジオプション
ページに配置したバッジをユーザーが操作すると、インラインサポートが有効になります。バッジはガイドの一種で、常時表示するとUIが煩雑になるような、フィーチャーに関する補足説明を提供するために使用されます。バッジのガイドタイプをページに追加する方法については、ガイドデザイナー:Adoptスタジオ(Adopt Studio)の記事のガイドの作成の手順に従ってください。
バッジ設定には多くのオプションがあります。この設定には、バッジの作成中または編集中にバッジコンテナの下にある歯車アイコンを選択してアクセスできます。これらの設定では、次のことができます。
- バッジアイコンを選択する。
- バッジの位置を選択する。
- バッジのピクセルオフセットを入力する。
- アイコンの色を16進数に基づいて選択する。
- バッジ配置のZインデックスを設定する。
- [背景を表示(Show Backdrop)]オプションでインラインサポートを開いているときに、背景を表示または非表示にする。
- 要素包含判定ルールを有効にするオプションを使用して、条件に応じてバッジを表示する。
- バッジをサイト全体に表示するか、[ターゲットページ(Page Location)]の下の特定のページに表示するかを選択する。
次のオプションもカスタマイズできます。
- ガイドの動作。バッジアイコンがクリックされたときのみガイドを表示するか、ユーザーがバッジアイコンにカーソルを合わせたときにも表示するかを選択します。
- バッジの動作。 バッジを常にページに表示するか、ユーザーがバッジが添付されている要素の上にカーソルを置いたときにのみ表示するかを選択します。
標準のアイコンから選択するだけでなく、バッジ用のカスタム画像をアップロードするオプションもあります。バッジを作成または編集する場合は、以下のように行います。
- ガイドコンテナの下にある歯車アイコンを選択して、[バッジ設定(Badge Settings)]を開きます。
- [バッジアイコン(Badge Icon)]ドロップダウンメニューを開き、[カスタム画像(Custom Image)]を選択します。
- [バッジ設定]ウィンドウの上部に表示される灰色のボックスに画像をアップロードします。
- [バッジ設定]の右下にある[完了(Done)]を選択します。
アップロードするアイコンは、意図するバッジのサイズである必要があります。標準的なアイコンサイズは14×14ピクセルです。
要素にはツールチップとバッジのルールが含まれています
要素包含判定ルールを使用して、ターゲット要素の内容に基づいて条件付きでツールチップやバッジを表示します。要素には、テキストまたは数値が含まれます。
ツールチップとバッジについては、「ガイドデザイナー:Adoptスタジオ(Adopt Studio)」を参照してください。ガイドの作成手順を確認できます。
初めてツールチップを作成した場合や、UIにバッジを配置した場合は、次の手順を行います。
1. 歯車アイコンを選択し、[設定(Settings)]を開きます。
2. [要素包含判定ルール(Enable Element Contains Rule)]オプションを切り替えます。
3. 最初のドロップダウンメニューから、コンテンツの種類([テキスト(Text)]または[数字(Number)])を選択します。
4. 2番目のドロップダウンメニューから値オプションを選択します。
5. 値を入力します。
6. [完了(Done)]を選択します。
[テキスト]をコンテンツタイプに選択すると、[次を含む(Contains)]、[次を含まない(Does Not Contain)]、「次と完全一致する(Exactly Matches)]、[次と一致しない(Does Not Match)]を利用できます。[数字]をコンテンツタイプに選択すると、[次の値と等しい(Equals)]、[次の値と等しくない(Not Equal To)]、[次の値より大きい(Is Greater Than)]、[次の値より小さい(Is Less Than)]を利用できます。
1つのガイドに設定できる要素包含判定ルールは、1つのみです。
ライトボックスのガイドの紐付けと持続性
ガイドの持続性(Guide Persistence)を使用して、要素が表示されたときにガイドをアクティブにし、要素が消えてもガイドが持続するようにします。
ライトボックスをガイドの最初のステップとして使用する場合、時間制限のあるアラートやモーダルなど、画面に表示される特定の要素にそのガイドを固定できます。ガイドの最初のステップとしてライトボックスを作成したら:
1. ガイドコンテナの下にある歯車アイコンを選択して、[ステップ設定(Badge Settings)]を開きます。
2. [ガイドの持続性(Guide Persistence)]オプションを切替えます。
3. [選択する(Make selection)]ボタン、または既存の選択範囲を変更する場合は[選択し直す(Re-select)]ボタンを選択してください。
4. ガイドを紐付けるUI要素を選択します。
5. [完了(Done)]を選択します。
[ステップの設定(Step Setting)]の詳細については、「ガイドデザイナー:Adoptスタジオ(Adopt Studio)」の記事の「エディタモード(Editor Mode)」を参照してください。