構成、本文、図表の条件がそろったら、AIへデザインとHTMLの制作を依頼します。
読みやすい見た目に加え、文章を直して保存できること、PDFに出しても根拠や図表が欠けないことが必要です。
完成見本の操作を先に試し、同じ条件を自分の依頼へ入れましょう。
生成された画面だけでなく、保存した実物を確認します。
この記事で学ぶこと
- 構成・本文・図表条件をAIへ渡す。
- A4の編集可能なHTMLを生成する。
- 保存・再表示とPDF出力を確認する。
確定した材料をまとめて渡す
AIへは元情報、出典台帳、構成表、確定本文、図表用CSVを渡します。
それぞれのファイル名と役割を依頼文に書き、何を正本とするかを示してください。
「ホワイトペーパーを作って」だけでは、新しい統計や事例をAIが追加することがあります。
まず材料の不足と矛盾を確認させ、内容が固まってから見た目の制作へ進みます。
依頼の固定条件は、架空の10件、4・3・2・1件の集計、三つの確認条件、効果未検証、8ページの順序です。
担当や更新方法の仮設定もS2のまま使います。
レイアウトの都合で本文を短くしてよい場合も、どの条件を残すかを指定してください。
出典や限界を削って見栄えを整える提案は、完成条件に反します。
保存先は作業フォルダ内のsample/完成見本.htmlなど、具体的に決めます。
AIがコードを会話へ出すだけの場合は、HTML全体をテキストファイルとして保存し、拡張子を.htmlにします。
生成したコードの一部だけを保存すると表示や操作が動かない場合があります。
ファイルを開き、8ページが表示されたことを確認してから、内容と操作を点検します。
文字と図表の階層を設計する
A4縦の紙面では、表紙の大見出し、ページごとの結論、本文、図表の注記を段階的に見せます。
本文を全部太字にすると、何を先に読むか分かりにくくなります。
最も伝えたい結論を大きくし、理由と条件をその近くへ置いてください。
出典や架空表示は補足ですが、読めない大きさへ追いやってはいけません。
余白は、別の話題との区切りと、同じ話題のまとまりを示すために使います。
グラフとその注記を離しすぎず、比較表と選び方の説明を同じページへ置きます。
今回の確認表には記入欄もあるため、空白をすべて詰めないようにします。
装飾画像を増やすより、読む順番と根拠の対応が見える配置を優先してください。
色だけで意味を伝えないことも大切です。
未確認の条件は色の印に加え「未確認」と書き、グラフには分類名と数値を付けます。
白黒印刷や狭い画面でも意味が残るか確認しましょう。
本文や日時を画像にせずHTMLの文字にすると、後の修正と検索がしやすくなります。
図表も今回のような単純な形なら、文字とコードで組む方法が適しています。
編集と保存の機能を指定する
見本には「本文を編集」「HTMLを保存」「印刷 / PDF」の操作があります。
本文編集を有効にすると説明文を変更でき、記入欄にはそのまま入力できます。
HTML保存は、その時点の内容を別ファイルとしてダウンロードします。
自動保存や、元ファイルへの自動上書きではありません。
変更後は保存したファイルを開き直して、文章と記入内容を確認してください。
図表の値やリンク先の変更は、本文編集だけで完了するとは限りません。
見本のグラフはCSVと自動同期せず、リンクの表示文字を変えてもURLは変わりません。
数値や遷移先を変更する場合は、AIへ対象箇所と新しい値を指定してHTMLを修正し、元情報と照合します。
何が画面で編集でき、何が構造の修正を必要とするかを使い方に書きましょう。
生成した自分のHTMLでも同じ機能が動くか試します。
短い文章を変え、確認表へ試験入力をし、保存した別ファイルを開き直します。
表示された内容が保存されていなければ、再利用できる成果物とは言えません。
AIへ不具合を伝える際は、「保存後に確認表だけ空になる」など操作と結果を具体的に書き、修正後も同じ手順で確かめます。
画面と印刷を別々に点検する
画面ではPC幅と狭い幅で読みやすいか確認します。
A4の横幅をそのままスマートフォンへ押し付けると、本文が小さすぎたり横へはみ出したりします。
画面用は縦に読み進められる形にし、印刷用はA4のページを保つようAIへ指定します。
画面で読めることと、印刷で8ページに収まることは別の確認項目です。
PDFはA4縦、倍率100%、余白なし、ブラウザーのヘッダーとフッターをオフにして書き出します。
背景グラフィックを有効にすると見本に近い表示になりますが、色がなくても意味が通る設計にします。
印刷プレビューが8ページか確認し、余分な白紙や切れた表があれば修正します。
印刷設定の名称は環境によって違うため、出力したPDFそのものを開いてください。
PDFでは本文の検索、図表の数値、リンクの遷移先も確認します。
操作ボタンが印刷されていないか、出典がページ外へ落ちていないかを見ます。
HTMLを変えても以前のPDFは自動更新されません。
最終HTMLから作り直し、同じ版として保存してください。
ファイル名にも版を残すと、旧版との取り違えを減らせます。
紙へ印刷していない場合は、紙での可読性や手書きの確認は未実施と記録します。
修正する範囲と保つ条件を分ける
初稿の修正は、ページ、問題、望む状態、固定条件の順で依頼します。
「3ページ目の注記が小さいので、読みやすい大きさへ変更する。グラフの4・3・2・1、0始点、S1と架空表示は保つ」のように指定します。
全体を作り直す依頼より、内容の回帰を確認する範囲を絞りやすくなります。
変更後は図と注記を一緒に確認してください。
表が収まらない場合は、文字を小さくする前に説明の重複や列の役割を見ます。
表内の長い理由を下の本文へ移す、比較軸を絞るなどの方法があります。
ただし、未確認や不向きな条件だけを削って、自社の提案を有利に見せないようにします。
レイアウトの修正でも判断材料の意味は変えません。
改訂ごとに版と変更理由を残します。
AIが修正済みと答えたことを完了の証拠にせず、保存したHTMLとPDFを開いて確かめます。
編集元、図表データ、出典台帳がそろっていれば、後の更新も追いやすくなります。
見本の検証結果を、自分が新しく生成したファイルにもそのまま当てはめず、自分の成果物で同じ確認を行いましょう。
実践課題
実践課題:編集したHTMLとPDFを開き直す
工程別の指示文を使って、自分の構成と本文からA4のHTMLを生成します。
完成見本を使う場合はコピーを作り、一文と確認表を編集してください。
HTMLを保存して開き直し、変更が残るか確かめます。
続いてPDFを書き出し、8ページ、図表、出典、操作UIの非表示を確認します。
- 固定条件と原稿をAIへ渡す。
- HTMLを編集して保存する。
- 保存したHTMLとPDFを開き直す。
確認例は「要約の補足を変更し、確認表へ担当確認中と入力。保存後のHTMLとPDFに反映できた」です。
グラフの数字を変える練習は別の検証版で行い、CSV、棒の長さ、説明の更新も必要だと記録します。
配布用の空欄版へ試験入力を混ぜないでください。
確認環境、ファイル名、結果、残った問題を制作シートへ残します。
自己確認
- 構成・本文・図表条件をAIへ渡す。
- A4の編集可能なHTMLを生成する。
- 保存・再表示とPDF出力を確認する。
まとめ
AIへは確定した本文と根拠に加え、編集、保存、画面表示、印刷の条件を渡します。
文章を変えたHTMLを保存して開き直し、最終版からPDFを出しましょう。
図表やリンク先は別途照合が必要です。
内容を保持しながら部分修正し、見本と自分の成果物の検証を分けることで、納品後にも使える資料になります。
- 構成・本文・図表条件をAIへ渡す。
- A4の編集可能なHTMLを生成する。
- 保存・再表示とPDF出力を確認する。






