2026-03-14 — Dev

AIと2人で、ホームページを1日で作った話

このサイト、1日で作りました

このホームページは、企画・デザイン・実装・デプロイまで、すべて1日で完成しました。

1人で。いや、正確には「AIと2人で」。

使ったのは Claude Code というAIコーディングツール。ターミナル上で動くエージェントで、コードを書くだけでなく、ファイルの作成・編集・ビルド・Git操作まで全部やってくれます。

この記事では、その開発の全過程を振り返ります。

技術スタック

まず、何で作ったか。

技術用途
Next.js 16フレームワーク（App Router + 静的エクスポート）
Tailwind CSS v4スタイリング（@theme でデザイントークン管理）
MDXブログ記事（このページもMDX）
Cloudflare Pagesホスティング（無料枠）
Claude CodeAI開発パートナー

ポイントは output: "export" による完全静的サイトにしたこと。サーバーサイドの処理は一切なく、ビルド時にすべてのHTMLが生成されます。これにより：

  • Cloudflare Pagesの無料枠でホスティング可能
  • サーバー管理不要、ランニングコストほぼゼロ
  • 表示速度が圧倒的に速い

動的機能が必要ないサイトに、わざわざサーバーを立てる必要はありません。

開発の流れ

1. 企画フェーズ（会話だけ）

Claude Codeに「自分のホームページを作りたい」と伝えるところから始まりました。

最初は漠然とした要望でしたが、対話の中で要件が固まっていきました：

  • コーポレートサイト × 個人ブランディングのハイブリッド
  • 5つの事業を紹介する
  • ブログを書きたい
  • 実名は公開しない

AIが選択肢を提示して、僕が選ぶ。この繰り返しで、30分ほどでサイトの方向性が決まりました。

2. デザインフェーズ（HTMLモックアップ）

「テック × ミニマル」のダークテーマに決めたあと、AIがHTMLモックアップを生成。ブラウザで実際に確認しながらフィードバックを重ねました。

最初のモックアップ → 悪くないけどもう少し洗練させたい 2回目 → デコレーションを追加、かなり良い 3回目 → 各サービスのミニプレビューを追加、これでいこう

3回のイテレーションで、コードを1行も書かずにデザインが確定。

3. 実装フェーズ（23タスク、7チャンク）

デザインスペックから実装計画を23個のタスクに分解し、7つのチャンク（塊）に分けて順番に実装しました。

Chunk 1: プロジェクト初期化 + デザインシステム
Chunk 2: ナビゲーション + フッター
Chunk 3: ヒーロー + サービスカード
Chunk 4: ブログプレビュー + CTA + アニメーション
Chunk 5: MDXブログシステム
Chunk 6: About / Services / Contact
Chunk 7: SEO + デプロイ

各チャンクで「実装 → スペックレビュー → コードレビュー → 修正」のサイクルを回しました。AIが実装して、別のAIがレビューする。人間の僕は方向性の判断に集中できました。

4. 実際につまづいたところ

すべてが順調だったわけではありません。

CSSの@import順序問題

Tailwind CSS v4では、Google Fontsの@import url()を@import "tailwindcss"より前に書く必要があります。CSS仕様上、外部@importは他の@importより先に記述しなければなりません。最初の実装計画ではこの順序が逆でした。

ハンバーガーメニューのアニメーション

3本線がバツ印に変わるアニメーションで、translate-y-1（4px）では線が重ならない問題がありました。gap-1.5（6px）を考慮してtranslate-y-[7px]に修正する必要がありました。こういう細かいCSSの計算は、レビューで気づけたケースです。

静的エクスポートの制約

output: "export" ではRoute Handlerが使えません。RSSフィードはnext buildの後にポストビルドスクリプトでout/feed.xmlを生成する方式にしました。お問い合わせフォームも、サーバーサイドの処理ができないのでmailto:リンク方式を採用しています。

<main>の二重ネスト

layout.tsxで<main>タグを使っているのに、各ページでも<main>を使ってしまい、HTML仕様違反に。コードレビューで発見して<div>に修正しました。

1人で5つの事業を作れる時代

ここからが本題です。

僕は現在、5つの事業を同時に運営しています：

  • ManeBook — 管理職向けAI学習プラットフォーム
  • 副業戦略コンサル — ハイクラス層の副業支援
  • アイキキ — AI家電比較メディア
  • DataPulse — データ駆動の業界分析レポート
  • Abyss Chronicles — ダークファンタジーRPG

5年前なら、これだけのサービスを1人で立ち上げるのは不可能でした。それぞれにエンジニア、デザイナー、コンテンツライターが必要で、チームを組むか外注するしかなかった。

今は違います。

AIがコードを書き、デザインを提案し、コンテンツを生成する。人間は何を作るかとなぜ作るかに集中できる。実装の「How」はAIが担ってくれます。

ただし、AIは「考えてくれない」

誤解しないでほしいのは、AIは魔法の杖ではないということ。

このホームページの開発でも、AIに丸投げしたわけではありません。AIが出してくる選択肢から選び、方向性を修正し、「これは違う」「こっちがいい」と判断し続けました。

AIが得意なのは：

  • 大量のコードを高速に書くこと
  • 複数のパターンを提示すること
  • 定型的なレビューを漏れなく行うこと

人間が必要なのは：

  • そもそも何を作るかを決めること
  • ユーザーの気持ちを想像すること
  • 「なんか違う」を言語化すること

AIは実行のスピードを100倍にしてくれるけど、判断の質は1ミリも上げてくれない。

だからこそ、ドメイン知識や事業の経験がある人が、AIを活用したときのレバレッジが凄まじいのです。

これからのこと

このブログでは、各事業の開発裏話や、AIを活用した事業構築のノウハウを発信していきます。

「1人でここまでできるのか」と思ってもらえたら嬉しいです。そして「自分にもできるかも」と思ってもらえたら、もっと嬉しい。

技術は民主化されました。あとは、何を作るか。

このサイトのソースコードは、すべてClaude Codeとの対話から生まれました。