【UIパーツ大全】コーチマーク[coach mark]参考パーツ一覧

サイトやアプリの使い方を指導する「コーチマーク(coach mark)」はUI設計でとても重要な存在です。新機能の紹介や初回起動時のオンボーディングによく使われます。

ここでは実際に使われているコーチマークのパターンを紹介し、それぞれの役割やチェックポイントも説明します。

コーチマークとは

コーチマークはユーザーに特定のUI要素を指し示し、その機能や操作方法をガイドするパーツです。使用者のリテラシーを保ちつつ、正しい使い方を教えることが目的です。

主なコーチマークパターン一覧

1.ハイライトパーツ

一部の要素を明るく確認できるようにしポップアップやフェードを使って強調します。

使用例：フォーム入力項目の診断、新機能トリガーの表示

2.ツールチップパーツ

ツールチップ型はプレビュー系の教習に有効。ステップバイスで次へ次へガイドする形式です。

使用例：オンボーディング日記アプリ、新機能への最初の紹介

3.ステップパーツ

ステップ形式で複数のコーチマークを繰り返し表示します。ユーザーに次の行動を選択させる場合に有効です。

使用例：サービス初次利用のガイドツアー

4.ヒントパーツ

ほとんど表示されないがホバーヘルプとして自然な形で仕込まれているパターンです。

使用例：パスワード設定時の小さなヘルプパーツ

5.モーダル形ガイド

画面中大にオーバレイとして指示をする型。「ここに注目して欲しい」と強くユーザーに言いたい場合に使われます。

使用例：オンボーディングアプリの新規登録プロセス

使うときのチェックポイント

• 激しすぎないこと
  • ユーザーの消耗を避ける
• 短く明瞭に
  • 文章を短くし、ビジュアルで指示
• スキップとの互換性を保つ
  • 次に続く操作が切れないよう注意
• 最小限の表示期間
  • 長すぎる説明は影響力を失う

実装テクニック

• Reactコンポーネント使用
  • React Joyride，Intro.js 等
• iOS/Androidアプリ
  • CoachMarksController，TapTargetView 等
• Webサービス
  • 自作りも可。CSSモーダルを馴染

実装にはアニメーション性を持たせ別の操作を阻害しないよう配慮することが重要です。

最新トレンド

• ミニマムコーチマーク
• ゲーム感覚のあるステップ形
• 自然な結合を産むアニメーション

まとめ

コーチマークはユーザーエクスペリエンスを向上させるために不可欠な要素ですが、使い方を誤ると退屈感や不便さを生む原因にもなります。

大切なのはユーザーにとって最小限の情報を正確に伝えること。

「ここを使えば便利だよ」「次はこれをしよう」と優しく導くことでストレスを減らすコーチマークの創作を考えましょう。