Merge pull request #107 from kc3hack/FE-89

UI・UXのREADMEをいい感じに変更

Author: IRyoma

README.md

@@ -84,23 +84,45 @@
   UIやUXのデザインの面で、工夫したこと、挑戦したことなどがあればおしえてください。
   板垣君or丹羽君
 -->
-  ・新しくヒント（チャット）が追加された際に，画面の最下部にいる場合のみ自動スクロールを適応．
-  ⇒古いヒントを見返しているときに勝手にスクロールされてしまう問題を解決
-
-  ・ゲームスタートのボタンを目立ちやすいオレンジ色に，高評価のストーリーボタンを白色に変更
-  ⇒ゲーム本編を強調
-
-  ・Material Designを利用
-  ⇒統一感のあるデザインの作成
-
-  ・登場人物ごとにアイコンの色が違う
-  ⇒登場人物が変わったことが分かりやすい
-
-  ・レスポンシブデザイン
-  ⇒スマホでもPCでもできる（メインはスマホ）
-  
-  ・ロード画面を関西あるあるに
-  ⇒待機中も飽きさせない
+### 🏎️ ロード画面
+- **関西あるあるのランダム表示**: 
+  APIからのデータ取得待ち時間を、関西にまつわる「あるあるネタ」を表示することで、ユーザーを飽きさせない工夫をしています。
+
+### 🎮 ゲーム中
+- **チャット形式の直感的なUI**: 
+  親しみやすいメッセージバブルを採用し、京都人と大阪人が交互にヒントを出す演出をアイコンの使い分けで表現しています。
+- **ヒントの自動配信とタイマー**: 
+  一定時間ごとに新しいヒントが流れてくる臨場感を演出。タイマーにより次のヒントまでの時間を可視化しています。
+- **スマート自動スクロール**: 
+  新しいメッセージ追加時、画面下部にいる時のみ自動スクロール。過去のやり取りを見返している最中に勝手にスクロールされないよう配慮しました。
+- **自然なギブアップ誘導**: 
+  全てのヒントが出切った後、チャットの流れの中に「答えを見る？」というボタンを表示。ゲームの流れを止めずに次のアクションへ誘導します。
+
+### ✨ 正解後の挙動
+- **物語の完全公開（アコーディオン）**: 
+  正解後、「物語の続きを見る」をクリックすることで、クイズ中に出てこなかった残りの会話を全て読むことができ、ストーリーを最後まで楽しめます。
+- **「茶しばき（お気に入り）」機能**: 
+  面白かったヒントには、関西ならではの「茶しばき（お茶しに行こう）」という言葉でお気に入り登録が可能。心地よいハートのアニメーションで達成感を高めています。
+- **𝕏（Twitter）でのシェア**: 
+  クイズの結果や面白い会話を、𝕏（旧Twitter）ですぐにシェアできる機能を搭載しています。
+- **状況に応じたアイコンの変化**: 
+  正解なら「大阪」、不正解なら「京都」のアイコンを表示するなど、判定結果が視覚的に即座に伝わるよう工夫しました。
+
+### 📑 高評価のストーリー
+- **チャット形式のカードプレビュー**: 
+  一覧画面（掲示板）では、各物語の冒頭部分をチャット形式のままプレビュー表示。クリックする前から内容の雰囲気が直感的に伝わるデザインにしました。
+- **「タップで回答確認」の段階的公開**: 
+  詳細画面では、あえて答えを最初から表示せず、ユーザーが自らタップして確認する仕様を採用。過去の良問を自分でも解いてみるという楽しみを残しています。
+- **没入感のあるフルスクリーン閲覧**: 
+  余計な UI を排除し、会話の流れに集中できるレイアウトを採用。チャットアプリを使っているかのような感覚でストーリーを読み進められます。
+
+### 🎨 その他
+- **モバイルファーストのレスポンシブデザイン**: 
+  スマートフォンでの操作をメインに想定しつつ、PCでも快適にプレイできる柔軟なレイアウトを実現しています。
+- **視覚的な導線設計**: 
+  「ゲームスタート」などの主要ボタンは目立つオレンジ色、サブボタンは白など、機能の重要度に応じたカラー設計を行っています。
+- **Material Designによる統一感**: 
+  一貫性のあるデザインシステム（MUI）を採用し、全体として清潔感とプレミアム感のある外観を実現しました。
 
 ---