「AIでつくるセミナーLP制作キット」制作事例｜LPを作って公開してみた

前回の記事では、FORM.（フォームドット）の「AIでつくるセミナーLP制作キット」を使った、LP制作の7STEPを紹介しました。

今回は、その制作キットを実際に使い、セミナーの文章を考えるところから、デザインの調整、Web公開までを一通り行ってみました。

題材にしたのは、個人講師やコーチ、個人事業主に向けた架空のオンライン講座「ひとりビジネスのためのSNS発信設計ワークショップ」です。
制作は、ChatGPTからの質問に答えたり、提案されたデザインを比較して選んだりしながら進めました。HTMLやCSSの編集はCodexが担当します。

今回は購入者と同じ7STEPを実際にたどりながら、どのようなやり取りでLPが完成したのか、制作キットのどんな部分が役立ったのかを紹介します。

まずは、完成したLPをご覧ください。
👇完成したセミナーLPを見る👇

※架空のセミナーを題材とした制作サンプルです。実際の参加募集は行っていません。

1｜セミナーの内容を整理し、LPの文章をつくる【STEP1〜2】

制作は、まずChatGPTの準備から始めます。

キットに付属するPDFの案内に従って、制作ガイドや見本画像をChatGPTに添付し、用意された初回指示文を送信します。
自分で指示文を考える必要はなく、ChatGPTが制作フローを案内し、最初の質問を始めてくれます。

STEP1では、ChatGPTの質問に答えながらセミナーの情報を整理していきます。

今回の題材は、個人講師やコーチ、個人事業主を対象とした「ひとりビジネスのためのSNS発信設計ワークショップ」です。
SNSで何を発信すればよいか迷っている人が、自分の強みや届けたい相手を整理し、投稿テーマや発信計画を考えるオンライン講座という架空の設定にしました。

ChatGPTからは、対象者や講座の内容、開催日時、料金など、LP制作に必要な情報について順番に質問されます。
短い文章や箇条書きで回答でき、決まっていない項目は「未定」のまま進めることもできます。

STEP2では、LPの訴求軸を決めてから文章を作成します。

STEP1で整理した情報をもとに、ChatGPTが「誰に、どんな価値を、どう伝えるか」という訴求の方向性を提案してくれます。

その提案を確認・比較して方向性を決めると、LPの構成に沿って各セクションの文章案を作成してくれます。

例えばFAQでは、参加者が疑問に思いそうな質問と回答案も提案。自分では気づかなかった確認事項を見つけるきっかけにもなります。
もちろん、未確定の参加条件などを勝手に決めるわけではなく、実際の情報に基づいて内容を確認していきます。
今回は実績や参加者の声の掲載を見送り、全13セクションで制作することにしました。
使用しない一部のセクションや、ロゴ・講師写真がない場合の表示部分は省略でき、レイアウトが成立するように設計されています。

このように、細かい指示文を毎回用意しなくても、ChatGPTの質問や提案を確認・選択しながら、LPの文章を組み立てていけるのが、このキットの特徴です。

2｜配色とビジュアルの方向性を決める【STEP3】

文章がまとまったら、次はデザインの方向性を決めていきます。

STEP3では、まずChatGPTから、希望するデザインの印象やブランドカラーの有無について質問されます。
今回は「信頼感がある・親しみやすい・明るい」と回答し、ブランドカラーは指定せずに進めました。

配色は、キットに用意された4種類のプリセットから選ぶほか、ChatGPTにカスタム配色を提案してもらうこともできます。
今回はプリセットとカスタム配色の両方から、セミナーの内容に合う候補を提案してもらいました。

その中から採用したのが、TEAL × APRICOT。落ち着いたティールと温かみのあるアプリコットを組み合わせた配色で、信頼感と親しみやすさのバランスを重視して選びました。

続いて、写真とイラストの使い方を決めます。

今回はChatGPTからの質問に対して、ファーストビューには写真、最後の申込エリアにはイラストを選択しました。
ファーストビューでは信頼感や実在感を、最後の申込エリアでは親しみやすさを重視した選択です。

最後に、ロゴや支給画像の有無、AI画像生成を利用するかどうかも確認します。
手持ちのロゴや写真を使うこともでき、必要に応じてCodexがトリミングや表示位置を調整してくれます。今回は支給素材がなかったため、必要な画像はAIで用意することにしました。

このように、配色やビジュアルを細かく指定しなくても、ChatGPTからの提案を比較・選択しながら、セミナーに合ったデザインの方向性を決められます。

実際の画像制作とLPへの反映は、次のSTEP4で行います。

3｜画像を準備し、CodexでLPに反映する【STEP4】

文章とデザインの方向性が決まったら、いよいよLPの制作に入ります。

ここからは、コードの編集や実装を担当するCodexを使用します。

まずはChatGPTの案内に従って、Codexが作業用フォルダを準備し、作業前のデータをバックアップして、元の状態に戻せるようにしてくれます。

続いて、LPに使用する画像を準備します。

ChatGPTがセクションごとに必要な画像の内容を提案し、その計画を確認してから制作に進みます。
今回は支給画像がなかったため、ファーストビューや受講シーンなどに使う写真・イラストをCodexで生成しました。キットに含まれる既存画像も、採用した配色に合わせて調整してくれます。
生成した画像は、不自然な描写がないかなどを確認し、購入者が採用を判断してから実装に進みます。

