11年運用してきた自社サイト（coqoon.net）のリニューアルを、AIエージェントのClaude Code+Codexと二人三脚（三人四脚？）で進め、着手から約1か月で公開しました。着手前の見積もりは17週でしたが、「調べる」「コードを書く」「確認する」といった手を動かす作業はほぼAIに任せ、人間（私）に残ったのは、何を残すかの判断、外部サービスの管理画面の操作、「なんか違う」という違和感への対応の3つでした。
筆者はエンジニア出身で、EC支援の事業「Coqoon」を個人事業として11年続けています。当連載では、AIエージェントを使ってひとりで事業を回す様子を、作る過程・つまずいたこと・道具の評価まで含めて記録していきたいと思います。完成したサイトはCoqoonの側に載っています。ここに書くのは、その裏側です。第1回は、2026年7月から8月にかけて行ったcoqoon.netのリニューアルです。
この記事の要点
| 問い | 答え |
|---|---|
| かかった期間は？ | 着手から公開まで約1か月（2026年7月7日〜8月5日）。着手前の見積もりは週5時間で17週 |
| AIに任せられたことは？ | 現状の棚卸し、コードの実装、ブログ記事の移行、公開前の確認（表示・リンク切れ・表示速度） |
| 人間が必要だったことは？ | 何を残すかの判断、DNSや外部サービスの管理画面の操作、見た目の違和感の実測 |
| つまずいたことは？ | データベースの反映漏れ、見た目の差の原因調査、認証情報の複製、URLの置き換え漏れ、記録漏れの5つ |
何を作り直したのか
作り直したのは、2015年から独自のテーマで運用してきたcoqoon.netです。テーマ・サーバー・デザインの3つを同時に入れ替えました。
coqoon.netは、EC支援やGoogle Workspaceの導入支援をしている私の事業「Coqoon」のサイトです。2015年から、独自に作ったWordPressテーマで運用してきました。
長く運用するうちに、次のような問題が溜まっていました。
- テーマが独自のため、直すたびにテーマのコードを読み直す必要がある
- 固定ページの本文に、HTMLやスタイルが直接書き込まれている
- セキュリティ系のプラグインが4つ重複して動いている
- サイトのタイトルが「EC専門クラウドソーシング」のまま、今の事業内容とずれている
そこで、次の3つをまとめて行うことにしました。
| 項目 | 変更前 | 変更後 |
|---|---|---|
| テーマ | 独自テーマ | Cocoon（無料テーマ）の子テーマ |
| サーバー | ロリポップ | XServer（以前から別件対応で使用していたのでロリポップから集約させる形にしました） |
| デザイン | 2015年当時のもの | 新しいデザイン案（画像1枚）をもとに作り直し |
移行の対象は、固定ページが約20件、ブログ記事が55件です。
体制と期間
体制は、私と2つのAIエージェント（Claude CodeとCodex）です。期間は着手から公開まで約1か月でした。Claude CodeはAnthropic社の、CodexはOpenAI社のAIエージェントで、どちらもターミナルで動き、ファイルの編集やコマンドの実行まで自分で行います。
2つのエージェントには役割を分けています。普段の実装と作業の取りまとめはClaude Codeが受け持ち、重めの作業や、Claude Codeが同じ問題で行き詰まったときはCodexの上位モデルに任せるという形を取りました。Codexへの依頼もClaude Codeから出すため、Claude Codeが「指示役」、Codexが「作業者」という関係です。
着手前の見積もりは「週5時間で約17週」でした。実際には、2026年7月7日に着手し、8月5日にDNS（ドメインとサーバーを結びつける設定）を切り替えて新しいサイトを公開しています。見積もりの約4分の1の期間です。
作業はフェーズ0〜10に分けて進めました。
| フェーズ | 内容 | 主に動いたのは |
|---|---|---|
| 0 | 現状の棚卸し | AI |
| 1 | 検証環境（公開前に動作を確かめるための別サイト）とローカル環境の構築 | AI＋私（DNS・サーバーの管理画面） |
| 2〜4 | テーマの導入、トップページ、下層ページの実装 | AI（デザインの判断は私） |
| 5 | ブログ記事の移行 | AI |
| 6 | 問い合わせフォーム | AI |
| 7 | SEO・リダイレクトの設計 | AI（何を残すかの判断は私） |
| 8 | 検証・品質確認 | AI |
| 9 | 本番への切り替え | AI＋私（DNS・外部サービスの管理画面） |
| 10 | 公開後の確認 | AI＋私 |
作業の記録は、AIがその都度Obsidian（メモアプリ）に書き残しました。この記事も、その記録をもとに書いています。
AIに任せてうまくいったこと
AIに任せてうまくいったのは、現状の棚卸し、デザインの数値化、公開前の確認の3つです。
1. 現状の棚卸しを、公開されている情報だけで済ませた
最初に、旧サイトの「何があるか」を洗い出しました。AIは、サイトマップ（ページの一覧）と、公開されているHTMLを読むだけで、次のものを一覧にしました。
- 固定ページ19件、ブログ記事の一覧
- 使っているテーマと、外から見えるプラグイン
- 計測タグの設置状況
- タイトルが今の事業内容とずれていること
管理画面を見ないと分からないもの（有効なプラグインの全一覧など）だけは、私が画面を撮ってAIに渡しました。この時点で、27個のプラグインのうちどれを新しいサイトでも使い、どれをCocoonの標準機能で置き換えるかまで整理できています。
2. デザイン画像の色を「見た目」ではなく実測で取った
新しいデザインはFigmaなどのファイルではなく、ChatGPTに作成してもらった1枚の画像でした。Claudeに画像の画素を直接読み取ってもらい、色を実測でコードに起こしています。目で見て「だいたいこの色」と決めるのではなく、画素の値から9色を取り出しました。
ただし、限界もありました。人間が作業すればなんてことないような作業であっても、微細なデザイン感覚が求められるような修正（オブジェクト同士の配置、フォントの名前、アイコンの線画、一部の色の修正）などはモデルによっては対処できず、私が目で見て言語化し、より上位のモデルに依頼するという対応を行いました。
3. 確認作業を機械にやらせた
公開前の確認は、人がやると最も時間がかかる部分です。ここはほぼAIに任せました。
- 表示確認: 固定ページ21件・ブログ記事61件を、PC・スマホ・タブレットの3つの画面幅で自動で巡回し、横スクロールの発生・画像切れ・エラーを検出
- リンク切れ: 内部リンク176件・外部リンク186件を実際に開いて確認。外部リンクの「エラー」21件のうち19件は、相手サイトのボット対策による誤検知だった。本当に消えていたのは2件
- 表示速度: Lighthouse（Googleの計測ツール）で計測し、原因を特定してから対処。トップページ（スマホ）のスコアは66から75に改善
人が見るのは、AIが「おかしい」と判定したものだけで済みました。
つまずいたこと
つまずいたのは5つの場面で、多くは「AIが確認の対象にしていなかった範囲」で起きました。うまくいった話だけでは記録にならないので、順に書いておきます。
1. 「コードは管理できても、データベースは管理できていない」
テーマのコードはGitで管理し、コマンド1つで検証環境に反映できるようにしていました。ところが、メニューの構成やページの中身はデータベースに入っているため、この仕組みでは反映されません。
その結果、「ローカルではメニューが開くのに、検証環境では開かない」「ローカルにしか無いページが3つあった」という問題が起きました。AIは、ローカルと同じ操作を検証環境のデータベースに対してもコマンドで実行して、そろえ直しています。
学び: AIはコードの変更には強い一方で、「どこまでが管理対象か」を自分では意識しにくい。ローカルと検証環境と本番の3つを持つ場合は、何をどの手段でそろえるかを最初に決めておく。
2. 「完全に一致している」のに見た目が違う
「PCで見ると、余白が2.5倍くらい違う」と私が指摘したとき、AIはまずコードと設定を比べました。CSS・テーマのファイル・設定値をすべて比べて、結果は「完全に一致」でした。
しかし、実際には「それでも見た目は違う」というケースがありました。最後は、私がブラウザの開発者ツールで実際の幅を測って、AIに画面を見せました。原因は、ローカルと検証環境でサイトのタイトル（文字数）が違い、それに押されてメニューの幅が変わっていたことでした。
学び: AIはファイルを比べることは得意だが、「実際に画面でどう見えているか」を見落とすことがある。比べても差が出ないときは、早めに人が画面で実測した方が速い。
3. 丸ごと複製したら、認証情報まで複製されていた
本番サイトは、検証環境をまるごと複製して作りました。プラグインの細かい設定を本番でやり直すと、手間もミスも増えるためです。
ところが、複製したことで、ログインに使う情報まで検証環境と同じになっていました。これはAIではなく私が気づき、本番側だけ作り直しています。
AIのチェックリストに、この項目はありませんでした。「何を複製したか」は確認していても、「複製してはいけないものまで複製していないか」という視点が抜けていました。
学び: 複製・移行の作業では、「持っていきたいもの」と並べて「持っていってはいけないもの」の一覧も作る。ここは人が考えた方がよい。
4. 同じログイン画面が何度も出てくる
公開した翌日、管理画面に入ろうとすると、認証の画面が何度も出てくるようになりました。
原因は、SSL（https）を有効にした後も、サイトのURLの設定がhttp://のままだったことです。WordPressが作るリンクの一部がhttp://を指し、ブラウザがそれを別のサイトとして扱っていました。データベース内のhttp://をhttps://に置き換えると、上記のエラーは直りました。
本番の切り替えの手順書には「SSLの発行後にURLを置き換える」と書いてありました。手順書にあったのに、実際の作業ではこの手順が抜けていました。
5. 決めたことを記録し忘れて、もう一度調べ直した
ログイン保護にどのプラグインを使うか、ある日の作業で結論を出していました。ところが、その結論をObsidianに書き残し忘れていたため、後日あらためて実機で確認し直すことになりました。
AIは、会話が終わるとその内容を覚えていません。次の作業に引き継げるのは、ファイルに書いて残したものだけです（最近はスレッドを跨いだ記憶も比較的強化されている印象がありますが）。
学び: AIと作業するときの記録は、自分のためのメモであると同時に、次の作業でAIに渡す引き継ぎ書になる。
分担してわかったこと
分担は、手を動かす作業はAI、判断と違和感は人間、という形に落ち着きました。
| AIが速かったこと | 私が必要だったこと |
|---|---|
| 調べる（棚卸し・原因の切り分け） | 何を残し、何を捨てるかの判断 |
| 試す（コードを書く、設定を変える） | DNS・外部サービスの管理画面の操作 |
| 確かめる（巡回・リンク確認・速度計測） | 「なんか違う」という違和感と、画面での実測 |
| 記録する | 記録の抜けに気づくこと |
ひと言でいえば、手を動かす部分はほぼAIに任せられ、私に残ったのは判断と違和感の部分でした。17週の見積もりが約1か月で終わったのは、AIの作業が速かったからだけではありません。私が「判断」だけに集中できたことが大きかったと感じています。
完成したサイトはcoqoon.netで見られます。リニューアルの告知はこちらのお知らせに書いています。
次回
サイトは無事公開できましたが、リニューアル時点では、LLMOなどのAI時代のSEO観点も考慮したサイト構成には全くできていなかったため、次のフェーズとしてサイト構成の見直しを行うことにしました。現在はリニューアル前に存在していた55本のブログ記事を検索の実績で仕分けし、統合・非公開・リダイレクトをClaude Code+Codexと進めている状況です。次回は、その棚卸しの記録を書きます。
