AIでLPを作る方法｜要件定義・デザイン・微調整の進め方と指示例

AIに「イベントのLPを作って」と依頼すると、見出しや画像、申込ボタンのあるページが生成されます。しかし、実際に確認すると「伝えたい情報が目立たない」「参考にしたページと雰囲気が違う」「スマートフォンでは読みにくい」と感じることがあります。

AIでLPを制作するときは、目的と掲載情報を決め、構成を確認してからデザインを整え、変更箇所を絞って微調整すると進めやすくなります。最初の指示だけですべてを完成させようとせず、画面を見ながら認識を合わせていきましょう。

この記事では、イベント告知用のLPを例に、要件定義、参考デザインの伝え方、修正指示、公開前の確認までを紹介します。掲載する例は制作手順を説明するためのもので、実在するイベントの募集案内ではありません。

１．LP制作では「誰に、何を伝え、どう行動してほしいか」を決める

LPはランディングページの略です。ここでは、イベントへの申込みや問い合わせなど、特定の行動につなげるために情報をまとめたページとして扱います。

同じイベントでも、初めて知る人向けのページと、普段からサービスを利用している人向けのページでは、必要な説明が変わります。既存の利用者向けなら開催内容や日程が重要になり、初めての人にはサービスの特徴や参加条件の説明も必要になります。

AIに依頼する前に、「誰が読むか」「何を判断してほしいか」「最後にどこへ進んでほしいか」を短く書き出しましょう。ここが曖昧なままだと、見栄えを整えても、必要な情報へたどり着きにくいページになることがあります。

２．要件定義は、掲載情報と動作を具体的にする

要件定義では、ページが満たすべき条件を整理します。小規模なLPなら、最初から長い資料を作る必要はありません。制作中に迷いやすい項目を、表や箇条書きで確認できる状態にしましょう。

確定している情報と、未定の情報を分ける

日時や料金が未定なら、AIに推測で補わせず、「未定」「掲載しない」「確認後に追加する」などの扱いを決めます。申込先がまだない場合も、見た目だけの申込ボタンを完成扱いにしないようにしましょう。

日程や料金をページ内の複数箇所に表示する場合は、基準となる情報を１つにまとめます。修正時には、イベント紹介、料金表、スケジュールなど、同じ情報を載せた場所をまとめて確認してください。

前年度のLPを使う場合は、引き継ぐ部分を指定する

過去のLPは構成を考える参考になりますが、そのまま今年度の要件にはなりません。開催年、曜日、料金、会場、対象者、フォームURLなどは、今回の確定情報に置き換える必要があります。

「配色とイベントカードの構成は参考にする」「日程・料金・申込先は今回の情報だけを使う」と分けて伝えましょう。古い案内へのリンクや、終了済みのキャンペーン文言も確認対象に含めます。

３．参考デザインは「どこを参考にするか」まで伝える

参考ページを見せて「この雰囲気で」と伝えるだけでは、AIが何を重視するかは定まりません。配色、文字の大きさ、余白、画像の比率、情報の順番など、参考にしたい要素を具体的にします。

たとえば、「冒頭は大きな写真と短い見出し」「イベント紹介は画像と説明を並べる」「申込ボタンはページ内で色を統一する」と伝えると、完成後の確認基準にもなります。

参考ページのURLだけでは、AIが内容を取得できない場合もあります。確認できた範囲を確かめ、必要に応じてスクリーンショットや、参考にする部分の説明を添えましょう。

画像の見た目からは、クリック後の動作や画面幅による変化まで分からないことがあります。「このボタンはどこへ移動するか」「スマートフォンでは何列にするか」は、別の条件として伝えてください。

４．AIへの初回依頼では、構成案から確認する

最初の依頼では、掲載情報と制作条件を渡し、ページの構成案を確認します。必要な情報が抜けていないかを見てから実装へ進むと、装飾を整えた後に大きく並べ替える負担を減らせます。

