HayaTech-Blog

はじめに

AIを活用した開発に興味を抱き、Claude Codeで個人開発のアプリを作ってみようと考えました。 市場調査をしたうえでニッチなサービスを提供したい、自分の得意な技術スタックを活用したいと考え、公的なホワイト企業認定・公表データを集約し、地図・一覧・詳細で可視化するWebサービス「ホワっぷ -ホワイト企業マップ-」を個人開発しました。

ホワっぷ -ホワイト企業マップ- Web版：https://whapp-web.netlify.app iOS版：https://apple.co/4wrMWX2

iOS版：ホワっぷ -ホワイト企業マップ-

この記事では、開発の背景や技術構成に加えて、開発の大部分をClaude Codeと一緒に進める中で得られた知見をまとめます。

アプリの概要

• アプリ名称：ホワっぷ -ホワイト企業マップ- ホワイト企業＋マップの造語として「ホワっぷ」と命名しました。マスコットキャラクターとして天使とホワイト企業をモチーフにした「ホワっぷりん」をデザインしています。
• 使用したClaude Codeのプラン：Pro プラン（月額 $20、年払いは1か月あたり$17）
• 期間：Web版 1ヶ月程度／iOS版 2週間程度

内容

• ホワイト企業を地図・一覧・詳細で検索可能
• 全国約 33,000 社の公的認定企業データを掲載
• 認定・労働環境・情報開示率の 3 軸スコアを表示
• ユーザー認証・ユーザー投票を実装
• Python による公的データの自動収集・更新機能を実装
• モノレポ構成による Web/iOS並行開発

Claude Codeを活用し、企画・設計・実装・運用まで一貫して個人開発を行いました。複数の公的データ（API・Excel／CSV）を法人番号で名寄せし、約 33,000 社のデータセットを日次生成する Python ETL を構築しました。また、Next.js の ISR や静的 JSON を活用することで、常時稼働するデータベースを必要としない低コストな運用基盤を実現しました。モノレポ構成を採用し、現在も Web・モバイルアプリの並行開発を継続しています。

現在は運用保守を行なっており、今後もデータソースの拡充や機能改善を続けていく予定です。

技術構成

個人開発・低コスト運用を前提に、以下の構成にしました。

レイヤー	技術
Web	Next.js（App Router）+ TypeScript + Tailwind CSS
地図	MapLibre GL JS + CARTO Positron/DarkMatter
ETL	Python（公的API/CSV → 法人番号で名寄せ → ジオコーディング → スコア算出 → JSON生成）
データ配信	静的JSON + ISR（常時稼働DBを持たない）
DB	Supabase（無料枠）
ホスティング	Netlify（無料枠）

ポイントは、企業データそのものを静的JSONとして配信していることです。日次で稼働し続けるDBは持たず、ETLをローカルで回して差分更新したJSONをビルドに含める形にし、個人開発でランニングコストを抑えつつパフォーマンスも確保しました。ログインや投票機能だけ動的な DB（Supabase）を使っています。

Claude Codeとの開発フロー

1. 方針をCLAUDE.mdに固定する

「運営が主観的な評価をしない」「公的データのみを使う」「Webは無料・非商用」といった、譲れない方針をプロジェクトルートのCLAUDE.mdに明文化し、Claude Codeが毎回参照する形にしています。これにより機能追加のたびに「ネガティブ評価になっていないか」「出典のない数値を載せていないか」を逐一自分でチェックしなくても、Claude Code側がガードレールとして機能してくれるようになりました。

2. ドキュメントで定義する

仕様（SPEC.md）・スコア定義（SCORING.md）・データ出所（DATA_SOURCES.md）など、機能ごとに正典となるドキュメントを用意し、「スコアの重みを変えたら必ずSCORING.mdを更新する」といったルールもCLAUDE.mdに明記しています。Claude Codeは実装だけでなく、こうしたドキュメントの整合性チェックも一緒にやってくれるため、一人開発でも「実装とドキュメントが乖離する」問題が起きにくくなりました。

3. プロダクトの方針判断は人間が握る

