LUA BLANCA CONNECT Logo
LUA BLANCACONNECT
更新情報一覧に戻る
ウェブディレクターがClaude Codeで企業サイトを構築してみた〜工数96%削減、コード0行の衝撃体験記〜

ウェブディレクターがClaude Codeで企業サイトを構築してみた〜工数96%削減、コード0行の衝撃体験記〜

2025年07月22日
福田 美佐子
AI活用Web開発実践記録

ウェブディレクターがClaude Codeを使って企業サイトを0から構築し、従来制作の96%コスト削減を実現した実体験レポート。つまづきポイントや制約も含めて正直にお伝えします。

はじめに

AI時代の到来により、ウェブ制作の現場は大きく変わろうとしています。特に「Claude Code」のようなAIコーディングツールの登場で、これまでプログラマーやコーダーに依存していた制作プロセスが根本的に変化する可能性が見えてきました。

今回、ウェブディレクターの私が実際にClaude Codeを使って企業サイトを0から構築し、独自ドメインでの公開まで完了させた実体験をレポートします。結果的に従来制作の96%コスト削減を実現しましたが、決して楽な道のりではありませんでした。

この記事では、良い面だけでなく、つまづいたポイントや制約も含めて正直にお伝えします。

私の背景・前提条件

制作者プロフィール

  • 職歴： ウェブディレクター経験者
  • スキル： サイト企画・設計は可能、プログラミングの基本知識あり
  • 今回の立場： 事業者として自社サイト制作

プロジェクト要件

  • サイト種別： 自分のビジネスサイト（LUA BRANCA CONNECT）
  • 主要機能：
  • プロフィール
  • サービス紹介
  • ブログ・更新情報機能
  • お問い合わせフォーム
  • デザイン要件： モダンでプロフェッショナルな企業サイト
  • レスポンシブ： 必須（スマートフォン対応）

技術構成・インフラ構成

フロントエンド技術スタック

  • フレームワーク： Next.js 15.4.1 (App Router)
  • 言語： TypeScript
  • スタイリング： Tailwind CSS
  • UI コンポーネント： Lucide React（アイコン）
  • リッチテキスト： Portable Text（Sanity連携）

バックエンド・CMS

  • CMS： Sanity（ヘッドレスCMS）
  • API： Sanity Client
  • データ構造： ブログ投稿、カテゴリ、タグ、著者情報

インフラ・ホスティング

  • ホスティング： Vercel（無料プラン）
  • ドメイン管理： エックスサーバー
  • DNS： エックスサーバー DNS
  • SSL： Vercel自動発行
  • リポジトリ： GitHub（パブリック）

開発・AI ツール

  • AIコーディング： Claude Code（月額$20プラン）
  • エディタ： Claude Code統合環境
  • バージョン管理： Git/GitHub
  • デプロイ： Vercel自動デプロイ

従来制作フローと課題

まず、従来の企業サイト制作フローを振り返ってみましょう。

関係者・体制

  • お客様（要件定義・承認）
  • ウェブディレクター（進行管理・品質管理）
  • デザイナー（UI/UXデザイン）
  • コーダー/プログラマー（実装・技術対応）

コミュニケーション時間

  • キックオフMTG：1時間
  • 要件定義MTG：1-2時間
  • デザイン確認MTG：1-2時間
  • 制作側内部MTG：1時間×3回 = 3時間
  • 修正指示・確認：1時間×3回 = 3時間
  • 合計：9-11時間

制作工数

  • ディレクター：10人日
  • デザイナー：5人日
  • コーダー：5人日
  • 合計：20人日（160時間）

従来制作の課題

1. 多数の関係者調整が必要

2. MTGや確認作業で頻繁な中断

3. 専門技術者への依存

4. 修正のたびに工数増加

AI制作の新体験

Claude Codeとの対話ベース開発

従来のような仕様書作成やMTGは一切不要。代わりに：

1. 自然言語で要件を説明

2. AIが技術提案・実装

3. 結果確認・修正指示

4. 繰り返し改善

このサイクルを繰り返すだけで、プロフェッショナルなサイトが完成していきます。

