はじめに
本記事では、ユニークなログイン体験とチャット体験を提供するWebアプリケーションの画面遷移構成について整理します。
個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
各画面の役割や流れを把握することで、開発やユーザビリティ改善に役立てることができます。
実際の構成イメージ（2025/04/13）
画面遷移図.
トップページ
├─ 新規会員登録ページ
│ └─ 登録時のポエム選択
│ └─ ホームページ（マイページ）
│ ├─ チャット開始
│ │ └─ モード選択（三郎おじいちゃん / 美女（5回に1回アンガーママ））
│ │ └─ チャットページ
│ │ ├─ メッセージ（AI応答表示）
│ │ ├─ お気に入り登録
│ │ ├─ 感情選択 → BGM / 画像表示（追加機能）
│ │ └─ アンガーママモード（5回に1回ランダム）
│ ├─ お気に入り一覧ページ
│ ├─ 履歴表示ページ
│ ├─ ポエム更新ページ（自分のポエムのみ編集可能）
│ └─ アカウント削除ページ
├─ ログインページ
│ └─ ベーシック認証（ユーザー名・パスワード）
│ └─ ポエム認証（登録時に選んだポエム）
│ └─ ホームページ（マイページ）
│ ├─ チャット開始
│ │ └─ モード選択（三郎おじいちゃん / 美女（5回に1回アンガーママ））
│ │ └─ チャットページ
│ │ ├─ メッセージ（AI応答表示）
│ │ ├─ お気に入り登録
│ │ ├─ 感情選択 → BGM / 画像表示（追加機能）
│ │ └─ アンガーママモード（5回に1回ランダム）
│ ├─ お気に入り一覧ページ
│ ├─ 履歴表示ページ
│ ├─ ポエム更新ページ（自分のポエムのみ編集可能）
│ └─ アカウント削除ページ
├─ 管理者専用ページ（adminフラグ所持者のみ）
│ ├─ ポエム一覧・編集ページ（全ユーザー分）
│ └─ ユーザー管理ページ
└─ LLM接続機能（バックグラウンド連携）
├─ ポジティブメッセージ生成
└─ 感情選択 → BGM
トップページからの遷移
トップページ
- アプリ紹介、ログイン・新規登録リンク付きのシンプルな導入画面。
ユーザー登録・ログインの流れ
新規会員登録ページ
- ユーザー名・パスワードを入力し、会員登録を行う。
- 次のステップとして「ポエム選択」を実施。
登録時のポエム選択
- ログイン時に使用するポエム認証用ポエムを選択。
- 登録完了後、マイページへ遷移。
ログインページ
- ベーシック認証（ユーザー名・パスワード）を実施。
- 認証成功後、登録時に選択したポエムによるポエム認証を行う。
- 認証通過後、マイページへ遷移。
マイページとその機能
ホームページ（マイページ）
- 以下の機能にアクセス可能：
- チャット開始
- お気に入り一覧
- 履歴表示
- ポエム更新
- アカウント削除
チャット機能の詳細
チャット開始 → モード選択
- ユーザーは「三郎おじいちゃん」または「美女（5回に1回アンガーママ）」を選択。
モード選択 → チャットページ
- AIによる応答が表示される。
- お気に入り登録が可能。
- 感情選択をすると、それに応じたBGMや画像が表示される（追加機能）。
- 美女モードでは、5回に1回「アンガーママ」が登場。
マイページ内のその他機能
- お気に入り一覧ページ：登録したメッセージを一覧表示。
- 履歴表示ページ：過去のやりとりを表示。
- ポエム更新ページ：自身のポエムを編集可能。
- アカウント削除ページ：アカウントの削除手続きを行う。
管理者専用ページ（adminフラグ所持者）
- ポエム一覧・編集ページ：全ユーザーのポエムを確認・編集。
- ユーザー管理ページ：ユーザーの情報を管理・編集。
バックグラウンド機能（LLM接続）
- ポジティブメッセージ生成：ユーザーの状態に応じた応答生成。
- 感情選択 → BGM再生：選択した感情に応じた音楽を自動再生。
おわりに
このような画面遷移と機能の構成を整理することで、アプリ開発において「どこにどんな要素が必要か」「ユーザーがどのような体験をするか」が明確になります。
今後の設計や改善にも活かしていけるよう、引き続き整理・検討を進めていきます！