スコアを単一値にするか複数軸に分けるか、投票の最低表示件数を何件にするか、といったプロダクトの方向性に関わる判断は、Claude Codeに一方的に決めさせず、選択肢を提示してもらって自分で選ぶという進め方をしました。実装の細部はできるだけ任せつつ、方針に関わる部分は必ず人間が最終判断する、という役割分担です。

4. Web/モバイルの並行開発から一本化へ

当初は開発効率を重視し、Web版とiOS版を別セッションで並行開発していました。しかし同じロジックを別々に実装する過程で表示文言や閾値に細かな差異が生まれるリスクに気づき、途中から1つのセッションに作業を集約する運用に切り替えました。git worktreeで同一リポジトリ内の複数ブランチを同時に扱いながら、認識のズレを防いでいます。

Claude Codeを使ってみて感じたこと

実装が楽になったこと

実際にClaude Codeを使ってみて、特に楽になったと感じたのは、実装や細かな改修にかかる時間です。 もちろん、大事な部分については「何を作りたいのか」「どういう設計にしたいのか」をある程度整理した上で、プロンプトを考えて指示する必要があります。曖昧な指示を出すと、こちらが意図していない実装になってしまうこともあるため、すべてを丸投げできるわけではありません。

一方で、画面のちょっとした修正や、既存コードのリファクタリング、簡単な機能追加などについては、かなり大雑把な指示でもある程度期待通りに実装してくれました。「この部分をこういう見た目にして」「この処理を追加して」「エラーが出ているので原因を調べて修正して」といった指示を出すだけで、コードの修正から動作確認まで進めてもらえるのは非常に便利です。

特に、これまでなら「実装方法を調べる → コードを書く → エラーを確認する → 修正する」といった作業を自分で繰り返していたところを、Claude Codeとのやり取りを中心に進められるようになったのは大きな変化でした。

そのため、単純に「コードを書く時間が短くなった」というよりも、実装に必要な細かい作業をAIに任せて、自分は何を作るか・どう作るかという部分に集中しやすくなったという印象があります。

人間の判断や手作業も必要

一方で、Claude Codeを使えば人間が何もしなくてよくなるわけではありません。 特に、プロダクトの方針や仕様については、人間が判断する必要があります。「この機能は本当に必要なのか」「ユーザーにとって使いやすいのか」「今後どういうサービスにしていきたいのか」といった部分は、コードを書くだけでは決められません。

また、AIに実装を任せることで、技術的には実装できてしまうけれど、実際には使っているサービスやツールの規約・料金プラン上の制約に引っかかるというケースもありました。 例えば、あるSaaSやサービスでは「無料枠は商用利用不可」といった条件が設定されている場合があります。Claude Codeに実装をお願いすると、その制約を知らないまま機能自体は作れてしまうため、後から調べて「この使い方はできない」と気づくこともあります。 そのため、実装を始める前に、利用するSaaSやAPI、ライブラリなどの料金体系や利用規約を確認しておくことは、これまで以上に重要だと感じました。

また、NetlifyやSupabase、App Store Connectなどの登録・アカウント設定、各種APIキーの設定、審査に必要な情報の入力など、人間が実際にサービスの管理画面を操作して行わなければならない作業もあります。 このあたりはClaude Codeにコードを書いてもらうだけでは完結しないため、思っていた以上に自分でやることが残っていました。

Claude Codeによって「アプリを作ること」自体はかなり簡単になりましたが、実際にサービスとして公開するところまで考えると、技術以外にも確認・判断・設定しなければならないことがたくさんあります。 今回使ってみて感じたのは、AIによって人間の仕事がなくなるというより、人間が担当する仕事の種類が変わっていくということです。

コードを書く作業はかなりAIに任せられるようになりましたが、その分「何を作るのか」「その方法で問題ないのか」「実際にサービスとして公開できるのか」といった、判断や確認の重要性がより高くなったように感じました。

おわりに

「ホワっぷ」は現在Web版およびiOS版で公開中です。今後もデータソースの拡充や機能改善を続けていく予定です。

個人開発でここまでの規模のプロダクトを形にできたのは、Claude Codeとの協業が大きかったと感じています。特に「方針をドキュメント化してAIに守らせる」アプローチは、今後の個人開発でも積極的に使っていきたいと思います。