制作の裏側 — Claude Code と1ヶ月で作った話
PchamDB がどうやって生まれたか、ぴ〜ちゃんがお話しします 🐉
🌱 きっかけ
ポケモンチャンピオンズが発表されて、「対戦準備をもっと楽にできるツールがほしい」と思ったのが始まりでした。 既存の攻略サイトは情報量こそ豊富ですが、対戦に直結する情報（タイプ相性・チーム補完・わざの効果フィルタ）を 一画面で横並びに見られるツール がなかなか見つかりませんでした。
「ないなら、自分で作るしかない」── そう思って動き始めたのが2026年4月のことです。
でも、自分はバリバリのエンジニアではない。プログラミングは少しかじった程度。
1人で全部作るのは正直しんどい。そこで頼ったのが Claude Code でした。
🛠 使ったツール・スタック
Claude Code
コーディングのメインパートナー。CLI でファイル編集・実行まで一気通貫
HTML / CSS / Vanilla JS
フレームワークは使わず、素のHTML+JSで実装。静的ホスティングしやすい
GitHub Pages + Cloudflare
無料で独自ドメイン (pchamdb.com) で公開。CDN もついてくる
PokeAPI
多言語化のための公式翻訳データ取得元
楽天アフィリエイト
運営費の足しに、レコメンド型ウィジェットを設置
Google Forms
問い合わせフォーム。スパム対策で reCAPTCHA 込み
📅 1ヶ月の歩み
Week 1 — データ収集と検証
マスターDBを作るところから
ポケモンの種族値・タイプ・特性・習得わざを、公式情報源と複数の攻略サイトを突き合わせて検証。
ここは 地道に手作業。AIに任せると幻覚が混ざるので、データの正は必ず人間が決める方針に。
Week 2 — ポケモンDB & わざリスト
巨大テーブルを表計算ライクに
全ポケモンを一覧で横スクロールできる UI を Claude Code と一緒に実装。
フィルター・ソート・タイプ相性の色分けまで、毎日触りながら少しずつ改善。
Week 3 — チームビルダー
タイプ補完を瞬時に
手持ち6匹を入れると、タイプ相性・攻撃範囲・補完すべき弱点が一目で分かるツール。
対戦勢が「最後の詰め」に使えるよう、表示密度をかなり詰め込んだ。
Week 4 — 公開とブラッシュアップ
SEO・ナビ・UX改善
OGP、Twitter Card、JSON-LD 構造化データ、sitemap.xml、canonical URL ──
Claude Code に手伝ってもらいながら、SEO の足元を整備。
ページ間ナビ、トップに戻るボタン、横スクロールミラーバーなど、細部の UX も詰めた。
💪 こだわった点
- データの正確性：マスターDBは公式情報源との突合せを必ず人間が実施。AIに丸投げしない。
- 非公式の明示：全ページに「⚠️ 当サイトは非公式ファンサイトです」を明記。商標・著作権は権利者に帰属。
- 軽量・無依存：フレームワーク不使用。素のHTML/CSS/JSで、表示は爆速。
- モバイル対応：スマホでも横スクロールで全データ見られる作り。
😅 苦労した点
- 巨大テーブルの横スクロールが画面下まで隠れる問題 → ミラーバーで解決
- ローカルファイルで
fetch()が動かない問題 → フォールバック実装 - JSON-LD を validate hook が JS としてエラー判定する問題 → hook を拡張
- 「AIで作ったってどう発信するか」── これは今もまさに考え中
🌍 これから
現在は日本語のみですが、 多言語化（英語・中国語・韓国語等） を進めています。 PokeAPI から公式翻訳データを取得して、9言語対応を準備中。
将来的には バトルシミュレータ や、ユーザー投稿型のチーム共有機能なども構想中。 1人 + AI で、どこまで作れるか挑戦は続きます。
📝 連載 (note / Zenn)
制作の過程や考えていることを、note と Zenn の両方で書いています。 note はストーリー寄り、Zenn は技術寄り で書き分けています。これから #2, #3... と続けていく予定です。
-
📖 note: #1 プログラム1行も書かずに、Claude AI とポケモン対戦DBを1ヶ月で公開した話
UFOキャッチャー出会いから、Sora終了→Claude発見、田尻智さんの攻略本ルーツまで6000字の制作記 -
💻 Zenn: #1 Claude Code と素のHTML/JSで対戦DBサイトを公開するまで
フレームワーク不使用 + Claude Code の技術的ハマりどころ3選 (ミラースクロールバー / JSON-LD hook / fetch fallback) + SEO 周りの実装
PchamDB は、ポケモンチャンピオンズの対戦準備が少しでも楽になればいいなと思って作っています。
使ってみて感想や要望があれば、ぜひ お問い合わせフォーム から教えてください。