2026年8月31日 / 最終更新日 : 2026年8月31日 fujifuji コラム

AIが作ったHTMLをGoogleサイトで公開する方法｜初心者向けにわかりやすく解説

AIに「Webサイトを作って」と指示すると、HTML・CSS・JavaScriptまで含めたWebページを簡単に生成できます。

しかし、AIが作ったHTMLをそのままGoogleサイトに貼り付けても、HTMLファイルとして自由に公開できるわけではありません。

この記事では、AIが生成したHTMLをGoogleサイトで公開する方法を、初心者向けにわかりやすく解説します。GoogleサイトでHTMLを活用する方法や、うまく表示できない場合の対処法、HTMLをそのまま公開したい場合の代替手段まで紹介します。

AIが作ったHTMLはGoogleサイトで公開できる？

結論からいうと、Googleサイト上でAIが作ったHTMLを活用することは可能ですが、HTMLファイルをそのままアップロードしてサイト全体を構築する方法には制限があります。

Googleサイトは、HTMLファイルを自由に配置してWebサイトを公開するためのサービスではありません。

そのため、

ChatGPTなどのAI
↓
HTMLを生成
↓
HTMLファイルをGoogleサイトにアップロード
↓
そのままWebページとして公開

という使い方は基本的にできません。

一方で、HTMLを埋め込みコードとして利用する方法があります。

GoogleサイトでAI生成HTMLを公開する主な方法

AIが生成したHTMLをGoogleサイトで利用する方法として、代表的なのは次の3つです。

方法 難易度 HTMLの自由度 おすすめ度
Googleサイトの「埋め込みコード」を利用 ★★☆ △ ★★★★★
HTMLを別サーバーで公開してGoogleサイトに埋め込む ★★★ ○ ★★★★★
Google Apps ScriptでWebアプリ化する ★★★★ ○ ★★★★☆

初心者の場合は、まずGoogleサイトの「埋め込みコード」機能を試すのがおすすめです。

方法1：Googleサイトの「埋め込みコード」を使う

最も簡単なのが、GoogleサイトにHTMLコードを埋め込む方法です。

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

まずChatGPTなどのAIに、作りたいWebページを指示します。

例えば、次のようなプロンプトです。

Googleサイトに埋め込んで使える
シンプルなランディングページをHTMLで作成してください。

条件：
・HTMLとCSSを1つのコードにまとめる
・外部ライブラリは使用しない
・レスポンシブ対応
・ボタンを設置する
・スマートフォンでも見やすくする

AIからHTMLコードが生成されます。

STEP2：HTMLコードをコピーする

AIが生成したHTMLをコピーします。

例えば、

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  max-width: 800px;
  margin: auto;
  padding: 40px;
}
</style>
</head>

<body>
<div class="container">
  <h1>AIで作ったWebページ</h1>
  <p>これはAIが生成したHTMLです。</p>
</div>
</body>
</html>

といったコードです。

STEP3：Googleサイトを開く

Googleサイトを開き、新しいサイトを作成します。

サイトのページを編集する画面で、HTMLを埋め込みたい場所を選択します。

STEP4：「埋め込む」を選択する

Googleサイトの編集画面から、**「挿入」→「埋め込む」**を選択します。

すると、埋め込み方法を選択する画面が表示されます。

ここで、

「埋め込みコード」

を選択します。

STEP5：HTMLコードを貼り付ける

AIが生成したHTMLコードを貼り付けます。

その後、プレビューで表示を確認します。

問題がなければ、Googleサイトのページ上にHTMLの内容が表示されます。

ただし、GoogleサイトへのHTML埋め込みには注意点がある

ここが重要です。

AIが生成したHTMLなら、すべてのコードがGoogleサイトで自由に動くわけではありません。

特にJavaScriptを使用している場合は注意が必要です。

例えばAIに、

<script>
alert("Hello");
</script>

のようなJavaScriptを含むHTMLを作らせても、Googleサイトの埋め込み環境では期待どおりに動作しない場合があります。

また、外部APIやCookie、iframe、外部JavaScriptなどを利用している場合も、サービス側の制限を受ける可能性があります。

