このサイトは、AIで作りました。
いまご覧いただいているwebharu.com自体が、AI（Claude Code）で構築されています。デザインも、コーディングも、記事の移行も。「AIでサイトが作れます」と言うだけの会社と、自社サイトで実際にやって見せる会社——どちらに頼むかの判断材料として、過程を全て公開します。
※数字はすべてgitの実履歴に基づきます（2026年7月8日〜10日）。3日は構築の日数で、企画・戦略を含めた全体は7日間です。自社サイトのため要件整理・確認の往復がなく、この速度が出ています。受託の場合、AIサイト制作は1〜2週間、オリジナルデザインのサイト制作は要件整理とレビューを挟むため約2ヶ月〜が目安です。
3日間で、何をしたか。
設計と、26ページの一括構築
サイトマップ→ページ構成→デザインカンプ（AIがHTMLで生成、人がレビュー）→Astroで実装。トップの桜の演出・スクロール書き文字などの動きも、この日にAIが実装しています。
コンテンツ移行と、計測・フォームの基盤
旧サイト（Webflow）から記事62本・実績24件をスクレイピングで抽出し、画像最適化込みで移行。GA4・Clarityの計測基盤、GAS連携の4フォーム、構造化データを整備しました。
SEO・高速化と、このページを含む拡充
フォントのサブセット化・sitemap・llms.txt（AI向けサイト案内）を整備。アプリ開発ページ・計算ツール・用語集・比較ページなど、集客ページをAIが量産——いまご覧のこのページも、AIが書いています。
AIがやったこと。人がやったこと。
「全部AI」は嘘になります。実際の分担はこうでした——そしてこの分担こそが、AI制作の品質を決めます。
AI（Claude Code）の担当
- デザインカンプのHTML生成（複数案）
- 全ページのコーディング（Astro・アニメーション込み）
- 記事・実績データの抽出、変換、移行
- 構造化データ・SEO設定・パフォーマンス改善
- バグの調査と修正、表示の実機確認
人（代表・栗田）の担当
- コンセプトと構成の決定（何を伝えるサイトか）
- デザインの審美判断——直すのは、ここが甘いとき
- 文章の事実確認と、営業判断（価格・見せ方）
- 各工程のレビューとGOサイン
つまり、手を動かすのがAI、判断するのが人。Webflow解説記事を書き続け、デザインにこだわってきた人間がレビューに集中するから、AIの速度と人の品質が両立します。
AI×制作の実践記録
このサイト以外でも、AIでの制作・開発を実践し、過程を記事にしています。
AIで勤怠管理アプリを作成する方法｜Figma Make活用
飲食店の勤怠管理アプリをFigma MakeとAIで作った実録。
バイブコーディングAIバイブコーディング×Webflowでできること
コードを書かずAIへの指示で開発する手法の徹底解説。
Webflow AIWebflow App Genを試してみた
プロンプト一つでバックエンド込みのWebアプリを構築。
MCPWebflow MCPとは？AIがサイトを管理する時代
AIがWebflowを直接操作する仕組みと実用例。
自社アプリApp Storeで公開中の自社アプリ3本
瞑想・刀剣・読書。AI開発でストア公開まで。
用語集Web制作・AI用語集
バイブコーディング・MCP・LLMOなど41語を1文で。
同じ進め方で、御社のサイトを作れます。
このサイトと同じAI制作フローを、そのまま提供するのがAIサイト制作（¥500,000〜・モニター¥350,000）です。「AIでどこまでできるのか」は、このサイト自体が答えです。じっくり作り込みたい場合は通常のサイト制作へ。