🌙 YumeTree — モルペウスと育てるAI夢ノート
YumeTree（ユメツリー） は、朝の夢を忘れる前に記録し、モルペウスと一緒に感情や画像で振り返るAI夢ノートです。
夢の内容を記録すると、OpenAI API が分析文と感情タグを返し、日々の夢を単なるメモではなく、自分や大切な人と振り返るきっかけに変えます。
音声入力、AI分析、感情タグ、夢の画像生成を通じて、ひとりでも、家族・恋人・友達とも楽しめるプライベートな夢の記録体験を目指しています。
🌐 本番URL: https://dreamjournal-app.vercel.app
概要
YumeTree（ユメツリー）は、夢の記録・AI 分析・感情タグの可視化・夢の画像生成を組み合わせた、プライベートなAI夢ノートです。
フロントエンドは Next.js 16、バックエンドは Rails 7.2 API を採用し、認証、AI 連携、寄付・月額課金、監視、テストまでを個人開発で一貫して構築しています。
技術選定では「モダンだから」ではなく、ひとりでも、大切な人とも迷わず使える UX と、継続運用しやすい構成になるかを重視しています。
1. 解決する課題とプロダクト体験
夢の記録と AI 分析
子どもでも扱いやすく、大人も迷わず使えるよう、ひらがなを多めに使った表現やシンプルな入力導線を意識しています。
記録した夢は OpenAI API（デフォルト gpt-4o-mini）で分析し、短い解釈文と感情タグを返します。使用モデルは OPENAI_CHAT_MODEL 環境変数で切り替え可能な設計にしており、本番挙動を変えずにコスト・品質の比較検証ができます。日々の夢を単なるメモで終わらせず、自分のセルフケアや、大切な人との会話のきっかけに変えることを狙っています。
音声入力による夢の記録
Whisper API を使った音声録音→テキスト変換→分析の一連フローを実装しています。
「朝起きたばかりで文字を打つのが面倒」という場面に対応し、録音ボタン一つで夢を記録できます。
gpt-image-1 による夢のビジュアル化
夢の内容や AI 分析結果をもとに OpenAI の画像生成モデル（gpt-image-1）で画像を生成し、夢の世界をビジュアルで表現できます。
月次 31 枚上限（check_monthly_image_limit）でコストを管理し、Rack::Attack による追加のレート制限も設けています。
2026 年 5 月廃止予定だった dall-e-3 から gpt-image-1 へ移行済みで、b64_json レスポンスを直接 DB に保存することで期限切れ URL の問題を解消しています。
月次サマリーと統計
月別アーカイブページでは、その月の記録数・記録日数・感情 Top 3 などの統計をまとめて表示します。
連続記録のストリークバッジも用意し、日々の記録継続を楽しめる仕組みを取り入れています。
さらに「きもちインサイト」ダッシュボード（/insights）では、今月の振り返りを 1 ページに集約しています。KPI・ムードカレンダー（各日を最頻感情色で塗るヒートマップ）・モルペウスの月まとめ・きもち TOP5・半年分の記録トレンドを、追加の API を増やさずクライアント側の集計で表示します。
夢の森と今週のゆめニュース
記録を「続けたくなる」体験にするため、夢を残すたびに木が育つ「夢の森」を用意しています。プロフィール（自分・家族など）ごとの森を俯瞰でき、収穫演出やモルペウスの案内で、記録の継続そのものが小さな達成になるよう設計しています。
ホームには「今週のゆめニュース」ウィジェットを配置し、直近 7 日間の夢をプロフィールごとに要約します。新しい API を追加せず、ホームが既に取得済みの夢・プロフィールデータをその場で集計する軽量な実装にしています。
認証・寄付・月額課金
認証は JWT を HttpOnly Cookie で扱い、フロントエンドとバックエンドを分離した構成でも安全にセッションを維持できるようにしています。
決済は2種類の Stripe フローを実装し、いずれも本番稼働済みです。
- 寄付（一回払い）: Stripe Checkout →
checkout.session.completed Webhook → Payment 永続化
- プレミアム月額課金（¥500/月）: Stripe Subscription → Webhook 3イベント（
checkout.session.completed / invoice.payment_succeeded / customer.subscription.deleted）→ users.premium フラグ更新
- Stripe Billing Portal: 解約・カード変更・請求履歴をホスト型ポータルに委譲し、PCI 対応の負担なく会員管理を実現
2. システムアーキテクチャと技術選定
graph TD
Browser["Browser"]
FE["Next.js 16<br/>(Vercel)"]
BE["Rails 7.2 API<br/>(Render)"]
DB[("PostgreSQL")]
AI["OpenAI API<br/>(gpt-4o-mini / whisper-1 / gpt-image-1)"]
Stripe["Stripe"]
Sentry["Sentry"]
Browser -->|HTTPS| FE
FE -->|REST API + Cookie| BE
BE --> DB
BE -->|Dream analysis / Image generation| AI
BE -->|Checkout Session| Stripe
Stripe -->|Webhook POST| BE
この構成を選んだ理由
- フロントエンド: Next.js (App Router)
毎日使うアプリとして、初期表示の軽さと操作感の両立を重視しました。Server / Client Components を使い分けつつ、インタラクティブな UI は Framer Motion で補っています。
- バックエンド: Rails API
認証、AI 連携、決済、Webhook 処理のようなドメインロジックを、短いサイクルで安全に改善しやすい構成として採用しました。RSpec による回帰確認もしやすい点を重視しています。
- 認証設計: JWT + HttpOnly Cookie
XSS 耐性を意識し、トークンをブラウザの JavaScript から直接触らせない構成にしています。クロスドメイン環境では Vercel 側の API 経由で Cookie を安定して扱えるようにしています。
- インフラ: Vercel / Render
インフラ運用を過度に抱えず、機能改善と UX 検証に集中しやすいフルマネージド構成を選びました。
3. 設計・実装上の工夫
① 利用者フィードバック前提の UX 改善
「ひらがな中心の表示」「夢詳細の閲覧モードと編集モードの分離」「パスワード可視化トグル」「ライト / ダークモード切り替え」など、使いながら分かりにくかった点を小さく改善してきました。
- パスワード強度バー: 登録フォームに 弱い / 普通 / 強い の3段階インジケーターを追加。英字・数字・記号の組み合わせと文字数に応じてリアルタイムでフィードバックし、入力ミスを事前に防ぎます。
- Trial UX 改善: トライアルページに「残りAI分析: ○回」バッジを常時表示し、上限到達時は登録を促すアップグレードカードを表示。ユーザーが価値を体験してから自然に登録に進める導線を整えました。
- モバイル / デスクトップ両対応のナビゲーション: スマホでは親指で届く
BottomTabBar（ホーム / きもち / 記録 / もり / 設定）、デスクトップでは常駐サイドバーと ⌘K コマンドパレットを提供し、画面移動や最近の夢へのアクセスを各デバイスに適した操作で行えるようにしています。ランディングページも 2 カラムのデスクトップ向けレイアウトへ刷新しました。
個人開発でも変更を積み重ねやすいよう、Jest・RSpec・Playwright を併用して回帰確認しやすい状態を保っています。
② ガイドキャラクター「モルペウス」による画面統一
夢の番人キャラクター「モルペウス」を全11画面にそれぞれ配置し、アプリ全体のトーンを統一しています。
MorpheusImage コンポーネントがバリアント（home / analysis / login など）に応じた画像を切り替え、画像読み込みエラー時は SVG フォールバックで表示を保証します。
variant 変更時にエラー状態を useEffect でリセットすることで、画面遷移をまたいだ状態リークも防いでいます。
③ Value-First Onboarding — ログイン前でもアプリ体験を提供
未ログインユーザーを即座に /login へリダイレクトするのではなく、ページ自身が MorpheusLoginRequired コンポーネントでやさしく案内する設計にしています。
バックエンドの API 認証は維持したままフロントの導線を緩和することで、新規ユーザーがアプリの価値を感じてからアカウント登録できる流れを作っています。
さらに /trial ページでは、アカウント登録なしに AI 分析を最大3回体験できるトライアルフローを提供しています。初回のボタン押下時にバックエンドでトライアルアカウントを自動生成し、分析結果をその場で確認できます。残り分析回数のカウントダウン表示と、上限到達時のアップグレード誘導カードを組み合わせることで、「体験 → 価値実感 → 登録」の自然な流れを設計しています。
④ 多対多リレーションとレガシーデータ共存
夢と感情の関係は多対多で表現しています。さらに、AI 分析結果の保存形式が変わった後も既存データを壊さず扱えるよう、表示側で新旧フォーマットを吸収する実装にしています。
⑤ dream_profiles による家族・大切な人ごとの夢記録
dream_profiles により、「自分」「子ども」「家族」「ペット」など、誰の夢かを分けて記録できるようにしています。
既存ユーザーには self プロフィールを補完し、「自分」プロフィールはアーカイブ不可にすることで、既存の夢データの基準が失われないようにしました。
この機能では、モデル・API・フロントエンドUIの実装に加えて、本番DB migration、既存ユーザー補完、本番ブラウザでの /profiles 動作確認、一時的な補完処理の撤去まで行いました。
さらに Supabase Security Advisor の rls_disabled_in_public 警告に対応し、フロントエンドから Supabase へ直接アクセスしていない構成を確認した上で、public.dream_profiles の Row Level Security を有効化しました。policy なしの Default Deny 方針により、Rails API という正規ルートは維持しつつ、Supabase の直接アクセス口を閉じています。
⑥ 監視・セキュリティ・レート制限を後回しにしない
Sentry をフロントエンドとバックエンドの両方に導入し、本番での例外や不安定な挙動を検知しやすくしています。
加えて、CORS 設定、HttpOnly Cookie、環境変数管理のほか、Rack::Attack によるレート制限（登録・分析 API・画像生成を個別に制御）を整備しています。
パスワードポリシーはバックエンドのモデルバリデーションとフロントの入力チェックを一致させ、「8文字以上・英字と数字を各1文字以上含む」を二重に保証しています。登録フォームには3段階の強度バーをリアルタイム表示し、入力中にポリシー充足状況を視覚的にフィードバックします。
認証基盤の強化（2026年7月）: 当初は 1 ユーザーにつき平文リフレッシュトークン 1 本という構成でしたが、以下のように多端末・漏洩耐性を意識した設計へ作り直しました。
This is the beginning of the README. Read the rest at the original. Read the full README ↗
