---
title: AIが書いたコードを自社サイトに入れると崩れる。その本当の理由と、崩れない仕組みの作り方。
description: AIが生成したコードが自社サイトで崩れる理由と、それを防ぐための効果的な方法を解説します。内製化の重要性にも触れています。
---

[Fubuki Journal ](https://www.fubuki.com/blog)

# [AIが書いたコードを自社サイトに入れると崩れる。その本当の理由と、崩れない仕組みの作り方。](https://www.fubuki.com/blog/20260406)

 作成者: [EIJI KAKUGAWA](https://www.fubuki.com/blog/author/eiji-kakugawa)｜Apr 5, 2026 10:00:00 PM

 

# AIが書いたコードを自社サイトに入れると崩れる。その本当の理由と、崩れない仕組みの作り方。

こんにちは。『かくさん』こと、株式会社フブキ代表の角川英治です。

ClaudeやCursorでコードを生成して、自社サイトに貼り付けたら見た目が崩れた。この経験をした担当者が、2025年後半から急増しています。これはツールの問題ではありません。AIが「自社サイトのデザインシステムを知らない」という構造的な問題です。なぜ崩れるのか、そして崩れない体制をどう作るかを整理します。

## 「AIが書いたコードなのに、なぜ崩れるのか」

ある製造業の広報担当者から、こんな相談を受けました。

「Claudeに頼んだら、きれいなHTMLが出てきた。コピーして自社サイトのCMSに貼り付けたら、フォントがバラバラになって、余白がおかしくなって、スマホで見たらボタンが画面からはみ出した。AIって使えないんでしょうか。」

AIは使えません、ではありません。原因は別のところにあります。

ClaudeやChatGPT、v0、Cursorなどのツールは、インターネット上の膨大なコーディングパターンを学習しています。しかし**あなたの会社のサイト固有の設計**、つまりCSSの変数体系・フォントサイズの基準・グリッドの単位・命名規則は学習していません。

だから生成されたコードの「質」は高い。しかし既存サイトに入れると、異物として扱われる。自社のCSSと競合して、意図しない見た目になる。これが「崩れる」の正体です。

## これは「AIの問題」ではなく「受け皿の問題」

少し視点を変えると、見えてくることがあります。

Dokie.aiで資料を整えた。Claudeで記事を書いた。napkin AIで図解を作った。Adobe Fireflyで画像を生成した。AIを使ったコンテンツ生産のスピードは、2年前と比べて10倍以上になっています。

しかし、それを自社サイトに反映する速度は変わっていません。

担当者のPCの中に、AIで作った高品質なコンテンツが溜まっていく。Webに出せないまま鮮度が落ちていく。あるいは出そうとしてコードを貼り付けたら崩れて、修正に2時間かかる。

これは**「作る速度」と「出す速度」のギャップ**です。AIが作る側を速くした分、出す側のボトルネックが露わになった。

## 「崩れない」ために必要な考え方

解決策はシンプルです。AIが生成したものを「直接貼り付ける」のをやめる。代わりに、**あらかじめデザインシステムが組み込まれた「枠」に流し込む**という発想に転換する。

具体的にはこういうことです。

サイトの各パーツ（テキストブロック・画像セクション・CTAボタン・事例カードなど）を「モジュール」として設計しておく。このモジュールの中にテキストや画像を流し込むだけで、フォント・余白・色・レスポンシブ対応がすべて自動で整う。

AIが書いたコードをそのまま貼るのではなく、AIが書いたテキストや画像を「決まった枠」に入れる。枠の設計は人間がやる。枠に何を入れるかはAIが速く作る。この役割分担が、崩れない体制の核心です。

## FUBUKI CMSツールが採用している設計思想

フブキがクライアントに提供するFUBUKI CMSツールは、この「枠」の設計に特化しています。

HubSpot Content Hubを基盤に、フブキが独自開発したモジュールを組み合わせた内製化パッケージです。担当者がやることは、モジュールを選んで、テキストと画像を流し込むだけ。HTMLもCSSも触りません。

Claudeで書いたサービス説明文を貼り付ける。napkin AIで作った図解を差し込む。Fireflyで生成した画像をアップロードする。これが翌日にはWebページとして公開できる。しかもデザインは崩れない。

なぜ崩れないかというと、**モジュールにはすでにそのサイトのデザインシステムが組み込まれている**からです。枠の外のことはモジュールが守る。担当者はコンテンツだけを考えればいい。

これがAIコーディング時代における「出す速度」を上げる仕組みです。

## よくある質問

**Q. v0やCursorで作ったコンポーネントは、FUBUKI CMSツールと組み合わせられますか？**

A. 組み合わせ方によります。v0やCursorで生成したUIコンポーネントをそのまま貼り付けるのではなく、そのデザインをFUBUKI CMSツールのモジュールに反映させる形が最も安定します。「AIで設計のたたき台を作り、モジュールに落とし込む」という役割分担が現実的です。

**Q. 既存サイトをFUBUKI CMSツールに移行するのは大変ですか？**

A. 移行の手間より、移行後の運用コスト削減の方が大きいケースがほとんどです。移行時にフブキがモジュール設計を行うため、担当者がゼロから覚えることは少ない。移行後は外注費なしで更新できる体制が整います。

**Q. AIでコンテンツを量産したいが、社内に専任のWeb担当者がいません。それでも内製化できますか？**

A. できます。FUBUKI CMSツールは「専任のWeb担当者がいない会社」を前提に設計しています。兼務の広報担当者や営業担当者が、空き時間に更新できるレベルの操作性を目指しています。

AIで作ったコンテンツを、翌日にはWebに出せる体制を作りたい方へ。

[外注依存からの脱却「Webサイト内製化パッケージ（FUBUKI CMSツール）」](https://www.fubuki.com/fm/)

 

[完全な記事を表示](https://www.fubuki.com/blog/20260406)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "EIJI KAKUGAWA"
  },
  "dateModified" : "2026-04-05T22:00:00.503Z",
  "datePublished" : "2026-04-05T22:00:00Z",
  "headline" : "AIが書いたコードを自社サイトに入れると崩れる。その本当の理由と、崩れない仕組みの作り方。",
  "image" : {
    "@type" : "ImageObject",
    "height" : 545,
    "url" : "https://5639579.fs1.hubspotusercontent-na2.net/hubfs/5639579/Frame%201410082981.jpg",
    "width" : 1024
  },
  "mainEntityOfPage" : "https://www.fubuki.com/blog/20260406",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "Fubuki Journal"
  }
}
```