次の文章は、静的なイベントLPを作る場合の依頼例です。既存サイトを修正する場合は、使用中のファイルや実装方式も追加してください。

構成案では、「対象者が判断するために必要な情報がそろっているか」「申込みの前に条件を確認できるか」を見ます。ページの長さやセクション数は、伝える内容に合わせて調整しましょう。

５．微調整は、変更箇所と完成条件を絞って依頼する

初稿を見て違和感があったら、すぐにページ全体を作り直す必要はありません。どの画面幅で、どの部分が、どう見えているかを整理し、変更したい箇所を指定します。

修正指示は「場所・現状・希望・維持する条件・確認方法」の５つに分けると伝えやすくなります。スクリーンショットを添える場合も、画像だけに頼らず、対象箇所を文章で示しましょう。

数値は目的に合わせて使う

余白や文字サイズを数値で指定すると、修正内容を比較しやすくなります。ただし、「余白を20pxにした」という事実だけでは、読みやすくなったかは判断できません。

「見出しと説明が１つのまとまりに見えるようにする」「カード同士の境目が分かるようにする」と目的も添えましょう。数値を仮に設定し、実際の画面を見て調整する進め方が使えます。

文字を小さくする前に、配置を見直す

スマートフォンで文字が収まらないときは、文字サイズだけで解決しようとせず、列数、横幅、余白、文章量を確認します。パソコンと同じ配置を縮めるだけでは、読みにくくなることがあります。

長い見出しや大きめの文字設定でも確認し、特定の画面幅だけで成立する調整になっていないかを見ましょう。MDNでも、画面の幅に応じて配置を変えるレスポンシブデザインの考え方が紹介されています。

６．公開前は、見た目・情報・操作を分けて確認する

見た目が整っていても、料金が古い、申込先が違う、画像が公開環境で表示されない、といった問題は残ることがあります。スクリーンショットの確認だけで終わらせず、実際のページを操作してください。

• 掲載情報：日付、曜日、時間、会場、対象、料金が確定情報と一致しているか。
• 情報の一貫性：冒頭、イベント紹介、料金表、申込フォームで条件が食い違っていないか。
• 画面表示：狭い画面でも文字や画像がはみ出さず、固定表示の要素が本文を隠していないか。
• 読み取り：見出しだけでも内容を把握でき、文字と背景を見分けやすいか。
• 操作：リンク先が正しく、キーボードでも申込リンクなどへ移動して操作できるか。
• フォーム：入力項目の意味や必須条件が分かり、入力エラーと送信完了を確認できるか。
• 公開環境：公開URLで画像・リンク・フォームへの遷移が動作するか。

フォームを設ける場合は、入力欄ごとに分かるラベルを用意します。外部フォームを使う場合も、LPから移動した先で、利用者が迷わず手続きを進められるかを確認しましょう。

検索からの閲覧も想定するなら、ページタイトルや見出しにイベント名や対象などを具体的に記載します。重要な日時や条件を画像の中だけに入れず、本文でも読めるようにしておくと、内容を確認しやすくなります。

７．微調整を終える基準を持つ

デザインは、細かな変更を続けようと思えば際限なく調整できます。公開前に直すべき問題と、公開後に検討できる改善案を分けておきましょう。

日程や料金の誤り、押せない申込ボタン、スマートフォンで読めない表示は、公開前に解消する項目です。一方、装飾の好みや小さな余白の違いは、情報の理解や操作に与える影響を見て優先順位を付けられます。

「必要な情報がそろっている」「対象者が条件を理解できる」「正しい申込先へ進める」という完成条件を満たしたら、一度区切ります。変更前の状態と修正内容を残しておくと、後から見直す際にも役立ちます。

AIを使ったLP制作では、要件を言葉にし、画面との違いを確かめ、必要な部分を修正することが重要です。まずは目的と掲載情報を整理し、初稿を見ながら具体的な指示へ調整していきましょう。

参考資料

• MDN：レスポンシブWebデザイン
• W3C WAI：フォームの入力項目にラベルを付ける方法