技術力ゼロ・費用ゼロ・1日でWebアプリを公開した話【Claude Code実録】

きっかけは「本当に1日でできるのか」という疑問だった

「AIを使えばエンジニアじゃなくてもアプリが作れる」という話を何度も見かけた。でも実際にやってみた記録って、意外と少ない。

自分はフリーランスSEだ。プログラミングの知識はある程度あるが、フロントエンドはほぼ素人に近い。ReactもNext.jsも「名前は知ってる」レベルだった。

それでもClaude Codeを使って、SE単価シミュレーターを1日で公開できた。

作ったもの

スキルシートに書いてある情報を入力するだけで、フリーランスSEの市場単価の目安が出るツール。

▼ SE単価シミュレーター（無料）

入力するのはこれだけ：

担当工程（保守運用 / 開発SE / 基本設計 / PMなど）
経験年数
商流（直請け / 2次 / 3次以降）
スキル（Java・React・Goなど）
居住エリア

出力されるのは：

推定市場単価（月額レンジ）
年収換算
単価アップへの具体的なアドバイス

なぜSE単価シミュレーターを作ったか

フリーランスになった当初、自分の単価が市場に対して高いのか低いのか、判断する手段がなかった。

エージェントが提示してくる単価が「これが相場」なのか「低く見られているのか」がわからない。かといって、他のフリーランスSEに「単価いくらですか？」とは聞きにくい。

「自分で調べるためのツールを作ればいい」と思った。

Claude Codeの使い方

やったことはシンプルだ。

Claude Codeを起動（ターミナルで claude と打つだけ）
「フリーランスSEの単価を診断するWebアプリを作って」と伝える
出てきたコードを確認する
「このロジックを変えて」「デザインをこうして」と追加指示を出す
GitHubにpushしてGitHub Pagesで公開

コードを一から書いたのはほぼゼロ。Claude Codeに指示を出して、動作確認して、また指示を出す。この繰り返しだけだった。

実際の開発時間の内訳

| フェーズ | 時間 | 内容 | |---|---|---| | 要件整理 | 30分 | 何を作るか・入力と出力の設計 | | 初期生成 | 20分 | Claude Codeへの指示・初稿生成 | | ロジック調整 | 1.5時間 | 単価計算ロジックの修正・追加指示 | | デザイン調整 | 1時間 | 配色・レイアウトの細かい修正 | | デプロイ | 30分 | GitHub Pages設定・公開確認 | | 合計 | 約4時間 | |

「1日で公開」と書いたが、正確には4時間程度だ。この時間の半分以上は「Claude Codeへの指示を考える時間」だった。

費用は完全にゼロ

Claude Code：Anthropicのサブスクに含まれる
GitHub：無料
GitHub Pages：無料
ドメイン：GitHub提供のサブドメイン（無料）

初期費用ゼロ、月額費用ゼロ。

詰まったこと・解決したこと

①Next.jsのbasePath設定

GitHub Pagesに公開すると、CSSや画像が読み込まれない問題が出た。

原因は next.config.ts の basePath 設定が抜けていたから。

const nextConfig = {
  output: 'export',
  basePath: '/se-rate-simulator',  // これが必要
}

Claude Codeに「GitHub Pagesに公開したらCSSが読み込まれない」と伝えたら、すぐに原因と修正方法を教えてくれた。

②単価計算ロジックのバランス調整

最初に生成された単価計算ロジックは、現実とズレていた。「テスト工程で月80万円」「保守運用で月100万円」など。

これはAIが相場感を正確に把握していないためだ。自分が知っている相場感を元に「保守運用は40万円台から」「基本設計は75万円前後」と具体的に指示を出し直してロジックを修正した。

ロジックは自分の知識で設計する必要がある。AIはコードにするのが得意だ。

実際にやってみてわかったこと

AIに全部任せようとすると失敗する

指示が曖昧だと、AIが「良さそうに見えるが自分の意図と違うもの」を作ってくる。「何を作りたいか」「誰に使ってもらうか」「何が出力されると嬉しいか」を自分で考えてから指示しないと、的外れなものができあがる。

SEとしての要件整理力が直接役立つ

業務で身につけた「要件を整理する力」が、Claude Codeへの指示精度に直結した。Claude Codeは実装の自動化ツールだ。設計するのは自分。「AIがあれば設計スキルが不要」ではなく「設計スキルがあるほどAIをうまく使える」が正確だと感じた。

フロントエンドの知識がなくても公開できた

ReactもTypeScriptも「名前は知ってる」レベルだったが、動くものを作って公開できた。細かいコードの意味はわからない部分もあるが、「動いているかどうか」「意図通りの出力になっているか」は確認できる。

次に作ったもの

SE単価シミュレーターを公開した後、同じアプローチで2本目・3本目を作った。

CLAUDE.mdジェネレーター 4ステップでCLAUDE.mdを自動生成するツール。Claude Codeを使い始めるときに便利。

▼ CLAUDE.mdジェネレーター（無料）

技術スタック診断ツール 5問に答えるだけで最適な技術スタックを推薦するツール。

▼ 技術スタック診断ツール（無料）

2本目以降は最初より速く作れるようになった。パターンが見えてくるためだ。

まとめ

フリーランスSEがClaude Codeを使えば、1日・費用ゼロでWebアプリを公開できる。技術力より、何を作るかの解像度の方がよほど重要だと実感した。

Claude Codeを始めるための手順はこちらにまとめている。

▼ Claude Codeの始め方

詳しい手順はnoteでも公開している。

▼ note記事：技術力ゼロ・費用ゼロ・1日でWebアプリを公開した話

この記事で使ったAI関連書籍はこちら

実践Claude Code入門（Amazon）