AIに「Googleサイト用HTML」を作らせるコツ

AIにHTMLを作らせるときは、単に、

HTMLを作ってください

と指示するより、

Googleサイトに埋め込むためのHTMLを作ってください

と指定するほうがよいでしょう。

例えば次のようなプロンプトが使えます。

Googleサイトの「埋め込みコード」に貼り付けて
利用するHTMLを作成してください。

条件：
・HTMLとCSSを1つにまとめる
・外部CSSを使わない
・外部JavaScriptを使わない
・レスポンシブ対応
・Googleサイトに埋め込んでも表示が崩れにくい構成
・シンプルなHTMLにする

このように公開先をAIに伝えることがポイントです。

方法2：HTMLを別の場所で公開してGoogleサイトに埋め込む

AIが作ったHTMLが複雑な場合は、こちらの方法が便利です。

流れは次のようになります。

AI
↓
HTML・CSS・JavaScriptを生成
↓
Webサーバーなどにアップロード
↓
Webページとして公開
↓
Googleサイトに埋め込む

例えば、AIにWebページを作らせて、HTMLファイルをWebサーバーにアップロードします。

そのページのURLをGoogleサイトに埋め込む方法です。

この方法のメリット

HTMLを別サーバーで管理するため、Googleサイト側の制約を受けにくくなります。

例えば、

  • HTML

  • CSS

  • JavaScript

  • 画像

  • 外部ライブラリ

  • API

などを組み合わせたWebページを作りやすくなります。

AIを使って本格的なWebアプリを作りたい場合には、こちらの方法が向いています。

方法3：Google Apps Scriptを利用する

もう一つの方法が、Google Apps Script（GAS）でHTMLをWebアプリとして公開する方法です。

Google Apps Scriptでは、HTMLファイルを利用したWebアプリを作成できます。

例えば、

Google Apps Script
      ↓
HTML
      ↓
Webアプリとして公開
      ↓
Googleサイトに埋め込む

という構成です。

Google Apps Scriptとは？

Google Apps Scriptは、Googleが提供しているスクリプト環境です。

GoogleスプレッドシートやGmail、Googleドライブなど、Googleサービスと連携した処理をJavaScriptベースで作れます。

AIとの相性も非常に良く、

「Googleスプレッドシートのデータを読み込んで表示するWebアプリを作って」

とAIに依頼して、GASのコードを生成してもらうこともできます。

AI × Googleサイトは何が便利なのか？

AIを利用すると、GoogleサイトだけでWebサイトを作るよりも、アイデアを形にするスピードを上げられます。

例えば、

  • 会社案内

  • イベントページ

  • キャンペーンページ

  • 簡易LP

  • 計算ツール

  • クイズ

  • アンケート

  • 学習用コンテンツ

  • プログラミング教材

などを作れます。

特にプログラミングの知識が少ない人でも、

「こういうページを作りたい」

とAIに説明することで、HTMLコードを生成してもらえるのが大きなメリットです。

AIにHTMLを修正してもらう方法

一度HTMLを作った後も、AIを使えば簡単に修正できます。

例えば、

このHTMLを修正してください。

・タイトルを大きくする
・背景を白にする
・ボタンを中央に配置する
・スマートフォン対応にする
・全体をシンプルなデザインにする

修正後のHTMLを全文出力してください。

と指示できます。

このように、

AIで生成 → Googleサイトで確認 → AIで修正

というサイクルを繰り返すと、プログラミング初心者でもWebページを作りやすくなります。

AIにHTMLを作らせるときの注意点

1. HTMLだけでなくCSSも指定する

AIにHTMLを依頼すると、デザイン部分が不足することがあります。

そのため、

HTMLとCSSをまとめて作成してください

と指定するとよいでしょう。

2. JavaScriptの使用を必要最小限にする

Googleサイトへの埋め込みを前提にする場合、JavaScriptを大量に使用するHTMLは避けたほうが無難です。

まずは、

HTML＋CSSだけ

で作れるページから始めるのがおすすめです。

3. スマートフォン対応を指示する

