この記事で分かること

  • 約2週間でコーポレートサイトを本番公開した開発ストーリー
  • AIエージェントを「パートナー」として活用する開発フロー
  • Docker + Tailwind CSS + Makefile による技術スタック
  • .agentディレクトリによるAI-Nativeな開発環境
  • 従来のWeb制作チームとの工数比較

ちなみにこの記事、かなり丸裸にしています。

技術スタック、ディレクトリ構成、デプロイ手順まで全部公開。「そこまで見せる？」と思われるかもしれませんが、同じことをやりたい人の参考になればという気持ちで書いています。

目次

Part 0: 開発ストーリー ― 約2週間で本番公開

前回の記事「AIでWebデザイナーの仕事がなくなる不安を解消する方法で、「AIでデザイナー・コーダーの仕事は消えるのか？」という問いに向き合いました。

AIでWebデザイナーの仕事がなくなる不安を解消する方法

その答えを身をもって確かめるため、代表である私自身がAIを使って自社サイトを全て作ることにしました。

タイムライン（Git履歴より抜粋）

期間やったこと代表的なコミット
Week 1 (1/7〜)環境構築・基盤ページ制作Docker環境構築、トップページ、開発支援・SES・セキュリティページ、メガメニュー実装
Week 2 (1/13〜)サービスページ拡充IT支援・Ansible LP、採用ページ刷新、会社概要ブラッシュアップ
Week 3 (1/19〜)🚀 本番反映 + SEO/UX最適化H1/Title/Descriptionの策定、英語→日本語化、ヒーローカルーセル改修、フォーム改善
Week 4 (1/23〜)パフォーマンス最適化PageSpeed対応、画像のWebP化、LCP最適化、レスポンシブ修正
Week 5 (1/28〜)コンテンツ強化FAQ追加、CRO改善、インサイトカテゴリ追加、ブログ目次機能
Week 6 (2/3〜)仕上げ・遊び心フクロウ迷路ゲーム追加、カスタムブロック

ポイント: Week 3で本番反映後は、ローカル開発 → make deploy（後述します） → 本番反映の高速サイクルを回し、継続的に改善しました。

このペースを可能にした要因

  1. AIがコードを書く: ページ追加やスタイル変更は「依頼→レビュー」のサイクル
  2. デプロイが1コマンド: make deploy で本番反映が完結
  3. 本番同期も1コマンド: make prod-sync でローカルを常に最新に維持
  4. 品質がスキルで担保: SEO・UX・デザインの専門知がAIに組み込み済み

Part 1: 技術スタックと設計思想

ここからは少しテクニカルな話になります。興味ない方は飛ばしてOKです（笑）。

なぜこの環境を作ったのか

従来のWeb制作では、環境構築・コード生成・デプロイに数日〜数週間かかることもありました。

AIエージェントとの協調開発により、これが数時間〜1日で完了します。

  • 環境構築の自動化: Docker環境をAIが生成 → make up で即座に開発開始
  • コード生成のAI化: ページ追加やスタイル変更をAIに依頼 → 人間はレビューのみ
  • デプロイの標準化: make deploy で本番反映が完結 → 手作業ゼロ

重要なのは、AIを「道具」ではなく「パートナー」として定義するという考え方です。

技術スタック：モダンなWordPress開発

今回使用した技術スタックをご紹介します。正直、ここまで公開するのはちょっと恥ずかしいのですが…参考になれば幸いです。

Docker環境（ローカル開発の心臓部）

docker-compose.yml と Dockerfile をAIが生成。MariaDB + WordPress + WP-CLI の環境が自動構築されます。

# docker-compose.yml の概要
services:
  wordpress:
    build: .
    ports:
      - "8080:80"
    volumes:
      - ./wp-content/themes/owlcamp:/var/www/html/wp-content/themes/owlcamp
  db:
    image: mariadb:10.6
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
# Dockerfile の概要
FROM wordpress:php8.2-apache

# PHP設定・拡張のインストール
RUN apt-get update && apt-get install -y libmagickwand-dev --no-install-recommends \
    && pecl install imagick && docker-php-ext-enable imagick

