ガイドツアー
Guided tour
別名: ガイドツアー、プロダクトツアー、ウォークスルー、Guided tour、Product tour、Walkthrough
生態（さわってみる）
一言定義
複数のUI要素を順番にめぐりながら、ポップオーバーで一つひとつの機能を段階的に説明する初回案内UI。
分類
使う場面
- 新規ユーザーに複数の主要機能を、ひとつづきのストーリーとして順番に案内したいとき
- 「戻る」「次へ」で行き来しながら、今どこまで進んだかを示したいとき
避ける場面
- 案内すべき要素が1つだけのとき（→コーチマーク）
- 実際にユーザーへ操作・入力させながらタスクを完了させたいフローのとき（→ウィザード）
近縁種との比較
ガイドツアーは、研究ノートの同義語表が「初回案内」として並べるCoach mark / Spotlight / Tour / Walkthroughのうち、複数要素を連続してめぐる系統（Tour・Walkthrough）を1エントリに統合したものである。1点だけを強調するコーチマーク（Spotlightを吸収）とは対照的に、ガイドツアーは進捗ドットや「戻る／次へ」で複数ステップを行き来しながら、機能群をひとつのストーリーとして説明する。ウィザードとは、どちらも複数ステップを順に進む構成が似ているが、ガイドツアーが既存のUI上に重なるポップオーバーで「説明を読ませる」受動的な案内であるのに対し、ウィザードは全画面レイヤーで実際に「入力・選択させて完了させる」能動的なタスク遂行フローである点で役割が異なる。
実例リンク
アクセシビリティ
- role
- 各ステップはrole="dialog"のポップオーバーとし、aria-describedbyで対象要素と関連付ける。進捗は視覚的なドット等に加え「3ステップ中2番目」のようなテキストでも補う
- キーボード操作
- 戻る/次へ/完了ボタンをTabで操作、Escapeでいつでもツアーを終了できる。ステップが切り替わるたびに新しいポップオーバー側へフォーカスを移す
- 補足
- フォーカスは各ステップのポップオーバー内に留める（フォーカストラップ）。終了時はツアー開始のきっかけとなった要素へフォーカスを戻す