Googleサイトはスマートフォンから閲覧されることも多いため、

レスポンシブデザインにしてください

とAIに指定しましょう。

さらに、

スマートフォン、タブレット、PCの3種類で
レイアウトが崩れないようにしてください

と指定すると、より具体的です。

GoogleサイトにAI生成HTMLを貼っても表示されない場合

HTMLを貼り付けたのに正常に表示されない場合、いくつか原因が考えられます。

主な原因

  • JavaScriptが制限されている

  • 外部ファイルを読み込めない

  • iframe側の制限

  • 外部サービス側が埋め込みを禁止している

  • CSSの記述に問題がある

  • HTMLの構造に問題がある

まずAIに、

Googleサイトの埋め込みコードで表示できるように
このHTMLを修正してください。

JavaScriptや外部ライブラリへの依存を減らしてください。

と依頼してみるとよいでしょう。

「HTMLをそのまま公開したい」ならGoogleサイト以外も検討

もし目的が、

AIが作ったHTMLファイルを、そのままWebサイトとして公開したい

ということであれば、GoogleサイトよりもHTMLファイルを直接ホスティングできるサービスのほうが向いています。

例えば、

  • GitHub Pages

  • Cloudflare Pages

  • Vercel

  • Netlify

などがあります。

特にAIによるWeb開発では、

ChatGPT
↓
HTML / CSS / JavaScript
↓
GitHub
↓
Webホスティング
↓
公開

という方法が非常に使いやすくなっています。

GoogleサイトとHTMLホスティングの違い

項目 Googleサイト HTMLホスティング
初心者向け ◎ ○
HTMLを直接管理 △ ◎
デザイン自由度 △ ◎
JavaScript 制約あり ○
本格的なWebアプリ △ ◎
更新の簡単さ ◎ ○
Googleサービスとの連携 ◎ ○

会社案内や情報ページを簡単に作るならGoogleサイト、AIで作ったWebアプリや本格的なHTMLサイトを公開するならHTMLホスティングという使い分けがおすすめです。

AIを使えば「コードを書けなくてもHTMLサイト」を作れる

現在は、HTMLの知識がそれほどなくても、AIを利用することでWebページを作れるようになりました。

例えば、

1. AIにWebサイトのアイデアを伝える
        ↓
2. AIがHTMLを生成
        ↓
3. Googleサイトに埋め込む
        ↓
4. 表示を確認
        ↓
5. AIに修正を依頼
        ↓
6. 再びGoogleサイトで確認

という流れです。

この方法なら、HTMLを一から勉強してコードを書くよりも、「何を作りたいか」をAIに伝えることに集中できます。

まとめ：AIが作ったHTMLをGoogleサイトで公開する方法

AIが作ったHTMLをGoogleサイトで利用する場合、まずはGoogleサイトの**「埋め込みコード」**機能を使う方法がおすすめです。

ただし、GoogleサイトはHTMLファイルを自由にホスティングするサービスではありません。

そのため、

簡単なHTMLページ
→ Googleサイトの埋め込み

複雑なHTML・JavaScript
→ Webサーバーなどで公開してGoogleサイトに埋め込む

Googleサービスと連携するWebアプリ
→ Google Apps Script

というように使い分けるとよいでしょう。

AIにHTMLを生成してもらう際は、単に「HTMLを作って」と依頼するのではなく、「Googleサイトに埋め込むためのHTMLを作って」と指定することがポイントです。

これからは、HTMLを自分で一から書くのではなく、AIにコードを生成させ、人間は要件やデザインを指示するというWeb制作スタイルがますます身近になっていくでしょう。

プログラミング学習に興味がある方は、まずは無料体験会へ

無料体験会・お申し込みはこちら

プログラミング学習に関するお役立ちコンテンツ

カテゴリー
コラム
【東京】おすすめプログラミング教室

前の記事

海城中学に合格するためのおすすめ学習塾｜塾選びと合格対策を徹底解説
2026年8月31日
コラム

次の記事

MusicXMLとは？特徴・できること・MIDIとの違い・開き方をわかりやすく解説
2026年8月31日