このサイトをゼロから作った全記録——費用・時間・失敗も全部
Claude Codeだけでサイトを作るとどうなるか。かかった時間・費用・詰まった箇所を全部書く。
最初に断っておくと、このサイトを作るのに自分でタイプしたコードはほぼない。
「ほぼ」というのは本当にそうで、Next.jsのセットアップからVercelへのデプロイまで、Claude Codeとの会話だけで進んだ。Web開発の経験はほぼゼロの状態から始めて、数日で動くサイトができた。
ただ、「数日で作れた」の裏には詰まったことや想定外のことがいくつもあった。そのまま書いておく。
スペック
- 期間: 約1週間（2026年3月中旬）
- 費用: ¥0/月（Vercel無料枠・GitHub無料枠）
- 使ったもの: Claude Code、Next.js 15、Tailwind CSS、Vercel
- 自分のコーディング経験: Python（AI開発）のみ。TypeScript・React は初めて
全体の流れ
1. Next.js プロジェクト作成（Claude Codeに指示）
2. ホームページ・About ページ作成
3. Vercel にデプロイ・GitHub 連携
4. ブログ機能（MDX）実装
5. 自動デプロイ仕組み（Stopフック）を設定
6. X API 連携
7. UX改善・記事3本執筆
詰まったこと3つ
1. ブログの表やコードが表示されなかった
MDXでブログを書いたとき、本文は表示されるのに表やコードブロックだけ崩れていた。
原因は2つ重なっていた。
ひとつは remark-gfm というプラグインを入れていなかったこと。GitHubのMarkdown記法（表・チェックボックスなど）はデフォルトでは使えない。npm install remark-gfm して、MDXRemoteに渡したら解決した。
もうひとつはTailwindのtypographyプラグインのスタイルが効いていなかった。Tailwind v4ではグローバルCSSに明示的に書かないと反映されないことがあって、globals.css に手動でスタイルを追記した。
どちらも「なぜ壊れているか」の原因究明に時間がかかった。
2. X APIが403エラーになった
X APIでツイートしようとしたら403（Forbidden）が返ってきた。
原因は「Read and write」の権限設定より前にAccess Tokenを生成していたこと。Tokenはアプリの権限設定をスナップショットするので、権限を変えた後にTokenを再生成しないといけない。
これを2回やった。同じミスを2回した。
3. Hooksがセッション中に反映されなかった
Stopフック（自動git push）を設定したのに動かない、という場面があった。
原因は、HooksはClaude Codeのセッション開始時に読み込まれる仕様だから。セッション中に設定ファイルを変更しても次のセッションからしか有効にならない。再起動で解決した。
コスト
| 項目 | 費用 |
|---|---|
| Vercel | ¥0（無料枠） |
| GitHub | ¥0（無料枠） |
| ドメイン | ¥0（Vercel のサブドメイン使用） |
| X API | $5（開発クレジット購入） |
| Claude Code | サブスク費用に含まれる |
毎月のランニングコストは今のところゼロだ。
正直な感想
「Web未経験でもサイトが作れた」は本当だと思う。TypeScriptもReactも知らなくても、Claude Codeが書いてくれた。
ただ、「何が起きているかわからないまま進む」という感覚が最初はずっとあった。コードが変わっていくのを見ながら、「これで合ってるのか」を確認する作業が予想より多かった。
慣れてくると「この指示をすれば何が起きるか」がわかってきて、だんだん楽になった。最初の2日と1週間後では、Claude Codeとのやりとりの密度がだいぶ変わった。
完成したかどうかはまだわからない。でも「動くサイトがある」という状態になったのは確かだ。