Zenn
🎮

【アプリ開発】ドットポケモン図鑑「Pokédex」を作ってみた

2025/03/02に公開
PWA
アプリ開発
Pokémon
Cline
tech

https://github.com/Tomo0108/pokedex-v3

はじめに

こんにちは、ポケモントレーナーの皆さん。
ドットで表現されたポケモンを堪能できる、超レトロテイストな図鑑アプリがあるって知ってました？
本日はまさに“ピクセルの海”にどっぷり浸かれるアプリをご紹介します。
その名も「Pokédex」。ポケモンファンはもちろん、レトロゲーマーにはドストライクな1本です。

💡 インストール方法

アプリURL
https://pokedex-v3-mocha.vercel.app/

📱 スマートフォンの場合

  1. iPhoneユーザー

    • Safariでアプリにアクセス
    • 下部の「共有」ボタンをタップ
    • 「ホーム画面に追加」を選択
    • 完了！ ホーム画面にあの“ポケモン人形”アイコンが鎮座します

  2. Androidユーザー

    • Chromeでアプリにアクセス
    • メニューから「ホーム画面に追加」をチョイス
    • 確認画面で「追加」をタップ
    • ホーム画面にズドンとアプリのアイコン出現

💻 PCの場合

  • Chromeでアプリにアクセス
  • URLバーの右端に表示される“インストールアイコン”をクリック
  • 「インストール」をクリック
  • デスクトップアプリとして、ゲーム感覚で起動OK！

🎮 主な機能

  • レトロなデザイン：ゲームボーイ時代のピクセル感をフル再現
  • マルチ言語対応：日本語/英語の瞬時切り替え
  • カスタマイズ可能：スキンカラーとスクリーンカラーを自分色にカスタマイズ
  • 全世代対応：初代から第9世代まで、計1025体ものポケモンをフルカバー
  • 色違い対応：ちゃんと色違いポケモンにも対応してるんです

🔧 技術仕様と実装詳細

デプロイメント設定

// vercel.json
{
  "version": 2,
  "buildCommand": "rm -rf .next && npm install && npm run build",
  "installCommand": "npm install",
  "framework": "nextjs",
  "regions": ["hnd1"],
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/next",
      "config": {
        "installCommand": "npm install",
        "buildCommand": "rm -rf .next && npm run build"
      }
    }
  ],
  "git": {
    "deploymentEnabled": {
      "main": true
    }
  }
}

PWA設定

// next.config.js
const withPWA = require('next-pwa')({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development',
  register: true,
});

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
    domains: ['raw.githubusercontent.com'],
  },
}

データフェッチングと状態管理

  • データフェッチング

    • PokeAPIからの取得を効率化するためにキャッシュをかけるなど、あれこれ最適化
    • エラーハンドリングとリトライ機能で“あれ、データ取れない…”を防止

  • スプライト管理

    • 世代別スプライトのスタイル切り替え
    • 色違いポケモンのしれっとした出現にも柔軟対応
    • もしもの時のフォールバックで“代わりの画像”もちゃんと用意

  • パフォーマンス考慮

    • 静的アセットをギュギュッと最適化
    • 画像のプログレッシブローディングで読み込みをサクサク
    • メモリ使用量にも目を光らせる

アーキテクチャ

プロジェクト構造
├── public/
│   ├── icons/
│   │   └── poke-doll.png     # アプリアイコン
│   └── manifest.json         # PWAマニフェスト
├── src/
│   ├── app/
│   │   ├── globals.css       # グローバルスタイル
│   │   ├── layout.tsx        # レイアウトコンポーネント
│   │   └── page.tsx          # メインページ
│   ├── types/
│   │   └── pokemon.ts        # 型定義
│   └── utils/
│       ├── cache.ts          # キャッシュ管理
│       ├── createFallbackImage.js  # フォールバック画像生成
│       └── pokemon.ts        # ポケモンデータ処理

