1．概要と目的
楽しく勉強したい！
中学生が楽しく学べ、受験対策にも活用できるレスポンシブ教材を、プロンプト一発で生成できる仕組みを共有します。このプロンプトで日本中の勉強する方皆さまが幸せになることを祈っています。
あと、予習にも使えそうですねコレ
-
背景
教材制作には時間とコストが掛かりますが、生成AIとシンプルなプロンプトを組み合わせれば、「完全な HTML コードのみを返す」 形で即座に教材を量産できます。
環境パターン
きれいな表示と長文対応の両方を兼ね備えたClaude3.7であれば1回でうまくいきます。それ以外の場合はChatGPT 4oでスキャンをして、Gemini2.5でHTMLを作るときれいに作れます。
| パターン | 文字起こし | HTML 生成 | 特徴 |
|---|---|---|---|
| 1 | Claude 3.7 | Claude 3.7 | ワンストップで高精度・高速 |
| 2 | ChatGPT 4o | Gemini 2.5 | OCR と生成を分離して最適化 |
2．成果物イメージ
プロンプトで作る教材の構成
解説を先に書くと答えが分かっちゃうので、問題を先に書いて解説を後にしてます。必要に応じて組み替えてください。
| # | シーン | 内容 |
|---|---|---|
| ① | トップページ | 目次・章扉・ポイントカード |
| ② | 問題セクション | 穴埋め問題／タップで解答表示 |
| ③ | 概要とポイント | 攻略法＋図表＋強調カード |
| ④ | 事例セクション | 砕けた口調のワクワク実例 |
| ⑤ | 参考文献ページ | 外部リンク・脚注・ページ番号 |
3．プロンプト文
プロンプト文に教科書やワークをスキャンしたものを一緒に貼り付けて下さい。うちの子が中3なだけで、小学生でも高校生でも社会人でも使えます。冒頭文は自由に書き替えてご使用ください。
目的
・中学３年生が楽しく学べ、受験対策にも使える読みやすい教材を作成する。
出力物
・完全な HTML コードのみを返す（前後の説明文やコメントは不要）。
・スマホ／タブレット／PC 対応のレスポンシブデザイン。
・問題の回答欄は穴埋め式。タップで解答を表示／非表示切替。
文書構成
1. 目次（章・節・項リンク付き）
2. 本文
2.1 問題 ‥ 重要語句の穴埋め・計算問題（高校受験レベル）
2.2 概要とポイント ‥ 単元の要約＋攻略法・考え方・解説
2.3 事例 ‥ 男子中学生がワクワクする実例やトピック（この章のみ砕けた口調可）
※章・節・項には「1. / 1.1 / 1.1.1」形式の階層番号を付与。
記述ガイドライン
・WordPress マガジン系ブログを意識した自然で引き込まれる文章。
・インプット文量の 70％ 以上を維持。
・JTF 日本語標準スタイルガイド準拠。
・一文：1-2 行、段落：3-4 行が目安。
・主語と述語を対応させる。
・箇条書きは番号または記号を使用（中黒のみは禁止）。
・インプット内の既存穴埋め箇所はすべて問題に転用。
デザイン・レイアウト
・背景：白系、アクセント：青／紺。タイトル下にデザイン線。
・フォント：「Yu?Gothic?UI」、階層に応じ 3 段階サイズ。
・強調：太字・下線・マーカー。色分け（確認＝緑／アクション＝青／問題＝赤）。
・表：左端列に番号、列見出しは紺背景＋白文字。
・ポイントや注意はカード風に強調。
・章ごとにページを分割し枠線＋ページ番号を付与。
・表や図・フロー・インフォグラフィックを HTML だけで描画して視覚化。
コード要件
・CSS と共通クラスを style セクションへ集約し再利用。
・JavaScript は最小限（回答欄の表示切替のみ）。
・インライン CSS は極力避け、コードを簡潔に保つ。
・情報誤りを検知した場合は修正し、脚注で明示。
・参考文献・外部リンクを巻末に追加。
出力形式
・ウインドウ幅に応じて自動調整するレスポンシブレイアウト。
・穴埋め回答は overflow しないよう幅を自動制御。
・HTML ファイル全体を出力し、他システムに貼り付ければそのまま動作。
・コードの集約・再利用を徹底し、記述量を最小化しつつ内容を充実させる。
・冒頭と末尾に余計なテキストを付けない（コードのみ）。
インプット：
（次のチャットで指示をしますので、何も出力せずに待機しててください）
4．まとめ
総評
本プロンプトは 「レスポンシブな HTML 教材をワンショットで生成する」 ことに特化しています。JTF 日本語標準スタイルガイドを順守しつつ、再利用性を高めた CSS 設計により、コピペだけで運用可能 な完成度を実現します。
ユースケース
- 定期テスト・高校入試対策プリントの量産
- 塾や学校 LMS への即時コンテンツ投入
- 教員が差分編集して再配布するワークフロー
応用方法
- 学年や教科を切り替えて汎用テンプレート化
- GitHub Actions と連携して自動デプロイ
- JavaScript を拡張してヒント表示やスコアリング機能を追加
このプロンプトを活用し、学習者のモチベーションを高めながら、教材制作工数を大幅に削減していただければ幸いです。
気に言って頂けましたら、ブックマークや 「いいね」 を押して頂けると嬉しいです。