【開発経験ゼロ】Claude Codeで独自CMS付きサイトを5日で完成 - 苦戦と試行錯誤の全記録
【開発経験ゼロ】Claude Codeで独自CMS付きサイトを5日で完成 - 苦戦と試行錯誤の全記録
はじめに：「AIなら簡単」は嘘でした
こんにちは。でんちょーです。
この記事では、プログラミング未経験の僕がClaude Codeを使って独自CMS付きコーポレートサイトを開発した話をします。
でも、正直に言います。
「AIに任せれば簡単にできた！」という話ではありません。
27時間も無駄にしたり、28回もコミットを繰り返してバグと格闘したり、何度も「もう無理かも...」と思ったり。
それでも、最終的には成功しました。
- 開発期間: 5日（実質10時間の作業）
- ページ数: 16ページ + 独自CMS
- 実際のコスト: ¥46,398（本来なら256万円以上）
- コスト削減: 98.2%削減
この記事では、「どうやって Claude Code を使いこなしたか」ではなく、「どうやって Claude Code と一緒に試行錯誤したか」を書きます。
僕みたいに非エンジニアで、これから Claude Code で開発したい人の参考になれば嬉しいです。
なぜClaude Codeを選んだのか？
正直、最初は「Gensparkでいいんじゃない？」と思っていました。
Gensparkは何といっても自動生成スライドの品質が高い。加えて開発もできるなんて最高じゃん！と思って使っていたんですが、5-6回フリーズしてしまうたびに上限に行ってしまい困ったことに。
その後、開発をもっとやりきるために何を使ったらいいか、調べていくうちにClaude Codeの特徴に惹かれました。
1. 自律的に動いてくれる
普通のAIチャットツールは、コードを提案してくれるだけです。
でも、Claude Codeなら以下のことができます。
- ファイルを作成
- コードを書き込み
- ビルドして確認
- エラーが出たら修正
全部自動でやってくれます。
僕がやることは、「これを作って」と指示して、途中で「ここはこうしたい」と相談するだけ。
2. CLI版は超高速
Claude Codeには**ブラウザ版とCLI版（コマンドライン版）**があります。
僕はCLI版を使いました。理由は以下の通りです。
- ローカルで動くので、やれることの範囲が多い（フォルダが汚いから整理して、とかもOK）
- ファイル操作が爆速（Grep、Glob、Read、Edit）
- Git、npm、Vercelなどのコマンドが直接使える
実際、16ページのサイト全体を一瞬で検索・編集できます。
3. 効率的に動いてくれる
AIツールは**使った量（トークン）**で料金が決まります。
Claude Codeは必要な部分だけ読み込むので、無駄な料金がかかりません。
例えば以下のような違いがあります。
- すべてのファイルを読み込む → 余計な料金
- 必要なファイルだけ読み込む → 大幅に節約
16ページのサイト開発で、**約¥46,000（あくまでトークン換算です）**で完成しました。
開発の全プロセス：5日間の全記録
Day 1: プロジェクト立ち上げ（1時間）
「WordPressを使わず、Next.jsで独自CMS付きのコーポレートサイトを作りたい」と Claude Code に相談しました。
Claude Codeは、勝手に以下を行いました。
- Next.js 14のプロジェクトを初期化
- Tailwind CSSをセットアップ
- Supabaseスキーマを設計（articles、users、profiles）
所要時間は1時間
僕がやったことは、「WordPress不要で、記事管理できるサイトがいい」と伝えただけ。僕の実作業自体はもっと短いです。
Day 2: CMS地獄に突入（27時間の無駄）
ここで、最大の失敗をしました。
「既製のCMSを使えば簡単でしょ？」と思って、TinaやDecap CMSを導入しようとしたんです。
試行錯誤の27時間
試行1-5: 基本設定（3時間）
config.yml読み込みエラー
試行6-10: OAuth認証（5時間）
postMessage形式の仕様不明確
試行11-27: デバッグ地獄（19時間）
- 「もう少しで動くかも...」の無限ループ
27時間、27回のコミット、すべて無駄でした。
Claude Code も「これは動くはずです」「こう修正してみましょう」と提案してくれましたが、Decap CMS のドキュメント不足とOAuth認証の複雑さで、どうにもなりませんでした。
決断「自分で作ろう」
27時間目、僕はこう相談しました。
「もう自分で作った方が早い気がする。独自CMSを2時間で作れる？」
Claude Code の返答は以下の通りでした。
「はい、可能です。要件が明確なので、2時間あれば完成します」
この決断が、すべてを変えました。
Day 3: 独自CMS実装（2時間で完成）
Claude Code と一緒に、独自CMSを開発しました。
実装した機能
- 管理画面（/admin/articles）
- 記事エディタ（Markdownリッチエディタ）
- 画像アップロード（Supabase Storage連携）
- 認証機能（Supabase Auth）
- ユーザー管理画面（/admin/users）
所要時間は2時間
効率比較
| 項目 | Decap CMS | 独自CMS | 効率 |
|---|---|---|---|
| 時間 | 27時間 ❌ | 2時間 ✅ | 13.5倍 🚀 |
| 成功率 | 0% ❌ | 100% ✅ | - |
なぜ独自CMSが速かったのか？
Claude Code がこう説明してくれました。
「既製CMSは、汎用的な設計のため設定が複雑です。でも、てんちょーさんの要件は明確なので、必要な機能だけを実装すれば早いです」
教訓: 要件が明確なら、独自実装が最速。
実装したCMS画面はこちら↓↓↓
実装したダッシュボード画面
記事一覧・編集画面
独自CMS「QUEST CMS」の管理画面。記事の作成・編集・削除が簡単に実装した機能:
- Markdownエディター（Tiptap）
- 画像アップロード（Supabase Storage）
- リアルタイムプレビュー
- 認証機能（Supabase Auth）
- ユーザー管理
シンプルだけど、ユーザー管理なども含めて必要な機能がすべて揃った独自CMSが完成しました。
Day 4: キャッシュ問題との戦い（28コミット、2.8時間）
独自CMSが完成して、喜んでいたのも束の間。
問題発生
症状:
- CMSで記事を編集・保存
- GitHubに正しくコミットされている
- でもフロントエンドに反映されない
「えっ、なんで...？」
Claude Code と一緒にデバッグ開始。
試行錯誤の履歴
試行1-3: revalidate = 0、HTTPヘッダーでキャッシュ無効化
→ 効果なし
試行4-10: デバッグログ追加
→ データがロールバックする現象を発見
試行11-20: さらなるデバッグ
→ 日付フィールド、データフロー全体を追跡
試行21-28: 根本原因を特定
ここらへんは技術力のなさを痛感しました。QiitaやZENNで記事を書いてくださっている皆様に感謝。
Claude Code が発見してくれました。
「Node.jsのファイルシステムキャッシュが原因です。一度読み込んだファイルは、メモリにキャッシュされてしまいます」
✅ 解決策：GitHub API直接取得
問題のコード:
const fileContents = fs.readFileSync(fullPath, "utf8");
→ ファイルシステムキャッシュに保存され、最新データが取得できない ❌
解決コード:
const response = await fetch(
`${GITHUB_API}/repos/owner/repo/contents/path?t=${Date.now()}`,
{
cache: 'no-store',
next: { revalidate: 0 }
}
);
→ GitHub APIから直接取得、キャッシュを完全回避 ✅
結果: 28コミット、2.8時間かけて解決。この経験でNext.js App Routerのキャッシュ戦略を完全に理解できました。
Day 5: SHA問題との決別（2時間）
ここで、僕が気づいたことがあります。
症状:
- CMSで記事を編集・保存
- GitHubにコミットされる
- でも再度編集しようとするとロールバック
「これ、GitHubのSHA問題じゃない？」
僕の提案
「データの保存・読み込み先をGithubからSupabaseにするなどして対策を検討して」
Claude Code の返答は以下の通りでした。
「はい、Supabaseに移行すれば、SHA問題が完全に解消されます。マイグレーションスクリプトを作成しますね」
Supabaseへの完全移行（2時間）
-
マイグレーションスクリプト作成
-
既存の3記事をSupabaseにインポート
-
APIエンドポイント完全書き換え
-
GitHub API → Supabase
-
全ページの更新
-
16ファイルを一括更新
結果
- ✅ SHA問題が完全に解消
- ✅ 何度でも編集・保存が可能
- ✅ リアルタイムで最新データを取得
所要時間は2時間
Claude Codeの良い使い方
1. 具体的に指示する
❌ 悪い例: 「いい感じにして」
✅ 良い例: 「サービスページを4つ作って。事業開発支援、Press Starter、公務員向けキャリアコーチング、ホームページ制作。各ページに画像とCTAを配置して」
2. 参考サイトを渡す
Claude Codeは、URLを渡すと一定程度の著名なサイトならWebFetchで内容を取得してくれます。
「このサイトのデザインを参考にして」と言うだけで、同じクオリティを再現。
3. エラーは正直に報告
「ビルドエラーが出ました」と報告すると、Claude Codeは以下を行います。
- エラーログを読み取る
- 原因を特定
- 修正コードを提案
- 自動で修正
僕が何もしなくても、勝手に直してくれます。
4. 「2時間ルール」を守る
既製品が2時間で動かなければ、独自実装を検討。
Decap CMSで27時間も無駄にした経験から学びました。
5. Agent（Task tool）を活用
大規模な検索や複数ファイルの編集は、Agentに任せると爆速。
例「全ページでgetAllNewsPostsFromGitHubをgetAllNewsPostsに置き換えて」
→ Claude Codeが自動で全ファイルを検索・修正。
6. 勉強する前に作れ！
非エンジニアあるあるですが、「先に何かInputしないと・・・」はゴールが見えずに挫折しやすいです。どれほどしょぼくてもいいので先に何かしら作らせてみましょう。
勉強も、一回作っている過程で「このコマンドはなに？」と調べたり、「どういう構成？」とClaudeCodeに聞いたり、プロジェクトの状態や技術を整理しながらやっていくほうが実践的でわかりやすいです。
**AL（アクティブラーニング）**を意識してやりましょう。
苦戦した点（正直に言います）
❌ 1. 既製CMSへの過度な期待
問題: 「有名なCMSならすぐに実装できるでしょ？」
結果: → 27時間の無駄 ❌
教訓: ✅ 要件が明確なら、独自実装の方が早い
❌ 2. キャッシュ問題の複雑さ
問題: Next.js App Routerのキャッシュ戦略を理解していなかった
結果: → 28コミット、2.8時間の試行錯誤 ❌
教訓: ✅ 新しい技術は、公式ドキュメントを精読すべき（または調べさせるべき）
❌ 3. Vercel無料枠の制限
問題: CMSで保存するたびにVercelビルドが発生
結果: → 月100時間の無料枠を突破 ❌
対策: ✅ 2段階保存システムを実装
- Ctrl+S: ローカル保存のみ（ビルドなし）
- 保存ボタン: GitHub保存 → Vercelビルド
❌ 4. 認証フローのカスタマイズ
問題: Supabaseデフォルト設定を盲信
結果: → 招待メールのリンクがログイン画面に戻る ❌
対策: ✅ メールテンプレートをカスタマイズ
具体的な成果：数字で見る開発スピード
コーポレートサイト + 独自CMS
- 開発期間: 5日（実質作業時間：約10時間）
- ページ数: 16ページ
- 使用技術: Next.js 14、Tailwind CSS、Framer Motion、Supabase、Tiptap
- デプロイ先: Vercel
- ドメイン: https://llc-quest.com
- 実際のコスト: ¥46,398（外注で作ってもらおうと思ったら、256万円以上かかるらしい by Claude Code試算）
- コスト削減: 98.2%削減
内訳
フロントエンド（8ページ）
- トップページ
- 4サービスページ（事業開発支援、Press Starter、公務員向けキャリア、ホームページ制作）
- ニュース一覧・詳細ページ
- お問い合わせフォーム
独自CMS（5ページ）
- 管理画面ダッシュボード
- 記事一覧・作成・編集ページ
- ユーザー管理画面
- ログインページ
認証（3ページ）
- ログイン・コールバック・パスワード更新
技術スタック
- Supabase認証 + データベース連携
- Markdownリッチエディタ（Tiptap）
- 画像アップロード機能（Supabase Storage）
- Row Level Security（RLS）でセキュリティ強化
- レスポンシブ対応（モバイル・タブレット・デスクトップ）
まとめ：AIは「パートナー」であって「魔法」ではない
Claude Codeを使って、僕は独自CMS付きコーポレートサイトを5日で作りました。
開発期間は5日（実質10時間）。
実際のコストは**¥46,398**（本来なら256万円以上）。
コスト削減は98.2%。
でも、これは「AIが全部やってくれた」話ではありません。
- Decap CMSで27時間も無駄にした
- キャッシュ問題で28回もコミットを繰り返した
- SHA問題を僕自身が分析して、Supabase移行を提案した
Claude Code は、ただのツールじゃない。一緒に試行錯誤するパートナーです。
一緒に学びましょう
この記事を読んで、「自分も Claude Code でサイトを作りたい」と思った方へ。
でも、こう思いませんでしたか？
- 「エラーが出たらどうしよう...」
- 「どうやって指示すればいいの？」
- 「独自実装 vs 既製品の判断がわからない」
大丈夫です。僕も最初は不安でした。
僕も最初は不安でした。でも、Claude Code と一緒に試行錯誤して、今ではこっそり記事もできるレベルになりました。
Twitterで開発の様子や気づきを発信しています。
よかったらフォローしてください
今後の展開
1. 激安ホームページ制作サービス
今回開発した独自CMSを活用して、格安でホームページ制作サービスを提供しています。
このサービスの特徴
- 価格: 従来の1/10以下（外注150万 → ¥15万以下）
- スピード: 1-2週間で納品
- 品質: Claude Codeで開発したプロ品質
- CMS付き: 納品後にニュースリリースなど自分で購入可能
こんな方におすすめ
- スタートアップ・個人事業主
- 予算は限られているが、ちゃんとしたサイトが欲しい
- WordPressは使いたくない
- 自分で更新できるCMSが欲しい
詳しくはこちら↓↓↓
激安ホームページ制作サービス | QUEST
AI×最新技術で実現する業界最安水準のホームページ制作。¥50,000から。
2. 非エンジニア向けClaude Code開発セミナー
この経験を活かして、非エンジニア向けのClaude Code開発セミナーを準備中です。
セミナーで学べること（予定）
- Claude Code CLI版の使い方（初心者向け）
- 「2時間ルール」などの判断基準
- 独自CMS開発の実践
- トラブルシューティングの方法
- 無料枠内での運用ノウハウ
詳細が決まったら、noteで告知します！
技術的な補足：実装の詳細
この記事を読んで技術的な詳細が気になる方向けに、実装のポイントを補足します。
Next.js App Routerのキャッシュ戦略
Next.js 14のApp Routerでは、デフォルトで積極的なキャッシュが行われます。これがCMS開発で問題になりました。
// キャッシュを完全に無効化する方法
export const dynamic = 'force-dynamic';
export const revalidate = 0;
async function getData() {
const response = await fetch(url, {
cache: 'no-store',
next: { revalidate: 0 }
});
return response.json();
}
Supabase Row Level Security (RLS)
セキュリティを確保するために、RLSポリシーを設定しました。
-- 記事の閲覧は全員可能
CREATE POLICY "Articles are viewable by everyone"
ON articles FOR SELECT
USING (published = true);
-- 記事の編集は認証済みユーザーのみ
CREATE POLICY "Articles are editable by authenticated users"
ON articles FOR ALL
TO authenticated
USING (true)
WITH CHECK (true);
Tiptapエディタのカスタマイズ
MarkdownエディタにはTiptapを採用しました。以下の拡張機能を追加しています：
- StarterKit: 基本的なテキスト編集機能
- Image: 画像のドラッグ&ドロップ対応
- Link: リンクの挿入・編集
- Placeholder: 入力前のプレースホルダー表示
- Typography: スマートクォートなどの自動変換
画像アップロードの実装
Supabase Storageを使った画像アップロードの実装例：
const uploadImage = async (file: File) => {
const fileName = `${Date.now()}-${file.name}`;
const { data, error } = await supabase.storage
.from('images')
.upload(fileName, file);
if (error) throw error;
const { data: { publicUrl } } = supabase.storage
.from('images')
.getPublicUrl(fileName);
return publicUrl;
};
これらの技術的な実装は、すべてClaude Codeと一緒に作り上げました。エラーが出るたびに相談し、最適な解決策を見つけていくプロセスは、まさに「一緒に開発している」感覚でした。
てんちょー（合同会社QUEST 代表）
普段はSIerで経営企画部員として働きながら、週末起業で高校時代の友人と共同創業。何をやるかも大事だけど、誰とやるか（生きるか）を起点に多岐にわたるビジネスを展開
コーポレートサイト
QUEST - 一人ひとりの想いを、カタチにする
QUESTは、「想い」「個性」「居場所」を最適化することをミッションに掲げています。事業開発から個人のキャリアまで、幅広い
Twitter (X): @questceo_ai
追伸：この記事の裏話
この記事も、Claude Codeに「Historyに基づいて正確な記事を作って」と指示して、一緒に作りました。
構成、見出し、本文、すべてClaude Codeと相談しながら。
これが、Claude Codeの使い方です。
あなたも、試してみませんか？
