GeminiのGemでHTML資料を自動作成する方法｜コピペで使えるプロンプト全文付き
はじめに
Geminiの「Gem」を使うと、毎回細かい指示を書かなくても、一定の構成・デザインで資料を作成できます。
今回は、入力した文章やスクリーンショットをもとに、以下のような資料を生成するGemを作成します。
- HTML形式の会議資料
- 手順書
- 社内向け説明資料
- 操作マニュアル
- 図解入りの案内資料
一度Gemを設定すれば、毎回入力するのは基本的に次の情報だけです。
- 日付
- タイトル
- 発信元
- 資料に記載したい内容
- 必要に応じてスクリーンショット
この記事では、Gemの「指示」に設定するプロンプトと、「知識」に登録するデザイン仕様を全文掲載します。
完成イメージ
今回作成するGemでは、資料を次の構成で出力します。
- タイトル・発信元・日付
- 資料全体を表すアイキャッチ画像
- 目次
- 各セクションの説明
- セクションごとの図解
- 手順・注意事項
- まとめ・お願い
デザインについても、色・レイアウト・図解の雰囲気をあらかじめ固定します。
これにより、資料を作成するたびにデザインや構成が大きく変わることを防げます。
Gemの作成手順
Geminiを開き、Gemの新規作成画面から設定を行います。
主に設定するのは次の2か所です。
- 「指示」：資料作成時の役割・構成・出力ルール
- 「知識」：配色やレイアウトなどのデザイン仕様
まずは、「指示」に資料作成のルールを登録します。
1. Gemの「指示」に設定するプロンプト
以下の内容を、Gemの「指示」欄へ貼り付けます。
{組織・チーム名}、{資料の種類}、{発信元}は、自分の用途に合わせて書き換えてください。
GEM システム指示
# 役割
あなたは「{組織・チーム名}」の資料作成アシスタントです。
利用者が渡す「その回の画像」と「口頭または文章の説明」から、
{資料の種類}用の分かりやすい資料を作成します。
# 毎回の入力
- その回のスクリーンショットや写真（複数可）
- 内容の説明（音声または文章）
- 日付・タイトル（指定が無ければ必ず聞き返す）
# 出力
- Canvas に、下記デザインに厳密に従った1本の資料（HTML）を作成する。
- そのままGoogleドキュメントに書き出せる形にする。
# 資料の構成（この順で固定）
1. タイトル（大見出し）＋発信「{発信元}」＋日付
2. アイキャッチ画像（資料全体を表す図解イラスト。下記スタイルで生成）
3. 「本資料の内容」＝番号付きの目次＋各項目に1行の説明
4. 各セクション：見出し → その節を1枚で図解したイラスト → 本文（手順・注意・箇条書き）
5. まとめ・お願い
# 文体
- ですます調。結論・お願いを先に、手順を後に。見出しと箇条書きで拾い読みできるように。
# デザイン（配色・見た目）
- 背景＝パーチメント #f6f2e9 ／ 面＝#fffdf8 ／ 本文＝#241f18
- アクセントは2色のみ：アンバーゴールド #b9791a（強調・章番号）＋ティール #2f6f68（小見出し）
- 罫線 #e2d9c6。角丸・ヘアライン・背景の明度差で構造を出す。
- 使わない：色付きの左アクセントバー／絵文字の箇条書き／紫・原色／濃いダーク背景。
# イラスト（各画像）
- 温かいクリーム地に、太い手描き風の輪郭線で描く「図解インフォグラフィック」。
- くすんだレトロ配色（テラコッタ／ティール／マスタード／セージ）。平面フラット・影は最小。
- 図解の中に短い日本語ラベル・見出しを入れる（上部に見出し＋各アイコン下に2〜6字ラベル＋矢印）。
# 守ること（重要）
- 外部に出る可能性がある表現では、特定の個人名・組織名を書かない（発信は「{発信元}」）。
- 画像内の日本語ラベルは短く。生成後に文字が崩れていたら作り直す。
- 情報が足りないときは推測で埋めず、利用者に一言確認する。
プレースホルダーの書き換え例
例えば、社内のITチームで操作手順書を作成する場合は、次のように設定できます。
{組織・チーム名}
→ 情報システム部
{資料の種類}
→ 社内向け操作手順書
{発信元}
→ 情報システム部
変更後の冒頭部分は次のようになります。
# 役割
あなたは「情報システム部」の資料作成アシスタントです。
利用者が渡す「その回の画像」と「口頭または文章の説明」から、
社内向け操作手順書用の分かりやすい資料を作成します。
用途が決まっている場合は、抽象的な表現よりも、作成する資料の種類を具体的に指定した方が出力が安定します。
2. Gemの「知識」に登録するデザイン仕様
次に、デザインに関するルールをGemの「知識」へ登録します。
以下の内容を、Googleドキュメントやテキストファイルなどに保存して、Gemの知識ファイルとして添付します。
デザイン仕様（知識に添付）
【配色トークン（この色だけを使う）】
背景 #f6f2e9 （パーチメント地）
面・カード #fffdf8
淡いパネル #f0ead9
本文 #241f18
補足テキスト #8a7f6d
罫線 #e2d9c6
主アクセント アンバーゴールド #b9791a（濃い #8a5a10）
副アクセント ティール #2f6f68
注意ボックス 背景 #f6e7cd ＋ 枠 #b9791a
【レイアウトの型】
- タイトルは太字・大きめ。章番号はゴールドの丸バッジ。小見出しはティール。
- 章ごとに「見出し → 図解イラスト → 本文」。手順は番号付き、注意は淡ゴールドの箱。
- カード・画像・箱はすべて角丸＋細いヘアライン枠。影はごく薄く。
【完成例のイメージ（自分の題材に置き換える）】
{資料の種類}の連絡資料：
各章の冒頭に、日本語ラベル入りの手描き図解を1枚ずつ配置する。
ここに記載された色やレイアウトを、Gemが資料作成時の基準として参照します。
指示欄だけにデザインルールを記載することもできますが、知識ファイルとして分離しておくと、後からデザインだけを修正しやすくなります。
3. 毎回Gemに送る依頼テンプレート
Gemの設定が完了したら、資料を作成するたびに次のような内容を送ります。
以下の内容で資料を作成してください。
日付：
2026年8月3日
タイトル：
新しい勤怠管理システムの利用方法
発信元：
情報システム部
資料の目的：
新しい勤怠管理システムのログイン方法と、出勤・退勤の登録方法を社員へ説明する。
伝えたい内容：
- 2026年9月から新システムへ切り替える
- 初回ログイン時にパスワード変更が必要
- 出勤時と退勤時に打刻する
- 打刻を忘れた場合は修正申請を行う
- 不明点は情報システム部へ問い合わせる
添付画像：
- ログイン画面
- 打刻画面
- 修正申請画面
スクリーンショットを添付する場合は、それぞれの画像が何を示しているのかも記載すると、より正確な資料になります。
4. 出力が安定しない場合の追加指示
Geminiは、同じ指示でも出力ごとに構成やデザインが変わる場合があります。
その場合は、毎回の依頼に次の指示を追加します。
登録されているシステム指示とデザイン仕様を必ず確認してください。
資料の構成順、配色、レイアウトを変更しないでください。
独自の色やデザインを追加しないでください。
資料作成前に不足情報を確認し、情報が揃ってからHTMLを生成してください。
また、いきなりHTMLを作成させるのではなく、先に構成案を確認する方法も有効です。
すぐにHTMLを作成せず、最初に資料の章構成と各章の要点を提示してください。
私が承認した後にHTMLを作成してください。
この一文を追加することで、想定と異なる構成の資料が完成するリスクを減らせます。
5. 実務で利用する際の注意点
機密情報を入力しない
社内資料を作成する場合は、次のような情報をそのまま入力しないよう注意が必要です。
- 個人情報
- 顧客情報
- パスワード
- APIキー
- アクセストークン
- 非公開のシステム構成
- 社外秘の契約情報
スクリーンショットに機密情報が含まれている場合は、事前にマスキングしてから使用します。
生成内容を必ず確認する
Geminiが作成した資料には、入力していない内容や不正確な説明が含まれる可能性があります。
特に次の内容は、公開前に人が確認する必要があります。
- 日付
- 数値
- 固有名詞
- 操作手順
- URL
- 問い合わせ先
- システムの仕様
画像内の日本語は崩れる場合がある
AIが生成する図解画像では、日本語が正しく表示されないことがあります。
文字が崩れる場合は、次のいずれかで対応します。
- 日本語ラベルを短くする
- 図解には文字を入れず、HTML側で説明を追加する
- 画像を再生成する
- 図解部分のみ別のツールで作成する
業務資料では、図解画像の中に重要な文章を入れすぎない方が安全です。
まとめ
GeminiのGemに資料作成ルールを設定しておくことで、毎回ゼロから構成やデザインを指示する必要がなくなります。
今回の設定では、次の内容を固定しています。
- 資料の構成
- 文体
- 配色
- レイアウト
- 図解のテイスト
- 情報不足時の確認ルール
- HTML形式での出力
ただし、Gemを設定しただけで常に完璧な資料が完成するわけではありません。
実務で安定して利用するためには、次の流れがおすすめです。
- 日付・タイトル・目的・内容を入力する
- Gemに不足情報を確認させる
- 先に章構成を出力させる
- 構成を確認する
- HTMLを生成させる
- 内容とデザインを人が確認する
資料作成の型をGemに覚えさせることで、作業時間を短縮しながら、資料全体の統一感も保ちやすくなります。