# WP-CLI のインストール
RUN curl -s -o /usr/local/bin/wp https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar \
    && chmod +x /usr/local/bin/wp

Tailwind CSS × Neo-Brutalism

デザインシステムとして採用したのは、太いボーダー、ハードシャドウ、高彩度カラーによるNeo-Brutalismスタイル。

今回のサイト制作で意識したのは、「全ページをLPに」という考え方。どのページに来ても、そのページだけでサービスの魅力が伝わり、お問い合わせにつながる——そんなサイトを目指しました。Neo-Brutalismの強いビジュアルは、まさにそのコンセプトにマッチしています。

Makefile：オペレーションの標準化

前述の通り、docker-compose up -d を毎回打つのは面倒です。そこでMakefileを作成し、よく使うコマンドをシンプルにまとめました。

コマンド機能
make upDocker環境を起動
make downDocker環境を停止
make deploy本番環境にデプロイ
make prod-sync本番データをローカルに同期
make theme-buildTailwind CSSをビルド
make theme-watchCSSを常時監視（開発中）

ここが結果的に高速デプロイの肝となりました。このMakefile自体もAIに「よく使うコマンドをまとめて」と依頼して作成しました。環境構築、デプロイ、同期——すべてのオペレーションをAIが標準化してくれるので、私は「何を作るか」に集中できました。

AI-Nativeな開発フロー：.agent ディレクトリの役割

ここからは、AIエージェントに「専門知」を注入する仕組みについてお話しします。

今回使用したのは、Google DeepMindが開発した次世代AIエージェント、Antigravityです。このエージェントは .agent ディレクトリを読み込むことで、そこに置いたスキルやワークフローを「自らの能力」として活用できるのが最大の特徴です。

.agent/
├── skills/           # 専門知
│   ├── seo-content-writing/
│   ├── frontend-design/
│   └── ux-psychology/
├── workflows/        # 手順書
│   ├── deploy.md
│   └── prod-sync.md
└── artifacts/        # 成果物管理
    ├── task.md
    └── implementation_plan.md

Skills（スキル）

SEO評価、フロントエンドデザイン、UX心理学など、「この領域の専門家ならこう考える」という知見をAIに渡します。

例えば、seo-content-writing/SKILL.md には以下のような内容が含まれています：

  • ターゲットキーワードの分析方法
  • PREP法に基づく記事構成
  • アウルキャンプ固有のトーン＆マナー

Workflows（ワークフロー）

make deploy や make prod-sync の手順を、ドキュメント兼実行可能スクリプトとして定義。

AIに「デプロイして」と伝えると、ワークフローを参照して正しい手順で実行してくれます。

Artifacts（成果物）

task.md で進捗を管理し、implementation_plan.md で実装計画を共有。

人間とAIの間で透明性の高いプロセスを実現しています。

サイト構成：固定ページ vs 投稿ページ

固定ページ（13ページ）: 各ページ専用のPHPテンプレートで構築

カテゴリページ
サービスIT支援、開発支援、UI/UXデザイン、WordPress保守、DX/AI、AppSheet、Ansible
コーポレート会社概要、採用、お問い合わせ、サンクスページ
コンテンツトピックス一覧、サービス一覧

投稿ページ（ブログ/インサイト）: single.php + 装飾機能

  • 目次機能: toc ショートコードで自動生成（アウトライン番号付き）
  • 注釈・補足ブロック: Gutenbergカスタムブロック（icon-box等）
  • 読了時間表示: 文字数から自動計算

（※まさに今お読みいただいているこの記事でも、これらの機能をフル活用しています！）

なぜプラグインを使わなかったのか？

目次や読了時間、こういった機能はプラグインでも実現できます。でも、あえて自前で実装しました。理由はセキュリティです。WordPressの脆弱性は9割がプラグイン起因と言われています。自分（といってもAIですが）でメンテできないものを極力排除したかったのです。

Part 2: 実践シナリオで追体験する開発フロー

