ChatGPTにLPを作らせる無料キット｜デザインとレイアウトを選ぶだけ

2026年9月13日2026年9月14日

当ページのリンクには広告が含まれています。

ChatGPT に「LP を作って」と頼むと、それらしいものは返ってきます。ただ、何度やっても同じ顔になります。

上から見出し、次に特徴が 3 つ、最後に問い合わせ。どの業種で頼んでも、だいたいこの形です。

原因は、頼み方にあります。

何を指定していないか

「LP を作って」だけでは、AI は当たり障りのない平均を出します。指定していないことが多すぎるためです。

何を聞かれるべきか
どんな配色と書体か
PC とスマートフォンでどう並べるか
公開したときに壊れない書き方か

この 4 つを、それぞれ別のファイルにしました。ChatGPT に 4 つとも渡すと、返ってくるものが変わります。

実際に作ったもの

同じ内容で、デザインとレイアウトだけ変えて 4 本作りました。全部、このキットと ChatGPT だけで作っています。

インパクト × スタンダード　文字を大きく見せて、PC では横幅を使います
インパクト × センターモバイル　中央にスマートフォン幅の本体を置いて、PC では左右を演出に使います
エディトリアル × スタンダード　雑誌のように、読ませることを軸にした組み方です
エディトリアル × センターモバイル　同じ読み物の質感で、中央に寄せた形です

見比べると、デザインとレイアウトが別の軸だと分かると思います。同じ「インパクト」でも、レイアウトを変えると印象が変わります。

4 つのファイル

キットに入っているのは、次の 2 つです。

公開のための決まり　壊れない HTML を作らせるためのもの
共通の質問　作る前に AI が聞くこと

これとは別に、デザインとレイアウトを配っています。

デザイン　どんな見た目にするか（配色、書体、装飾、動きの雰囲気）
レイアウト　どこに何を置くか（構成、PC とスマートフォンでの並び方）

デザインは 8 種類、レイアウトは 2 種類あります。組み合わせは 16 通りです。

デザイン

インパクト　文字を大きく、はっきり見せる
エディトリアル　雑誌のように読ませる
ミニマル　余白を広く取って、要素を減らす
ラグジュアリー　落ち着いた色で、値打ちを伝える
ナチュラル　やわらかい色と丸みで、親しみを出す
ポップ　明るい色で、楽しさを前に出す
コーポレート　整った印象で、信頼を伝える
テック　濃い地に明るい文字で、速さと硬さを出す

レイアウト

スタンダード　PC では横幅を使い、スマートフォンでは縦に組み替える
センターモバイル　中央にスマートフォン幅の本体を置き、PC では左右を演出に使う

キットをダウンロード

デザイン集をダウンロード

使い方

1. ChatGPT に 4 つ渡す

無料のままで構いません。アップロードしても、中身をコピーして貼り付けても動きます。

公開のための決まり.md
共通の質問.md
デザイン – ○○.md
レイアウト – ○○.md

デザインとレイアウトは、作りたいものに近いものを 1 つずつ選んでください。

2. 質問に答える

いくつか質問されます。選択肢が出るので、番号や言葉を並べるだけで構いません。

「1. Web サービス、2. 初心者、3. 購入、4. 簡単・安い・すぐ使える」のような短い答えで進みます。分からないものは「おまかせ」で構いません。

最初に作りたいものを説明していれば、そのぶんは聞かれません。多く書いておくほど、質問は減ります。

3. 返ってきた HTML を保存する

index.html という名前で保存します。文字コードは UTF-8 です。

4. 気になるところを直してもらう

そのまま伝えれば直ります。専門の言葉は要りません。

もっと高級感がほしい
ここは横に流れる形にしたい
いちばん上をもっと大胆に
スマートフォンでは順番を変えたい

何度でも直せます。渡した決まりの中で作るので、直しても壊れません。

問い合わせフォームについて

質問の中で「問い合わせフォームは要りますか」と聞かれます。

「要る」と答えると、PageDrop の受け口につながる形で作ります。ほかの場所に置く場合は、送信先をご自身で用意してください。Netlify なら Netlify Forms、そのほかなら Formspree などの外部サービスが使えます。

「要らない」と答えれば、連絡先とボタンだけの形にしてくれます。電話やメール、予約サイトへ送るなら、こちらで足ります。

できた HTML を、どこに置くか

ここまでは無料でできます。HTML は手元にできます。あとは、置く場所を決めるだけです。

置き方はいくつもあります。すでに使っている場所があれば、そちらで構いません。

置き場所	必要なもの	月額	初期費用	要る知識
Netlify など	なし	0 円	0 円	独自ドメインを使うなら DNS と SSL
レンタルサーバー	サーバーの契約	1,000 円くらいから	0 円	FTP、フォルダの構成
PageDrop	WordPress	1,000 円くらいから	2,000 円	なし

月額は、サーバー代とドメイン代です。すでにサイトをお持ちなら、いま払っているもので足ります。新しく増えることはありません。

何も持っていない状態から始めるなら、Netlify などが完全に無料です。独自ドメインを使いたい場合だけ、ドメイン代（年 1,000 円くらいから）がかかります。

無料で置ける場所

Netlify　フォルダをドラッグするだけで公開できます。独自ドメインも使えます
Cloudflare Pages　同じくフォルダを上げるだけ。表示が速いです
GitHub Pages　GitHub を使っている方なら、そのまま置けます

どれも無料の範囲で使えます。作った HTML を試すだけなら、これで足ります。

ただし、いくつか引っかかるところがあります。

