【Gemini × Google Sites】 HTMLわからなくてもできた！Geminiでハンズオン資料のウェブページを作成してみた
クラウド事業本部 オペレーション部 カスタマーサポートグループ アカウントチーム の chicca です。
リプレイスした「ナレッジベースLM」の利用を促進すべく、チーム内で NotebookLM のハンズオンを実施しました。
今回は、そのハンズオンの準備作業をまとめたブログになります。
準備にあたり、Gemini から Google Sites（ウェブページ）に出力する機能を利用してみたかったので、その実験記録もかねてご紹介します。
※ハンズオンは2025年7月上旬に行いました。現在は画面の表示などの仕様が変更されていますが当時の様子をそのまま記載しています。
１：はじめに
まずは、実施したハンズオンの概要を整理します。
- 対象：アカウントチームメンバー（非エンジニア）約30人
- 目的：AI の利用方法を紹介し、業務でのAI活用を促進する
- NotebookLM の基本機能と操作を理解し、業務利用のイメージを持つ
- AI を活用した情報収集・整理の効率性を体験する
- ハンズオン内容：
- NotebookLM のソースにドキュメントを追加する
- Studio 機能を利用してメモを作成する
- 音声概要、マインドマップを作成してみる
今後、業務で積極的に AI を使ってほしいという思いからハンズオン形式にしました。
書き出してみたら目的や内容がなにやら立派なものになってしまった。
実際はもっとカジュアルに「新しい AI にみんなで触ってみようぜ～」くらいのノリです。
また、わたし個人の目的として「Gemini で生成したコンテンツを Google Sites で資料化する」 を検証してみました。
（※当時は Google Slides への出力機能がまだ実装されていなかったため、Google Sites を利用）
２：Google Sitesで説明用ウェブページを作成する
ハンズオンに向けて、まずは自分自身が NotebookLM への理解を深める必要があります。
Gemini に相談しながら、Google Sites への出力も試してみました。
2025年6月23日に Google が主催した NotebookLM のオンラインセミナーに参加しました。その資料を Gemini に読み込ませ、説明用のウェブページを作成していきます。
手順：
- Gemini で「Canvas」機能を有効にする
- 以下のプロンプトを入力
プロンプト
IT初心者向けにNotebookLMの使い方ハンズオンをします。アップロードした資料からハンズオン用の資料を作成してください
- プレビュー画面右上の「作成」から「ウェブページ」を選択
- ウェブページのプレビューが表示されるので確認
- 「コード」を選択して「共有」をクリックし、「内容をコピー」する
- Google Sites を開き、「空白のページ」＞「挿入」＞「埋め込む」を選択
- 「埋め込みコード」タブに、コピーしたHTMLコードをペースト
これだけで、説明用ウェブページがあっという間に出来上がりました。ベースはこれで十分だ。
３：NotebookLMとGeminiの違いを整理してHTMLに書き出す
次に、当日説明したい「NotebookLM と Gemini の違い」について調べます。Gemini に聞いてみました。
プロンプト
社内で NotebookLM の使い方のハンズオンをします。
対象者はIT初心者のメンバーです。
NotebookLM と Gemini のどちらを利用するか、違いが分かるようにメリットデメリットを表にしてください
Gemini は、以下の比較表を作成してくれました。
この表も説明用ウェブページに載せたいと思い、表示方法を聞いてみました。
プロンプト
表を Google サイト で表示したいです。どうすればいいですか？
Gemini の回答
方法1：テキストとして直接貼り付ける（最も簡単）
（中略）
方法2：Google スプレッドシートを埋め込む（推奨）
（中略）
方法3：HTMLコードを埋め込む（より高度な方法）
この方法は、HTMLとCSSを使って表を直接記述し、それをGoogle Sitesに埋め込む方法です。IT初心者の方には少し難しいかもしれませんが、参考までに記載します。
HTMLコードを作成する:
以下のHTMLコードをテキストエディタなどにコピーします。
NotebookLMとGeminiの比較表 (HTML)
（以下省略）
これまでのやり取りで「IT初心者」を前提としてチャットをしているので、難易度別に３つの方法を提示してくれました。
HTML の知識はありませんが、先ほど作成した説明用のウェブページと統合したかったので「方法3：HTMLコードを埋め込む」を試してみます。
説明用ウェブページのHTMLコードをテキストツールにコピーし、プレビューを見ながら配置場所を調整します。
見出しが不揃いですが、そこは気にしない。
４：ハンズオンの操作説明資料を作る
続いて、実際の操作説明（チュートリアル）部分を作成します。
ここでも Gemini の「Canvas」モードを利用しました。
プロンプト
NotebookLMの使い方チュートリアルをスクショ付きで説明したいです
以下の項目の使い方を説明してください
1. ノートブックの作成とソースの追加
2. チャット機能で質問してみよう
3. メモ機能で情報を整理しよう
4. Studio機能でアウトプットを自動生成
Gemini が生成した内容を再度「ウェブページ」として出力し、HTML化します。
ハルシネーションがあるか内容を確認し、問題ないのでそのままハンズオン資料として採用します。
５：作成したウェブページにリンクを設定する
出力されたHTMLコードを Google Sites に貼り付け、説明用とハンズオン用の2つのウェブページが完成しました。これらを繋げます。
具体的には、「基本機能を体験する」というボタンをクリックすると、ハンズオン用のウェブページへ飛ぶようにリンクを設定しました。
HTMLに詳しくないので、Gemini が生成したコードの中にあったリンク記述を参考に、見よう見まねでハイパーリンクを設定してみました。
参考にしたリンク記述
<a href="https://notebooklm.google.com/" target="_blank" rel="noopener noreferrer" class="...（省略）...">
NotebookLMを使ってみる
</a>
「基本機能を体験する」コード行の「a href="」 の後ろにハンズオン用ウェブページの URL を挿入します。
これで、それっぽいボタン付きの資料ウェブページが完成しました。
最後に、「共有」でウェブページの公開範囲を選択します。
６：当日に向けた準備
ハンズオンの持ち時間は30分。
当日にスムーズに進めるため、参加者には以下の事前準備を依頼しました。
- 「ソース」用のドキュメント格納フォルダを作成する
- デスクトップに「20250710ソース」というフォルダを作成
- 「ソース」用のドキュメントを用意する
- 手順書からページを2つ選ぶ
- 選んだページをPDF化し、作成したフォルダに格納する
日頃の業務に関係のあるドキュメントを使うことで、「あ、これ便利かも」と参加者に実感してもらう狙いです。
自分向けの事前準備もしておきます。
- ハンズオン概要ページ（Notion）の作成
- 全員が「ソース」に追加するスライド資料のURLなど同日必要なリンクを概要ページに記載
- Slackのわいがやスレ
７：さいごに
以上が、今回のハンズオン準備の全容です。
Gemini と Google Sites でコードを書かなくてもウェブページを作成することができました。
チーム内勉強会は2回実施しました。
1回目が今回紹介した NotebookLM ハンズオン、2回目は「ナレッジベースLM」の使い方説明を行いました。
メンバーが普段接している手順書などをソースにすることで、AI を業務に利用する具体的なイメージを持ってもらえたかなと思います。
個人的には、以下の2点が大きな学びとなりました。
- Google Sites へ出力機能の手軽さを体験できたこと
- Gemini と NotebookLM、それぞれの特徴を整理できたこと
AI の使い分けを整理できたことが良いインプットになり、結果として11月に開催した社内説明会準備に役立ちました。
参加者がどれだけ AI を利用しているかは数値として追えてないのですが、30分×30人＝900分間、業務の手を止めてもらったのでこのブログを執筆することで少しでも帳尻が合いますように。
このブログがどなたかの参考になれば幸いです。
最後まで読んでいただき、ありがとうございました。
