Appearance
C-08: コーチ導入体験(導入画面 + 呼吸セッション)
| 項目 | 内容 |
|---|---|
| ステータス | ✅ Done |
| カテゴリ | Coach |
| 優先度 | - |
実装状況(main 基準)
| 領域 | 状況 |
|---|---|
| コーチ入口 | CoachHomeView に「話しかける」「日記から話す」導線は実装済み |
| 日記起点 | DiaryPickerView と CoachStore.startSessionWithDiary で日記文脈付きチャット開始は実装済み |
| 呼吸セッション | BreathingSessionView で 4-2-6-2 のフェーズ表示、同心円アニメーション、1/3/5 分選択を実装済み |
| ログ | MeditationStore / MeditationLog を利用して呼吸ログをローカル保存 |
| 履歴 | SessionHistoryView で対話履歴と呼吸履歴をタブ表示。会話履歴は /sessions と連携済み |
MeditationView は汎用タイマーとして残しているが、Coach 画面中央アイコンから開く主導線は BreathingSessionView に切り替え済み。
実装結果
MVP では CoachHomeView を導入画面として活かし、中央の Cycle アイコンから呼吸セッションへ入る。呼吸セッションはコーチチャットへ自動遷移せず、完了後はユーザーが手動で戻る。
実装内容
BreathingCycleに 4秒吸う / 2秒止める / 6秒吐く / 2秒止めるの純粋ロジックを追加。BreathingSessionViewでフェーズ文言、残り時間、同心円アニメーションを表示。- セッション時間は 1 / 3 / 5 分のプリセット選択。
- 完了/終了時に
MeditationStoreへ呼吸ログを保存。 - 履歴画面では呼吸ログとして表示。
受け入れ条件
- [x] コーチ画面から呼吸セッションへ遷移できる。
- [x] 呼吸フェーズ文言と残り時間が表示される。
- [x] 円の拡大縮小がフェーズと同期する。
- [x] 終了しても自動でチャットへ遷移しない。
- [x] VoiceOver で現在フェーズと残り時間が読める。
- [x] 既存の「話しかける」「日記から話す」導線が維持される。
非対象
- AI が呼吸状態を解釈する機能
- 呼吸ログのサーバー同期
- 複数の瞑想プログラム
- セッション後の自動コーチング開始
目的
AIコーチとの対話前に、ユーザーが呼吸を整えて内省モードに入る導線を作る。 単なる遷移画面ではなく、Cycleらしい「静けさ」「余白」「整える感覚」を担う重要な入口として位置づける。
補足
呼吸セッション(瞑想モード)は、コーチ導入の一部ではなく、独立機能として存在する。 コーチ導入画面から呼吸セッションへ遷移できるが、呼吸セッション自体はコーチに依存しない。
画面構成
1. 対話導入画面(CoachHomeView)
画面概要
- 上部タイトル: 「セッション」
- 中央に Cycle の木アイコン
- その下にテキスト: 「タップして、呼吸を整える」
カード配置(縦並び2枚)
| カード | タイトル | 説明 | 左アイコン | 右 |
|---|---|---|---|---|
| 1 | 新しく会話する | 今感じていることから / 対話をはじめる | プラス | Chevron |
| 2 | ジャーナルから会話する | 書いた記録をもとに / 深く掘り下げる | ドキュメント | Chevron |
2. 呼吸セッション画面(BreathingSessionView)
画面概要
- 背景はデフォルト色
- 中央に薄い同心円2本
- その下に呼吸フェーズ文言(例: 「息を吐く」)
- その下に残り時間(例: 「4:51」)
画面下部
- 左: 「セッション時間」 / 右: 選択中の時間
- 1分 / 3分 / 5分のプリセット選択
- 最下部に「終わる」ボタン
遷移仕様
- 導入画面中央の木アイコンタップ → 呼吸セッション開始
- 「新しく会話する」タップ → 新規チャット開始
- 「ジャーナルから会話する」タップ → ジャーナル文脈付きチャットへ遷移
- 呼吸セッション終了後 → 終了表示し、ユーザーが手動で導入画面に戻る(自動遷移しない)
呼吸ロジック
以下のサイクルで進行:
| フェーズ | 秒数 |
|---|---|
| 息を吸う | 4秒 |
| 息を止める | 2秒 |
| 息を吐く | 6秒 |
| 息を止める | 2秒 |
アニメーション
- 円は呼吸サイクルに合わせて拡大縮小
- 吸うとき → 拡大
- 止めるとき → 静止
- 吐くとき → 縮小
- ゆっくり静かなアニメーション(刺激の強い動きはNG)
UIトーン
- 余白を広めに取る
- 情報量は少なく、静かな印象を優先
- コントラストは強すぎず、やわらかい見え方
- 操作感よりも「整う感覚」を優先