← 一覧へ

やってみよう「次へ」を押して、説明を順番に見てください

通知・フィードバックマイナー（知る人ぞ知る）

コーチマーク

Coach Mark / Product Tour

初めて使うときだけ、画面を暗くしてボタンを丸く照らし、「ここを押すと〜」と説明する。

別名チュートリアルオンボーディングツアースポットライトツアーガイドウォークスルー

どこで使われている？

よく見かける場所
初めて使う業務アプリ、新機能の紹介、ゲームのチュートリアル
使うとよい場面
画面上のどこに何があるかを、使い方と一緒に案内したいとき
避けたい場面
説明がないと使えない複雑な画面そのものの改善の代わり、毎回出ること

補足アプリの最初に出る、横にめくる説明画面は「オンボーディング画面」と呼び分けます。

似ているものとの違い

説明の見せ方の違い（ツールチップ・ポップオーバー・コーチマーク）

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。

HTML / CSS / JavaScript で「コーチマーク（Coach Mark / Product Tour）」を実装してください。

動き：初回起動時に画面全体を半透明の黒で覆い、説明したいボタンの部分だけを丸く切り抜いて照らす。その近くに説明文と「次へ」ボタンを出し、押すと次のボタンへスポットライトが移動する。最後まで行くか「スキップ」で終了する。

使う部品：Driver.js / Shepherd.js などのツアーライブラリ
もっと詳しく：プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

WebサイトならDriver.js / Shepherd.js などのツアーライブラリ
iPhoneアプリならTipKit（.popoverTip）
Androidアプリなら標準部品なし。ライブラリ（TapTargetView など）
Flutterならtutorial_coach_mark / showcaseview パッケージ
React Nativeならreact-native-copilot

似ているもの・一緒に使うもの