§02-04Onboarding
アカウント完成度ゲージ
アカウント設定の完了率を円グラフで示す。
登録直後の利用者に未設定の項目を示し、残りの作業を促す。プロフィールや初期設定を途中で止める人が多いときに効く。
実装のポイント
完成度は項目の完了数から算出し、残り項目への直接リンクを並べて次の行動を示す。円グラフは role=「progressbar」で値を読み上げさせる。
- 特徴
- CSS のみ
- デモで使っているもの
- lucide-react
- SVG
§02-04Onboarding
アカウント設定の完了率を円グラフで示す。
登録直後の利用者に未設定の項目を示し、残りの作業を促す。プロフィールや初期設定を途中で止める人が多いときに効く。
完成度は項目の完了数から算出し、残り項目への直接リンクを並べて次の行動を示す。円グラフは role=「progressbar」で値を読み上げさせる。