テックジム東京本校では、情報科目の受験対策指導もご用意しております。

はじめに：AIとGoogleサイトで誰でもWebサイトが作れる時代

ChatGPTやClaudeなどのAIツールを使えば、プログラミング知識がなくても簡単にHTMLコードを作成できます。そして、Googleサイトを活用すれば、そのHTMLを無料で公開することが可能です。

この記事では、AI生成したHTMLをGoogleサイトで公開する具体的な手順を、初心者にもわかりやすく解説します。

この記事でわかること

• AIを使ったHTML作成の基本
• GoogleサイトへのHTML埋め込み方法
• 公開後のカスタマイズテクニック
• よくあるトラブルと解決策

必要なもの

始める前に、以下を準備しましょう：

1. Googleアカウント（無料）
2. AIツール（Claude、ChatGPT、Geminiなど）
3. インターネット接続
4. 作りたいWebサイトのイメージ

ステップ1：AIでHTMLコードを作成する

おすすめのAIツール

Claude（claude.ai）

• 複雑なデザインにも対応
• レスポンシブデザインが得意
• 無料プランでも十分な機能

ChatGPT

• 会話形式で簡単に作成
• デザインの微調整が柔軟
• GPT-4推奨

Gemini

• Google製で親和性が高い
• シンプルなページに最適

効果的なプロンプト例

AIに依頼する際は、具体的に指示することが重要です：

「レストランの紹介ページを作成してください。
以下の要素を含むHTMLを生成してください：
- ヘッダーに店名とナビゲーション
- メインビジュアル画像
- 店舗情報（住所、電話番号、営業時間）
- メニュー紹介セクション
- アクセスマップ
- フッター
レスポンシブデザインで、CSSも含めて1つのHTMLファイルにしてください」

AIが生成したコードの確認ポイント

生成されたHTMLコードで確認すべき点：

• すべてのCSSが<style>タグ内に含まれているか
• JavaScriptが必要な場合、<script>タグ内に含まれているか
• 画像のパスが正しいか（外部URLまたは相対パス）
• レスポンシブデザインになっているか

ステップ2：Googleサイトでの公開準備

Googleサイトの新規作成

1. Google Sitesにアクセス
2. 「空白」または好きなテンプレートを選択
3. サイト名を入力

サイト構造の設計

Googleサイトは通常のドラッグ&ドロップ形式のサイトビルダーですが、HTML埋め込み機能を使って高度なカスタマイズが可能です。

ステップ3：HTMLをGoogleサイトに埋め込む

方法1：埋め込みコードを使用（推奨）

1. Googleサイトの編集画面を開く
2. 右側のメニューから「挿入」をクリック
3. 「埋め込み」→「埋め込みコード」を選択
4. 生成したHTMLコードを貼り付け
5. 「次へ」→「挿入」をクリック

注意点：

• Googleサイトの埋め込みには文字数制限があります（約2,000〜5,000文字程度）
• 複雑なHTMLの場合は分割して埋め込む必要があります

方法2：外部ホスティングとiframe

長いHTMLコードの場合：

1. GitHub Pagesを使用

   • GitHubにリポジトリを作成
   • HTMLファイルをアップロード
   • GitHub Pagesで公開
   • 公開URLをGoogleサイトのiframeで埋め込み

2. CodePenを使用

   • CodePenでHTMLを公開
   • 埋め込みコードを取得
   • Googleサイトに埋め込み

埋め込みコードの例

<iframe src="YOUR_HTML_URL" width="100%" height="600px" frameborder="0"></iframe>

ステップ4：デザインの最適化

レスポンシブ対応の確認

AIが生成したHTMLが正しく表示されるか、以下のデバイスで確認：

• スマートフォン（縦・横）
• タブレット
• デスクトップ

Googleサイトのプレビュー機能で各デバイス表示を確認できます。

CSSの調整

埋め込み後、Googleサイトのスタイルと競合する場合：

/* 埋め込みコンテンツ用のラッパー */
.embedded-content {
    all: initial;
    * {
        all: unset;
    }
}

ステップ5：公開と共有

公開設定

1. 右上の「公開」ボタンをクリック

2. Webアドレス（URL）を設定

3. 公開範囲を選択：

   • 一般公開：誰でもアクセス可能
   • リンクを知っている全員：URLを知っている人のみ
   • 特定のユーザー：指定したGoogleアカウントのみ

4. 「公開」をクリック

カスタムドメインの設定（オプション）

独自ドメインを使用したい場合：

1. Google Workspaceに登録（有料）
2. ドメインを取得
3. Googleサイトでカスタムドメインをマッピング

実践例：ポートフォリオサイトの作成

AIへのプロンプト例

「個人のポートフォリオサイトを作成してください。
構成：
1. ヒーローセクション（名前、肩書き、背景画像）
2. About Me（自己紹介）
3. スキルセクション（アイコン付き）
4. プロジェクト紹介（カード形式で3つ）
5. お問い合わせフォーム
6. SNSリンク
デザイン：モダンでミニマル、ダークモードオプション付き
技術：HTML5、CSS3、バニラJavaScript
レスポンシブ対応必須」

