Skip to content

C-08: コーチ導入体験(導入画面 + 呼吸セッション)

項目内容
ステータス✅ Done
カテゴリCoach
優先度-

実装状況(main 基準)

領域状況
コーチ入口CoachHomeView に「話しかける」「日記から話す」導線は実装済み
日記起点DiaryPickerViewCoachStore.startSessionWithDiary で日記文脈付きチャット開始は実装済み
呼吸セッションBreathingSessionView で 4-2-6-2 のフェーズ表示、同心円アニメーション、1/3/5 分選択を実装済み
ログMeditationStore / MeditationLog を利用して呼吸ログをローカル保存
履歴SessionHistoryView で対話履歴と呼吸履歴をタブ表示。会話履歴は /sessions と連携済み

MeditationView は汎用タイマーとして残しているが、Coach 画面中央アイコンから開く主導線は BreathingSessionView に切り替え済み。

実装結果

MVP では CoachHomeView を導入画面として活かし、中央の Cycle アイコンから呼吸セッションへ入る。呼吸セッションはコーチチャットへ自動遷移せず、完了後はユーザーが手動で戻る。

実装内容

  1. BreathingCycle に 4秒吸う / 2秒止める / 6秒吐く / 2秒止めるの純粋ロジックを追加。
  2. BreathingSessionView でフェーズ文言、残り時間、同心円アニメーションを表示。
  3. セッション時間は 1 / 3 / 5 分のプリセット選択。
  4. 完了/終了時に MeditationStore へ呼吸ログを保存。
  5. 履歴画面では呼吸ログとして表示。

受け入れ条件

  • [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トーン

  • 余白を広めに取る
  • 情報量は少なく、静かな印象を優先
  • コントラストは強すぎず、やわらかい見え方
  • 操作感よりも「整う感覚」を優先