|
1 | | -# プロダクト名 |
| 1 | +# プロダクト名 |
| 2 | + |
2 | 3 | <!-- プロダクト名に変更してください --> |
3 | 4 |
|
4 | 5 |  |
5 | | -<!-- プロダクト名・イメージ画像を差し変えてください --> |
6 | 6 |
|
| 7 | +<!-- プロダクト名・イメージ画像を差し変えてください --> |
7 | 8 |
|
8 | 9 | ## チーム名 |
| 10 | + |
9 | 11 | チーム10 XXXX |
| 12 | + |
10 | 13 | <!-- チームIDとチーム名を入力してください --> |
| 14 | + |
11 | 15 | # プロダクト名 |
12 | 16 |
|
13 | 17 | > キャッチコピー(1行で「何を誰のために解決するか」) |
|
16 | 20 |
|
17 | 21 | ## どんな「本当に欲しい」に着目したか |
18 | 22 |
|
19 | | -<!-- |
| 23 | +<!-- |
20 | 24 | 誰の、どんな "欲しい" に焦点を当てたかおしえてください。 |
21 | 25 | --> |
22 | | - 関東から関西に来る人におすすめor関西から関東に行く人におすすめ |
23 | | - 関西人の関西ノリは他の人に |
| 26 | + |
| 27 | +関東から関西に来る人におすすめor関西から関東に行く人におすすめ |
| 28 | +関西人の関西ノリは他の人に |
24 | 29 |
|
25 | 30 | ## どんなアプローチで「本当に欲しい」を実現しましたか? |
26 | 31 |
|
27 | 32 | <!-- |
28 | 33 | プロダクトが実現したアプローチや価値についておしえてください。 |
29 | 34 | --> |
30 | | - 関西人ノリをクイズで体験し、関西人を理解 |
| 35 | + |
| 36 | +関西人ノリをクイズで体験し、関西人を理解 |
31 | 37 |
|
32 | 38 | --- |
33 | 39 |
|
34 | 40 | # 2. プロダクトの機能 |
35 | 41 |
|
36 | 42 | <!-- |
37 | | - このプロダクトが持つ機能について、できるだけ詳しくおしえてください。 |
| 43 | + このプロダクトが持つ機能について、できるだけ詳しくおしえてください。 |
38 | 44 | --> |
39 | | - 関西人がチャット形式で関西ノリであるお題について説明する |
40 | | - |
41 | | - ユーザはお題を推測し、解答を送信して正誤判定を行う |
42 | 45 |
|
43 | | - 過去の面白かったチャットを見ることができるので、クイズに参加しなくても、関西人ノリを体験することができる |
44 | | ---- |
| 46 | +関西人がチャット形式で関西ノリであるお題について説明する |
| 47 | + |
| 48 | +ユーザはお題を推測し、解答を送信して正誤判定を行う |
| 49 | + |
| 50 | +## 過去の面白かったチャットを見ることができるので、クイズに参加しなくても、関西人ノリを体験することができる |
45 | 51 |
|
46 | 52 | # 3. 使い方・デモ |
47 | 53 |
|
|
61 | 67 | 正解なら、お気に入り登録をするのか、もう一度遊ぶかを選択することができる |
62 | 68 | 不正解なら関西人の会話がそのまま続くので、お題が何かユーザが考え続ける |
63 | 69 |
|
64 | | - |
65 | | - |
66 | 70 | --- |
67 | 71 |
|
68 | 72 | # 4. 技術面でのこだわり |
|
72 | 76 | 技術面でのこだわりや挑戦の内容をおしえてください。 |
73 | 77 | 名前は最後に消した方がいいかも |
74 | 78 | --> |
75 | | - Geminiのプロンプト調整(久保田) |
76 | | - クイズとしても面白くなるために難易度の調整を行った |
77 | | - 関西人(京都人と大阪人の話し方や考え方)を再現する |
| 79 | + |
| 80 | +## バックエンド |
| 81 | + |
| 82 | +### 🏗️ 3層アーキテクチャ(Controller / Service / Repository) |
| 83 | + |
| 84 | +- **責務の分離とDI**: |
| 85 | + 各層の責務を明確に分離し、インターフェースで接続することで依存性を注入(DI)しています。Controller層はHTTPリクエストの受付・レスポンス返却、Service層はビジネスロジック、Repository層はDBアクセスを担当しています。 |
| 86 | + |
| 87 | +### 🤖 Gemini API 連携 |
| 88 | + |
| 89 | +- **プロンプト調整**: |
| 90 | + 京都人と大阪人のキャラ付け、前半→中盤→終盤で難易度が段階的に下がるヒント構成など、クイズとして成立するよう細かく指示を設計しました。 |
| 91 | +- **JSON構造化出力**: |
| 92 | + レスポンスのMIMEタイプとJSONスキーマを指定することで、Gemini の出力を確実にパース可能な JSON 形式に制約しています。 |
| 93 | +- **生成パラメータの調整**: |
| 94 | + 毎回異なるお題・会話が生成されやすいように生成パラメータを設定し、ランダム性を高めつつ日本語として破綻しないラインを狙いました。 |
| 95 | + |
| 96 | +### ✅ 答え合わせの仕組み |
| 97 | + |
| 98 | +- **表記ゆれを網羅した正解判定**: |
| 99 | + 事前に想定される正解を、漢字・ひらがな・カタカナ・英語・略称など考えうる表記ゆれを含めて複数パターン用意し、いずれかに一致すれば正解と判定します。ただしユーザに提示する正解表示は代表的な1つのみとし、シンプルな体験を保っています。 |
| 100 | + |
| 101 | +### 🔒 簡易的な不正対策 |
| 102 | + |
| 103 | +- **答え取得までの時間制限**: |
| 104 | + ログイン機能を実装しない構成の中で、ゲーム開始から一定時間(90秒)が経過するまでは答えを取得できないようにしました。APIを直接叩いて即座に答えを見るような行為を防ぐ、簡易的なセキュリティ対策として実装しています。 |
| 105 | + |
| 106 | +### ⚠️ エラーハンドリング |
| 107 | + |
| 108 | +- **型によるエラー判定**: |
| 109 | + エラーを独自の型として定義し、型によってエラーの種別を判定しています。文字列比較に頼らないため、エラーメッセージの変更に対応しやすくしました。Controller層ではエラー種別に応じて適切なHTTPステータスコード(400 / 403 / 404 / 500)を返し分けています。 |
78 | 110 |
|
79 | 111 | --- |
80 | 112 |
|
|
84 | 116 | UIやUXのデザインの面で、工夫したこと、挑戦したことなどがあればおしえてください。 |
85 | 117 | 板垣君or丹羽君 |
86 | 118 | --> |
| 119 | + |
87 | 120 | ### 🏎️ ロード画面 |
88 | | -- **関西あるあるのランダム表示**: |
| 121 | + |
| 122 | +- **関西あるあるのランダム表示**: |
89 | 123 | APIからのデータ取得待ち時間を、関西にまつわる「あるあるネタ」を表示することで、ユーザーを飽きさせない工夫をしています。 |
90 | 124 |
|
91 | 125 | ### 🎮 ゲーム中 |
92 | | -- **チャット形式の直感的なUI**: |
| 126 | + |
| 127 | +- **チャット形式の直感的なUI**: |
93 | 128 | 親しみやすいメッセージバブルを採用し、京都人と大阪人が交互にヒントを出す演出をアイコンの使い分けで表現しています。 |
94 | | -- **ヒントの自動配信とタイマー**: |
| 129 | +- **ヒントの自動配信とタイマー**: |
95 | 130 | 一定時間ごとに新しいヒントが流れてくる臨場感を演出。タイマーにより次のヒントまでの時間を可視化しています。 |
96 | | -- **スマート自動スクロール**: |
| 131 | +- **スマート自動スクロール**: |
97 | 132 | 新しいメッセージ追加時、画面下部にいる時のみ自動スクロール。過去のやり取りを見返している最中に勝手にスクロールされないよう配慮しました。 |
98 | | -- **自然なギブアップ誘導**: |
| 133 | +- **自然なギブアップ誘導**: |
99 | 134 | 全てのヒントが出切った後、チャットの流れの中に「答えを見る?」というボタンを表示。ゲームの流れを止めずに次のアクションへ誘導します。 |
100 | 135 |
|
101 | 136 | ### ✨ 正解後の挙動 |
102 | | -- **物語の完全公開(アコーディオン)**: |
| 137 | + |
| 138 | +- **物語の完全公開(アコーディオン)**: |
103 | 139 | 正解後、「物語の続きを見る」をクリックすることで、クイズ中に出てこなかった残りの会話を全て読むことができ、ストーリーを最後まで楽しめます。 |
104 | | -- **「茶しばき(お気に入り)」機能**: |
| 140 | +- **「茶しばき(お気に入り)」機能**: |
105 | 141 | 面白かったヒントには、関西ならではの「茶しばき(お茶しに行こう)」という言葉でお気に入り登録が可能。心地よいハートのアニメーションで達成感を高めています。 |
106 | | -- **𝕏(Twitter)でのシェア**: |
| 142 | +- **𝕏(Twitter)でのシェア**: |
107 | 143 | クイズの結果や面白い会話を、𝕏(旧Twitter)ですぐにシェアできる機能を搭載しています。 |
108 | | -- **状況に応じたアイコンの変化**: |
| 144 | +- **状況に応じたアイコンの変化**: |
109 | 145 | 正解なら「大阪」、不正解なら「京都」のアイコンを表示するなど、判定結果が視覚的に即座に伝わるよう工夫しました。 |
110 | 146 |
|
111 | 147 | ### 📑 高評価のストーリー |
112 | | -- **チャット形式のカードプレビュー**: |
| 148 | + |
| 149 | +- **チャット形式のカードプレビュー**: |
113 | 150 | 一覧画面(掲示板)では、各物語の冒頭部分をチャット形式のままプレビュー表示。クリックする前から内容の雰囲気が直感的に伝わるデザインにしました。 |
114 | | -- **「タップで回答確認」の段階的公開**: |
| 151 | +- **「タップで回答確認」の段階的公開**: |
115 | 152 | 詳細画面では、あえて答えを最初から表示せず、ユーザーが自らタップして確認する仕様を採用。過去の良問を自分でも解いてみるという楽しみを残しています。 |
116 | | -- **没入感のあるフルスクリーン閲覧**: |
| 153 | +- **没入感のあるフルスクリーン閲覧**: |
| 154 | + 余計な UI を排除し、会話の流れに集中できるレイアウトを採用。チャットアプリを使っているかのような感覚でストーリーを読み進められます。 |
| 155 | + |
| 156 | +### 🎨 その他 |
| 157 | + |
| 158 | +えて答えを最初から表示せず、ユーザーが自らタップして確認する仕様を採用。過去の良問を自分でも解いてみるという楽しみを残しています。 |
| 159 | + |
| 160 | +- **没入感のあるフルスクリーン閲覧**: |
117 | 161 | 余計な UI を排除し、会話の流れに集中できるレイアウトを採用。チャットアプリを使っているかのような感覚でストーリーを読み進められます。 |
118 | 162 |
|
119 | 163 | ### 🎨 その他 |
120 | | -- **モバイルファーストのレスポンシブデザイン**: |
| 164 | + |
| 165 | +- **モバイルファーストのレスポンシブデザイン**: |
121 | 166 | スマートフォンでの操作をメインに想定しつつ、PCでも快適にプレイできる柔軟なレイアウトを実現しています。 |
122 | | -- **視覚的な導線設計**: |
| 167 | +- **視覚的な導線設計**: |
123 | 168 | 「ゲームスタート」などの主要ボタンは目立つオレンジ色、サブボタンは白など、機能の重要度に応じたカラー設計を行っています。 |
124 | | -- **Material Designによる統一感**: |
| 169 | +- **Material Designによる統一感**: |
125 | 170 | 一貫性のあるデザインシステム(MUI)を採用し、全体として清潔感とプレミアム感のある外観を実現しました。 |
126 | 171 |
|
127 | 172 | --- |
|
133 | 178 | 今後の展望があればおしえてください。 |
134 | 179 | --> |
135 | 180 |
|
136 | | - 対戦機能を付けた方がユーザ同士でも楽しめる? |
137 | | - |
| 181 | +対戦機能を付けた方がユーザ同士でも楽しめる? |
| 182 | + |
| 183 | +--- |
138 | 184 |
|
139 | | --------------------------------- |
140 | 185 | <!-- この下は元から記入されていたもの |
141 | 186 | 上の分は今年の評価基準らしいので、基本的には上の部分を修正した方がいいと思う |
142 | 187 | --> |
|
145 | 190 |
|
146 | 191 | <!-- テーマ「関西をいい感じに」に対して、考案するプロダクトがどういった(Why)背景から思いついたのか、どのよう(What)な課題があり、どのよう(How)に解決するのかを入力してください --> |
147 | 192 |
|
148 | | - |
149 | 193 | ## プロダクト説明 |
150 | 194 |
|
151 | 195 | <!-- 開発したプロダクトの説明を入力してください --> |
152 | 196 |
|
153 | | - |
154 | 197 | ## 操作説明・デモ動画 |
| 198 | + |
155 | 199 | [デモ動画はこちら](https://www.youtube.com/watch?v=fbzGp0XJGq8) |
156 | | -<!-- 開発したプロダクトの操作説明について入力してください。また、操作説明デモ動画があれば、埋め込みやリンクを記載してください --> |
157 | 200 |
|
| 201 | +<!-- 開発したプロダクトの操作説明について入力してください。また、操作説明デモ動画があれば、埋め込みやリンクを記載してください --> |
158 | 202 |
|
159 | 203 | ## 注力したポイント |
160 | 204 |
|
161 | 205 | <!-- 開発したプロダクトの中で、特に注力して作成した箇所・ポイントについて入力してください --> |
| 206 | + |
162 | 207 | ### アイデア面 |
163 | 208 |
|
164 | 209 | ### デザイン面 |
|
172 | 217 | ### AWS構成図 |
173 | 218 | <img width="686" height="435" alt="image" src="https://github.com/user-attachments/assets/f7286ff6-ac04-488c-9a17-c0975677ab8e" /> |
174 | 219 |
|
175 | | - |
176 | | - |
177 | 220 | <!-- |
178 | 221 | markdownの記法はこちらを参照してください! |
179 | 222 | https://docs.github.com/ja/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax |
|
0 commit comments