非エンジニアの私がAIだけで卓球診断アプリを作って公開するまで｜Claude Codeでできること

AIに「作りたい」と言っただけで、卓球診断が公開できた

私はコードを書けない。それでも、AIコーディングツールのClaude Codeだけを使って、卓球のタイプ診断アプリを作り、実際にインターネットで公開するところまでいけた。

作ったのは「卓球ギルド」というアプリだ。8つの質問に答えると、自分の卓球タイプが6種類のうちどれかに診断され、そのままキャラクターとして育てられる。診断して終わりではなく、今日のクエストをこなすとEXPが貯まってレベルが上がり、チーム画面で仲間のタイプも並ぶ。結果はX（旧Twitter）やLINEでシェアでき、シェア用の画像は自動で生成される。

この記事は、その一連をAIだけでどう作ったのか、そして「Claude Codeで結局何ができるのか」を、うまくいったところも詰まったところも含めて等身大で書いた記録になる。

そもそもClaude Codeで何ができるのか（作ったもので説明する）

Claude Codeは、AnthropicのAIがターミナル上で、あなたの代わりにコードを書いてくれるツールだ。言葉で説明するより、私が「こういうものを作りたい」と伝えただけで形になったものを並べたほうが早い。

• 8問の診断ロジック（回答を6タイプにスコア加算して判定する）
• 診断結果カード（タイプ・称号・得意・伸びしろ・今日のクエスト・レベルとEXP）
• クエストを達成するとEXPが貯まってレベルアップする仕組み
• チーム画面（メンバーのタイプ一覧と、仮想の卓球場が段階的に育つ演出）
• SNSシェア機能（X・LINE・コピーのボタンと、シェア用のOG画像が自動生成される）

私がやったのは、これらを日本語で「作りたい」と伝え、出てきたものを触って「ここを直して」と返すこと。基本はそれだけで、コードは一行も自分で書いていない。「claude code できること」を検索する人は多いが、私の答えは「アイデアを言葉にすれば、動くWebアプリが本当に出てくる」だ。

どう作ったか

進め方はシンプルだった。まず「卓球のタイプ診断を、キャラ化して、クエストで育てられるようにしたい」というコンセプトをClaude Codeに伝える。次に、ホーム、診断の8問、結果カード、クエスト、チームと、画面を一つずつ順番に作ってもらう。出てきたらスマホで実際に触ってみて、「ここが分かりにくい」「この色を変えたい」と伝えて直す。この往復を繰り返しただけだ。

技術的な中身（Next.jsやCloudflare Workersといった言葉）は、正直いまもよく分かっていない。ただ、分からないまま任せても公開まで行けたことが、今回いちばんの発見だった。データはスマホの中（localStorage）に保存する作りにして、ログインもサーバーもない最小構成にしている。だから個人情報を預かることもなく、その分だけ公開のハードルも下がった。

一番つまずいたのは、公開だった

順調そうに見えて、最後の「公開（デプロイ）」で大きく詰まった。自分のWindowsパソコンから公開しようとすると、アプリが全ページ「500エラー」になって真っ赤になる。何度やり直しても直らない。ここは正直、もう無理かと思った。

原因は、Windowsから直接公開しようとしていたことだった。解決策は、GitHub Actionsという仕組みを使って、Linux環境で自動的に公開すること。これに切り替えたら通った——と思いきや、今度は「Node.jsのバージョンが古い」と怒られて一度失敗した。設定を新しいバージョンに上げて、ようやく公開URLが200（正常）になった。

ここはAIに丸投げしても自動では気づけない部分だった。エラーの文面を一緒に読んで、原因を切り分け、別のルートで解決する。「AIに任せる」というより「AIと一緒に詰まりを抜ける」感覚が近い。公開の基盤そのものは、このAI道具箱のサイトと同じCloudflareのWorkersに乗せている。静的なページを出すだけなら、無料枠の範囲で運用の手間もほとんどない。

利用中

Cloudflare Workers / Pages

このサイトの配信基盤。Phase 1 では Cloudflare Workers + OpenNext 構成を固定し、D1 や Secrets が必要になった段階で追加します。

外部リンクなし

かかった時間とお金

作り始めてから公開まで、詰まったデプロイも含めて、実質1日ほどだった。お金は、ホスティングがCloudflareの無料枠、公開用のURLも無料のサブドメインを使ったので、追加でかかった費用はほぼゼロ。必要だったのは、Claude Codeが使えるClaudeの有料プランと、GitHubとCloudflareの無料アカウントだけ。いずれも個人で用意できるものばかりだ。

「個人で・お金をかけず・コードを書かずに」でも、動くアプリを公開するところまではいける。少なくとも私はいけた。

これからAIで何か作ってみたい人へ

ここまで読んで「自分もやってみたい」と思ったら、いちばんの近道は、小さいものを1つだけ実際に作って公開してみることだ。とはいえ独学だと、今回の私のデプロイ500エラーのような「何が原因か分からない壁」で止まりがちでもある。

体系的に最短で身につけたいなら、生成AIの使い方を実務目線で教えてくれる講座を一度のぞいてみるのもいい。私が一次情報として「ここで詰まった」と書いたポイントを、最初から回避できるはずだ。

実際に触ってみてほしい

理屈を読むより、触ったほうが早い。8問なので1分もかからない。

卓球ギルド（卓球タイプ診断）はこちら → takkyu-guild.noritsugu4444.workers.dev

自分のタイプが出たら、そのままシェアして誰かにもやらせてみてほしい。作りたいものは、たいてい考え込んでいるときではなく、手を動かし始めてから見えてくる。