ここでは、実際の開発シナリオを追体験してみましょう。「へー、こうやって開発してるんだ」くらいの気持ちで読んでいただければ。

シナリオ1: 開発開始 — ローカル環境を作成する

状況: プロジェクト開始時、ローカル環境をゼロから構築する

最初はDockerで環境を構築しました。

docker-compose up -d

WordPressとMySQLが立ち上がり、http://localhost:8080 でアクセス可能に。

ただ、毎回 docker-compose up -d と打つのは面倒。そこでMakefileを作成し、make up で済むように効率化しました（してくれました）。こうした「繰り返す作業はすぐに自動化する」のが、AI協調開発のコツです。

Makefileの作成もAIに依頼。「docker-compose upを簡単に実行できるようにして」と伝えるだけで、make up / make down などのコマンドが整備されました。

シナリオ2: 開発中 — AIエージェントに依頼する

状況: 「新しいサービスページを作って」とAIに依頼

  1. 依頼: 自然言語で「AppSheetのサービスページを作って」と指示
  2. AIの動作: .agent/skills/ を参照し、PHPテンプレート・CSS・画像を生成。task.md で進捗を共有
  3. 人間の役割: 生成された計画や成果物をレビューし、修正を指示

この「依頼 → 生成 → レビュー → 修正」のサイクルが非常に高速に回ります。

シナリオ3: デザイン反映 — 修正したコードをビルドする

状況: AIにデザインの修正を依頼（PHP/CSSを編集）した後、その変更を反映させたい時

AIに「ビルドして」や「スタイルを反映させて」と一言伝えるだけ。

AIが .agent/workflows/ の手順を確認し、make theme-build など適切なビルドコマンドを自動で判断して実行します。人間がビルド環境の設定やコマンド名を記憶しておく必要はありません。

何が起きるか: Tailwindが使用中のクラスだけを抽出し、軽量な main.css を生成。

シナリオ4: リリース — 本番環境にデプロイする

状況: 開発が完了したので、本番サーバーに反映したい

AIに「本番にデプロイして」と一言伝えるだけ。

AIが .agent/workflows/deploy.md を読み込み、必要な手順（ビルド、転送、権限設定）を自動で判断して make deploy を実行します。人間は「よし、やって」と承認ボタンを押すだけ。

何が起きるか:

  1. CSSビルド（npm run build）
  2. rsyncで本番サーバーに転送
  3. パーミッション修正

煩雑なサーバー操作から解放され、ミスのない確実なリリースが可能です。

シナリオ5: バックポート — 本番データをローカルに同期

状況: 本番で追加された記事や画像をローカルに反映して、同じ状態で開発を続けたい

これもAIに「本番のデータをローカルに持ってきて」と依頼します。

何が起きるか:

  1. 本番DBダンプ（mysqldump）
  2. ローカルDBにインポート
  3. URL自動置換（search-replace）
  4. uploads/ と plugins/ を同期

これらの複雑な手順をAIが代行。人間はDB操作やURLの置換ミスを心配する必要はありません。

「本番環境と乖離しない」開発を維持できます。「ローカルでは動いたのに…」という問題を防げます。

Part 3: 品質と体験へのこだわり

「速いけど雑」じゃ意味がないですよね。高速開発だけでなく、品質にもこだわりました。

アクセシビリティへの取り組み

ACCESSIBILITY_GUIDE.md でWCAG 2.2準拠を目標に設定しています。

AIに「アクセシビリティを考慮して」と指示すると、ガイドラインを参照してコードを生成してくれます。もちろん、一発で完璧とはいきません。生成されたコードをレビューし、違っていたら修正を指示する——このサイクルを回していきます。

「完璧にしてからリリース」ではなく、「リリースしてから継続的に改善」というスタンスです。アクセシビリティも一度で終わりではなく、ユーザーからのフィードバックや新しい基準に合わせて改善し続けていくものだと考えています。

カスタムブロック開発（Gutenberg対応）

blocks/src/icon-box/ など、など、WordPressのデフォルトでは備わっていない機能をAIがカスタムブロックとして生成。