完成イメージ

このプロンプトでAIが生成したHTMLを、前述の手順でGoogleサイトに埋め込めば、プロフェッショナルなポートフォリオサイトが完成します。

よくある質問（FAQ）

Q1: Googleサイトに埋め込めるHTMLに制限はありますか？

A: はい、以下の制限があります：

• 文字数制限（約2,000〜5,000文字）
• セキュリティ上、一部のJavaScriptが動作しない場合がある
• 外部リソース（フォント、ライブラリ）の読み込みに制限がある場合がある

Q2: AIが作ったHTMLがGoogleサイトで正しく表示されません

A: 以下を確認してください：

• CSSが<style>タグ内に含まれているか
• JavaScriptに禁止されている機能が含まれていないか
• 画像URLが正しいか（相対パスではなく絶対パスを使用）
• コードに不要なスペースや改行が含まれていないか

Q3: 無料で使えますか？

A: 基本的に無料で使用できます：

• Googleサイト：無料
• Claude/ChatGPT：無料プランで十分
• カスタムドメイン：別途費用が必要

Q4: SEOはどうすればいいですか？

A: Googleサイト自体にSEO機能があります：

• ページタイトルとメタディスクリプションを設定
• 見出しタグ（H1, H2など）を適切に使用
• 画像にaltテキストを追加
• モバイルフレンドリーを確認

Q5: 商用利用は可能ですか？

A: はい、可能です。ただし：

• Googleサイトの利用規約を確認
• AIツールの利用規約も確認
• 本格的なビジネスサイトなら有料ホスティングも検討

トラブルシューティング

問題1：HTMLが表示されない

原因と解決策：

• Googleサイトの埋め込み機能が正しく使われていない → 埋め込みコードオプションを再確認
• コードにエラーがある → AIに「コードを検証してください」と依頼
• 文字数制限を超えている → コードを分割するか、外部ホスティングを使用

問題2：スマホで表示が崩れる

解決策：

• AIに「レスポンシブデザインを強化してください」と依頼
• viewport meta tagが含まれているか確認：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

問題3：画像が表示されない

解決策：

• 画像URLが外部の公開URLになっているか確認
• 画像ホスティングサービス（Imgur、Cloudinaryなど）を使用
• Google Driveで画像を共有し、公開リンクを使用

応用テクニック

1. フォームの統合

GoogleフォームをHTMLに埋め込む：

<iframe src="https://docs.google.com/forms/d/e/YOUR_FORM_ID/viewform" 
        width="100%" height="800" frameborder="0">
</iframe>

2. Googleマップの追加

<iframe src="https://www.google.com/maps/embed?pb=YOUR_MAP_CODE" 
        width="100%" height="450" frameborder="0">
</iframe>

3. アニメーションの追加

AIに依頼：

「スクロールアニメーションを追加してください。
Intersection Observer APIを使用して、
要素が画面に入ったときにフェードインするようにしてください」

まとめ：AIとGoogleサイトで創造性を解放

AIが作成したHTMLをGoogleサイトで公開することで、プログラミング初心者でも：

✅ 無料でプロフェッショナルなWebサイトを作成 ✅ 短時間でデザイン性の高いページを公開 ✅ 簡単に更新・修正が可能 ✅ 柔軟にカスタマイズできる

次のステップ

1. まずはシンプルなページから始める
2. AIとの対話を重ねてデザインを改善
3. Googleサイトの機能を組み合わせる
4. ユーザーフィードバックを基に継続改善

おすすめリソース

• Google Sites ヘルプセンター：公式ドキュメント
• Claude.ai：高品質なHTML生成
• CodePen：HTMLのテスト環境
• GitHub Pages：無料ホスティング

---

あとがき

AI技術の進化により、Webサイト制作のハードルは大きく下がりました。この記事で紹介した方法を使えば、アイデアを形にするのに必要なのは想像力だけです。

ぜひ、あなたのクリエイティブなアイデアをAIとGoogleサイトで実現してみてください！

---

関連キーワード: AI HTML作成、Googleサイト 使い方、Claude HTML、ChatGPT Webサイト、無料ホームページ作成、HTML埋め込み、レスポンシブデザイン、初心者 Webサイト制作

更新日: 2025年12月5日

■らくらくPython塾 – 読むだけでマスター

【現役エンジニア歓迎】プログラミング学習お悩み相談会

【現役エンジニア歓迎】プログラミング学習お悩み相談会

【情報I】受験対策・お悩み相談会（オンライン・無料）

【情報I】受験対策・お悩み相談会（オンライン・無料）

【オンライン無料】ゼロから始めるPython爆速講座

【無料・オンライン】ゼロからはじめるPython爆速講座

■テックジム東京本校

格安のプログラミングスクールといえば「テックジム」。
講義動画なし、教科書なし。「進捗管理とコーチング」で効率学習。
対面型でより早くスキル獲得、月額2万円のプログラミングスクールです。
情報科目の受験対策指導もご用意しております。

テックジム東京本校｜「情報」科目受験生歓迎