このサイト（アイビーデザイン合同会社／I BE DESIGN LLC.のコーポレートサイト）は、AIとの「バイブコーディング」、WordPressのローカル環境での構築、そして本番環境へのクローン、という3点セットで制作されました。担当者は1名、AIの利用料は約2万円、工期はおよそ20日。通常であれば工期4か月・予算100万円規模で動くWeb制作プロジェクトを、ほぼ9割の作業をAIに任せながら仕上げた、ひとつのケーススタディです。
本記事では、その制作プロセスのリアルと、実際にAIでサイトを作ってみて見えてきた「メリット」と「無視できないリスク」、そしてアイビーデザインがAI時代のWeb制作にどう向き合っているかを、率直にお伝えします。
前提条件：ノンデザイナー・ノンエンジニアと呼ばれるカテゴリーの人間が対応
もうこの言葉も、もはや死語になると思うのですが。強烈な差別用語がこの業界には存在していました。
ディレクターも立派なデザイナーであり、エンジニアなのに、ノンデザイナー・ノンエンジニアと呼ばれてしまう。
でも私の頭の中には常にWebサイトのイメージが明確にありましたし、自分で作れるものなら最後まで作ってみたかった。この長年の夢が叶う時がきたのです。これは激アツ。やるっきゃない。ということで眠ることも忘れる勢いで、20日間のバイブコーディングを続けました。
そもそもAIとの「バイブコーディング」とは
「バイブコーディング（Vibe Coding）」とは、AIに自然言語で意図を伝えながら、対話的にコードを生成・修正していく開発スタイルのことです。仕様書を細かく書き起こすのではなく、「こんな雰囲気のページにしたい」「この余白をもう少し詰めて」「スマホ表示で崩れているから直して」といった、人間にとって自然な指示を重ねていきながら成果物に近づけていきます。
開発者がコードを1行ずつ手書きする代わりに、AIにブロック単位・コンポーネント単位でまとめて生成させ、人間は仕上がりを「見て・触って・指示する」役割に回ります。アイビーデザインのこのコーポレートサイトも、HTML / CSS / JavaScript / PHP（WordPressテーマ）すべてのコードを、AIとの対話で組み立てました。
制作のしくみ — WordPressローカル環境＋本番クローンという構成
WordPressローカル環境とは
WordPressには、PCの中に擬似的なサーバーを立ち上げて、本番サイトと同じ環境を手元で動かせる「ローカル環境」というものがあります。代表的なツールに Local by Flywheel（LocalWP） などがあり、本番サーバーにアップロードしなくても、テーマやプラグインの動作確認、デザインの微調整を自分のPC内で完結できる仕組みです。
修正のたびに本番サーバーへ反映する必要がないため、AIに「ここを変えて」と指示しながらリアルタイムで結果を見て、ダメならすぐに直す、という高速な試行錯誤が可能になります。これがAIバイブコーディングと非常に相性が良い理由です。
本番環境へのクローン
ローカル環境で完成度を高めたサイトを、最後にまとめて本番サーバーへ「クローン（複製）」して公開します。データベース、テーマ、メディアファイルをまとめて移行することで、ローカルで確認した通りの状態を本番に再現します。本記事執筆時点のアイビーデザインのサイトも、この手順で公開されています。
通常4か月・100万円の制作を、20日・2万円で仕上げた
アイビーデザインの新規コーポレートサイト（複数ページ＋ブログ＋お知らせ＋WordPressテーマ実装）は、一般的なWeb制作会社に依頼すれば、工期約4か月・制作費100万円規模になるボリュームです。今回はこれを、次の条件で仕上げました。
- 担当者：1名
- 工期：約20日
- AIサービス利用料：約2万円
- 作業のうちAIが対応した割合：およそ9割
残りの1割は、デザインの方針決定、コピーの最終チェック、構造設計の判断、トーン＆マナーの調整など、「人間が責任を持って意思決定すべき部分」に集中させました。これは単なるコスト削減の話ではなく、人間が時間を使うべき領域を再定義した結果でもあります。
AI制作で痛感した「設計が命」という現実
実際にAIでフルサイトを組んでみて、最も強く感じたのは、「設計（特にスタイルガイド）が固まっていないままAIに走らせると、後戻りができないエラーを抱えたままサイトが完成してしまう」という事実です。
AIは指示の通りに、しかも非常に高速にコードを生成します。だからこそ、設計の曖昧さ、表記ゆれ、命名規則の不徹底、レイアウト思想のブレといったものが、そのまま全ページに増殖していきます。気づいた頃には「ここを直すと別のページが崩れる」「全体のトーンを揃えるには全コンポーネントを書き直すしかない」という状態に陥り、新規で作るよりも圧倒的にコストがかかる修正案件として残ってしまうのです。
それでも、AIでサイトを作ってみる価値はある
一方で、AIでサイトを作ってみる試み自体は、非常に有益だと感じています。理由はシンプルで、AI制作のプロセスを自分で経験することで、Web制作のどこに「効率化できる工程」があり、どこに「人間の思想や判断が不可欠なポイント」があるかを、肌感覚で切り分けられるようになるからです。
「ボタンの状態管理を全部AIに書かせたら、これは早いな」「でも、トップページのキービジュアルの方向性決めは、人間がコンセプトから組み立てないとAIは外す」——こうした切り分けは、本を読むよりも、実際に1本サイトを作ってみることでしか得られない学びです。
アイビーデザインがこのサイトを「あえてAIで」作った理由のひとつは、ここにあります。お客様の制作支援の現場で、納得感を持って「ここはAI、ここは人」と提案するためには、自社で実装まで一通りやっておく必要がある、というのが正直なところです。
アイビーデザインが提供できること — AI制作物の修正・リニューアル相談
アイビーデザインでは、「AIで一旦サイトを作ったが、運用に乗せるには課題が多すぎる」「触れない・直せないコードが残っていて困っている」といった、AI制作サイトのリニューアル・修正に関するご相談も承っています。
正直にお伝えすると、AIで一気に組み上がったサイトの細かな調整は、修正できないケースがほとんどだと思ってください。これはAI直生成の最大のリスクであり、無理に部分修正を重ねるよりも、設計から組み直したほうが結果的に早く・安く・安全になることも少なくありません。
アイビーデザインでは、ケースに応じて次のような形でご支援します。
- AIで作られた現サイトの設計診断（直せる箇所／組み直しが必要な箇所の切り分け）
- 正しいスタイルガイドの制作ステップの設計
- 社内で内製チームを立ち上げる際のナレッジ共有・ドキュメント整備
- AI活用を前提にしたWeb制作フローの提案・伴走
「AIで作ってはみたものの、このまま走るのが怖い」「次のリニューアルではAIを正しく使いこなしたい」というフェーズの企業様にこそ、アイビーデザインはお力になれると考えています。
ご相談・お問い合わせ
AI時代のWeb制作は、コストも工期も大きく変えていける一方で、「設計を握れているかどうか」で結果が180度変わる領域です。アイビーデザイン合同会社（I BE DESIGN LLC.）では、AIとのバイブコーディングを実装レベルまで経験した立場から、貴社の状況に合わせた現実的なご提案をさせていただきます。
お問い合わせは お問い合わせフォーム よりお気軽にどうぞ。