画像の準備ができたら、いよいよLPへの実装です。

ChatGPTが、これまでに決定した文章・画像・配色などをCodexへの指示文にまとめてくれるので、その内容をCodexに送って作業を進めます。

AIにゼロからLPを作ってもらう場合、実際に出力されるまで、どんな構成やデザインになるか分かりにくいことがあります。

一方、このキットはフォームドットがLPの構造・レイアウト・デザインをあらかじめ設計しているため、仕上がりのイメージを持ちながら、文章や画像、配色をカスタマイズできるのが特徴です。

実装後はCodexが基本的な動作や表示をチェック。今回は大きなレイアウト崩れもなく、13セクションのLPを形にすることができました。

次のSTEP5では、実際の完成画面を確認しながら、デザインの調整を行います。

4｜完成したLPを確認し、気になる部分を調整する【STEP5】

STEP4でLPが形になったら、次は実際の表示を確認しながら、気になる部分を調整していきます。

まずは、Codexが撮影したスマートフォンとデスクトップのスクリーンショットをChatGPTに共有し、デザインやレイアウトをレビューしてもらいます。
ChatGPTが画面を確認し、気になる箇所や修正が必要な部分をチェックしてくれるので、自分だけでは見落としていた問題に気づける可能性もあります。

今回は大きなレイアウト崩れ等はありませんでしたが、セミナーの進め方を紹介するセクションの写真が少し気になりました。
4枚とも似たような人物や室内の構図になっていて、全体的に単調な印象に見えます。

当初、ChatGPTは大きな修正は必要ないと判断していましたが、私がその点を伝えると、4枚それぞれの役割や構図を見直す改善案を提案してくれました。

その提案をもとに、オンライン講座の様子、手元で作業する場面、考えを整理する姿など、異なる構図になるよう写真を再生成しました。

修正後は、各ステップの違いが伝わりやすくなり、ページ全体にも変化が生まれました。

また、スマートフォンで気になった文章の改行位置も調整しています。
こうした修正も、ChatGPTが要望を整理し、Codexへの指示文を作成してくれます。

ChatGPTによるレビューだけでなく、購入者自身の意見も取り入れながら改善できる。

AIの判断をそのまま採用するのではなく、相談しながら完成度を高めていけることも、この制作キットのメリットだと思います。

5｜公開前の確認から、Web公開まで【STEP6〜7】

デザインの調整が終わったら、いよいよ公開準備です。

STEP6では、ChatGPTの案内に沿って、公開前に確認しておくべき項目をチェックします。

掲載内容に間違いがないか、画像の利用に問題がないか、申込ボタンのリンク先は正しいかなど、公開に必要な確認を進めていきます。

また、今回は使用していませんが、必要に応じてプライバシーポリシーや特定商取引法に基づく表記などのページも作成できます。

今回は架空のセミナーなので、実際の募集と誤解されないよう、デモ用の案内表示や申込ボタンの調整を追加しました。これらは今回のサンプル専用の対応です。

STEP7では、完成したLPをWebに公開するための準備を進めます。

ここでもChatGPTが、Webサイトを公開できるサーバーを持っているかなど、利用環境について質問してくれます。

今回は契約済みのレンタルサーバーを使用しました。
ChatGPTがCodexへの指示文を作成し、Codexが公開用のファイルを整理。表示や動作の最終確認を行ったうえで、私がサーバーにアップロードしました。
今回は手動で公開しましたが、GitHubと自動公開の仕組みを組み合わせるなど、環境に応じて公開方法を選ぶこともできます。

公開後もブラウザで表示を確認し、無事に完成です。

👉 完成したセミナーLPを見る

このように、LPの制作だけでなく、公開前のチェックからWeb公開まで、ChatGPTと相談しながら進められます。

6｜実際に使って分かったメリットと注意点

今回、セミナーの内容整理からWeb公開まで一通り進めてみて、便利だと感じたのは、ChatGPTの質問や提案に答えながら、制作を進められることです。

あらかじめ設計されたデザインをベースに、文章や画像、配色をカスタマイズできるため、仕上がりをイメージしながら制作できます。

一方で、AIに任せきりで完成するわけではありません。
今回の写真の修正のように、AIの提案やレビューを参考にしながら、最終的には自分で判断することが大切です。特に画像の採用や掲載情報の正確性は、購入者自身で確認する必要があります。
また、Codexの利用やWeb公開には、パソコンでのファイル操作やサーバーの設定が必要になる場合もあります。

専門的な制作作業をAIに任せながら、購入者は内容の確認や判断に集中できる。

そこが、今回この制作キットを使って実感した、一番のメリットだと思います。

7｜おわりに

今回の制作事例で使用した「AIでつくるセミナーLP制作キット」は、BOOTHで販売しています。
商品の詳しい内容や購入については、こちらをご覧ください。

関連記事

ご自身のセミナーLPを制作する際の参考になればうれしいです。

フォームドットで販売しているCanvaテンプレートは、以下の記事で用途別にまとめています。