「パズルパネル」は、石板をモチーフにした、シンプルで奥深いロジカルパズルゲームです。プレイヤーは、毎回ランダムに生成される盤面で、決められたタップ回数内に目標の形を完成させることを目指します。
デザインと機能性が調和した、本格派のパズル体験を提供します。
- 目標を確認: 画面に表示される「目標盤面」の形を覚えます。
- パネルをタップ: 「操作盤面」のパネルをタップして、形を揃えていきます。
- 反転ルール: パネルを1回タップすると、タップしたパネルとその上下左右・斜めの最大8マス（合計9マス）が同時に反転（○ ⇔ ×）します。
- クリア条件: 「規定タップ回数」をちょうど使い切った時に、「操作盤面」が「目標盤面」と完全に一致すればクリアです。
- ランダム問題生成: 毎回異なる盤面が生成され、何度でも新鮮に遊べます
- 段階的な難易度: 10段階のステージ制で、4x4 から 8x8 まで徐々にステップアップ
- 3D 反転アニメーション: CSS 3D Transform による滑らかなパネル反転
- レスポンシブ対応: 縦長・横長どちらのレイアウトにも自動最適化
- PWA 対応: ホーム画面に追加してアプリのように利用可能
難易度はステージ制になっており、同じ設定（盤面サイズ・タップ回数）で複数問クリアすることで、徐々に難しい問題へステップアップできます。
| ステージ | レベル (Lv) | 盤面サイズ | 規定タップ回数 | 問題数 |
|---|---|---|---|---|
| 1 | 1-5 | 4x4 | 1回 | 5問 |
| 2 | 6-20 | 4x4 | 2回 | 15問 |
| 3 | 21-30 | 5x5 | 3回 | 10問 |
| 4 | 31-40 | 5x5 | 4回 | 10問 |
| 5 | 41-50 | 6x6 | 5回 | 10問 |
| 6 | 51-60 | 6x6 | 6回 | 10問 |
| 7 | 61-70 | 7x7 | 7回 | 10問 |
| 8 | 71-80 | 7x7 | 8回 | 10問 |
| 9 | 81-90 | 8x8 | 9回 | 10問 |
| 10 | 91-100 | 8x8 | 10回 | 10問 |
| カテゴリ | 技術 |
|---|---|
| フレームワーク | Next.js 14 (App Router) |
| 言語 | TypeScript |
| UI | React 18 |
| スタイリング | Tailwind CSS |
| デプロイ | AWS Amplify |
# 依存関係をインストール
npm install
# 開発サーバーを起動
npm run dev
# ブラウザで http://localhost:3000 を開くnpm run build # プロダクションビルド
npm run start # プロダクションサーバー起動
npm run lint # ESLint によるコードチェックsrc/
├── app/
│ ├── layout.tsx # RootLayout、メタデータ、SEO設定
│ └── page.tsx # メインゲーム画面、ゲーム状態管理
├── components/
│ ├── GameBoard.tsx # 盤面のグリッド表示
│ ├── Panel.tsx # 個別パネル（O/X状態、3D反転）
│ ├── InfoDisplay.tsx # 上部情報バー
│ ├── Controls.tsx # 残りタップ数・終了ボタン
│ ├── ConfirmModal.tsx # 終了確認モーダル
│ ├── HowToPlayModal.tsx # 遊び方説明モーダル
│ └── LevelInfoModal.tsx # ステージ構成テーブル
├── hooks/
│ └── useResponsiveSize.ts # レスポンシブサイズ計算フック
├── lib/
│ └── gameLogic.ts # ゲームロジック（問題生成、反転、判定）
└── styles/
└── globals.css # Tailwind CSS + 3Dアニメーション
詳細なドキュメントは docs/ ディレクトリにあります。
| ドキュメント | 内容 |
|---|---|
| アーキテクチャ概要 | 技術スタック、プロジェクト構造、データフロー |
| ゲームデザイン | ルール、ゲームフロー、UI レイアウト |
| コンポーネント仕様 | 各コンポーネントの Props・責務・状態管理 |
| ゲームロジック | 型定義、アルゴリズム、難易度の数学的考察 |
| スタイリング | カラーパレット、3Dアニメーション、レスポンシブ設計 |
| デプロイ・環境構築 | ローカル開発、AWS Amplify、ビルド設定 |
| PWA・SEO | マニフェスト、メタデータ、構造化データ |