構成と原稿ができたら、初めて画面の生成へ進みます。
AIには「見やすくして」とだけ頼まず、読み込む材料、保存する形式、変えてはいけない条件を渡します。
このレッスンでは10枚のHTMLを生成し、ページ移動、文字編集、原稿表示、保存を確かめます。
完成見本を開くだけで生成課題が完了したことにはなりません。
自分の初稿を保存し、実物を開いて点検するところまで進めます。
この記事で学ぶこと
- 構成と表示条件をAIへ読み込ませる。
- 編集可能な10枚のHTMLを生成する。
- 原稿表示を隠して投影の状態を確かめる。
生成へ渡す正本をそろえる
AIへ渡す材料は、元情報、登壇設計、主張と根拠、構成と時間配分、画面案、発表原稿です。
前の工程で決めた内容を読み込ませず、話題名だけで作り直すと、根拠や時間の条件が落ちる場合があります。
ファイルの場所を明示し、読めなかった材料があれば生成前に知らせるよう依頼します。
「正本」は、この作業で判断の基準にするファイルという意味です。
今回の例では、担当や期限の値はinputsの元情報、10枚の順序と予定時間はworkの構成表が基準になります。
矛盾があったらAIに都合よく統合させず、どの箇所が違うかを出してもらいます。
第5工程の指示文は、この読み込み先と出力先をまとめています。
Codexで「登壇資料練習」フォルダを開き、前工程のファイルが存在する状態で送ってください。
ファイル名を変更した場合は、指示文の参照も合わせます。
別のフォルダへ同名ファイルがあるだけでは、正しい材料を読めたことになりません。
生成後は、AIの完了報告より先に、指定したoutputs/登壇スライド_v1.htmlがあるかを確認します。
開いて10枚あることと、架空例の表示、三項目、未決の扱いが残っていることを見ます。
初稿を保存しておけば、次の修正でどこが変わったかを比較できます。
色と文字の共通条件を指定する
デザイン条件は、色の役割、文字の強弱、位置の共通ルールとして渡します。
完成見本は白と薄いクリームを基調に、本文を濃い紺、強調を深い青緑にしています。
色数を増やす前に、何を先に読ませるかを決めます。
章名、ページ番号、出典は同じ位置に固定します。
画面比率は16:9です。
タイトル、三項目、比較文をブラウザー上の文字として実装し、画像へ埋め込みません。
文字を後から編集しやすく、元情報との照合もできます。
イラストは補助として使い、実際の会議の写真や、アプリの操作結果だと誤認させない表示を残します。
本文の大きさは、見本の設計幅1920相当で36以上を初期目安にします。
これは実際の会場での可読性を保証する値ではありません。
画面からの距離や投影面の大きさで変わるため、会場確認が別に必要です。
収まらない場合は縮小だけで解決せず、文を短くするか配置を変えます。
配布の第5工程では、この条件をwork/デザイン.mdへ保存してから生成します。
新しい依頼のたびに色やフォントを変えるのを防ぐためです。
自分の会社に正式なデザイン規定があるなら、そちらを優先して条件を書き換えます。
今回の配色を、すべての登壇の必須ルールとして扱わないでください。
操作できるHTMLとして出力する
出力は、PCのブラウザーで開ける単独HTMLを指定します。
前後ボタン、左右矢印、先頭・末尾への移動、文字編集、編集済みHTMLの保存、PDF印刷を用意します。
発表原稿はページに合わせて表示を切り替えられるようにします。
操作があるだけで完成とせず、実際に試すことが必要です。
画像を使う場合はHTMLへ埋め込み、外部の画像サーバーへ接続しなくても表示できる形を依頼します。
完成見本は、この方式で作っています。
受講者の初稿が同じ方式になるとは限らないため、ネットワークを切った状態でも開けるか確認します。
外部ファイルが必要なら、保存場所と配布範囲を見直してください。
「文字を編集」を押し、試しに一箇所を変更したら、「編集したHTMLを保存」で別ファイルを保存します。
ダウンロード先のファイルを開き直して、変更が残っているかを確かめます。
ブラウザー画面を閉じるだけでは保存されません。
元の見本を壊さないよう、変更版は別の名前で管理します。
編集で長い文字を加えると、元の配置からはみ出すことがあります。
保存できる機能は、どんな文字量でもきれいに収まる保証ではありません。
構造やレイアウトを変えるときは、AIへ修正対象を伝えます。
見本のdeck.jsonは制作側の構成記録で、ブラウザーへ読み込むためのボタンはありません。
原稿表示と投影状態を切り替える
完成見本の「原稿を表示」は、現在のページに対応する発表原稿と予定秒数を同じ画面へ出します。
ページを移動すると内容も切り替わります。
これは練習用の補助です。
原稿が見えている画面をそのまま共有すれば、聞き手にも原稿が見えるため、投影前に隠してください。
原稿の文言を変える場合は、文字編集を有効にし、原稿欄を修正してHTMLを保存します。
workの発表原稿にも同じ修正を反映します。
HTML側だけ直すと、次にAIで生成し直した際に古い原稿へ戻る場合があります。
画面と原稿の編集元を同じ版にすることが大切です。
操作確認では、原稿を表示したまま前後へ移動し、ページ番号と内容が対応するかを見ます。
原稿をスクロールしただけでスライドが変わらないことや、文字編集中の矢印キーがカーソル移動として働くことも試します。
使うつもりの機能を、見た目だけで動作済みと判断しないようにします。
原稿を別の端末で見る方法もありますが、本コースのHTMLが複数画面へ自動分離するわけではありません。
会場の機材が未確認なら、その点を準備記録へ残します。
原稿を隠した状態で話せる要点メモや紙の予備を用意する場合も、どの版と対応するかを記録してください。
初稿を内容と表示の順で点検する
初稿の点検は、まず内容、次に表示、最後に操作の順で行います。
内容では10枚の順序、三項目、架空例、担当と期限の合意、未決の扱い、次の行動を元情報へ照合します。
デザインが整っていても、合意のない担当を決定済みに変えた資料は採用できません。
表示では、結論タイトルの改行、文字の重なり、比較の対応、現在地の強調、出典とページ番号を見ます。
一枚ずつ開き、表紙だけで全体の品質を判断しないでください。
PCで読めることと、離れた投影面で読めることは別なので、会場条件は次のレッスンでも扱います。
操作では、10枚を通した移動、文字と原稿の保存、再読込、原稿を隠す操作を試します。
失敗した場合は、画面の症状と手順を記録します。
「動きません」だけでは、AIが直す場所を特定しにくくなります。
「6枚目から次へを押すと原稿が5枚目のまま」など具体的に伝えます。
点検結果はwork/初稿点検.mdへ保存します。
AIの生成結果が長すぎたり、操作が欠けたりしても、全工程を最初からやり直す必要はありません。
問題を分け、内容の誤りから直します。
利用枠に達したら初稿と記録を残し、再開時に同じファイルから続けてください。
実践課題
実践課題：10枚の初稿を開いて確認する
前工程のファイルをそろえ、第5工程の指示文を送ります。
デザイン条件を保存し、outputs/登壇スライド_v1.htmlを生成してください。
10枚を開いて元情報と照合し、原稿表示の切替、前後移動、文字編集、保存を試します。
保存した変更版を開き直して確認し、結果をwork/初稿点検.mdへ残します。
見本の動作確認だけで、自分の生成課題を完了にしないでください。
- 表示条件を保存して生成を依頼する。
- 10枚と原稿パネルを操作する。
- 初稿を開き直して問題を記録する。
完成例は、表紙から次の行動まで10枚あり、発表原稿を隠せるHTMLです。
自己確認は、根拠と条件が保たれているか、全ページの文字が欠けていないか、保存後も変更が残るかの三つです。
実際の会場での投影は、まだ未確認として分けます。
保存されなかった場合は出力先を指定し直し、ファイルの存在を確かめてから次の修正へ進みます。
自己確認
- 構成と表示条件をAIへ読み込ませる。
- 編集可能な10枚のHTMLを生成する。
- 原稿表示を隠して投影の状態を確かめる。
まとめ
生成には構成と根拠、画面案と発表原稿を渡し、色・文字・配置の条件を固定します。
HTMLを開いて10枚の内容と操作を確かめ、保存した実物を再読込してください。
原稿パネルは同じ画面に出るため、投影時には隠します。
AIの完了報告だけで完成扱いにせず、初稿点検に問題を残します。
次は、投影したときの読みやすさを基準に部分修正します。
- 構成と表示条件をAIへ読み込ませる。
- 編集可能な10枚のHTMLを生成する。
- 原稿表示を隠して投影の状態を確かめる。
