AIにLPを実装させ、編集して保存できるHTMLを作る

AIへ渡す条件の曖昧さは、文章やリンクまで勝手に変わる原因の一つです。このレッスンでは、企画、根拠、構成、確定原稿、見た目のルールをまとめて渡し、ブラウザーで動く商品紹介ページを作ります。生成された画像だけを完成品にせず、文字の修正、資料リンク、保存後の再表示まで確かめます。見本には編集用と公開用を保存する操作があるので、AIを利用できない場合も、その違いを手元で試せます。

学習目標

確定原稿と制約をAIへ渡す。
動くHTMLと資料リンクを作る。
編集・保存・再表示を検証する。

AIへ渡す入力を一式にする

依頼には、目的、読者、主な行動、使用する原稿、画像、リンク先、変更禁止の条件を含めます。今回なら「登録不要の8ページPDFを案内し、受け取れる状態にする」が目的です。資料名とページ数、架空例の注記、ボタンの行き先は固定します。AIには新しい実績、期限、価格、フォームを追加しないよう指定し、不明点は確認待ちとして返してもらいます。

ファイルも名前をそろえて渡します。元情報、原稿、根拠台帳、PDF、画像が別々の版になっていると、AIはどれを使うべきか判断しにくくなります。今回の作業フォルダだけを指定し、既存の別サイトや関係のない資料へ変更を広げないようにします。文章による指示だけでなく、使用する実物を渡すことで、提供内容と実装の食い違いを確認しやすくなります。

最初の返答では、入力をどう理解したか、作るファイル、実装しない機能を短く確認します。フォームを作る予定になっていたら、この段階で資料へのリンクへ戻します。AIの計画が正しくても、完成物の検査は省けません。理解の確認は、後で実物を点検するための基準をそろえる工程です。工程別の指示文を使い、構成と実装を一度に曖昧に頼まないようにします。

文字と操作をHTMLとして作る

HTMLは文章やリンクなどページの構造を記述するファイルです。見た目の指定はCSS、編集や保存などの動作はJavaScriptで扱います。すべてを自分で書ける必要はありませんが、画像一枚と、文字や操作を持つページは違うと理解しておきましょう。今回は外部の部品を大量に読み込まない、小さなHTMLを基本にして、手元でも開ける形を目指します。

見出し、本文、主要リンクは本物の文字とリンクにします。画像内のボタンに見える場所を押しても何も起きない状態は完成ではありません。PDFへのリンクには実際のファイル名を指定し、同じフォルダへ資料を置きます。ボタンの形をした要素を作るだけでなく、押した後の動作と、キーボードでも操作できることを実装条件へ含めてください。

AIが不要な外部サービスや複雑なビルド環境を提案したら、今回の機能に必要かを確認します。表示、編集保存、PDFリンクだけなら、追加の仕組みが管理の負担を増やす場合があります。一方で本格的な受付や決済が必要な案件は、単一HTMLだけで完了と扱えません。必要な機能と運用に合わせて範囲を決め、この教材の見本の限界をそのまま理解して使います。

生成物は約束と動作から点検する

最初に見るのは、見た目の好みではなく、約束と実物の一致です。資料名、8ページ、登録不要、架空例の説明が残っているかを確認します。次に上部と下部の資料リンクを押し、同じPDFが開くかを見ます。存在しないファイル名や仮のURLが混じっていたら、文字の修正より先に直します。リンクの見た目が整っていることは、動作の証拠になりません。

表示を確認したら、編集用の操作も試します。見本の「文章を編集」を押し、短い見出しを変更して「編集用HTMLを保存」を実行します。保存したファイルをPDFと同じフォルダへ置いて開き直し、変更した文字が残っているかを確認してください。ブラウザー上で文字が変わっただけでは保存されていません。閉じる前にファイルとして書き出す必要があります。

