はじめに

本記事では、ユニークなログイン体験とチャット体験を提供する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再生：選択した感情に応じた音楽を自動再生。

おわりに

このような画面遷移と機能の構成を整理することで、アプリ開発において「どこにどんな要素が必要か」「ユーザーがどのような体験をするか」が明確になります。

今後の設計や改善にも活かしていけるよう、引き続き整理・検討を進めていきます！