「MAGIC WORD」は、ひらがなを集めて“自分だけの言葉”を生み出す、ひらがなクラフトゲームです。
ストアで文字を集め、組み合わせてワードを作成。公開すると、みんなの「いいね」でワードが育ち、ステータスも強くなっていきます。 言葉づくりのセンスと発想が、そのまま成長の力になるのが魅力です。
ゲームの流れ: ひらがなを集める → ワードを作る → 公開する → いいねで育つ → レベルアップ
ひらがなストア - レアリティ別に分類された82文字を購入
ワード作成 - 所持ひらがなを組み合わせてオリジナルワードを作成
ステータスシステム - 各ワードに「つよさ・かたさ・すばやさ・かしこさ」の4ステータスが付与
レベルアップ - いいねで経験値を獲得し、ワードが成長
ホームフィード - 全ユーザーの公開ワードを閲覧・いいね
SNSシェア - ワードごとに専用のプレビュー画像を自動生成し、X（Twitter）等でリッチに共有
招待システム - 招待リンクで友だちを招待
通知 - いいね等のアクションをリアルタイムに通知
多言語対応 - 日本語・英語の2言語をサポート
Googleログイン - ソーシャルログインでかんたんに始められる
管理者パネル - 運用管理用の管理画面を完備
| 技術 | 役割 | |---|---| | Next.js (App Router) | Reactベースのフルスタックフレームワーク | | React | コンポーネントベースのUI構築 | | TypeScript | 型安全な開発で品質を担保 | | TailwindCSS | ユーティリティファーストのスタイリング | | next-intl | 日本語・英語の多言語対応 | | React Hook Form + Zod | フォーム管理とバリデーション |
| 技術 | 役割 | |---|---| | Supabase | データベース・認証を提供するBaaS | | PostgreSQL | リレーショナルデータベース。アクセス制御をDB層で実装 | | Next.js API Routes | サーバーサイドのビジネスロジック | | Server Actions | フォーム処理などサーバー側で直接実行 |
| 技術 | 役割 | |---|---| | Vercel | ホスティング・CI/CD（GitHubと連携し自動デプロイ） | | Supabase Cloud | マネージドデータベース・認証基盤 | | OG画像動的生成 | SNSシェア時のプレビュー画像をサーバーサイドで自動生成 |
ユーザー
↓
Vercel（Next.js / App Router）
├── React + TailwindCSS（UI）
├── API Routes（ビジネスロジック）
└── OG画像生成
↓
Supabase
├── PostgreSQL（データ永続化）
└── Auth（Email + Google OAuth）
7テーブル構成で、ユーザー・ひらがな・ワード・いいね・通知を管理。 ゲームロジックの整合性はサーバーサイドのトランザクション処理で担保しています。
サーバーサイドでのゲームロジック処理 - 不正操作を防ぐため、ステータス計算やリソース管理はすべてサーバー側で実行
段階的なスキーマ進化 - 40以上のマイグレーションファイルで、機能追加に合わせてDBスキーマを安全に進化
動的OG画像 - ワードごとにユニークなSNSシェア画像を生成し、バイラル性を向上
レスポンシブ対応 - PC・スマートフォンどちらでも快適にプレイ可能