構成ができたら、文章を一から考え直すのではなく、確認済みの情報を見えるページへ変換します。
AIが整った資料を出しても、条件の追加や抜けがないかは別に確認が必要です。
このレッスンでは、文字・色・余白の共通ルールを決め、構成と事実確認表から12枚のHTMLを生成します。
保存して開き直すところまでを初稿の完成とし、見た目の修正に入る前に、内容と操作の両方を確かめます。
この記事で学ぶこと
- 構成と事実確認表をAIへ読み込ませる。
- 判断の順番が分かるHTMLを生成する。
- 初稿を保存して全ページを確認する。
生成へ渡すファイルを揃える
AIへ渡す材料は、元情報、事実確認、課題と選択肢、構成です。
会話で説明した内容だけに頼ると、どの版を使ったか分からなくなります。
作業フォルダに必要なファイルがあるか、実際に開いて内容を確認してから生成を頼んでください。
inputs/相談記録と提供条件.md、work/事実確認.md、work/課題と選択肢.md、work/構成.mdを使います。
未確認の情報はwork/未確認.mdに残します。
ファイル名を変えた場合は指示文側も同じ名前に直し、存在しない資料をAIが読んだことにしないようにします。
Codexの作業対象が「提案資料練習」になっているかも確認します。
別の案件フォルダで実行すると、似た名前の古い資料を使うおそれがあります。
「参照したファイル名と版を先に示す」と依頼し、返答と自分のファイル一覧を照合する方法も使えます。
読み込めないファイルがある場合は、内容を確認できるテキストへ写すか、対応した形式へ出し直します。
見えない内容を推測させて先へ進めないでください。
今回は配布したテキストだけで基本課題が成立し、外部の顧客情報や有料資料を追加する必要はありません。
文字と色の役割を決める
最初にデザイン条件をwork/デザイン.mdへ保存します。
提案では、結論、理由、条件、出典が見分けられることを優先します。
「洗練された感じ」だけでは、初稿の何を確認し、どう直すかが曖昧になるため、文字の役割と使う色を具体的に決めます。
完成見本では白や淡い背景に濃い紺の文字を置き、青緑を強調に使っています。
結論は大きく、本文はその次、出典は補助として分けます。
色を意味なく増やさず、比較表の列や同じ役割の見出しは、ページが変わっても同じ扱いにしてください。
資料は16対9の横長で作ります。
端に文字を寄せすぎず、ページの左右と上下に余白を残します。
情報が入らないときに、全体の文字を一律に小さくする指示は避けます。
重複を削る、条件をまとめる、本文と補足を分けるという順に見直すためです。
画像は内容を理解する補助に使い、費用や比較条件を画像へ埋め込みません。
この見本の表紙には提案書類を表す生成素材がありますが、実際の納品物や顧客の写真ではありません。
素材がなくても判断できる本文を先に作り、必要な場合に限って補います。
初稿の範囲と保存先を指定する
第5工程の生成指示で、参照ファイルとoutputs/提案資料_v1.htmlという保存先を指定します。
HTMLはブラウザーで表示できるファイルです。
コードを自分で書くことを基本課題にはしませんが、AIの保存先と生成内容が意図に合うかは自分で確かめます。
指示には、12枚の構成、全ページの架空表示、根拠のない実績や数値を追加しないことを入れます。
画像を置く余白があるからといって、顧客の声や導入実績を作って埋めません。
情報が足りない場所は、原文の未確認状態を読める形で示します。
操作も完成条件へ入れます。
前後のページ送り、文字を編集する機能、変更したHTMLの保存、印刷時の一枚一ページです。
見た目だけを頼むと、編集後に元へ戻ったり、PDFで操作ボタンが出たりすることがあります。
何をできるファイルにするかまで伝えます。
外部サービスへ送信する機能や申込み処理は必要ありません。
単独のファイルとして使い、全ページの情報を保持します。
生成後はAIの「完成しました」という返答だけで終えず、保存ファイルを開けることを確認します。
見本と同じ見た目になる保証はありません。
保存した初稿を全ページ開く
生成したHTMLをブラウザーで開き、最初から最後までページを送ります。
12枚があるか、案件名と架空表示が残っているか、比較・費用・体制・次の判断が探せるかを確認します。
表紙が整っているだけで、後半も同じ品質と判断しないでください。
最初の確認では、内容の欠落と表示の問題を分けて記録します。
費用ページがないなら構成の欠落、金額はあるが重なって読めないなら表示の問題です。
同じ「分かりにくい」という言葉でまとめるより、どちらを直す必要があるかが明確になります。
文字を一箇所だけ変更し、保存機能で別名のHTMLを作って開き直します。
元のタブが変わっただけでは、保存が成功したとは言えません。
基本課題の見本には文字編集と保存のボタンがあります。
自分の生成物で機能しない場合は、その操作と結果をAIへ伝えます。
初稿の確認結果は制作シートへページ番号付きで残します。
「6枚目の内製工数がゼロと書かれている」「10枚目の税別表示が小さい」など具体的にしてください。
今すぐ全部を同時に直さず、条件の誤り、欠落、判読の順に修正候補を並べます。
生成が止まったときの戻り方を決める
途中で生成が止まったら、まず何が保存されているか確認します。
会話が長いことと、ファイルが完成していることは同じではありません。
outputsの中にHTMLがあるか、開くと何枚まで表示されるかを見て、残っている作業を具体的に伝えてください。
例えば7枚まであるなら、「work/構成.mdの8〜12枚目が未作成です。既存の1〜7枚は保持し、残りを追加してください」と依頼します。
全体を最初から作り直すと、すでに照合したページまで変わる可能性があります。
保存済みの範囲を起点に再開します。
AIの利用枠を使い切った場合は、再開できる時点まで未完了として記録します。
配布の完成見本で編集、PDF、条件照合の練習を進めることはできますが、自分で初稿を生成したと扱いません。
何を代替し、何が残ったかを分けることで、復帰後に迷わず戻れます。
ファイルを誤って上書きした場合に備え、初稿v1は残し、修正はv2へ保存します。
保存先を探せないときは絶対パスをAIへ尋ねて確認します。
見た目の改善を急ぐ前に、入力の正本、出力の版、未完了の範囲を自分で説明できる状態にしてください。
実践課題
実践課題:十二枚の初稿を生成して保存する
元情報とworkの確認済みファイルを用意します。
第5工程の前半でデザイン条件を保存し、後半でoutputs/提案資料_v1.htmlを生成してください。
保存した実物で12枚を巡回し、比較、費用、役割、最後の判断を確認します。
文字の編集と別名保存を一度試し、修正すべき問題をページ番号付きで記録します。
- デザイン条件を確認して保存する。
- 指示文で初稿HTMLを生成する。
- 12枚を開き直し問題を記録する。
架空の完成例は「12枚を保存。36万円税別・4週間・5名までが原文と一致。6枚目の比較が詰まっているため修正候補」です。
自己確認は、正本を参照したか、重要条件と架空表示があるか、保存後に開き直せるかの三点です。
完成見本を使った人は、その旨と未実施の生成工程を記録し、実際に行った確認だけを合格にします。
自己確認
- 構成と事実確認表をAIへ読み込ませる。
- 判断の順番が分かるHTMLを生成する。
- 初稿を保存して全ページを確認する。
まとめ
確認済みの材料と構成をAIへ渡し、文字・色・余白の役割を揃えたHTMLを作りました。
12枚があること、重要条件が残ること、編集と保存が動くことを実物で確認します。
止まった場合も、保存済みの範囲と不足を把握して再開できます。
次は初稿で見つけた問題を選び、比較表と見積条件を部分修正します。
元情報と初稿の版を残してから進めてください。
- 構成と事実確認表をAIへ読み込ませる。
- 判断の順番が分かるHTMLを生成する。
- 初稿を保存して全ページを確認する。






