Web制作 おくだ屋

WEB制作 おくだ屋

//この中に次から作るsvgデータを入れていく
ホーム > ホームページ制作 > AIで作ったコード、外注で整理してもらう時の注意点【制作会社向け】
ホームページ制作

AIで作ったコード、外注で整理してもらう時の注意点【制作会社向け】

「AIで一気に作ったサイト、納品前にちょっと整理してほしいんだけど…」

2026年現在、v0・Lovable・Cursor等で生成したコードをそのまま納品するのは不安、という制作会社・ディレクターは増えています。動くけど、保守できない。読みづらい。命名がバラバラ。

今回はAIが書いたコードを外注に整理してもらう時の発注のコツを、現場視点でまとめました。

AIサイト生成ツール自体の現状はv0・Lovable比較記事もあわせてどうぞ。

結論:「どこまで整理するか」を最初に決める

AIコード整理の依頼で最もありがちな失敗は、「とりあえずキレイにして」と丸投げすること。整理レベルを3段階くらいに分けて発注するのが効率的です。

レベル 整理内容 費用感
① 軽め 命名規則統一・不要コード削除 30,000円〜
② 標準 CSS設計適用・ファイル分割・コメント追加 80,000円〜
③ がっつり 大規模リファクタ・運用フェーズ想定の構造改革 200,000円〜

AIコードのありがちな問題点

① 命名がバラバラ

同じ「カードコンポーネント」でも、ある場所では.card、別の場所では.Card、さらに別では.item-boxと命名されているケース。

② インラインスタイルとクラスの混在

AIはstyle="..."を多用します。後から共通修正したいときに、HTMLを1つずつ書き換える必要が出てきます。

③ 冗長な重複

同じCSSが3か所に書かれている、同じJS関数が複数ファイルにある、というケースが頻発します。

④ 「動く」けど「直せない」

動作はしているけど、どこを触ったら壊れるか予測がつかない。これが最も厄介です。

発注時に伝えるべき情報

外注コーダーへ整理を依頼するときは、こう伝えましょう。

項目
整理レベル 「②標準」
納品形式 「Gitリポジトリで管理したい」
採用するCSS設計 「BEMで統一」
変えてほしくないこと 「画面の見た目は1pxも変えない」
運用想定 「ディレクター(非エンジニア)が更新する」

「外注に整理してもらう価値」が高いケース

  • 納品後にクライアントが自社で更新する
  • 制作会社の保守チームに引き渡す予定
  • WordPress化を後から実装する
  • SEO対策で構造化マークアップを入れる

これらに該当する場合、整理せずに納品すると「後から自分たちが苦しむ」ことになります。

整理依頼で起きがちな失敗

① 「キレイにしてって言ったのに、見た目が変わった」

「キレイ」の定義が、依頼者と外注者で違うことが原因。「見た目はピクセル単位で変えないでください」と明示しましょう。

② 「整理した結果、サイトが壊れた」

軽率なリファクタは挙動を変えてしまいます。テスト環境でテストしてから本番反映を必須にしましょう。

③ 「整理費用が想定より高くなった」

初回見積もりは「中身を見ないと出せない」ことが多いです。調査フェーズと実装フェーズを分けて発注すると、予算管理しやすくなります。

AIコード整理 × WordPress化の組み合わせ

AIで作った静的サイトを、後からWordPress化するのは結構大変です。ChatGPT・Claudeでの原稿作成記事でも触れたように、AIは部分最適は得意ですが全体構造を整える設計は苦手。

WordPress化前提なら、整理段階で「カスタム投稿として切り出すべき箇所」を洗い出してもらうのがおすすめです。

まとめ

AIコードの整理依頼は、「レベルを決める」「運用想定を伝える」「見た目を変えないこと明示」の3点で失敗を激減できます。

おくだ屋では、AIコードの整理・WordPress化・リファクタリングも対応しています。制作会社・ディレクター様向けのサービスから詳細をご覧ください。