ユーザー軸の体験を考えるなら 「BONOのUX基礎」を学ぶと 自分で言語化したり、具体化するスキルが身につきます
UXデザインで顧客の課題解決を|はじめるロードマップ | BONO
どういうUIであるべきか？は ”情報設計”で適切な体験に必要な事柄を考えたり ”ビジュアルの基本”でデザインデータを作ってAIに読ませる ことができるとAIに指示ができます。
情報設計でユーザー中心の|UI設計をはじめるロードマップ | BONO
□ プロンプト
👇コピペしてお使いくだされ👇
# TODOアプリを作ってください。
いきなりコードを書き始めるのではなく、まず以下の7項目を体験設計として考えてから、その設計に沿った実装を出してください。設計の中間ファイル（experience_design.md など）の出力は不要です。**最終アウトプットは動くToDoアプリ本体（HTML/CSS/JavaScript）**だけで構いません。
## 設計時に考える項目
1. **ユーザー像** — 誰が使うか（職業・状況・特徴・1日の流れ・使う端末）
2. **ニーズ・課題** — その人がTODOアプリに求めること、解決したい困りごと
3. **体験のゴール** — 使い続けた後にどう感じてほしいか
4. **利用シーン** — いつ・どこで・どんな状況で開くか
5. **必要な機能** — 体験を成立させる最小機能（CRUDは前提）＋ユーザー像に合った+α機能（1〜2個）
6. **情報の構造** — 画面に何をどう並べるか（情報の優先順位）
7. **UIの方向性** — 雰囲気・操作感・使う色味のトーン
---
## 今回作るToDoアプリの中身（項目を埋めた設計）
### 1. ユーザー像
- 田中悠真 / 27歳 / フリーランスのWebデザイナー
- 自宅とカフェを行き来して作業。朝はiPhoneで「今日やること」を確認してから動き出す
- やる気はあるが、タスクを抱え込みすぎて「結局何から手をつけるか」で固まりがち
- メイン端末はiPhone。PC作業の合間にもスマホでチラ見する
### 2. ニーズ・課題
- 「次にやるのはこれ1つ」が画面を開いた瞬間にわかってほしい
- 一覧にズラッと並ぶと逆に手が止まる
- その日に終わらなかったタスクが勝手に消えたり、未達感で重くなったりするのが嫌
- 自分で「これは明日に回す」と能動的に決めたい
### 3. 体験のゴール
- 開いた瞬間に迷う時間がゼロになる
- 終わらなかった日も「自分で明日に回した」という前向きな締まり方ができる
- ToDoアプリを開くこと自体が苦しくない
### 4. 利用シーン
- 朝、コーヒーを淹れながらiPhoneで今日のNOWを確認
- 作業の合間にチラ見して、終わったらチェック
- 夜、残ったタスクを「明日に回す」して1日を締める
### 5. 必要な機能
**CRUD（前提）**
- 追加：画面最下部のフローティング入力バー、Enterで確定。アクティブなタブが「明日」なら明日付け、それ以外は今日付けで登録
- 表示：「今日 / 明日 / すべて」の3タブで切り替え。グループドリスト形式
- 編集：タスク文字をタップするとインラインで書き換え（Enterで確定 / Escで取消 / blurで確定）
- 削除：行の×ボタン
**+α機能（このアプリの核。これが無いとただのToDoで止まる）**
**A. NOWカード（今やる1つだけを最上部に大きく出す）**
- 画面のいちばん上に「今やるタスク」を1件だけ大きなカードで表示する
- 自動Now：ピン留めが無ければ、「今日」タブの未完了の先頭を自動的にNowにする
- 手動ピン留め：行の★ボタンで任意のタスクをNowに固定できる。固定中はカードに「★ NOW（ピン留め中）」と表示
- カード内アクションは「完了する」（プライマリ・大きく目立つ）／「固定する／固定中」／「明日に回す」の3つ。完了とその他で視覚的な強さに段差をつける
- **空状態**：今日やる未完了タスクが1件も無いときはNowカードごと非表示にする（空の枠だけ残さない）
**B. 明日に回す & 過去日の自動繰越**
- 行の「→」ボタン1タップで翌日に移動。タップ時は右にスッと抜けるアニメーション
- 起動時、過去日付の未完了タスクは黙って今日に繰越する（未達感を出さない）
- 「明日」タブに入れたタスクは、日付が変われば自動的に「今日」タブに現れる
### 6. 情報の構造（画面の上から下へ）
1. ナビゲーションバー：大タイトル「Today」
2. **NOWカード**（teal色アクセント、画面で最も視覚的に強い）
3. セグメンテッドコントロール「今日 / 明日 / すべて」
4. 未完了リスト（グループ見出し「未完了」）
5. 完了リスト（折りたたみ式、件数を `完了 (3)` のように表示。デフォルトで畳む）
6. 空状態（◯アイコン + 「タスクがありません」 + 「下のバーから追加できます」）
7. フローティング入力バー（最下部に固定、safe-area対応）
### 7. UIの方向性
- iPhoneサイズ（幅430px）の縦長レイアウト、iOSネイティブアプリ風
- 背景は iOS systemGroupedBackground（`#F2F2F7`）、白いカード/リストを浮かせる
- アクセントカラーは systemTeal（`#30B0C7`）。補助に systemBlue（`#007AFF`）／systemYellow（ピン）／systemRed（削除タップ時）
- フォントは SF系システムフォント（`-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", ...`）
- iOSの王道UIパターンを採用：大タイトル、セグメンテッドコントロール、グループドリスト、円形チェックボックス、フローティング入力バー
- ダークモード対応（`prefers-color-scheme: dark`）
- `safe-area-inset-top/bottom` を考慮
- デスクトップ幅（600px以上）では中央に430px幅のスマホフレーム風（角丸＋影）で表示
- 追加・削除・明日へ移動・チェックには 150〜200ms 程度の軽いトランジション。やりすぎない
## 技術前提
- 単一HTML（`index.html`）＋ `styles.css` ＋ `app.js` の3ファイル構成
- フレームワーク・ビルドツールなし。ブラウザで `index.html` を開けばそのまま動く
- 永続化は localStorage（キーは `todo-app/state/v1` など1つにまとめる）
## 出力
- 上の7項目の設計に沿って、ToDoアプリ実装一式（`index.html` / `styles.css` / `app.js`）を出力してください
- 設計内容を1〜2段落で軽く要約してからコードに入ってOK（長文の設計書ファイルは作らない）