AIで編集できるA4テキストを作り、保存する

構成と原稿が固まったら、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ページで操作ボタンが印刷されていないかを点検します。

確認例は「研修名の補足を変更し、練習1の1欄目へ試験回答を入れ、保存後に再表示できた」です。PDFへ回答が反映されなければ、書き出した元のHTMLが正しいか確認します。内容を変えていない配布用の見本と、試験回答を入れた検証用ファイルは分けてください。作業記録にはファイル名、確認した環境、結果、残った問題を短く残します。

まとめ：生成したファイルを使って確かめる

AIへの依頼には、内容だけでなく編集、保存、印刷の条件も必要です。元情報と解答を照合し、編集したHTMLを保存して開き直し、その最終版からPDFを書き出しましょう。見本の機能が動くことと、自分で新しく生成したファイルの機能が動くことは別です。自分の成果物で同じ確認を行い、次の工程で読みやすさと記入のしやすさを整えます。

自社の制作へ取り入れる

自社の制作物と判断に迷う工程を整理し、法人研修・AI導入支援の内容をご覧ください。