§02-02Onboarding
プロダクトツアー
画面の要素を順に照らしながら使い方を案内する。
初回利用時に主要な機能の場所と役割を順番に案内する。説明を読まずに使い始める人にも、最初の操作を迷わせないために使う。
実装のポイント
対象要素の getBoundingClientRect からスポットライトの位置を算出し、box-shadow の大きな影で周囲を暗くする。リサイズとスクロールで再計測する。
- 特徴
- 状態管理
- デモで使っているもの
- shadcn/ui
- lucide-react
- ResizeObserver