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ツール）」