この記事でわかること
- GEMとは何か（Claude Codeのスキルに近い自分専用AI）
- 4ステップでHTML資料を作る入門編の手順
- マイドライブ連携で資料に画像を埋め込む方法
- PDF・Googleサイト埋め込み・音声入力での時短のコツ
「僕が実際に、無料のGEM機能だけで会議資料を作ってみたら、伝えたいことを話しかけるだけで3分ほどでキレイなHTML資料が完成しました」
会議のたびに資料を作るけれど、正直そんなに使わない。それなのに作成には時間だけがしっかり奪われる。日本の会議は長いとよく言われますが、その準備に心当たりのある人は多いはずです。
こんにちは、ルーティンラボ（@rutinelabo）です。今回はGoogleのGeminiを使って、会議資料や説明用のアジェンダをサクッと作る方法を紹介します。特別なツールは不要で、無料の機能だけで完結します。
前回はClaude CodeやCodexでHTML資料を作る方法を解説しました。ローカル開発をしている方はこちらもどうぞ：Claude CodeはHTMLで視認性UP｜進捗ダッシュボードで多数プロジェクトを一望
-
-
Claude CodeはHTMLで視認性UP｜進捗ダッシュボードで多数プロジェクトを一望
続きを見る
プロンプト配布中
LINE公式アカウントを友達追加していただければ、本記事やYouTubeで使用した使用したプロンプトを配布いたします。メンバーシップ登録で優先サポートも実施中です。
GeminiのGEMで作るHTML資料とは｜スライドではなくペラ1ドキュメント
今回作るのは、パワーポイントのようなスライドではありません。1枚のWebページをそのまま資料にする、いわゆるHTMLプレビューの形式です。ブログ記事のように上から下へ読ませる、ペラ1のドキュメントだとイメージしてください。
ただの文章は、箇条書きが並ぶだけの殺風景な見た目になりがちです。そこにCSSというデザインを当てると、色分けやフェーズごとの図解が加わり、読みやすさが一気に上がります。1枚のブログ記事のような、認識しやすい資料に仕上がります。
スライド資料は1枚ずつページを送る必要があり、作るのにも手間がかかります。一方でHTML資料なら、スクロールで全体を見渡せて、共有も編集も手軽です。前回はこれをClaude Codeで作りましたが、今回はブラウザだけで誰でも同じことができます。
使いどころは会議資料だけではありません。ちょっとした説明のためのアジェンダや、提案書のようなドキュメントにも向いています。スライドを作るほどでもないけれど、口頭だけでは伝わりにくい。そんな場面をまるごとカバーできる作り方です。
なぜGemini／GEMなのか｜Google Workspace連携という強み
正直なところ、Geminiが生成AIの精度で常に最強というわけではありません。それでもGeminiを選ぶ理由は、Google Workspaceとの連携がスムーズだからです。作った資料をGoogleサイトに埋め込んだり、Driveのファイルを参照させたりが自然にできます。
スライドを一発生成してくれるAIも増えましたが、あの多くは画像として出力されるため、後から文言を直しづらいのが難点です。実際にパワポ形式で出そうとすると、クオリティが下がってしまうこともあります。その点、HTML資料は編集も再利用も効きます。
| 観点 | スライド生成AI（画像出力） | GEMで作るHTML資料 |
|---|---|---|
| 編集のしやすさ | 画像なので修正しづらい | 文章・装飾を後から自由に変更 |
| 共有・公開 | ファイルを送付 | Googleサイト埋め込みで即共有 |
| 書き出し | 形式が限られる | PDF・HTMLコードに書き出し可 |
| デザインの統一 | 毎回ばらつく | GEMに登録して毎回同じ体裁 |
企業や教育機関でGoogleのエコシステムを使っている方なら、この連携の相性の良さは大きなメリットになります。まずは自分の環境で、どこまで資料作成を任せられるかを試してみるのがおすすめです。
補足すると、実際の現場でClaude CodeやCodexのようなターミナル型のツールを日常業務で回している人は、まだ多くありません。主流はChatGPTやGemini、Claudeといったブラウザ上のチャット形式です。だからこそ、ブラウザだけで完結する今回の方法は、専門知識がなくても誰でもすぐに真似できます。
GEMとは？｜Claude Codeのスキルに近い自分専用AI
GEMは、繰り返し行う作業のプロンプトをあらかじめ登録しておける、Geminiのカスタム機能です。Claude Codeを使っている方なら、スキルのようなものだとイメージすると分かりやすいはずです。指示を固定できるので、毎回同じ長いプロンプトを打つ手間がなくなります。
カスタム指示に資料作成のルールを書き、知識（ナレッジ）にデザインのファイルを登録しておく。すると、出力の形式は安定したまま、中身だけが必要に応じて更新される、という仕組みになります。これが毎回同じデザインで資料を量産できる理由です。
この考え方はGeminiに限りません。ChatGPTのGPTなど他のチャット型AIでも、同じように自分専用の仕組みを作れます。使い方の考え方さえ押さえておけば、道具は使い慣れたもので構いません。
| 項目 | 内容 | 出典（2026年7月時点・公式参照） |
|---|---|---|
| 料金 | 無料プランを含む全プランで利用可（Googleアカウント・13歳以上） | gemini.google |
| 知識ファイル | 1つのGEMにつき最大10ファイル（PDF・文書・スプレッドシート） | Geminiヘルプ |
| Drive連携 | Workspace利用時はGoogle Driveと直接接続し自動更新 | Geminiヘルプ |
GEMの活用例は資料作成だけではありません。プロンプト自体を自動生成させる使い方もあります。あわせてこちらもどうぞ：Gemini Gemでプロンプト自動生成！AIフードトーク動画を量産する方法
【入門編】4ステップでHTML資料を作る
ここからは実際の手順です。最初にGEMを1つ作ってしまえば、2回目以降は内容を投げるだけになります。今回は基本を押さえる入門編から始め、後半で画像を埋め込む中級編まで解説します。まずは土台となるGEMを用意していきましょう。
step
1GeminiでGEMの機能を開く
GoogleのGeminiを開いたら、画面のGEMの項目をクリックします。ここが自分専用のAIを登録していく入り口になります。Googleアカウントでログインさえ済んでいれば、すぐに使い始められます。
step
2GEMを作成してカスタム指示を貼り付ける
GEMを作成をクリックし、カスタム指示の欄に資料作成用のプロンプトを貼り付けます。名前は自分が分かりやすいように、HTML資料作成などと付けておけば十分です。この指示が、毎回安定して動く資料作成の型になります。
配布プロンプトを使うと早い
カスタム指示はゼロから書かなくても大丈夫です。今回そのまま使える指示プロンプトを公式LINEで無料配布しています。貼り付けるだけで同じ資料が作れるので、手を動かして試したい方はぜひ受け取ってください。
step
3知識にデザインのファイルを登録する
次に、資料のデザインを決めるファイルを知識の欄に登録します。デザインをマークダウン形式のファイルにしてアップロードするか、コードをインポートからGitHub上のデザインを引っ張ってくる方法もあります。ここを登録しておくと、毎回同じ見た目で出力されます。
step
4テンプレのプロンプトで資料を生成する
保存できたら、あとはチャットで内容を投げるだけです。毎回送るテンプレを用意しておくと便利で、日付・タイトル・発信者・伝えたいことを埋めて送信します。伝えたいことは箇条書きでも構いません。
# 資料作成テンプレ（チャットに毎回貼る）
日付：2026/07/18
タイトル：（資料のタイトル）
発信者：（あなたの名前）
伝えたいこと：
- （箇条書きで要点を並べる）
上記の内容で、視認性を上げたドキュメント形式の会議資料を作成してください。
送信すると、背景が真っ白ではなく薄いクリーム色の、印刷にも画面表示にも見やすい資料が出てきます。GEMさえ作っておけば、音声入力と組み合わせて2〜3分で作れるのが最大のメリットです。
【中級編】資料に画像を埋め込む｜マイドライブ＋共有設定
資料に画面のスクショや用意した画像を入れたい場面もあります。ここでGoogle Workspace連携の強みが効いてきます。まずは埋め込みたい画像を、自分のマイドライブにアップロードしておきましょう。
注意したいのは共有設定です。設定を間違えると、資料側で画像が表示されません。下のポイントを先に押さえておくと、つまずかずに進められます。
- 画像を入れたフォルダを、リンクを知る全員が閲覧者の権限になるよう設定する
- 画像単体の共有設定でも、同じく閲覧者の権限を付けておく
- リンクをコピーの項目から、画像のURLを取得しておく
URLを取得できたらGeminiに戻り、この画像URLを資料の中に埋め込んでください、と指示を出します。するとHTMLファイルの中に画像が組み込まれ、スクショ入りの分かりやすい資料が完成します。文章だけでは伝わりにくい操作説明も、これで一気に伝わりやすくなります。
手順を説明する資料では、この画像の埋め込みが特に効いてきます。操作画面のスクショが1枚あるだけで、読み手の理解度は大きく変わります。テキストと画像を自由に組み合わせられるのは、HTML資料ならではの強みです。
完成した資料の活用｜PDF・Googleサイト埋め込み・コード書き出し
資料が完成したら、用途に合わせて書き出します。コードの項目をクリックすると、CSS付きのHTMLコードが表示されます。エクスポートで全体をコピーできるので、まずはこのコードを手元に控えておきましょう。
Googleサイトに載せたい場合は、埋め込みから埋め込みコードの欄に、先ほどのコードを貼り付けます。プレビューすると、作った資料がそのままページに表示されます。会議資料をストックして共有していきたいときに、とても便利な方法です。
PDFで渡したいときは、PDFにしてと伝えるだけです。改めてPDFファイルを作り直してくれます。1つの資料を、Web共有用のGoogleサイト、印刷や配布用のPDF、埋め込み用のコードと、目的別に出し分けられるのは大きな利点です。GoogleドキュメントやWordで一から作っていた作業が、デザインの型さえあれば一気に楽になります。
さらに便利にするコツ｜音声入力で話すだけ資料化
今回の方法は、無料の機能だけで始められます。あえて何か1つ整えるとすれば、音声入力の環境です。伝えたいことを箇条書きで打つ代わりに、話すだけで内容を渡せるようになると、資料作成はさらに爆速になります。
僕自身はAquaVoiceやSuperWhisperといった音声入力ツールを使っています。デザインの型をGEMに作り、あとは音声でどんな資料が欲しいかを投げる。この流れだけで、会議資料を毎回一から作る作業から解放されます。話しながら要点を伝えれば、あとはGEMが体裁を整えてくれるので、思考の流れを止めずに資料化できるのも快適です。
まとめ｜無料のGEMで資料作成の型を持とう
GeminiのGEM機能を使えば、スライドではないHTML形式の資料を、無料で・毎回同じデザインのまま作れます。一度型を作ってしまえば、あとは内容を渡すだけで完成します。
- GEMは繰り返す指示を保存する仕組み。Claude Codeのスキルと同じ感覚で使える
- 知識にデザインを登録すれば、毎回同じ体裁のHTML資料が最短3分で完成
- マイドライブの共有設定を整えれば、資料に画像も埋め込める
- 完成後はPDF・Googleサイト埋め込み・コード書き出しまで自由に活用できる
会社員の方や教育現場の方こそ、この資料作成の型を1つ持っておくと日々の作業がぐっと軽くなります。作ってみた資料は、XやYouTubeのコメントでぜひ教えてください。Google WorkspaceとAIの連携をもっと知りたい方は、こちらの記事もあわせてどうぞ：Gemini Gemでプロンプト自動生成！AIフードトーク動画を量産する方法
今回の記事が参考になった方は、YouTubeチャンネルの登録もあわせてよろしくお願いします。それではまた次の記事でお会いしましょう。
プロンプト配布中
LINE公式アカウントを友達追加していただければ、本記事やYouTubeで使用した使用したプロンプトを配布いたします。メンバーシップ登録で優先サポートも実施中です。
YouTubeメンバーシップ登録について
より実践的なAI活用法については、メンバーシップ限定コンテンツで深掘りしていますので、興味がある方はぜひご参加ください。
YouTube内で使用したプロンプトやより実践的なAIno活用方法を発信しています！メンバー限定の特典もありますので、以下のリンクから登録お願いましす。
YouTubeメンバーシップ登録について
Game & AI のルーティンラボ。AIと人間の共同制作で生まれたブラウザゲームを、ぜんぶ無料でインストール不要、開いたら即プレイ可能です！
こちらの動画もおすすめ
おすすめAIツール
DomoAI無料体験こちら
10%OFFクーポンコード：7VVTQQZ5
年間プランが最大40％OFF
本ブログ「ルーティンラボ」では、他の記事で様々なAIやI Tに関するツールについて紹介しています。
他にもITスキルを高めてキャリアアップや副業の役立つ情報の発信もしています。ぜひチェックしてみてください。
