UV指数メモ

天気とUV指数の目安を見ながら、外出予定・日焼け止めの塗り直し・対策チェック・肌の状態メモを 1日単位 で残せる、セルフケア用のかんたん記録ツールです。設定タブやログイン不要で、1画面の「道具箱」としてその日の紫外線ケアをまとめて記録できます。

公開 URL: https://ai-app-gen-factory.pages.dev/005-uv-index-memo/

これは日常の紫外線対策を忘れにくくするための 記録ツール です。表示はあくまで目安であり、医療判断・皮膚疾患の診断・天気予報の保証ではありません。気になる症状がある場合は専門家に相談してください。

機能

• 時間帯別 UV バー（画面上部に固定）: 早朝・朝・昼前・正午・午後・夕方の6スロットに、その時間帯のUV指数の目安を記録。現在の時間帯には「今」バッジが付き、選んだスロットの色とバーが値に応じて変わります。
• 今日の記録フォーム: 場所メモ、天気、UV指数（0〜11+）、外出する時間帯、日差しの強さ、肌の状態メモを入力。
• 日焼け対策チェック: 日焼け止め・帽子・日傘・サングラス・長袖・水分補給の6項目を、タップでオン/オフ。完了状況がひと目で分かります。
• 塗り直しログ: 時刻・使ったアイテム・次の目安時刻・メモを追加して、塗り直しの履歴を時系列で確認。
• 直近の記録: 保存した日付ごとのカードを最新順に最大7日分表示。過去の記録を開いて編集したり、個別に削除できます。
• Xでシェア: 当日のUV指数の目安・対策・塗り直し回数をまとめた文面で、ハッシュタグ #UV指数メモ 付きの投稿画面を開けます。

UV指数の目安

入力したUV指数に応じて、一般的な注意表現で色分けして表示します（数値はすべて手入力の目安です）。

使い方

1. 画面上部の日付を確認します（初期値は今日）。過去の日付に切り替えると、その日の保存済み記録を読み込みます。
2. 時間帯バーでスロットを選び、UV指数スライダーを動かしてその時間帯の目安を入れます。
3. 「今日の記録」で場所・天気・日差しの強さ・肌メモを記入します。
4. 「日焼け対策チェック」で実施した対策をタップします。
5. 塗り直したら「塗り直しログ」に時刻とアイテムを追加します。
6. 「この日の記録を保存」 を押すと、その日付の記録が保存され、「直近の記録」に並びます。
7. 入力をやり直したいときは「当日リセット」、過去分を消したいときは各カードの「削除」または「履歴を全削除」を使います（いずれもアプリ独自の確認モーダルが出ます）。

UV指数や天気の取得は 手入力が基本 です。外部APIやブラウザ位置情報には依存しておらず、オフラインでもすべての主要機能が使えます。

データ保存・技術

• 入力内容は お使いのブラウザの localStorage にだけ保存されます（保存キー: uv-index-memo:v1）。
• サーバー送信は行いません。データは日付ごとに分けて保存されます。
• 別の端末・別のブラウザ・シークレットウィンドウとはデータが共有されません。ブラウザのデータを消去すると記録も消えます。
• 依存ライブラリなしの 静的サイト（HTML / CSS / バニラ JavaScript）。Cloudflare Pages でのサブディレクトリ配信を前提にしています。
• PC・スマートフォンの両方に対応したレスポンシブレイアウト。スマホでは UV バー → 今日の記録 → 対策チェック → 塗り直しログ → 直近の記録の順に縦に並びます。
• 確認ダイアログ・通知はブラウザ標準の alert / confirm を使わず、アプリ独自のモーダルとトーストで実装しています。
• デザインはグレー基調 × 警告黄アクセントの「ミニマル道具箱」スタイル。
• 画像アセット（バナー・favicon・背景・UVスケール・対策キット・タイムライン）を装飾に使用し、いずれも読み込めない場合に備えて CSS だけで成立するフォールバックを用意しています。

ファイル構成

005-uv-index-memo/
  index.html     画面構造とメタ情報（OGP / Twitter Card / favicon）
  styles.css     スタイル（パレット・レイアウト・レスポンシブ・モーダル/トースト）
  app.js         記録ロジック、localStorage 保存、モーダル/トースト、シェア導線
  assets/        banner / favicon / background / UVスケール / 対策キット / タイムライン画像
  README.md      このファイル