コーチマーク

Coach marks

別名: コーチマーク、スポットライト、フィーチャーコールアウト、Coach marks、Spotlight、Feature callout

生態(さわってみる)

一言定義

アプリ初回起動時などに、画面上の特定の要素だけを切り抜いて強調し、短い説明を添えて操作方法を教えるオーバーレイUI。

分類

使う場面

  • 特定の1つのUI要素(新機能のボタン等)にユーザーの注意を絞って知らせたいとき
  • 初回起動時、必要最小限のヒントだけをその場で短く見せたいとき

避ける場面

  • 複数の要素を順番に、ひとつのストーリーとしてめぐらせたいとき(→ガイドツアー)
  • 頻繁に表示されると妨げになる、恒常的な説明が必要なとき(→インラインヒント)

近縁種との比較

研究ノートの同義語表が「初回案内」カテゴリとして一括りにするCoach mark / Spotlight / Tour / Walkthroughは、本図鑑では「1点を強調するか、連続してめぐるか」という基準で2エントリに分けている。1つの要素だけを切り抜いて強調するコーチマーク(本エントリ、Spotlightは同義語として吸収)と、複数の要素を順番に案内するガイドツアー(Walkthroughは同義語として吸収)である。コーチマークは案内すべき要素が1つ、あるいは互いに独立した単発のヒントであるときに向き、複数の機能をひとつづきのストーリーとして順に見せたい場合はガイドツアーを使う。ツールチップとは、要素に説明を添える点が似ているが、ツールチップが恒常的にホバーで呼び出せる補足情報であるのに対し、コーチマークは初回案内という文脈でのみ一時的に表示され、ユーザーの操作を経て二度と現れないのが原則という違いがある。

実例リンク

アクセシビリティ

role
強調対象の説明はrole="dialog"に準じた吹き出しで提示し、aria-describedbyで対象要素と関連付ける
キーボード操作
Escapeでいつでも終了でき、終了後はきっかけとなった要素へフォーカスを戻す。「次へ」「スキップ」ボタンはTabで操作可能にする
補足
背景を暗転させつつ対象要素だけ切り抜く(cutout)表現が定番。強調対象が変わるたびにフォーカスも一緒に移動させ、暗転部分をクリックしても直下の要素を誤操作しないようにする