ここまでに、目的、事実、構成、デザインの四つのメモができました。
このレッスンでは、それらをCodexへ渡し、ブラウザーで開ける営業資料を作ります。
AIの返答に「完成しました」と書かれていても、それだけでは完成とは判断しません。
保存先を開き、全ページを送り、内容と操作を確かめます。
作り直すときも、長い指示を最初から書き直さず、問題のある工程とファイルを指定できる状態を目指します。
この記事で学ぶこと
- 四つのメモと完成条件をまとめてAIへ渡せる。
- 保存されたHTMLを開き、全ページの内容と操作を確かめられる。
- 初稿で起きた問題を分け、必要な修正を依頼できる。
四つのメモと元情報を揃える
AIへ渡すのは、目的のwork/goal.md、事実のwork/brief.md、構成のwork/outline.md、見た目のwork/design.mdです。
元になる演習素材も同じ練習フォルダに置きます。
フォルダは関連するファイルをまとめる場所です。
前のチャットに書いた内容だけを頼りにせず、決めた内容がファイルに残っているかを先に確認してください。
四つに分ける理由は、別々に直したい判断だからです。
価格が間違っているなら事実のメモ、話がつながらないなら構成、本文が小さいならデザインを調べます。
全部を一つの長い会話へ混ぜると、何を直した結果なのか追いにくくなります。
ただし、ファイルを増やすほどよいわけではありません。
今回はこの四つで足りる範囲を練習します。
Codexへ「四つのメモを読み、目的、総ページ数、価格と範囲、見た目のルールを短く確認してください」と頼みます。
返答が10枚、24万円・税別、1部署・窓口1つ・5名までになっているかを照合します。
違う場合は生成を始めず、参照したファイルを確かめます。
見つからないファイルは実際の保存先を伝えるか添付し、AIに内容を推測させないでください。
保存するものと使い方を指示する
今回は、単体でブラウザーから開けるHTMLファイルを作ります。
HTMLには文字、図形、見た目、操作をまとめます。
外部サービスへ公開する必要はなく、自分のPCで開いて確認できます。
資料を作る依頼と、Webサイトとして公開する依頼は別です。
このコースではローカルファイルとPDFまでを完成範囲にします。
次の指示を、四つのメモを確認したチャットへ送ってください。
保存名は練習用です。
既存ファイルがある場合は、版を分けて残すように頼みます。
指示の目的は、綺麗な画像だけで止めず、説明・修正・配布に使えるものを残すことです。
PowerPointファイルはこの依頼には含まれません。
生成結果が指示どおり動くかは、次の確認が必要です。
コードが返るだけでファイルがない場合は、保存先を指定して実際の作成を頼みます。
work/goal.md、work/brief.md、work/outline.md、work/design.mdと演習素材.mdを基に、10枚の営業資料を作ってください。
保存先：outputs/営業資料.html。追加のSkillsや外部ライブラリを前提にせず、単体で開けるHTMLにしてください。
通常表示は1枚ずつ。前後ボタン、左右キー、Home/Endで移動できるようにしてください。文字編集中は移動キーでページを送らないでください。
文字編集の開始・終了と、編集済みHTMLを別ファイルに保存するボタンを付けてください。ブラウザー上の編集は自動保存ではないと表示してください。
印刷時は操作ボタンを隠し、全10枚を1枚ずつ改ページして出力してください。16:9を基本にします。
スマートフォンでは幅に収め、前後ボタンを使えるようにしてください。
元情報にない実績、価格、連絡先、顧客の声を追加しないでください。教材用の架空サービスと分かる表示を入れてください。
ファイルを作成し、確認した点と未確認の点を分けて報告してください。公開はしません。
ファイルを開いて全ページを確かめる
作成された営業資料.htmlをFinderやエクスプローラーで見つけ、ChromeまたはEdgeで開きます。
コードを自分で読む必要はありません。
ファイルの表示名だけで判断せず、サービス名と表紙が見えるかを確かめます。
文字の記号がそのまま並ぶ場合は、テキスト編集アプリで開いている可能性があります。
ブラウザーで開き直してください。
前後ボタンを使い、1枚目から10枚目まで順番に見ます。
表紙だけ整っていても、途中の費用ページが欠けていることがあります。
ページ番号と構成メモを照合し、抜けや重複を探します。
本文が画面外へ出ている、文字が背景に埋もれる、4週間の順序が逆になっているなど、場所を指定できる問題を記録してください。
最初の確認では見た目の好みより、情報と操作を優先します。
次にウィンドウを狭くし、横にはみ出さず全体が見えるかを確かめます。
縮小されて見えることと、細かな条件まで読めることは別です。
スマートフォン閲覧が重要な案件では実機で確認し、必要なら縦長版や自読用PDFを別に設計します。
この演習の横長資料を、どの端末でも同じ読みやすさになると考えないでください。
編集と保存ができることを確かめる
画面で文字を変更できても、元のファイルが自動で書き換わるとは限りません。
演習のHTMLは、編集後に保存ボタンから別ファイルをダウンロードする方式を依頼しています。
まずテスト用の複製で、表紙の末尾へ「保存確認」と加え、編集済みHTMLを保存します。
元の資料と区別できる名前を付けてください。
ダウンロードしたファイルを閉じて開き直し、「保存確認」が残っているかを見ます。
この再確認で、画面だけの変更と保存された変更を区別できます。
残っていなければ、AIへ「編集後に保存したHTMLを開き直すと文字が元へ戻ります。変更内容を保存する処理を修正してください」と依頼します。
保存先のファイルを取り違えていないかも確かめます。
確認用の文字を外した版も、同じ手順で保存し直します。
文字入力中に左右キーを押してページが送られないか、編集を終えるとページ移動へ戻れるかも確認します。
大幅な文章追加では、枠からはみ出すことがあります。
短い誤字修正は画面編集、構成や配置の変更はAIへの修正依頼と使い分けると、表示の崩れを見つけやすくなります。
問題を分けて初稿の状態を記録する
初稿の問題は、内容、表示、操作に分けます。
「価格が税込になっている」は内容、「税別が画面外に出ている」は表示、「保存ボタンが反応しない」は操作です。
全てを「うまくいかない」と伝えるより、どのページで何をしたとき何が起きるかを知らせると、修正対象が明確になります。
エラー表示がある場合は、文面をそのまま添えます。
例えば「8枚目の価格が24万円（税込）です。演習素材の24万円（税別）に合わせてください。金額以外の本文とページ順は維持してください」と指示します。
直ったら同じページを開き、元情報と再度照合します。
AIが自分で動作確認できない環境なら、未確認と報告させ、自分がブラウザーで確かめます。
確認できなかった操作を、完了した項目へ含めないことが必要です。
最後にwork/review.mdへ、確認したファイル名、確認日、残る問題を記します。
生成を繰り返しても、何を良くしたいか決まっていなければ比較できません。
元の初稿を残し、修正版を別名にして、必要な変更が反映されたかを見ます。
重大な誤りが解消し、全10枚を表示できたら、次は説明のしやすさを基準に部分修正します。
実践課題
実践課題：開いて使える初稿を保存する
つくるものは、10枚のHTML初稿と確認メモです。
四つのメモと演習素材を用意し、最初に読み取り結果を確認します。
次に上の指示で生成し、全ページを開き、編集済みファイルの保存と再表示を試してください。
残る問題をwork/review.mdへ保存します。
- 四つのメモの読取結果を確認する。
- HTMLを生成して全10枚を開く。
- 編集・保存・再表示を試し、問題を記録する。
架空の記入例は「営業資料-v1.html／10枚表示済み／表紙のテスト文字を保存して再表示できた／8枚目の税区分は一致／6枚目の顧客作業が読みにくいため修正予定」です。
この例は今回の見本の不具合報告ではなく、記録方法の例です。
実際に試していないことは確認済みにしません。
自己確認
- チャット内の文章だけでなくHTMLが存在するか
- 10枚の内容が構成と一致するか
- 編集を保存して再表示できるか
まとめ
AIには材料だけでなく、保存先、操作、確認方法まで渡します。
完成の判断は返答の言葉ではなく、保存したファイルを開いて行います。
全ページの表示と編集後の保存を確かめ、内容・表示・操作の問題を分けて記録してください。
初稿と修正版を区別すれば、直した結果も比べられます。
次は資料を実際に説明し、分かりにくいページを必要な範囲で直します。
- 四つのメモと完成条件をまとめてAIへ渡せる。
- 保存されたHTMLを開き、全ページの内容と操作を確かめられる。
- 初稿で起きた問題を分け、必要な修正を依頼できる。