アカウントを作る手間がかかります。どれも英語の画面です
そのまま使うと、URL が netlify.app のような別のドメインになります
自分のドメインを使うには、DNS のレコードを書き換えて、反映を待って、SSL の証明書が出るのを待つ必要があります
DNS を触ったことがないと、ここで止まりがちです。設定を間違えると、いま動いているサイトにも影響します
すでに WordPress のサイトがある場合、置き場所が 2 つに分かれます

サブドメイン（netlify.app のままの URL）で使うなら、この手間はありません。試しに出すだけなら、それで十分です。

すでにレンタルサーバーを持っている場合

FTP でファイルを置けば公開されます。エックスサーバーやロリポップなど、どこでも同じです。

ファイル管理の画面から上げることもできます。FTP のソフトを入れる必要はありません。

どのフォルダに置くか、自分で決める必要があります
ファイルが WordPress の外に散らばります。あとでどこに置いたか分からなくなりがちです
消すときも、自分でファイルを探して消します

WordPress を使っている場合

すでに WordPress でサイトを持っているなら、そこに置くのがいちばん近道です。ドメインもサーバーも、もうあります。追加でかかるのはプラグインの代金だけです。

ただ、WordPress に静的な HTML を置くのは、意外と面倒です。

FTP で置くと、WordPress の外にファイルが散らばります
固定ページに貼ると、テーマの CSS が効いて、作ったときの見た目になりません
ヘッダーとフッターも勝手に付きます

PageDrop は、そこだけを引き受けるプラグインです。管理画面から ZIP を上げて、URL を決める。それだけで公開されます。

できること

テーマを通しません。作ったときの見た目のまま出ます
URL が自分のドメインになります。example.com/pages/spring-sale/ のような形です
何本でも置けます。キャンペーンごと、事業ごとに分けて持てます
同じ URL のまま、中身だけ入れ替えられます
問い合わせフォームの受け口が付いています。外部のサービスが要りません
FTP もサーバーの知識も要りません。DNS も SSL も触りません

できないこと

LP を作る機能はありません。作るのは AI の役目です
中の文字を書き換えることもできません。直すのは ZIP のほうです
プラグインを止めると、置いたページは表示されなくなります
一時的に非公開にはできません。下げるときは消します
WordPress が必要です。持っていない方には向きません

この記事の上に並べた 4 本も、これで公開しています。2,000 円の買い切りです。

PageDrop を見る

これから WordPress を始める場合

LP を 1 枚置きたいだけなら、上に挙げた無料の場所で十分です。わざわざ借りる必要はありません。

ブログや会社のサイトも一緒に持ちたい場合は、レンタルサーバーを借りると、申し込みのときに WordPress まで入ります。

サーバー会社によっては、契約している間ドメイン代が無料になる形があります。ドメインは通常、年 1,000 円から 4,000 円くらいかかるので、そのぶんが浮きます。

サーバー代　月 1,000 円くらいから
ドメイン代　無料になる形がある
WordPress　申し込みのときに入る

ここまで揃えば、あとは PageDrop を入れるだけで、自分のドメインで何本でも公開できます。

[広告：ConoHa WING]

中身について

公開のための決まり

壊れないための技術的な決まりだけが書いてあります。デザインには一切関わりません。

ファイルの構成とパスの書き方
置けないファイル
CDN が落ちても中身が読める書き方
書体の指定と、読み込めなかったときの備え
スマートフォンで崩れないこと、文字の大きさ、押せる大きさ

たとえば動きは GSAP で付けますが、CDN が落ちたときに要素が消えないよう、書き方を指定しています。この 1 行が無いと、読み込みに失敗したときページの中身ごと見えなくなります。

共通の質問

作る前に AI が聞くことです。デザインが変わっても、ここは変わりません。

何のページか、誰に向けるか、最後に何をしてほしいか、といったことを聞きます。会社名や連絡先も聞きますが、教えなかったものは勝手に作りません。その表示ごと省きます。

「株式会社サンプル」のような、それらしい値が入ることを防ぐためです。

デザインとレイアウト

この 2 つを分けているのが、このキットの要です。

デザインは見た目、レイアウトは配置です。分けておくと、デザインを 8 つ・レイアウトを 2 つ作るだけで 16 通りになります。増やすときも、片方だけ足せば済みます。

デザインは、自分で作っても構いません

配っているデザインとレイアウトは、ただのテキストファイルです。中を開けば、何がどう書いてあるか読めます。

合うものが無ければ、書き換えて使ってください。作り直しても構いません。

書き換えて使う

いちばん簡単なのは、近いものを選んで一部だけ直すやり方です。

配色だけ変える。「濃い地に明るい文字」を「白地に黒」にする、など
動きの速さを変える。「0.4 秒以内」を「ゆっくり 1.2 秒」にする
質問を足す。その業種でしか聞かないことを 1 つ増やす

一から作る

ChatGPT に、既存のデザインを 1 つ見せて「これと同じ形式で、和風のものを作って」と頼むのが早いです。形式が揃っていれば、ほかのファイルと組み合わせて動きます。

書くのは、見た目と雰囲気だけで構いません。壊れないための決まりは「公開のための決まり」が持っているので、デザイン側で技術的なことを書く必要はありません。

補足

「公開のための決まり」と「共通の質問」は直さないでください。ここが壊れると、公開したときに動かなくなります
デザインとレイアウトは、いくつ作っても構いません。組み合わせて使えます
作ったものを配ったり、仕事で使ったりしても構いません

これから増やします

デザインとレイアウトは、こちらでも増やしていきます。新しいものが出ても、キットの中身（公開のための決まり、共通の質問）はそのままお使いいただけます。差し替えるのはデザイン集だけです。

ダウンロード

無料です。会員登録も要りません。2 つとも取ってください。