オンボーディング・ガイド
はじめてのユーザーを、迷わせず前に進める。
はじめてのユーザーを迷わせず前に進める部品のカテゴリ。1つの UI 要素をスポットライトで照らして3ステップ進むウォークスルー、「はじめる」と「ログイン」を中央に置くウェルカム画面、「3/5 完了」が進むプログレスチェックリストの3種がある。原則はツァイガルニク効果。やりかけの作業は記憶に残るので、初期設定を「あと2つ」の形で見せると再訪の理由になる。逆にウォークスルーはスキップできないと離脱を生むので、どれも「抜けられる」ことを前提に作ってある。登録直後の離脱を減らしたい場面で引く。
使い分け初回の1画面は welcome-screen、操作の場所を教えるなら walkthrough（3ステップ以内・スキップ必須）、設定を促し続けるなら progress-checklist。3つを順に使うより、どれか1つを短く済ませるほうが完了率は上がる。
まず見る3件
- クリック
ウォークスルー
Walkthrough (Coach Marks)
初回ガイド（コーチマーク）。暗転した画面で1つのUI要素だけをスポットライトで照らし、吹き出しの「次へ／スキップ」で3ステップ進むたびにハイライトが移動する。ドットで現在地を示す。
- 穴は対象の矩形に 6px の余白を足して開ける。ぴったりだと枠線が対象と重なり、何が照らされているか読めない
- 吹き出しは対象が上半分なら下、下半分なら上に置く。位置を 320ms で滑らせると、次の対象がどこか目で追える
- 「スキップ」は必ず最初から出す。3ステップでも強制されると離脱するので、逃げ道を隠さない
- JS
- クリック
プログレスチェックリスト
Progress Checklist
初期設定を促すチェックリスト。項目をクリックすると打ち消し線とチェックのアニメーションで完了扱いになり、上部のプログレスバーと「3/5 完了」カウンターが進む。
- 最初から2つ完了にしておく。ゼロから始まるバーより「もう 40% 進んでいる」の方が残りをやる気になる
- 項目は行全体を 44px のボタンにする。チェック丸だけが押せる作りは、スマホで外しやすい
- 完了は打消し線＋チェック＋色の3つで示す。色だけだと、完了と未完了の差が見分けにくい人がいる
- JS
- 静的
ウェルカム画面
Welcome Screen
初回起動のウェルカム画面。アプリマーク・あいさつの見出し・ひと言の価値提案に、主要アクション「はじめる」と副次「ログイン」を中央に配した第一印象の型。
- 主ボタンは1つだけ塗る。「はじめる」と「ログイン」を同じ強さにすると、新規の人が最初の一手で迷う
- 価値提案は一文・220px 幅で2行まで。機能の列挙はウォークスルーに回し、ここでは印象だけを作る
- 出現は 12px 上昇＋フェード 500ms の一度きり。ループする装飾は入れず、ボタンへ視線を落ち着かせる
- CSSのみ
使い分け表
| パーツ | 操作 | 技術 | 向く場面 | 状態 |
|---|---|---|---|---|
| ウォークスルー Walkthrough (Coach Marks) | クリック | JS | 初回起動で主要な3〜4箇所を順に案内するコーチマーク・暗転して1要素だけ照らしたいガイド | default / hover / active |
| ウェルカム画面 Welcome Screen | 静的 | CSSのみ | 初回起動の第一印象を作る1画面・主要「はじめる」と副次「ログイン」を並べる入口 | default / hover / active |
| プログレスチェックリスト Progress Checklist | クリック | JS | 初期設定の残り項目を促すセットアップ画面・完了数をバーと「N/5 完了」で見せたいリスト | default / hover / active |
すべての見本（3件）
- クリック
ウォークスルー
Walkthrough (Coach Marks)
初回ガイド（コーチマーク）。暗転した画面で1つのUI要素だけをスポットライトで照らし、吹き出しの「次へ／スキップ」で3ステップ進むたびにハイライトが移動する。ドットで現在地を示す。
- JS
- 静的
ウェルカム画面
Welcome Screen
初回起動のウェルカム画面。アプリマーク・あいさつの見出し・ひと言の価値提案に、主要アクション「はじめる」と副次「ログイン」を中央に配した第一印象の型。
- CSSのみ
- クリック
プログレスチェックリスト
Progress Checklist
初期設定を促すチェックリスト。項目をクリックすると打ち消し線とチェックのアニメーションで完了扱いになり、上部のプログレスバーと「3/5 完了」カウンターが進む。
- JS