AIで作ったLPがWixで崩れる…マンチーがハマった4つの罠と解決策

はじめに

「ChatGPTやClaudeでLP(ランディングページ)を作って、自分のWixサイトに貼り付けたい」

この需要、最近めっちゃ増えてるんですよ。

マンチーも実際にやったんですが、見事に4つの罠を全部踏み抜いて、丸1日無駄にしました(泣)。

この記事では、その経験から得た4つの罠と対処法を共有します。これ知ってれば1時間で済む話なので、同じ轍を踏まないでください。

🤔 そもそもWixは直接ソースを書き込めない

最初に大前提。

Wixは「ノーコードでサイトが作れる」のが売りのサービス。だから普通のレンタルサーバーみたいに「HTMLファイルをFTPでアップロード」みたいな運用はできません。

じゃあAIで作ったHTMLどうすんの?という話ですが、Wixには「HTMLコードを埋め込むパーツ」が用意されてます。

埋め込み方法の概要

Wixエディタ → 「パーツを追加」→「埋め込みコード」→「HTML埋め込み」
表示されるパーツの「コード」欄にHTMLを貼り付け
パーツのサイズ・位置を調整
プレビューで確認

→ つまり「HTMLパーツの中にコードを書き込む」形でしか動かせません。

これを理解した上で、4つの罠に進みます。

💢 罠その1:HTMLの基本タグが競合する

何が起きる?

AIに「LP作って」とお願いすると、こんな感じのコードが返ってきます:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;title&gt;オンラインベースレッスン&lt;/title&gt;
  &lt;style&gt;...&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  ...本文...
&lt;/body&gt;
&lt;/html&gt;

これをそのままWixの埋め込みパーツに貼ると崩れます。

なぜ崩れるか

Wixが既に作ってる全体の <html> <head> <body> タグと、貼り付けたHTMLの同じタグがぶつかって、ブラウザが正しく解釈できない。

🔑 対策

<!DOCTYPE> <html> <head> <body> を全部削除して、<style> と <div> だけにする:

&lt;style&gt;
  .hero { ... }
  .cta-button { ... }
&lt;/style&gt;

&lt;div class=&quot;hero&quot;&gt;
  ...本文...
&lt;/div&gt;

→ これだけで罠1はクリア。

💢 罠その2:CSSが他の要素にも影響する

何が起きる?

CSSをそのまま貼ると:

.hero { background: red; }
button { color: white; }

→ Wixの既存ボタンや要素まで全部影響を受けて、サイト全体が壊れる。

🔑 対策

全CSSセレクタにプレフィックス(接頭辞)を付けて、自分のLP内だけに限定する:

#bass-lp .hero { background: red; }
#bass-lp button { color: white; }

そして、HTMLの一番外側に id="bass-lp" を付けます:

&lt;div id=&quot;bass-lp&quot;&gt;
  &lt;div class=&quot;hero&quot;&gt;...&lt;/div&gt;
  &lt;button&gt;...&lt;/button&gt;
&lt;/div&gt;

→ これでCSSの影響範囲が #bass-lp の中だけに限定。Wix本体は無事。

⚠️ 注意

AIにLP書いてもらう時に「全CSSに #bass-lp プレフィックスを付けて」って指示しないと、毎回手で書き換えるハメになります。最初の指示で言うのが超大事。

💢 罠その3:position: fixedが効かない/暴れる

何が起きる?

「画面上部に固定のCTAバーを出したい」みたいな設計でよくあるパターン:

.cta-bar { position: fixed; top: 0; }

これがWixでは:

全然違う位置に表示される
スクロールしても追従しない
Wixのナビゲーションバーとぶつかる

→ 想定通りに動かない。

なぜ?

Wixは独自のレイアウトシステムを持ってて、position: fixed は埋め込みパーツの中で素直に動かない仕様。

🔑 対策

position: fixed を諦めて、ページ内に普通に配置する「インラインCTAバー」に変える。

/* Before */
.cta-bar { position: fixed; top: 0; }

/* After */
.cta-bar { 
  /* fixedをやめる */
  margin: 20px 0;
  text-align: center;
}

→ スクロール追従はできなくなるけど、Wix内では確実に動く。

代替案として、ページ内の複数箇所に同じCTAボタンを設置するパターンもアリ。フローティングじゃないけど、CTA密度を上げて補える。

💢 罠その4:Google FontsなどCDNリンクが読み込まれない

何が起きる?

<head> に書いていた:

&lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css2?family=Black+Han+Sans&quot;&gt;

→ 罠1で <head> ごと削除してるので、当然読み込まれない。 → せっかく指定したフォントが全部デフォルトのゴシック体で表示される。

🔑 対策

<link> タグをHTMLパーツの最初(<style> の前)に書いておく:

&lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css2?family=Black+Han+Sans&amp;family=Noto+Sans+JP&amp;display=swap&quot;&gt;

&lt;style&gt;
  #bass-lp .hero h1 {
    font-family: 'Black Han Sans', sans-serif;
  }
  ...
&lt;/style&gt;

&lt;div id=&quot;bass-lp&quot;&gt;
  ...
&lt;/div&gt;

→ Wixのパーツ内でも <link> は普通に効くので、これでフォントが読み込まれる。

🛠️ マンチー的・Wix埋め込みのコツ

4つの罠を踏まえた最初からハマらないAI指示テンプレ:

AI(ClaudeやChatGPT)へのプロンプト例

オンラインベースレッスンのLPを作ってください。

以下の要件を必ず守ってください:
1. &lt;html&gt;&lt;head&gt;&lt;body&gt;タグは含めない
2. 全CSSセレクタには #bass-lp というプレフィックスを付ける
3. position: fixed は使わない(代わりにインラインCTAバーで対応)
4. Google Fontsを使う場合は&lt;link&gt;タグをHTMLの先頭に書く
5. 全体は &lt;div id=&quot;bass-lp&quot;&gt; で囲む

(以下、デザイン要件...)

→ これをコピペすればOK。AIがWix埋め込み対応のコードを最初から出してくれる。

まとめ

Wixに自作HTMLを埋め込む時の罠と対策:

罠	対策
1. 基本タグの競合	`<html><head><body>` を削除
2. CSS影響	全セレクタにプレフィックス付与
3. position: fixed暴走	インラインCTAバーに変更
4. CDNリンクが効かない	`<link>` をHTMLパーツ内に書く

知ってれば1時間で済む。知らないと1日無駄にする(マンチー談)。

これからWixでAI生成LPを使う人の参考になれば。

次回はマンチーが実際にAIで作ったLPのBefore/Afterを晒してみる予定です。