エンジニア専業ではない代表が、Claude Codeでコーポレートサイトを構築した全記録

私はhomulaの代表をしている福地です。エンジニア専業ではありません。BizDev寄りの経歴で、コードを読むことはある程度できますが、自分でゼロからプロダクションコードを書くのは本業ではありませんでした。

そんな私が、homulaのコーポレートサイト（homula.jp）をNext.js App Router + Vercelで構築し、現在も本番運用しています。20ページ以上、ブログ基盤、GEO最適化、HubSpotフォーム連携、構造化データ——すべてAIコーディングで作りました。しかもNext.jsの素人だった私が、最初のサイト公開まで1週間もかかっていません。

homulaは、エンタープライズ企業向けにAIエージェントの戦略策定・PoC・実装・運用・内製化までを一気通貫で支援するAIインテグレーターです。累計調達3.2億円、AIエージェントツール接続/実行基盤の自社プロダクト「Agens」を運営し、3-5日のブートキャンプでROI試算まで完結させるスピード感が強みです。

この記事は、その代表である私がAIコーディングでコーポレートサイトを構築した全プロセスの記録です。何がうまくいき、何が難しく、どこでプロの手が必要だったか。エンジニア専業でなくても——もっと言えば、エンジニアでなくても——AIコーディングで企業サイトを構築・運用できる時代のリアルを、包み隠さず書きます。

なぜCMSからLLMコーディングに移行したのか

STUDIOの限界が見えた

homula.jpは以前、STUDIOで構築していました。ノーコードツールとしてのSTUDIOは優秀ですが、事業が進むにつれて3つの壁にぶつかりました。

表現力の天井。サービスページやプロダクトLPで、比較表・タブ切り替え・FAQアコーディオン・条件分岐のあるCTAなど、「ちょっと凝ったUI」を作りたくなるたびにツールの制約に突き当たる。やりたいことが増えるほど、ノーコードの「枠」が見えてくる。

SEO/GEOの限界。構造化データ（JSON-LD）の自由な埋め込み、セマンティックHTML構造の細かい制御、サーバーサイドレンダリング——こうした「LLMに引用されるための設計」が、ノーコードでは根本的に難しい。homulaはAIインテグレーターとして、ChatGPTやPerplexityで「AIエージェント 導入支援」と検索されたときに名前が出ることが事業上の生命線です。GEOの設計自由度は、ノーコードツールでは決定的に不足していました。

更新のたびに発生する工数。サービスラインの変更やブログ追加のたびに、ノーコードUI上で手作業の調整が必要。外注すれば数百万円と数ヶ月。スピードとコストの両面で、スケールしない構造でした。

「LLMにコードを書かせる時代が来る」と確信した

ノーコードの限界を感じていた一方で、Claudeを日常的に使う中でそのコーディング能力の高さに驚いていました。対話を重ねるほど、CMSやノーコードツールのGUIを手で操作するより、LLMに直接コードを書かせたほうが速く、品質も高く、自由度も圧倒的に上だという確信が強くなっていきました。

半信半疑で始めたのではありません。「この流れは不可逆だ。CMSの時代からLLMコーディングの時代に変わる」と判断して、戦略的に移行を決めました。

そしてClaude Codeが登場した。ターミナルで動くAIコーディングエージェントで、指示を出すとファイルを読み書きし、コマンドを実行し、複数ファイルにまたがる変更を一気に行える。これが移行の実行を可能にしたラストピースでした。

技術スタックの選定

AIに「コーポレートサイトを作りたい」と相談するところから始めました。Claude Projects（claude.ai上のプロジェクト機能）にプロジェクトを作り、要件を整理する段階から対話的に進めました。

最終的な技術スタックは以下の通りです。

この選定自体、AIとの対話で決めました。重要だったのは**「なぜその技術を選ぶか」を言語化してAIに伝えること**です。「モダンなフレームワークで」ではなく、「SSRでLLMのクローラーに構造化されたHTMLを返したい」「CSS-in-JSではなくユーティリティクラスにして、AIが生成するコードのスタイルを予測可能にしたい」と、意図を具体的に伝えると、AIの提案精度が跳ね上がります。

制作プロセス：Claude Projects × GitHub × Vercelの三位一体

AIに「プロジェクトの記憶」を持たせる

