本文へ移動

§02-02Onboarding

プロダクトツアー

画面の要素を順に照らしながら使い方を案内する。

初回利用時に主要な機能の場所と役割を順番に案内する。説明を読まずに使い始める人にも、最初の操作を迷わせないために使う。

実装のポイント

対象要素の getBoundingClientRect からスポットライトの位置を算出し、box-shadow の大きな影で周囲を暗くする。リサイズとスクロールで再計測する。

特徴
  • 状態管理
デモで使っているもの
  • shadcn/ui
  • lucide-react
  • ResizeObserver

このパターンが効く目的