これにより、管理画面に「自分たち専用のパーツ」が追加され、専門知識がなくても直感的にリッチなコンテンツを編集できるようになりました。私自身、クライアントの立場で触ってみて「あ、これが欲しかった」という体験が形になる速さを実感しています。

遊び心の実装

サイトのどこかにフクロウ迷路ゲームをこっそり入れました。これは完全に遊びです（笑）。

ちょっとした隠し要素というか、思わぬところで出会えたらクスッとしてもらえるかなと。

UX心理学スキルの活用

.agent/skills/ux-psychology/SKILL.md に心理学的知見を集約。AIがこれを参照し、コンバージョン率向上を意識した提案を行います。

まとめ：AIとの共創がもたらす未来

さて、ここまでかなり詳しく（というか丸裸に）お話ししてきました。最後に、この経験から見えてきたことをまとめます。

従来のWeb制作チーム vs AI協調開発

役割従来AI協調開発
ディレクター人間人間（あなた）
デザイナー人間AI（スキル: frontend-design）
エンジニア人間AI（コード生成・環境構築）
SEO担当人間AI（スキル: seo-evaluation）
ライター人間AI（ブログ・コンテンツ執筆）
UXコンサルタント人間AI（スキル: ux-psychology)
インフラ担当人間AI（Docker/デプロイ自動化）
  • 人間の役割は「ディレクター」に集約: 何を作るか決め、AIの成果物をレビューし、最終判断を下す
  • AIが担当: デザイン、コーディング、SEO最適化、環境構築、デプロイ
  • 結果: 1人で複数職種分のアウトプットを高速に実現

AIを使いこなすことで、デザイナーやコーダーはデザインエンジニアへと進化できます。デザインもコードも理解し、AIと協調してプロダクトを形にする——そんな新しい働き方がすでに始まっています。

工数比較：従来の開発だったらどれくらいかかる？

今回は自社サイト制作のため、以下の有利な条件が揃っていました：

  • ディレクター ＝ クライアント: 意思決定者が開発者本人のため、打ち合わせ・承認待ちがゼロ
  • Figmaでのデザインデータ作成なし: AIがコードベースで直接デザインを提案 → 即レビュー → 即修正
  • 要件定義の省略: 「何を作るか」が最初から明確

受託開発ではクライアントとのコミュニケーションコストが加わるため、純粋な比較ではありません。

このプロジェクトの規模:

  • コーポレートサイト（13ページ以上）
  • カスタムテーマ開発（Tailwind CSS + Neo-Brutalism）
  • Docker環境構築 + 本番デプロイ自動化
  • SEO最適化 + パフォーマンス最適化（PageSpeed対応）
  • ブログ機能 + 目次機能
  • カスタムブロック（Gutenberg対応）
  • お問い合わせフォーム + ゲーム
フェーズ従来の開発（受託）AI協調開発（自社）
要件定義・打ち合わせ2〜4週間なし（自分が決める）
デザイン（Figma等）2〜4週間なし（AIがコードで提案）
コーディング4〜8週間AIが即時生成（レビュー込みで1〜2週間）
テスト・修正2〜4週間並行して実施（追加工数ほぼゼロ）
合計10〜20週間（2.5〜5ヶ月）約1ヶ月

間短縮率: 約60〜80%（ただし自社サイト制作の有利な条件込み）

この「AI開発」をサービスとして提供するまで

この「AIとの共創」で得た知見を、当社のWebサイト制作サービスとしてご提供しています。

  • スピード：従来の半分以下の期間
  • 濃厚さ：削減した時間を対話に投資
  • 品質：SEO・アクセシビリティ・UXを組み込み済み

「具体的にどんなフローで進めるの？」「費用感は？」といった詳細は以下に公開しています。

SEOもデザインも妥協しない｜AI活用の濃厚なWeb制作

ぜひあわせてご覧ください！

関連記事

このシリーズの他の記事もあわせてご覧ください：

AIでWebデザイナーの仕事がなくなる不安を解消する方法