[add] READMEに制作背景・技術選定セクションを追加

README.md

@@ -2,6 +2,52 @@
 
 技大祭当日に使うビンゴアプリです。
 
+## 制作背景
+
+### 課題
+
+従来の学園祭ビンゴ大会では、抽選機で排出された番号をホワイトボードに手書きで掲示していました。この運用には以下の課題がありました。
+
+- **視認性の問題**：後方の参加者には文字が見えづらい
+- **人員コスト**：板書担当として人員を別途確保する必要がある
+
+### 目的
+
+抽選番号や景品の当選状況を Web 上でリアルタイムに確認できるアプリを作成し、参加者体験の向上と運営の効率化を両立させることを目的としました。
+
+参加者（600〜1000人規模）が自身のスマートフォンから番号を確認できるようにするとともに、会場の大型ディスプレイへの表示、管理者向けの運営機能も提供しています。
+
+---
+
+## 技術選定
+
+### 技術スタック
+
+| レイヤー | 技術 |
+|------|------|
+| フロントエンド | Next.js / TypeScript |
+| バックエンド | Hasura Engine (GraphQL) |
+| データベース | PostgreSQL |
+| ストレージ | MinIO |
+| インフラ | オンプレサーバ（Proxmox VM） + Cloudflare Tunnel |
+| 開発環境 | Docker / Docker Compose |
+
+### 選定理由
+
+**Hasura (GraphQL)**
+
+このアプリの主要要件は「複数ユーザーへのリアルタイム配信」でした。Hasura の GraphQL Subscription を使うことで WebSocket 通信を容易に実装できること、また GUI 上でスキーマ作成からCRUD API・Subscription クエリの生成まで行えるため、バックエンドの実装コストを大幅に削減できると判断し採用しました。
+
+開発期間が3か月、チームのほとんどが Web 開発未経験という状況で、当日リリースを最優先にするためバックエンドに時間を割かずフロントの UI に注力できる構成を選びました。
+
+**Next.js / TypeScript**
+
+nutmeg（所属サークル）内の複数プロジェクトで採用されており、技術的な質問・知見の共有がしやすい環境にあったため採用しました。
+
+**インフラ（オンプレ + Cloudflare Tunnel）**
+
+Proxmox 上の VM にサービスを構築し、Cloudflare Tunnel 経由で外部公開しています。
+
 ## Branch 命名規則
 
 新機能の Branch 名：feature/issue○○/title[isuue の簡単な説明]