「AIでLPも作れるらしい」という話は増えてきましたが、いざ仕事で使おうとすると「何から指示すればいいのか分からない」「それっぽいデザインは出せるけど、そのままお客さんに見せていいのか判断がつかない」と悩みがちです。
この記事では、AIでLP制作をする実務的な方法として、CodeXとGPT image 2.0を組み合わせ、要件整理からHTMLの初稿までを一気に作る流れを解説します。
AIに「いい感じのLPを作って」と丸投げするのではなく、要件を整理し、ラフを3案比較し、採用案を選んでクライアントに提案できる初稿まで持っていくのがゴールです。
デイトラのWeb・AIチャンネルで現役デザイナーのトムが実演した内容をもとに、全手順を紹介します。
・AIにLP制作を丸投げしてはいけない理由と、正しい使いどころ
・CodeX×GPT image 2.0で作るLP制作フローの全体像（3ステップ）
・要件整理・ラフ3案生成・Figmaでの画像切り出し・HTML初稿までの具体的な手順
・生成した初稿を「完成品として扱わない」ために意識すべきこと
公式LINEでは、デイトラ受講に関する個別のお悩み相談も承っております！
「デイトラは積極的に情報を開示し、ミスマッチをなくす」方針を取っているので、あなたの状況に合わせて、中立の立場から回答いたします。
AIにLP制作を「丸投げ」してはいけない理由
最近は「AIでLPも作れるらしい」という話を聞くことが増えてきました。
実際、AIは見た目が綺麗なものを作るのはかなり得意になっています。
ただし、AIに「いい感じのLPを作って」と丸投げをすると、実務では結構危険です。
具体的には、次のような問題が起きやすくなります。
- 誰に向けたLPなのかが曖昧なまま制作が進んでしまう
- 何を1番に伝えるべきなのかが整理されていない
- 申し込みボタン（CTA）もなんとなく置かれている
こうなると、見た目は綺麗なデザインでも、売るためのページとしては弱く、売上や成果につながらないデザインになってしまいます。
そこでこの動画では、「LPがAIで一発で完成します」という話はしません。
CodeXで要件を整理し、GPTでラフを3案作り、その中から人間が採用案を選び、HTMLの初稿まで持っていくという流れを実現します。生成の途中では、GPTで作ったラフ画像をFigmaで切り出し、CodeX側で画像を整えてHTMLに当て込むところまで実践していきます。
この流れができると、AIに丸投げするのではなく、要件を整理し、ラフを比較し、採用案を選んでクライアントに提案できるLPの初稿まで持っていけるようになります。
OpenAIが提供するAIコーディングエージェントです。指示を出すとファイルやコードを自動で生成・編集してくれます。今回はルールファイルに従って、要件整理・プロンプト作成・HTML生成までを進める役割で使います。
CodeX×GPT image 2.0で作るLP制作フローの全体像【3ステップ】
今回やることは、大きく3つです。
- CodeXでLPの要件を整理する
- GPT image 2.0でLPのラフを3案作り、採用案を選択する
- CodeXでHTMLの初稿を作る
また、Figmaで画像を切り出す工程は、3つ目のHTML初稿作成の中で対応していきます。
CodeXがHTMLを作成する待ち時間を使って、GPTのラフデザインから必要な画像を切り出し、初稿のデザインに仕上げていくイメージです。
このように、AIに任せる工程と、人間が判断する工程を分けているのがポイントです。要件の確定・ラフの選定・最終的な仕上がりのチェックは人間が行い、その間の作業をAIに任せることで、スピードと精度を両立させます。
ChatGPTの画像生成機能を指します。今回はCodeXが作ったプロンプトをChatGPTに貼り付けて、LPのラフデザイン（見た目のたたき台）を画像として生成するために使います。
実践準備｜作るLPとCodeXの環境設定
ここからは実際に手を動かしていきます。
この手順で使う「フィットベースLP」フォルダの中には、CodeXに制作フローを覚えさせるCodeX.md・SKILL.md入りのテンプレートが入っています。「LP制作」と入力するだけで流れに沿って進むのは、このテンプレートがあるからです。
このテンプレートは、動画の視聴特典「GPT LP初稿制作スターターキット」として配布されています。同じ環境で試したい方は、先に動画概要欄の公式LINEに登録し、画面に表示されるキーワードを入力して受け取っておいてください。
今回作るLP
今回作るのは、パーソナルジム「フィットベース」のLPです。
ターゲットは、運動が続かず夏前に体を整えたい20代後半から30代の男女で、次のような悩みを持つ層を想定しています。
- ジムに興味はあるけどハードルが高い
- 自己流の運動が続かない
- 何から始めればいいのか分からない
CodeXの環境設定
まずはCodeXで環境設定を行います。
初期設定をする場合は、右のバーの「プロジェクト」からフォルダのアイコンをクリックします。すると「最初から始める」「既存のフォルダーを使用」という項目が出てくるので、これをクリックすると既存フォルダを開くダイアログが表示されます。
今回はデスクトップにある「フィットベースLP」というフォルダを選択して進めます。
テンプレートフォルダの中身
「フィットベースLP」フォルダの中には、「テンプレート」フォルダが入っています。
その中には、次の2つのファイルが入っています。
- CodeX.md
- SKILL.md
これは簡単に言うと、CodeXに制作の進め方を覚えさせるためのファイルです。生成されるフォルダの構造やルールを指定しておくことで、毎回0から「要件を整理して」「ラフ用のプロンプトを作って」「HTMLを作って」と細かく指示しなくても、「LP制作」と入力するだけで流れに沿って進むように設計されています。
今回はこのテンプレートを使って制作を進めるので、CodeXに「LP制作」と入力して送信します。
CodeXがルールを読みに行ってくれるので、指示が返ってくるまで少し待ちます。
CodeXが参照するルールファイルです。作業の進め方・生成するフォルダ構成・守ってほしいルールを書いておくと、CodeXがそれに従って動きます。今回はテンプレートとして用意されたものをそのまま使います。
ステップ1：CodeXで要件を整理する
「LP制作」と送信すると、CodeXから指示が返ってきます。
要件整理の「書き」を埋める
CodeXからは「LP制作を開始します。まずは要件整理から、書きを埋めてください。未定の項目は空欄でOKです」という指示が返ってきます。
埋めるのは、次のような項目です。
- 作るもの
- サービス名
- ターゲット
- ターゲットの悩み
- 提供価値
- CTA
- トーン
- 参考にしたい雰囲気
- 素材
- 制約
これらの情報をCodeXに指示していきます。
他のサービスでLPを作りたい場合は、この中身を変更すればOKです。パーソナルジム以外の案件でも、同じ枠組みをそのまま使い回せます。
要件整理の内容を確認する
指示を投げてしばらく待つと、CodeXが要件整理をしてくれた内容が表示されます。
このとき、構成の方針も提案してくれるので、この時点でフィードバックがあれば修正指示を送ります。
今回はこの内容でOKなので、「次へ」を送ってGPT image 2.0向けのプロンプトを作ってもらいます。
要件整理の段階でCodeXが構成の方針まで提案してくれるので、方向性がズレていればここで軌道修正できます。いきなりデザインを作らせるのではなく、まず要件と構成を固めるのが「丸投げしない」ための重要なステップです。
GPT image 2.0向けプロンプトと環境フォルダの自動生成
「次へ」と指示を送ると、CodeXがプロンプトの作成を進めてくれます。
環境フォルダが自動で作られる
GPTのプロンプトを作る時点で、環境のフォルダをCodeXが自分で作ってくれます。
CodeX.mdとSKILL.mdのルールに従って、環境フォルダを自動生成してくれるイメージです。
中を見ると、CodeX.mdとSKILL.mdがコピーされ、さらに「アウトプット（output）」フォルダが生成されています。
アウトプットフォルダの中には、次の3つのフォルダが入っています。
- image
- prompt
- research
これらは、この後CodeXから返ってくる指示に従って使っていきます。
ラフ用プロンプトABCが生成される
「prompt」フォルダの中には、GPT image 2.0向けのプロンプト指示が生成されます。
作成が完了すると、プロンプトフォルダの中に「GPTラフプロンプトA・B・C」という3つのMDファイルが生成されています。
それぞれにプロンプトの指示が入っているので、この3つをChatGPTに投げていきます。
ステップ2：GPT image 2.0でラフを3案作り採用案を選ぶ
生成された3つのプロンプトを使って、ラフを作っていきます。
3つのプロンプトをChatGPTに投げる
ChatGPTでチャットを3つ新しく作り、それぞれのプロンプト（A・B・C）をそのままコピーして貼り付けます。
プロンプトは全部コピーして投げる形で大丈夫です。
3つとも生成がスタートしたら、しばらく待ちます。
A・B・Cが出力完了したら、それぞれをダウンロードします。
3案を比較して採用案を選ぶ
ダウンロードした3つのLPを比較していきます。
全体的にトーンの方向性は守れており、構成も要件で返してくれたものとほぼ同じになっているので問題ありません。
どれを選ぶかのポイントは、次の要素です。
- 写真の構図
- 情報量
- 余白やバランス感
これらを見て、初期のデザインとして提示するものを選びます。
この段階でクライアントに確認を取り、どういった方向性がいいかをすり合わせるのも良いです。その場合は、もう少しブレ幅を持たせて選択肢を広げると良いので、SKILL.mdなどを書き換えてチューニングすることで調整できます。
今回はA案を採用して進めます。
採用案をresearchフォルダに保存してCodeXに伝える
A案（Aパターン）を、ダウンロードフォルダからアウトプット内の「research」フォルダに入れます。GPT（ChatGPT）はもう閉じてしまって大丈夫です。
CodeXからは「それぞれ以下の名前で入れてください」という指示が入っているので、それに従って保存します。
保存したことをCodeXに伝えると、いずれかのパターンでHTMLの初稿まで進めてくれるという指示が返ってきます。
今回はA案で進めるので、「Aで進めてください」とプロンプトの指示を投げます。
これでAパターンのHTML初稿の生成がスタートするので、この待ち時間で画像の切り出しを行っていきます。
アウトプット内に自動生成されるフォルダです。「research」には採用したラフ画像を入れ、CodeXがそれを参照してHTMLを作ります。「image」には後述のFigmaで切り出した画像を入れ、初稿のデザインに使います。
待ち時間にFigmaでラフ画像を切り出す
CodeXがHTMLを生成している待ち時間を使って、ラフ画像を切り出します。
Figmaにラフ画像を読み込む
researchに入れたラフAの画像を、Figmaに入れます。
Figmaに画像が入ったら、画面下の帯にある左から2番目の「フレーム・セクション・スライス」の3項目のうち「スライス」を選択します。
スライスを選択すると、選択できるエリアが破線で表示されるので、切り出したい画像の範囲を選択していきます。
スライスした画像を書き出す
すべての切り出し範囲の設定が完了したら、選択した画像を書き出していきます。
- スライスを設定したところをまとめて選択する
- エクスポートの「＋（プラス）」を押す
- 「13レイヤーエクスポート」という表示が出てくるのでクリックする
- ダウンロードフォルダに保存する
すると、スライスした画像がすべて切り出されて保存されます。
これらを、アウトプット内の「image」フォルダに保存します。
画像の切り出しはCodeXのHTML生成と並行して進めます。AIの処理を待つだけの時間を、人間側の作業（画像素材の準備）に充てることで、全体の制作スピードが上がります。
ステップ3：CodeXでHTMLの初稿を完成させて確認する
画像の準備ができたら、CodeXの画面に戻ります。
index.htmlを開いて確認する
CodeXの画面に戻ると、LPが完成しています。
index.htmlをクリックして開き、researchのラフデータと左右で見比べながらチェックしていきます。
全体的に、GPTのラフにかなり近いレイアウトとイメージで作ってくれている印象です。
上から順に見ていくと、「悩み」→「解決策」→「よくある質問」→最後に「CTA」という流れで作れており、仕様通りの構成になっているので問題ありません。
初稿を「完成品として扱わない」
ただし、大事なのはこれを完成品として扱わないことです。
実案件であれば、ここからさらに次のような要素を確認して入れていく場合があります。
- 店舗情報
- 料金プラン
- 予約のURL
- トレーナーの情報
- お客様の声や実績
セクションの順序や要素も、やり取りをしながらここから調整していきます。
ただし、初回の方向性の確認としてはかなり話しやすい状態になっています。
「色やトーンは良さそうか」「写真は大きく使う方向性で良いか」「初心者向けの優しい印象で進められそうか」「CTAまでの流れに違和感はないか」といった話を、かなり早い段階でクライアントとすり合わせられるのが大きなメリットです。
まとめ｜AIでLP制作するときの使いどころと基礎の重要性
ここまで見ると「AIでLPもかなり作れるじゃん」と思う方もいるはずです。
正直、今回実演した初稿までは、デザイナーが直接手を動かさなくても作れてしまいます。
ただ、今回伝えたいのはAIに全部を任せればいいという話ではないということです。
今回の使いどころは、クライアントとの初回打ち合わせで提案できる「デザインの初稿」です。
原稿がまだ固まっていない、デザインの方向性もまだふわっとしている、でも何か見せるものがないと話が進まない。
こういう場面で今回のようなLPの初稿があると、会話や情報整理がしやすくなります。ページ全体の構成・デザインの方向性・写真の使い方や雰囲気・コンバージョンまでの流れ・スマホで見た時の印象などを、早い段階で確認できます。
つまり、AIで納品物を一発で作るというよりも、手戻りを減らすための「叩き」を早く作れる。この使い方がかなり実務向きです。
AIでデザインを作ること自体は簡単です。
でも、そのデザインを本当に使っていいのか、どこを直すか、何を削るか。これらを判断できる基礎知識と経験値が特に重要になってきます。
AIが出したものを判断できる目がないと、それっぽいものをそのまま使ってしまうからです。
- 見た目を整理する力
- 情報を整理する力
- ターゲットに合わせてトーンや色を選ぶ力
- 複数案から方向性を選ぶ力
これらの力があるほど、AIへの指示も、出てきたものへの判断も安定し、質も上がります。
AIで作業が早くなる時代だからこそ、デザインの基礎を学ぶ意味はむしろ大きくなっています。
今回の内容を自分でも試してみたい方に特典が用意されています。動画概要欄の公式LINEに登録し、画面に表示されるキーワードを入力すると「GPT LP初稿制作スターターキット」がプレゼントされます。CodeX.mdやSKILL.mdを格納したテンプレートなので、動画のやり方をそのまま再現できます。
AI LP制作に関するよくある質問
Q. AIに「いい感じのLPを作って」と丸投げしてはいけないのですか？
実務ではおすすめしません。丸投げすると、誰に向けたLPか曖昧なまま進んだり、1番伝えるべきことが整理されていなかったり、CTAがなんとなく置かれたりして、成果につながらないデザインになりやすいためです。動画では、CodeXで要件を整理してから進める流れを推奨しています。
Q. CodeXとGPT image 2.0はどう使い分けるのですか？
CodeXは要件整理・プロンプト作成・HTML初稿の生成を担当し、GPT image 2.0（ChatGPTの画像生成）はLPのラフデザインを画像として作る役割です。CodeXが作ったラフ用プロンプト3つをChatGPTに投げてラフを生成し、採用案をCodeXに戻してHTML化する、という連携になります。
Q. ラフは何案作りますか？どうやって選べばいいですか？
動画では3案（A・B・C）を作っています。選ぶポイントは「写真の構図」「情報量」「余白やバランス感」です。この段階でクライアントに方向性を確認するのも有効で、その場合はブレ幅を持たせて選択肢を広げると良いと解説されています。
Q. Figmaでの画像切り出しはいつ行うのですか？
CodeXがHTMLの初稿を生成している「待ち時間」に行います。採用したラフ画像をFigmaに読み込み、「スライス」機能で切り出したい範囲を選択してエクスポートし、アウトプット内のimageフォルダに保存します。
Q. 生成されたLPはそのまま納品できますか？
そのままでは完成品として扱いません。動画では、実案件なら店舗情報・料金プラン・予約URL・トレーナー情報・お客様の声などを追加し、セクションの順序や要素も調整していくと解説されています。あくまで初回の方向性確認に使う「叩き」という位置づけです。
AIでのLP制作をさらに深く学ぶならデイトラ「Webデザインコース」
本記事で解説したAIでのLP制作は、独学でも基礎を押さえることはできます。
ただし、AIが出したデザインを「本当に使っていいか」「どこを直すか」を判断するには、実務で通用するデザインの基礎が欠かせません。動画でも、AIで作業が早くなる時代だからこそ基礎を学ぶ意味は大きいと語られています。
デイトラの「Webデザインコース」では、見た目を整えるだけでなく、誰に何を伝えるのか・どう構成するかまで学ぶことができます。
広告費を最小限に抑え、口コミと品質で支持を得てきたからこそ、業界の数分の一という低価格で学べます。
0からきちんとデザインの基礎を学び、AIツールを使いこなして副業やフリーランスとして活躍したい方は、ぜひ一度カリキュラムをチェックしてみてください。
「自分に合うか不安…」という方は公式LINEへ
「独学とスクール、どちらが自分に合っているか分からない」
「複数のコースのうち、どれを選ぶべきか相談したい」
そんな方は、デイトラ公式LINEに登録してみてください。
自分に合ったコースの診断や、無料の学習動画などの特典もプレゼント中です。
無理な勧誘は一切ありませんので、まずは情報収集として気軽に登録してみてくださいね。
トム（@yuhei_design）
デイトラのWebデザイナー。印刷会社に7年務めた後、2021年に独立。現在はWebデザイナーとしてLP制作やUIデザインに従事しながら、デザイン×生成AI活用の実践方法を解説している。