最大の工夫は、Claude Projectsのプロジェクトナレッジにサイト全体の設計思想を格納したことです。

具体的には、以下の情報をプロジェクトに蓄積しました。

• デザインシステム定義: カラーコード、フォントクラス名、ボタンスタイル、テーマ切り替えルール（ダークテーマ=CVページ、ライトテーマ=情報ページ）
• GEO最適化ルール: 各ページに必須の定義文フォーマット、構造化データの型、見出し階層ルール
• 事業コンテキスト: サービス体系（6段階ファネル）、Agensの3層構造、主要キーワード群
• コーディング規約: "use client"を使わない原則、共通クライアントコンポーネントの一覧と使い方、画像を使わないデザインルール

こうすることで、「トップページを作って」と一言指示するだけで、AIがデザインシステムに準拠し、GEO最適化された、事業文脈を踏まえたコードを生成します。プロジェクトナレッジは、AIと協働する際の最大の武器です。エンジニアかどうかに関係なく、「AIに渡す文脈の質」がアウトプットの質を決めます。

指示の出し方：構造とビジネス意図で伝える

ページ生成時のプロンプトは、こんな感じです。

/services/bootcamp のページを作ってください。

ダークテーマ。
ヒーローセクションの見出しは「3-5日で、AIエージェントの投資対効果を証明する」。
セクション構成: ヒーロー → 課題提起（3つ） → プログラム概要 → 5日間の流れ → 
成果物一覧 → FAQ（5問） → CTA。
FadeInSectionを各セクションに適用。
FAQにはFAQAccordionを使い、JSON-LDを自動埋め込み。
GEO定義文を含める。

重要なのは、デザインの詳細は指示しないことです。色、余白、フォントサイズはプロジェクトナレッジのデザインシステムに任せる。指示するのは「コンテンツ構造」と「ビジネス意図」。これがAIコーディングで品質を安定させるコツでした。

逆にうまくいかなかったのは、「もっとかっこよくして」「インパクトのあるデザインにして」のような曖昧な指示。AIは「かっこいい」を解釈できず、過剰なグラデーションや無意味なアニメーションを追加してしまう。指示は「構造」と「目的」で出す。見た目は「トーン（ダーク/ライト）」と「既存ページとの一貫性」で制御する。この原則に気づいてからは、品質が劇的に安定しました。

GitHub連携とVercelのプレビューデプロイ

ワークフローは以下の通りです。

図1: Claude Projects → GitHub → Vercelの高速フィードバックループ

このフィードバックループが高速に回ることが、AIコーディングを実用レベルにしている最大の要因です。「動くものを見て→直す」のサイクルが5-10分で回る。外注なら「修正依頼→見積もり→実装→確認」で1-2週間かかるプロセスが、リアルタイムになります。

1週間で何ができたか：制作の実績と数値

Next.jsに触れたことすらなかった私が、最初のサイト公開まで1週間もかかりませんでした。STUDIOで数ヶ月かけて作っていたサイトの機能を、大幅に上回る規模と品質で再構築できた。正直、自分でも驚いています。

その後も継続的にページ追加とコンテンツ拡充を続け、現時点での実績は以下の通りです。

工数90%削減の内訳

何が変わったかを具体的に書きます。

LP制作。STUDIOでサービスLPを1本作るのに、コンテンツ設計→デザイン調整→レスポンシブ対応→公開で2-3日かかっていたのが、Claude Projectsへの指示出しから本番デプロイまで2-3時間で完結するようになりました。構成とビジネス意図をプロンプトに書けば、デザインシステムに準拠したpage.tsxが生成され、そのままVercelにデプロイできます。実際、AIコーディングエージェント導入支援のLPもこの方法で制作しています。

ブログ更新。MDX形式で記事を書き、frontmatter（タイトル、カテゴリ、タグ等）を付けてGitHubにpushするだけ。CMSのGUIを操作する必要がない。記事の構成案もClaudeと壁打ちしながら作れるので、コンテンツ企画から公開までのリードタイムが大幅に短縮されました。

浮いた時間の使い道。LP制作やサイト更新に費やしていた時間が激減した結果、良質な情報の収集と編集、コンテンツ戦略の設計、GEO最適化の分析——つまり「頭を使うべき仕事」に集中できるようになりました。手を動かす作業はAIに任せ、人間は戦略的な判断に専念する。この分業が自然に成立しています。