並行作業のメリット

最大の発見は並行作業が可能だったことです。

  • AIに指示を出す
  • 他の業務を継続
  • 適宜進捗確認・修正指示
  • また他業務に戻る

この「待機時間の有効活用」により、実質的な拘束時間は大幅に削減されました。

実際の制作プロセス詳細

制作期間・スケジュール

  • 期間： 1週間（7日間）
  • 1日の作業時間： 約2時間
  • 作業パターン： 朝・夕の空き時間活用
  • 総作業時間： 約14時間

フェーズ別作業内容

1日目：プロジェクト初期化（2時間）

  • Next.js プロジェクト作成
  • 基本ページ構造設計
  • Tailwind CSS セットアップ
  • 初期コンポーネント作成

2-3日目：開発・エラー解決（6時間）

  • TypeScript型エラー修正
  • コンポーネント実装
  • Sanity CMS連携
  • レスポンシブ対応

4-5日目：デプロイ・調整（4時間）

  • Vercelデプロイ設定
  • ビルドエラー修正
  • GitHub連携設定
  • 動作確認・修正

6-7日目：ドメイン設定（2時間）

  • DNS設定
  • Vercelドメイン連携
  • SSL証明書設定
  • 最終動作確認

リアルなつまづき体験と解決法

AIとの制作も決して楽ではありませんでした。主要なつまづきポイントをご紹介します。

1. TypeScriptエラーの連続（15-20時間相当）

問題： Next.js 15の仕様変更によるparamsの型エラーが多発

// エラーの例
interface PageProps {
params: { slug: string } // ← これが原因
}

// 修正後
interface PageProps {
params: Promise<{ slug: string }> // ← 非同期型に変更
}

解決策：

  • 一つずつ順番にエラーを修正
  • sample-posts.tsの削除で根本的解決
  • AIとの対話でパターンを学習

2. Vercelデプロイの失敗（10-12時間相当）

問題：

  • ビルドエラーの連続
  • GitHub同期のタイミングエラー
  • 環境変数設定の問題

解決策：

  • 再プッシュとVercel側での手動更新
  • エラーログを詳細にAIと共有
  • 段階的なデプロイ確認

3. DNS設定の複雑さ（6-8時間相当）

問題：

  • VercelのIPアドレス要求が途中で変更
  • DNS伝播の待機時間
  • 設定方法の理解に時間

解決策：

  • Vercelダッシュボードの指示に従って柔軟に対応
  • エックスサーバーでのDNS設定を段階的に修正
  • 時間をおいて再確認

つまづきポイントから学んだこと

1. エラーは一つずつ確実に解決する

2. AIとの詳細な情報共有が重要

3. 技術的な待機時間は他業務で有効活用

4. 段階的な確認でリスクを軽減

工数・コスト比較

従来制作

  • 関係者： 4者（お客様、ディレクター、デザイナー、コーダー）
  • コミュニケーション時間： 9-11時間
  • 制作工数： 171時間（20人日）
  • 制作費： 90万円
  • サーバー・ドメイン： 年間52,160円（エックスサーバービジネス + ドメイン）
  • 初年度総額：952,160円

AI制作（Claude Code）

  • 関係者： 1者（事業者のみ）
  • 実作業時間： 14時間（1週間分散）
  • 並行作業： 可能（実質拘束時間は更に短縮）
  • Claude Code： 年間36,000円（月額$20×12）
  • ドメイン： 年間2,000円
  • Vercel： 0円（無料プラン）
  • 初年度総額：38,000円

削減効果

  • コスト削減：96%減（952,160円 → 38,000円）
  • 工数削減：92%減（171時間 → 14時間）
  • 関係者調整：75%減（4者 → 1者）
  • 拘束時間：90%以上削減（並行作業により実質的拘束時間はさらに少ない）

Claude Codeの制約と現実

利用制限

  • 月額$20プランでの制限： 1日の利用時間に上限あり
  • 制約の影響： 集中して1日で完成させることは困難
  • 現実的な作業パターン： 数日に分けた継続作業が必要

