---
version: "1.0"
name: 今日のくすり記録
description: >
  するりcare から派生した、朝夕のくすり服用チェックとメモを残すための小さな記録アプリ。
  スマートフォン内に保存し、介助者や本人が見返しやすいことを優先する。
status: completed
updated: 2026-05-09
---

# 今日のくすり記録 DESIGN.md

> このファイルは、`care/03.html` を今後ブラッシュアップするときのデザイン指示書です。
> `imanani.html` から生活支援機能を分割するときの共通型としても使います。

公開版：
- アプリ：`https://www.shiro39.com/care/03.html`
- DESIGN.md：`https://www.shiro39.com/care/DESIGN.md`
- ホーム導線：`https://shiro39.com/home.html` の「その他作品一覧」内、`するりcare` の下に内部リンク `care/03.html`

---

## 1. Visual Theme / 空気感

病院アプリではなく、家の中で毎日使う小さな記録帳。

- 押しつけない、急かさない
- 「まだ」ではなく「これから」のように、プレッシャーを弱める
- 医療判断ではなく、記録の補助に徹する
- 画面は静かで、文字は少なく、タップ先は大きめ
- メモはカードを積み上げず、日記やWordPressの一覧のように軽く並べる

---

## 2. Product Role / 役割

主目的は、朝・夕のくすりを「飲んだか」だけ記録すること。

- 薬名や量を毎日の記録欄には入れない
- 薬名、飲み方、気になることは下部の `薬` メモにまとめる
- 病院名、担当医、連絡先などは `病院` メモにまとめる
- 自由メモは、体調・服用タイミング・受診前に聞きたいことを残す場所
- 災害時や通院時に見返せる控えになることを意識する

完成版の範囲：
- 朝夕の服薬チェック
- 記録・メモ・薬・病院のコピー
- メモ・薬・病院の追加/変更
- データ保存/日付あり保存/読み込み
- アイコン・背景画像・免責事項

---

## 3. Colors / カラーパレット

```css
--bg: #eee0d6;
--panel: rgba(250,242,235,0.86);
--panel-strong: #f8eee5;
--line: rgba(126,94,78,0.22);
--text: #47372f;
--muted: #806b61;
--quiet: #9b877e;
--accent: #d98aa0;
--accent-strong: #c97791;
--good: #76aa88;
--link: #4d7fa8;
--danger: #df7474;
--mint-soft: #dfeee4;
--pink-soft: #f4dfe5;
```

ベージュだけに寄せず、くすみピンク・ミント・青を小さく混ぜる。
危険操作は赤を強くしすぎず、できるだけ操作導線自体を控えめにする。

---

## 4. Typography / 文字

```css
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
letter-spacing: 0;
```

- 見出しは20px前後まで。大げさにしない
- 本文・ボタンは14px以上を基本にする
- ラベルは必要な時だけ表示し、分かる入力は `sr-only` で補助する
- 説明文は短く、1文で終える

---

## 5. Layout / レイアウト

- スマホ1カラム、最大幅430px
- セクションは小さなカードとして区切る
- 操作の主軸は上から順に `くすり記録` → `メニュー` → `これまでの記録` → `メモ` → `薬` → `病院` → `データ`
- `メモを追加` はくすり記録の下に折りたたみで置く
- メニューは `メモ / 薬 / 病院 / データ` の順

---

## 6. Components / コンポーネント

### 状態プレビュー

- 今日の記録や今日のメモがある時だけ表示
- `これから` は表示しない
- 表示例：`朝 ✓ / 夕 ✓`
- 今日のメモがあればサブテキストに出す

### 一覧プレビュー

メモ・これまでの記録・薬・病院は、カードではなく薄い行表示にする。

```text
5/9
昼のんだ、体調良好
```

- 通常時は本文中心
- 操作ボタンは常時出さない
- 選択・変更・削除など、操作が必要な時だけ枠色とボタンを出す
- 選択中は淡いピンク背景で、どこを操作しているか分かるようにする

### メモ変更

1. `変更` を押す
2. メモを選ぶ
3. 下部の `選んだメモを変更` を押す
4. 編集フォームに入る

編集フォーム：