インバウンド問い合わせの急増

サイトリニューアル後、インバウンドでの問い合わせがかなり増えました。

理由は明確です。GEO最適化により構造化データとセマンティックHTMLを徹底した結果、検索エンジンだけでなく、ChatGPTやPerplexityなどの生成AIからの認知・引用が増加。「AIエージェント 導入支援」「MCP 導入」「n8n エンタープライズ」といったキーワードでhomulaが言及されるケースが増え、そこからの直接流入が問い合わせに転換しています。

これはSTUDIOでは実現できなかったことです。ノーコードツールではJSON-LDスキーマの自由な設計やセマンティックHTML構造の細かい制御ができず、GEOの土俵に上がることすらできませんでした。

ここからがプロの仕事だった

ここまで読むと「AIがあれば何でもできる」と思うかもしれません。しかし現実は違いました。AIで「動くもの」を作ることと、企業のサイトとして「使えるもの」にすることの間には、明確なギャップがあります。

図2: AIコーディングにおける作業構成 — コード生成は全体の30%に過ぎない

1. デザインシステムの一貫性

AIは指示通りにコードを生成しますが、ページ間のデザインの一貫性を自ら保つことはしません。最初のうち、各ページでボタンのpadding、セクションの余白、見出しのフォントサイズが微妙にバラバラになりました。