使用技術

  • フレームワーク: Next.js 14
  • スタイリング: Tailwind CSS
  • PWA対応: next-pwa
  • フォント: DotGothic16（ドットの神フォント）

パフォーマンス最適化

  • 画像最適化

    • ドットアートを美しく見せるためのちょっとしたマジック
    • スプライトのプログレッシブローディングで、読み込み中もイライラしない

  • キャッシュ戦略

    • APIレスポンスをインテリジェントにキャッシュ
    • オフラインでもバリバリ動かすためのサービスワーカー実装

カスタマイズ機能とUI設計

  • カラーテーマ

    • スキンカラー：図鑑の外装色をお好みに
    • スクリーンカラー：ブラウンやグリーン…気分でスクリーンを着せ替え

  • レスポンシブデザイン

    /* モバイルファーストでサクサク */
.pokedex {
  @apply flex flex-col md:flex-row gap-2.5;
  @apply max-w-[1000px] w-full p-4 rounded-lg;
}

/* スクリーン表示の見栄えを最適化 */
.screen {
  @apply w-full max-w-[300px] aspect-square mx-auto;
  @apply sm:w-full sm:max-w-none;
}

  • ゲームボーイ風UIコンポーネント

    • ドット感のあるフォントレンダリング
    body {
  @apply [image-rendering:pixelated];
  @apply [-webkit-font-smoothing:none];
  @apply [-moz-osx-font-smoothing:none];
}
    • インセットシャドウで立体感をプラス
    --shadow-inset: inset -2px -2px 0 0 #000, 
                inset 2px 2px 0 0 #404040;

  • アクセシビリティ対応

    • 目に優しいコントラスト比
    • キーボード操作もバッチリサポート
    • スクリーンリーダーでARIAラベルをしっかり付与

🎨 デザイン哲学

これはただのポケモン図鑑じゃありません。
90年代のゲームボーイが持っていた“あのトキメキ”を、最新技術で思いっきりアップデートしたアプリなんです。

📝 環境変数

NEXT_PUBLIC_POKEAPI_URL=https://pokeapi.co/api/v2
NEXT_PUBLIC_API_CACHE_TIME=3600
NEXT_PUBLIC_MAX_REQUESTS_PER_MINUTE=100

本アプリの“動きの良さ”は、この環境変数設定によるAPI最適化のおかげ。
ポケモンの膨大なデータをスイスイ取得しちゃいます。

レトロなのに最先端。
シンプルなのに多機能。
このアプリが、すべてのポケモン好きの新たなマストアイテムになってくれるはず。

🎯 操作性とユーザー体験

タッチ操作の最適化

  • スワイプで気になるポケモンを素早くチェック
  • タップひとつで言語切り替え（海外ポケモントレーナーもOK）
  • ピンチズーム対応で、ドットの細かさをガッツリ堪能

キーボードショートカット（デスクトップ版）

← / → : 前/次のポケモンに移動
J / E  : 日本語/英語の切り替え
S      : シャイニー（色違い）モード切り替え
1-9    : 世代選択

オフライン対応

  • 一度ロードしたポケモンはキャッシュして、オフラインでも閲覧可能
  • バックグラウンドで最新データをコツコツ同期
  • “地下洞窟”でも快適に図鑑を開けちゃう安心感

パフォーマンス指標

  • Lighthouse スコア
    • パフォーマンス: 95+
    • アクセシビリティ: 100
    • ベストプラクティス: 100
    • SEO: 100
  • First Contentful Paint: < 1.0s
  • Time to Interactive: < 2.0s

懐かしさ全開のドットスタイルと、PWA技術によるハイスペックな動作が絶妙にマッチ。
ゲームボーイの時代を知る人も知らない人も、みんなまとめて“刺さる”アプリになりました。
いつでもどこでもポケモン、しかもレトロな味わいを忘れずに。
さぁ、あなたもこのデジタルの冒険に出発してみませんか？

Discussion