構成と原稿が固まったら、AIへHTMLの制作を依頼します。
大切なのは、見た目だけでなく、受講者が書き込み、制作者が修正し、保存後も使える形にすることです。
まず完成見本で操作を確かめ、同じ条件を自分の生成依頼へ入れましょう。
A4のページ境界、記入欄、解答、保存方法までが制作範囲です。
この記事で学ぶこと
- AIへ構成・原稿・印刷条件を渡す。
- 編集できるA4のHTMLを生成する。
- 編集内容を保存し開き直す。
生成前に渡す材料を一組にする
AIへ渡すのは、研修条件、元情報AとB、8ページの構成、確定原稿、解答と評価基準です。
ファイル名を付けて作業フォルダへまとめ、どれが正本かを依頼文に書きます。
以前の案内や練習用の誤答例が混ざる場合は、その役割も明示してください。
ファイルを読めない環境では、必要な本文を入力欄へ貼り付け、AIが参照した情報を最初に一覧にしてもらいます。
一度に「おしゃれな教材を作って」と頼むと、原稿まで書き換えられることがあります。
初回は構成と不足事項の確認だけを依頼し、矛盾を直してからHTMLの生成へ進みます。
「確定情報は変更しない」「不明点は推測しない」「誤答例の五つの誤りは問題として保持する」と指定します。
教材内で意図的に残す誤りと、制作上の誤りを分けるためです。
生成後の保存先も具体的に書きます。
例えば「作業フォルダのsample/完成見本.htmlへ保存。元情報は上書きしない」とします。
AIがコードを会話へ出すだけの環境では、HTML全体をテキストエディターへ保存し、拡張子が.htmlになっているか確かめます。
HTMLを開いて内容が見えれば、ファイルとしての確認へ進めます。
実行できない場合は完成扱いにしないでください。
印刷と編集の条件を指示する
表示条件は、A4縦、全8ページ、日本語本文は読みやすい大きさ、各ページに番号、白黒でも情報が区別できることです。
見本は余白を確保し、本文を画像にせずHTMLの文字として置いています。
画像だけの教材では、語句の変更や検索が難しくなります。
長い説明や日付、解答は編集できる文字にし、図が必要な場合だけ別の素材を使います。
操作条件には、本文を編集するボタン、回答を入力できる欄、編集内容を含めてHTMLを保存する機能、印刷ボタンを含めます。
ブラウザーの画面上で変更できても、保存されなければ再利用できません。
また、印刷時には操作ボタンを消し、回答欄の入力内容を表示するよう指定します。
自動保存の有無は実装に合わせて案内し、未実装の機能を説明に書かせないでください。
画面ではページを縦に並べ、狭い画面では横にはみ出さず読めるようにします。
一方、印刷時はA4の区切りを保ちます。
スマートフォンの表示と印刷の寸法を同じ仕組みで無理に固定すると、どちらかで崩れやすくなります。
AIへ「画面用と印刷用のスタイルを分ける」と依頼し、両方を実物で確認してください。
出力条件は無料の工程別指示文にもまとめています。
初稿は内容と操作を先に確かめる
HTMLができたら、最初に8ページがあり、必要な情報と解答が入っているか見ます。
名称や日時、AとBの会場条件、練習1の誤りの数を元情報と照合します。
見た目の印象が良くても、会場未確定の練習に確定した場所が入っていたら修正が必要です。
情報を確認してから、見出しや余白などの表示を点検すると手戻りを抑えられます。
次に、編集ボタンを押して短い語句を変更し、回答欄へ試しの回答を入れます。
HTMLを保存し、保存先に新しいファイルがあるか確認してください。
画面の成功メッセージだけではなく、そのファイルを開き直して変更が残っているか見ます。
元の見本へ試験回答を混ぜないように、検証用のコピーで操作することをおすすめします。
生成したHTMLの動作が見本と違っても、見た目が似ているだけで同等とは判断しません。
保存後に回答が消える、編集ボタンまで印刷される、ネット接続がないと本文が表示されない、といった問題を確認します。
自分で直せない場合は、起きた操作と結果をAIへ伝えます。
「保存を押した後に開き直すと回答欄だけ空になる」と、再現手順を具体的に書きましょう。
保存とPDF書き出しを別の作業にする
見本の「HTMLを保存」は、その時点の文章と回答を含むファイルをダウンロードします。
開いている元ファイルへ自動的に上書きする機能ではありません。
変更後は必ず保存し、ファイル名と保存先を確認してください。
複数の版ができたら、最新版を日付や版番号で区別します。
ブラウザーを閉じる前に保存しないと、入力内容が失われる可能性があります。
PDFは最終HTMLから印刷機能で書き出します。
ブラウザーの印刷画面でA4、縦向き、倍率100%、余白なし、ヘッダーとフッターをオフにし、プレビューが8ページか確認します。
背景グラフィックを有効にすると見本に近い表示になりますが、白黒でも内容を判別できる設計にします。
環境によって表示名が違うため、完成PDFのページ数と見切れを必ず点検してください。
HTMLを修正しても、以前に保存したPDFは更新されません。
本文や解答を変えたらPDFを書き出し直し、版番号をそろえます。
HTMLの入力欄とPDFの役割を受講者にも説明しましょう。
画面で記入する人はHTML、手書きする人は印刷したPDFを使います。
この区別が曖昧だと、PDFで入力できないことを教材の不具合と誤解させてしまいます。
AIには問題箇所を限定して修正させる
初稿の修正では、場所、問題、希望する状態、固定条件を伝えます。
「5ページ目の回答欄が短い。内部下書きを6行書けるようにする。Bの元情報と公開判断欄は残す」のように頼みます。
全体を作り直す依頼は、直っていた元情報や解答まで変わる可能性があります。
必要な範囲だけを変更し、変更後は該当ページと関連する解答を確認します。
内容があふれたときは、文字を小さくする前に、重複説明や不要な余白を見ます。
ただし、記入欄は学習に必要な余白です。
空いて見えるからといって削らないでください。
説明の短縮で条件を落としたり、回答欄を隠したりする修正は避けます。
制約の中で収まらなければ、ページ構成へ戻って情報量を見直します。
修正のたびに、変更前のHTMLと確認結果を残します。
新しい版が良くなったかは、見た目だけでなく、条件を満たし操作できるかで判断します。
AIが「修正済み」と答えても、保存した実物を開き直して確かめてください。
再生成に成功したことと、教材の納品条件を満たしたことを分ける習慣が、実務での事故や手戻りを減らします。
実践課題
実践課題：編集と保存を実物で確認する
工程別の指示文を使って、確定した原稿からA4のHTMLを作ります。
完成見本を使う場合は、コピーを用意して本文の一文と回答欄を編集してください。
保存したHTMLを開き直し、文章と回答の両方が残るか確認します。
続いてPDFを書き出し、8ページで操作ボタンが印刷されていないかを点検します。
- 固定条件と構成をAIへ渡す。
- 8ページのHTMLで文字を編集する。
- 保存したHTMLを開き直す。
確認例は「研修名の補足を変更し、練習1の1欄目へ試験回答を入れ、保存後に再表示できた」です。
PDFへ回答が反映されなければ、書き出した元のHTMLが正しいか確認します。
内容を変えていない配布用の見本と、試験回答を入れた検証用ファイルは分けてください。
作業記録にはファイル名、確認した環境、結果、残った問題を短く残します。
自己確認
- AIへ構成・原稿・印刷条件を渡す。
- 編集できるA4のHTMLを生成する。
- 編集内容を保存し開き直す。
まとめ
AIへの依頼には、内容だけでなく編集、保存、印刷の条件も必要です。
元情報と解答を照合し、編集したHTMLを保存して開き直し、その最終版からPDFを書き出しましょう。
見本の機能が動くことと、自分で新しく生成したファイルの機能が動くことは別です。
自分の成果物で同じ確認を行い、次の工程で読みやすさと記入のしやすさを整えます。
- AIへ構成・原稿・印刷条件を渡す。
- 編集できるA4のHTMLを生成する。
- 編集内容を保存し開き直す。