対策として、プロジェクトナレッジにデザインシステムを厳密に定義しました。「ダークテーマのボタン（主）は bg-[#63DCBE] text-[#0A0B0F] hover:bg-[#7EECD0] 以外使わないこと」のようなルールの明文化。これはデザイナーの暗黙知をドキュメントに変換する作業であり、もっとも地味で、もっとも時間がかかった部分です。

2. SEO/GEOの構造設計

h1→h2→h3の階層構造、canonical URLの設定、OGPメタデータ、JSON-LDスキーマの設計——これらは「正しい構造」の知識がないとAIに適切な指示を出せません。

たとえば、FAQセクションにJSON-LD FAQPageスキーマを埋め込むべきだという判断は、GEO戦略を調査した結果として出てきたものです。AIは「FAQPageスキーマを埋め込んで」と言えば完璧に実装しますが、「埋め込むべきかどうか」の判断はしてくれません。

3. CRM/MAとのシステム連携

HubSpotのフォーム埋め込み自体はAIが実装できます。しかし、「どのページのどのCTAがどのHubSpotフォームに接続すべきか」「フォーム送信後のサンクスページの遷移設計」「UTMパラメータの引き継ぎ」といったビジネスロジックの設計は人間の仕事です。

4. パフォーマンス最適化

AIが生成したコードは機能的には正しくても、パフォーマンス面で最適とは限りません。React Server Componentsの活用指針（"use client"を最小限にする）、画像を使わずにグラデーションとSVGで表現するルール、Intersection Observerの適切な閾値設定——これらは実際にLighthouseで計測し、問題を発見し、対策を立てるサイクルを回して初めて解決できました。

5. GEO定義文の戦略設計

各ページに埋め込む「GEO定義文」——LLMが引用する可能性が最も高い一文——の設計は、もっとも時間をかけた作業です。例えば:

homulaは、エンタープライズ企業向けにAIエージェントの戦略策定・PoC・実装・運用・内製化までを一気通貫で支援するAIインテグレーターです。

この一文は、ChatGPTやPerplexityが「日本のAIエージェント導入支援企業」を聞かれたときに引用するためにチューニングされています。「定義文の設計」は完全に人間の戦略的判断であり、AIには委任できません。そしてこの設計が、先述したインバウンド問い合わせの増加に直結しています。

AIコーディングでサイト構築した5つの学び

学び1: 指示の質 = 成果物の質

AIコーディングの成果物の品質は、AIの性能ではなく指示の質で決まります。「いい感じのページを作って」では使えるものは出てきません。「ダークテーマ、ヒーロー→課題提起→ソリューション→比較表→FAQ→CTAの構成、FadeInSection適用、GEO定義文必須」と、構造・テーマ・必須要素を明示すると、一発で本番品質のコードが生成されます。

学び2: プロジェクトナレッジが「品質の下限」を保証する

エンジニアなら暗黙知として持っている「一貫したコーディングスタイル」「デザインパターン」を、プロジェクトナレッジに全て明文化する。これがAIに対する「型」の役割を果たし、誰が指示しても一定品質以上のアウトプットが出る仕組みになります。エンジニアかどうかは関係ない。渡す文脈の質が成果を決めます。

学び3: 「作る」は30%、「使える」にするのが70%

コードを生成すること自体は全体の作業量の30%程度。残り70%は、デザインの一貫性チェック、SEO/GEO設計、CRM連携、パフォーマンス最適化、コンテンツ戦略——つまり「エンタープライズ品質に引き上げる」作業です。ここにプロフェッショナルの価値があります。

学び4: フィードバックループの速さがすべて

Claude Projects → GitHub → Vercelプレビューデプロイのサイクルが5-10分で回ること。これが外注やSIerとの最大の差です。「見て→直す」を1日に何十回も回せるから、結果的に高品質になる。1週間でNext.js未経験からサイト公開できた最大の理由がこれです。

学び5: AIコーディングは「エンジニアを不要にする」のではなく「関与ポイントを変える」

私一人でサイト全体を構築しましたが、パフォーマンス監査やアーキテクチャの妥当性確認ではプロの目が価値を発揮する場面がありました。AIは「実装」をコモディティ化しますが、「何を作るべきか」「なぜこの構造にすべきか」の判断はむしろ重要性が増しています。

図3: AIコーディング時代のスキルシフト — 実装から戦略・設計へ

「作る」と「使える」の間にあるもの

この体験を通じて確信したことがあります。

AIコーディングの普及で「作る」ハードルは劇的に下がった。しかし、作ったものをエンタープライズで「使える」ようにするには、設計・セキュリティ・システム連携・運用保守のプロフェッショナルな判断が必要。このギャップこそが、homulaが解決すべき課題です。

私自身の体験がそのまま証明しています:

• エンジニア専業でなくてもAIでコーポレートサイトを作れた（= 「作る」のハードルは下がった）
• しかしGEO最適化、CRM連携設計、パフォーマンス最適化、運用設計には専門知識が必要だった（= 「使える」にはプロが要る）
• 「使える」まで引き上げた結果、インバウンド問い合わせが急増した（= プロの仕上げが事業成果に直結する）

homulaのAIコーディングエージェント導入支援は、このギャップを埋めるサービスです。非エンジニアが作ったプロトタイプの本番化設計（Phase 0-Biz）と、開発チームのAIコーディング基盤の標準化（Phase 0-Dev）の2つの入口を用意しています。

もしあなたが「AIで作ったプロトタイプがあるけど、本番で使っていいかわからない」「社内システムとどう繋ぐかわからない」と感じているなら、それはまさにhomulaが得意とする領域です。

まとめ：AIコーディングによる企業サイト構築は「使い物になる」か

結論: なる。条件付きで。

私のケースでは、Claude Projectsのプロジェクトナレッジにデザインシステム・事業コンテキスト・GEOルールを集約し、GitHub × Vercelの高速フィードバックループで品質を担保しました。結果として、Next.js未経験から1週間でサイト公開、LP・ブログ更新工数90%削減、インバウンド問い合わせの急増を実現しています。

しかし同時に、デザインの一貫性管理、SEO/GEO構造設計、CRM連携、パフォーマンス最適化——これらは「プロが入るべきポイント」として明確に存在しました。

「作る」はAIが解決した。「使える」にするのがプロの仕事。この認識が、AIコーディング時代の正しいスタートラインだと考えています。

---

関連記事

• AIエージェント導入ガイド — 戦略策定から運用まで
• Agent Skillsとは何か — 業務知識をSKILL.mdに変換する方法
• AIエージェント実行基盤の大転換 — なぜ主要企業は「ランタイム」に巨額投資するのか

---

本記事で紹介したhomula.jpは現在も本番稼働中です。このサイト自体が、AIコーディングによる企業サイト構築の実証事例です。

AIで作ったプロトタイプの本番化、開発チームのAIコーディング標準化——どちらのご相談もお気軽にどうぞ。

無料相談を予約する | AIコーディングエージェント導入支援の詳細