AIで作ったHTMLを埋め込んでみよう！

ChatGPTやClaudeなどのAIで作成したWebサイト・LP・デザインパーツ(料金表・よくある質問など)を、コネクティッドワンのページに埋め込んで活用する方法です。

手順は3ステップです。

1. AIにHTMLを作ってもらう
2. 「コード」ウィジェットに貼り付ける
3. 保存して、表示を確認する

STEP1：AIにHTMLを作ってもらう

ChatGPT・Claude・GeminiなどのAIに、作りたいものを日本語で伝えます。「高級感のある雰囲気で」「メインの色は紺色で」など、デザインの希望も日本語でOKです。

そのまま使える指示文はこちらです。
LPなど作成をする最初に入れる。または、作成をした後に、下記を貼り付けて指示を出してください。

1. ユニークIDの自動生成: 全体を囲む<div>に、作るものの名前(英語の小文字)と現在の日時を組み合わせたユニークIDを付けてください(例: pricing-table-20260717153000)
2. 自己完結: HTML、CSS、JavaScriptを1つのHTMLファイルにまとめてください
3. 競合防止: すべてのCSSとJavaScriptが、そのユニークIDの内部にのみ適用されるようにしてください
・スマホでもきれいに表示されるようにしてください

3つのお願い(ユニークID・自己完結・競合防止)は毎回そのまま使い回せます。変えるのは1行目だけです。

画像を使いたいとき(画像のURL化)

パソコンの中にある画像ファイルは、貼り付けたHTMLからは読み込めません。先に画像をファイルマネージャーにアップロードして、URLに変えてからAIに渡します。

① ページ編集画面で「Webサイトの設定」(歯車マーク) → ② 「ファイルマネージャー」 → ③ 「すべてのファイルを表示」

④ 「ファイルをアップロード」から画像を追加 → ⑤ 画像のリンクマークをクリック。「ファイルのURLがクリップボードにコピーされました」と出たら完了です。

コピーしたURLを、AIにそのまま渡します。

LPには、次の画像を使ってください。
・トップの写真: (コピーした画像URL)
・講師プロフィールの写真: (コピーした画像URL)

画像1枚につきURLは1つです。使いたい画像の数だけ、アップロード→URLコピーを繰り返します。
画像の置き場所は、Cloudflare R2などの外部ストレージでも大丈夫です。URLになっていれば、渡し方は同じです。

動画を入れたいとき(埋め込みコード)

動画は、動画のURLではなく「埋め込みコード」を使います。コネクティッドワンにアップロードした動画なら、ビデオマネージャーからコピーできます。

① 「Webサイトの設定」(歯車マーク) → ② 「ビデオ」 → ③ フォルダから動画を選ぶ

④ 動画の設定画面で「シェア」をクリック

⑤ 「コピー」をクリック。「レスポンシブ」にチェックが入っていると、配置した場所のサイズにフィットします。

コピーした埋め込みコードをAIに渡して、「このコードを、お客様の声のセクションの下に入れてください」のように場所を伝えます。

YouTubeの動画も、「共有」→「埋め込む」で表示されるコードを同じように使えます。

ボタンの飛び先URLも指定しよう

AIが作ったLPの「お申し込みはこちら」ボタンは、飛び先のURLを渡さないと、押しても何も起きないままです。

1. 登録フォームやチェックアウトフォームのページを、コネクティッドワンで先に作る
2. そのページのURLをコピーする
3. 「お申し込みボタンの飛び先は、次のURLにしてください」とAIに渡す

STEP2：「コード」ウィジェットに貼り付ける

① 「+」からウィジェット一覧を開き「コード」を選ぶ → ② 入れたい場所にドラッグ → ③ 表示された黒い画面に、AIが作ったHTMLをまるごと貼り付けます。

AIの回答についている「コピー」ボタンを使うと、1文字も欠けずにコピーできます。手動で範囲選択すると、先頭や末尾が欠けて表示が崩れる原因になります。

※ YouTube動画などの「埋め込みコード」を単体で貼りたいときは、「埋め込み」ウィジェットを使います。AIが作ったHTMLは「コード」ウィジェットです。

STEP3：保存して、表示を確認する

貼り付けたらページを保存して、実際の表示を確認します。パソコンとスマホの両方でチェックしましょう。

うまくいかないときは

何も表示されない
HTMLが途中で切れている可能性があります。AIの回答のコピーボタンで、もう一度全部コピーして貼り直してください。

画像だけ表示されない
画像がパソコンの中のファイルのまま(URLになっていない)ことが原因です。ファイルマネージャーにアップロードしてURLをコピーし、AIに渡して作り直してもらいます。

色や見た目が変わってしまう
サイト側のデザイン設定が影響しています。AIに「埋め込み先のデザインに色が上書きされないように作り直してください」と伝えれば直せます。

スマホで崩れる
AIに「スマホ表示に対応してください」と伝えて作り直してもらい、貼り直します。

内容を直したいときは、AIに日本語で修正を頼んで、新しいHTMLを黒い画面にまるごと入れ替えればOKです。HTMLを自分で書き換える必要はありません。

関連記事

コードを埋め込んでみよう！

埋め込みの活用

ファイルマネージャー（アップロード&ダウンロード方法）

更新日 17/07/2026