```text
右上：クリア

日付
メモ本文

下：やめる　保存
```

- 編集中は選択モード用の `やめる / 選んだメモを変更` を非表示
- 編集フォームは選択中と同系色にする
- `クリア` は削除に近いので保存ボタンと並べない

### 薬・病院プレビュー

- 通常時は本文だけ表示
- 見出し右側に `コピー` / `変更` を置く
- `コピー` は薬・病院それぞれの本文だけをコピーする
- `変更` から選択モードに入る
- 選択モード中は、行を押すと選択色になり、下部に `やめる` / `選んだ薬メモを変更` または `選んだ病院メモを変更` が出る
- 選択中はメモと同じく `○` が `●` に変わる
- 変更中は右上 `クリア`、下部 `やめる` / `保存`
- 変更中は新規追加用の `追加` ボタンと入力欄を非表示にする
- 本文を空にして保存した時だけ削除確認を出す
- 一括削除は置かない
- `消す` ボタンは常時表示しない

### 追加フォーム

- メモは `メモを追加`
- 薬は `薬を追加`
- 病院は `病院を追加`
- 薬・病院の追加欄は一覧の下に置く
- 薬・病院の追加欄は折りたたみ。登録がない時だけ最初から開く
- 折りたたみの中の実行ボタンは短く `追加`

---

## 7. Copy / 文言ルール

- 未記録は `これから`
- 記録済みは `✓ 飲んだ`
- タイトルは `今日のくすり記録`
- セクション見出しは `くすり記録`
- 説明文は `くすりを飲んだら押す。日付を変えると、その日の記録になります。`
- 削除は強く見せない。必要な場所だけ `消す`
- 医療的な助言に見える例文は避ける

---

## 8. Data / 保存方針

- 保存は端末内 `localStorage`
- 外部送信なし
- 保存キーは `care_med_v1_*`
- 既存 `care/02.html` の `care_v1_*` とは分離
- 記録は最新90日分、メモは80件を目安に保存
- データ欄は `保存` / `保存（日付あり）` / `読み込む`
- 保存ファイル名は `今日のくすり記録.json`
- 日付あり保存は `今日のくすり記録-YYYY-MM-DD.json`
- ファイル保存先は端末・ブラウザ設定に依存する

---

## 9. From imanani / 分割時の対応表

| imanani側 | 03.html側 | 方針 |
|---|---|---|
| 薬チェック | くすり記録 | 朝夕だけの最小操作にする |
| メモ | メモを追加 / メモ一覧 | タグなし自由記入 |
| 病院情報 | 病院 | 1つの自由記入欄にまとめる |
| 薬情報 | 薬 | 薬名・飲み方・気になることを自由記入 |
| データ管理 | データ | 保存・日付あり保存・読み込み |

---

## 10. Reuse Guide / 他機能への使い方

他の生活支援アプリへ分割する時も、以下を優先する。

- 毎日押す主操作は1画面上部に置く
- 詳細情報は下部の自由メモに逃がす
- 一覧は薄いプレビュー表示にする
- 通常時は閲覧、操作時だけボタンを出す
- 一括削除は原則置かない
- 免責事項や注意書きはフッター付近に集約する

---

## 11. Do's and Don'ts

DO:
- 短い言葉を使う
- 記録済みだけをプレビューに出す
- 操作中の場所を淡い背景で示す
- 医療判断は主治医へ相談する文脈にする

DON'T:
- `まだ` などプレッシャーの強い言葉を使う
- 薬名や量を毎日の記録欄に入れる
- 削除ボタンを常時目立たせる
- 医療的な例文を詳しく書く
- 1つの画面に説明を増やしすぎる

---

## 12. AIへの依頼テンプレート

```text
care/03.html を、この DESIGN.md に沿って調整してください。

優先：
- 通常時はプレビュー中心
- 操作ボタンは選択時・編集時だけ表示
- メモは日付→本文の薄い行表示
- 薬・病院は自由記入メモとして扱う
- 医療判断に見える文言は避ける

確認：
- JS構文チェック
- shiro39.com / www.shiro39.com の公開確認
- session.md / work-log.md / IMANANI-SPLIT-PROJECT.md の記録更新
```