| 項目 | 詳細 |
|---|---|
| クライアント | 株式会社エムズプロジェクト（自社事例） |
| 業種 | ITコンサルティング |
| 課題 | エンジニアを抱えない環境でのコーポレートサイト制作 |
| ソリューション | 生成AI（Claude）を活用したノーコード/ローコード開発 |
| 開発期間 | 約3週間（実働15日、1日8時間換算） |
| 主要成果 | エンジニア不在でもある程度の品質のコーポレートサイトを構築 外注コスト比で約70%のコスト削減 |
当社は、中小企業向けのIT戦略・DX支援サービスを提供するコンサルティング会社です。事業開始に伴い、会社の信頼性向上とサービス訴求のためのコーポレートサイトリニューアルが必要となりました。
通常であれば、同規模・同機能のコーポレートサイト開発をWeb制作会社に依頼すると、200〜300万円程度のコストがかかると想定されました。この費用は新興企業である当社にとって大きな負担となるため、代替手段の検討が必要でした。
これらの課題を解決するため、最新の生成AI技術である「Claude」を活用した内製化アプローチを採用しました。
HTMLやCSS、JavaScriptなどのWebサイト構築に必要なコードを生成AI（Claude）に生成させる
要件定義→デザイン方針→コード生成→テスト・統合の流れで進行
生成されたコードをレビューし、フィードバックを与えながら改善
将来の更新や機能追加を見据えた構造設計
このアプローチにより、専門的なWeb開発知識がなくても、高品質なコーポレートサイトを内製することが可能になりました。
まず、コーポレートサイトに必要な機能やページ構成を詳細に検討し、要件定義書を作成しました。この段階から生成AIを活用し、業界標準の要件定義フォーマットの提案や、必要な項目の洗い出しを支援してもらいました。
サイトのフロントエンド（見た目と操作性）の開発では、生成AIに以下の作業を支援してもらいました：
特に、HTML/CSS/JavaScriptの相互連携や最適なコード記述方法について、AIの専門的知見を活用できた点が大きなメリットでした。
限定的ではありますが、サイトの基本的なバックエンド機構も実装しました：
これにより、専門的なバックエンド開発知識がなくても、拡張性と保守性を備えたサイト構造を実現しました。
標準的なページに加え、マーケティング効果を高めるための特殊コンテンツも実装：
これらの特殊ページも、生成AIによるコード提案をベースに効率的に実装できました。
Webサイトのパフォーマンス向上のための施策も実施：
これらの専門的な設定も、生成AIのガイダンスに従って正確に実装できました。
同等規模・機能のWebサイト制作を外注した場合と比較したコスト削減効果：
| 項目 | 外注コスト | 内製コスト | 削減額 | 削減率 |
|---|---|---|---|---|
| 要件定義 | 約30万円 | 約8万円 (10時間×8,000円) |
約22万円 | 73% |
| デザイン | 約50万円 | 約12万円 (15時間×8,000円) |
約38万円 | 76% |
| フロントエンド開発 | 約80万円 | 約32万円 (40時間×8,000円) |
約48万円 | 60% |
| バックエンド開発 | 約60万円 | 約24万円 (30時間×8,000円) |
約36万円 | 60% |
| 特殊ページ開発 | 約40万円 | 約16万円 (20時間×8,000円) |
約24万円 | 60% |
| テスト・修正 | 約20万円 | 約4万円 (5時間×8,000円) |
約16万円 | 80% |
| 合計 | 約280万円 | 約96万円 | 約184万円 | 約66% |
※内製コストは、開発担当者の時給8,000円と仮定して算出
※外注コストは、Web制作会社の一般的な見積もり相場から算出
※AI利用料金（クレジット料等）は比較的少額のため省略
生成AIの活用により、従来のWeb開発と比較して大幅な時間効率化も実現しました：
これらの効率化により、当初予定していた4週間の開発期間を3週間に短縮できました。
本プロジェクトから得られた、生成AIを活用したWeb開発の主な特長は以下の通りです：
専門的なWeb開発知識がなくても、AIがコードの生成や構造設計を支援することで、高品質な開発が可能になりました。特に以下の点でスキル補完が効果的でした：
生成AIは質問に対して即座に回答し、コードを生成するため、従来の開発と比較して反復サイクルが大幅に短縮されました：
このサイクルを素早く繰り返すことで、効率的な開発が実現しました。
生成AIは多様な知識を統合し、最新のWeb開発ベストプラクティスを提案してくれました：
これにより、個人の知識や経験の限界を超えた、高品質な開発が可能になりました。
本事例から得られた、生成AIを活用した内製開発成功のポイントは以下の通りです：
AIに適切な指示を出すためには、自社のニーズと要件を明確に定義することが重要です。曖昧な指示ではAIも曖昧な結果しか返せません。
一度にすべてを実装しようとせず、基本構造→主要ページ→特殊機能といった段階的なアプローチが効果的でした。各段階でAIとの対話を重ね、徐々に完成度を高めていきました。
AIが生成したコードを実際に動かし、問題点や改善点を具体的にフィードバックすることで、徐々に理想のサイトに近づけていくプロセスが重要でした。
HTML/CSS/JavaScriptの基本構造を理解していると、AIとのコミュニケーションがスムーズになります。完全な知識がなくても、基本的な概念を押さえておくことで、生成されたコードの評価や修正指示がしやすくなります。
本事例を通じて、生成AIを活用したWeb開発の大きな可能性を実感しました。今後の展望としては：
今回のサイト制作は、AI活用の試みとしての意味合いが強かったため、本格的なコーポレートサイトの構築には、デザイナーの観点での調整は必要不可欠と考えます。
より品質の高いコーポレートサイトを構築するためには、Webデザイナーを交えた設計が必要と考えています。
現在はJSONベースの簡易的なコンテンツ管理ですが、将来的にはPHP+MySQLを活用した本格的なCMSの構築も検討
アクセス解析データを基に、AIに改善提案を求める体制の構築
ユーザー行動分析と連動したコンテンツ最適化
生成AIを中核としたWebシステム開発プロセスの確立
非エンジニアスタッフのAI活用スキル向上
を見込んでいます。