制限による影響

  • メリット： 急がず丁寧な作業が可能、他業務との両立
  • デメリット： 即日完成は不可能
  • 対策： 1日2時間×1週間のような分散作業スケジュール

上位プランとの比較

月額$20プランでも企業サイトレベルは十分制作可能。より高額なプランもありますが、基本プランで実用的な成果を得られました。

ウェブディレクター視点での実用性評価

AI制作のメリット

1. 大幅なコスト削減（96%減）

2. 関係者調整の簡素化

3. 並行作業による効率化

4. 技術的な学習機会

5. 迅速なプロトタイプ作成

AI制作のデメリット・課題

1. 技術的な理解は最低限必要

2. エラー解決に予想以上の時間

3. 利用時間制限による作業制約

4. デザインの細かい調整は限界

5. 複雑な機能は従来制作が有利

実用性の判断

AI制作が適している案件

  • 中小企業のコーポレートサイト
  • シンプルなサービスサイト
  • ブログ・メディアサイト
  • プロトタイプ・MVP作成

AI活用制作の今後の可能性

制作業界への影響

1. ディレクターの役割拡大

  • 技術実装も含めた一貫した対応が可能
  • クライアントとの距離がより近くなる

2. 制作スピードの向上

  • プロトタイプ段階での迅速な検証
  • 修正・改善のサイクル短縮

3. 制作コストの民主化

  • 小規模事業者でも本格的なサイト制作が可能
  • 予算制約のあるプロジェクトの実現

AI制作の現在と未来〜過渡期における制作現場の変化〜

現在、ウェブ制作業界は大きな過渡期にあります。今回の体験を通じて見えてきた現状と今後の展望をお伝えします。

現在の状況（2025年時点）

  • AI制作： 中小企業サイト、プロトタイプ制作で実用レベル
  • 従来制作： 複雑な機能、大規模サイトではまだ主流
  • 学習コスト： ディレクター層でもAIツール習得が進行中

今後の展望（1-2年後）

1. AIの能力向上

  • より複雑な機能実装が可能に
  • デザインの細かい調整精度が向上
  • エラー解決能力の向上

2. 制作現場の変化

  • ディレクターの技術対応力拡大
  • 専門技術者の役割がより高度化
  • プロジェクト全体の高速化

3. 業界構造の変化

  • 制作コストの大幅削減
  • 小規模事業者の制作参入障壁低下
  • 品質の底上げと差別化の重要性増大

過渡期だからこそのチャンス

現在は「AI制作を学ぶ絶好のタイミング」です。早期に習得することで、今後の制作現場で大きなアドバンテージを得られるでしょう。

まとめ

今回のClaude Codeを使った企業サイト制作体験は、私自身の価値観を大きく変える出来事でした。

最大の収穫

  • 96%のコスト削減という圧倒的な効果
  • 技術的な壁を越える新しい体験
  • 並行作業による効率化の発見
  • AI時代の制作プロセスの可能性を実感

正直な感想

決して楽な道のりではありませんでした。TypeScriptエラーとの格闘、Vercelデプロイの試行錯誤、DNS設定の複雑さなど、思っていたよりもエラーが多く発生し、予想以上に時間を取られてしまいました。

しかし、何度か繰り返すうちに、エラーメッセージの読み方やAIとのやりとりのコツが掴めてきます。初回は戸惑いましたが、次回同様の作業をする際は、確実に対応力が向上していると実感できるでしょう。

しかし、従来なら絶対に不可能だったこと（ディレクターが一人でサイト公開まで完了）が現実になったのは、まさに時代の転換点を体感する瞬間でした。

これから挑戦する方へ

1. 基本的な技術理解は必要（HTML/CSS程度）

2. エラーとの向き合い方を学ぶ

3. 段階的なアプローチで進める

4. 時間制限を意識したスケジュール

5. 完璧を求めすぎない

AI時代の制作現場は、確実に新しい段階に入っています。この体験が、同じような挑戦を考えている方の参考になれば幸いです。

制作サイト： https://lua-branca.jp/

制作期間： 2025年7月（1週間）

使用ツール： Claude Code（月額$20プラン）

総費用： 年間38,000円（従来の96%削減）