個人開発のWeek1で実施した内容の備忘録です。
Week3くらいまではソースコードをリポジトリ参照にする予定です。
TL;DR
- テーマ3種（ライト/ダーク/ターコイズ）を設定画面から即時切替
- 同意ゲート：解析/広告は「同意後のみ」有効、未同意でも利用可
- 広告フッター枠：未同意・未設定はダミー表示、条件が揃ったら本番タグを描画
- LPページから体験導線（/lp → 今すぐ体験する → /home）
- 最後に**Git登録（commit/push）**で締め
今回のスコープ（ユーザー体験の“見える化”）
- 設定→テーマ切替が即時反映（UI崩れなし）
- 同意しない場合はGA/広告が動かず、アプリ自体は使える（端末内のみ）
- LP→Homeの導線を用意（「今すぐ体験する」）
完成イメージ
- 設定画面：テーマ切替トグル（Before/After）
- 初回起動：同意ダイアログ（「同意せずに続ける」でも入れる）
- フッター広告枠：ダミー表示→同意＆設定後の本番表示
- LP → Home 遷移（CTAボタン）
実装の要点（コードはリポジトリ参照）
- テーマ：HTMLのdata-themeにバインドし、localStorageで永続化（既定はLight）
- 同意ゲート：co_consentで分岐、未同意でも利用可。許諾時に__consentOK()で解析起動
- 広告枠：未同意/未設定はダミー。本番は環境変数でclient/slotを注入し動的ロード
- LP導線：/lpに紹介文とCTA、/homeへ遷移
受け入れ基準
- テーマ切替が即時反映
- 同意しない場合、GA/広告が動かない（ダミーのまま）
- LP→Homeに遷移できる
- フッター広告枠でUIが崩れない（誤タップ防止余白あり）
Gitログ
Commit：Week1: themes (3), consent gate, footer ad slot, LP page
トラブルシュート（よくあるつまずき）
-
画面が真っ白 → npm install → npm run dev -- --host、コンソールエラー確認
-
広告が出ない → 同意済みか？VITE_ADS_PUB_ID/VITE_ADS_SLOT設定は？（なければダミー表示でOK）
-
テーマが反映されない → と localStorage['co_theme'] を確認
学び（設計判断の要旨）
- 同意後のみ外部連携：デフォルト拒否で権利配慮を担保しつつ、利用は妨げない
- 広告は段階導入：同意×環境変数×審査を満たしたら描画（未満はダミー）
- LPの役割：最短で体験に繋ぐCTAと説明の最小セット
次回（Week2）予告
初回体験の磨き込み、週次ハイライトの可視化に着手