資料プレビューの中の文字、リンク先、色の詳細は、本文編集だけでは変わりません。そこを変更する場合は元のHTMLや画像を修正し、関連する説明も再検査します。見本が何でも編集できる道具ではないことを理解してください。保存後にリンクが切れた場合は、PDFとHTMLの位置、ファイル名、拡張子を確認してから、AIへ問題の条件を渡します。

修正は対象と守る条件を指定する

修正依頼は「もっとよくして」ではなく、場所、問題、望む状態、変えない要素を伝えます。例えば「390px幅で主見出しの一文字が次の行へ残る。意味のまとまりで改行を調整し、原稿の意味とPDFリンクは変えない」と書きます。問題が具体的なら、全体の色や章の順番まで作り直す必要がありません。小さな変更で目的を満たすことを優先します。

スクリーンショットを渡す場合も、画像だけに任せず、画面幅、操作、発生したことを添えます。リンクが動かないなら、見た目より実際のファイル名やエラーが材料になります。修正前のHTMLを残し、変更後は問題の箇所と周辺だけを比較します。AIが原稿や条件まで変更していたら、意図しない差として戻すか再確認してください。

一度に多くの問題がある場合は、内容、動作、表示に整理して優先順位を付けます。資料が開かない問題は、装飾の微調整より先です。すべてを細切れに指示して往復を増やす必要はありませんが、目的が異なる変更を一緒にすると確認が難しくなります。修正の理由と結果を記録し、何が直ったのか説明できる状態にします。

編集用と公開用を分けて保存する

編集用HTMLには、文章を変えるボタン、保存する操作、動作確認の表示が残ります。公開用HTMLは、その操作欄を取り除いて読者向けのページにした版です。見本の「公開用HTMLを保存」を使ったら、編集ボタンがないこと、原稿が同じこと、資料リンクが動くことを開き直して確認します。名前だけ変えて同じ編集画面を公開しないようにします。

保存したHTMLは、PDFと同じフォルダへ置きます。画像は見本のHTML内へ含めていますが、PDFは別ファイルです。HTMLだけをメールで渡すと資料リンクが使えなくなるため、必要な一式をZIPで渡します。公開用には内部の作業メモや検査の記録を混ぜず、編集元は管理側に保管します。複数人で扱うときは、どの版が公開中かを明示してください。

公開用を保存しただけでは、インターネットへ公開されたことにはなりません。サーバーへ置き、公開URLで確認する工程が別にあります。また、ローカルの動作確認カウンターは公開用から外れ、外部の計測も始まりません。保存、公開、計測、成果を別々の状態として管理します。次のレッスンでは、画面幅と操作方法を変えて表示を確かめます。

実践課題：生成・編集・保存を一往復する

元情報、確定原稿、見た目のルール、PDFを用意し、工程別の指示文でHTMLを作ります。AIが使えない場合は配布見本を作業用へコピーしてください。文章の一部を編集し、編集用HTMLを保存して開き直します。その後で公開用HTMLを保存し、操作欄が消え、資料が開くかを確認します。ファイル名と結果を検査シートへ残してください。

記録例は「見出しを変更→編集用を保存→PDFと同じフォルダへ移動→変更を確認→公開用を保存→操作欄なし・PDF表示を確認」です。失敗例は、保存したHTMLだけを別のフォルダへ置いてリンク切れにすることです。自己確認では、文字が保存されたか、編集と公開の版が区別できるか、両方から実物を開けるかを見ます。自動保存や外部計測があると推測せず、実装された範囲だけを完了と記録します。

まとめ：生成の完了を実物の動作で判断する

AIへは目的、確定原稿、素材、リンク、制約を一式で渡します。生成物は画像の見栄えだけで評価せず、文字、リンク、編集保存、再表示で確認しましょう。修正は問題の場所と守る条件を具体化し、編集用と公開用を分けます。保存と公開は別工程です。次は、狭い画面、文字の拡大、キーボード操作を試し、読む人の環境でも使える状態へ整えます。

自社の制作へ取り入れる

自社の制作物と判断に迷う工程を整理し、法人研修・AI導入支援の内容をご覧ください。