LINEスタンプ販売中!
←前のレッスン元データから図表を作り、数字の意味を正確に伝えるAIでつくるホワイトペーパーコース

コース責任者:ヨハク先生

AIでA4のHTMLを制作し、編集とPDF出力を確かめる

このレッスンの担当:ヨハク先生

構成・本文・図表条件をAIへ渡す。

デザイン | レッスン 06 | 実践

この端末に保存

構成、本文、図表の条件がそろったら、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の非表示を確認します。

  1. 固定条件と原稿をAIへ渡す。
  2. HTMLを編集して保存する。
  3. 保存したHTMLとPDFを開き直す。

確認例は「要約の補足を変更し、確認表へ担当確認中と入力。保存後のHTMLとPDFに反映できた」です。

グラフの数字を変える練習は別の検証版で行い、CSV、棒の長さ、説明の更新も必要だと記録します。

配布用の空欄版へ試験入力を混ぜないでください。

確認環境、ファイル名、結果、残った問題を制作シートへ残します。

自己確認

  • 構成・本文・図表条件をAIへ渡す。
  • A4の編集可能なHTMLを生成する。
  • 保存・再表示とPDF出力を確認する。

まとめ

AIへは確定した本文と根拠に加え、編集、保存、画面表示、印刷の条件を渡します。

文章を変えたHTMLを保存して開き直し、最終版からPDFを出しましょう。

図表やリンク先は別途照合が必要です。

内容を保持しながら部分修正し、見本と自分の成果物の検証を分けることで、納品後にも使える資料になります。

  • 構成・本文・図表条件をAIへ渡す。
  • A4の編集可能なHTMLを生成する。
  • 保存・再表示とPDF出力を確認する。

参考資料

無料配布セット:元情報・出典台帳・CSV・指示文・完成見本
展開後にはじめに.htmlを開きます。教材費0円、AI利用枠は別です。

A4縦8ページのホワイトペーパー完成見本
文章を編集してHTMLを保存できます。図表の数値はCSVと照合し、変更時は図表も更新します。

Codex公式クイックスタート
2026年10月8日確認。利用条件は受講時も公式情報を確認してください。

次に知りたいことは?

仕事で困っていることを、次の教材づくりに生かします。

困りごとを送る

チームのホワイトペーパー制作を整えたい方へ

制作物と確認に迷う工程を整理して、法人研修・継続支援の内容をご覧ください。

法人研修・AI導入支援を見る

学びを共有

学んだことをXに書く

投稿画面が開きます。文章を自分の言葉に直して投稿できます。

Xで学びを投稿する
次のレッスン読後の行動と相談導線を設計し、計測を分ける→
カワイ校長

今日は何学ぶ?

1分でわかる、大学の使い方

「はじめに」でいつでも見られます