AIと一緒にLPを作るキット
使い方ガイド
このキットは、AI(Claude Code または Codex)があなたに1問ずつ質問しながら、 LP(ランディングページ)の文章・デザイン・公開までを一緒に進めてくれる道具箱です。 難しい操作はAIが担当します。あなたは質問に答えて、出てきた案から選ぶだけ。
全体像 — 何がどうなるの?
あなたがAIと会話すると、AIがLPのファイルを作り、それをCloudflare(クラウドフレア)という 無料のサービスに載せて、世界中から見られるURLになります。
必要なもの(3つだけ)
| 必要なもの | 費用 | メモ |
|---|---|---|
| Claude Code または Codex | ツールによる | どちらか片方でOK。すでに使っているものがあればそのままで大丈夫です |
| Node.js 18以上 | 無料 | 文章の改行をきれいにする道具が使います。無ければAIが案内してくれます(nodejs.org) |
| Cloudflareアカウント | 無料 | 公開するときだけ必要。メールアドレスがあれば作れます(登録ページ) |
💡 CloudflareのLP公開は無料の範囲で十分収まります。 クレジットカードの登録も不要です。
はじめかた(4ステップ)
-
1
ZIPを解凍して、好きな場所に置く
デスクトップでも書類フォルダでもOK。「chige-lp-kit」というフォルダができます。
-
2
そのフォルダをAIツールで開く
ターミナル(Mac:「ターミナル」アプリ/Windows:「PowerShell」)を開いて、
cdと打った後にフォルダをドラッグ&ドロップしてEnter。 つづけてclaudeまたはcodexと打ってEnter。 -
3
セットアップして と送る
道具の準備と、あなたのブランド(色・雰囲気)のインタビューをAIが順番に進めます。 エラーが出ても、その文をそのままAIに貼れば直してくれます。
-
4
LPを作りたい と送る
ここからが本番。AIが1問ずつ質問してくれるので、答えるだけです。
作る流れ — AIは勝手に作りません
このキットのAIは、あなたのOKが出るまで次の工程に進まないよう設計されています。 質問はまとめてではなく1問ずつ。「デザインはどうしますか?」「ブランドカラーは?」 「参考にしたいサイトはありますか?」と聞かれるので、思いつくまま答えてください。 参考サイトが思いつかなければ、日本の有名サイト318件の中からAIが候補を出してくれます。
💡 途中でやめても大丈夫。翌日「続きから」と送れば、AIが状況を見て再開します。
AIは「いいですね」で終わらせません
このキットのAIは、言われたとおりに作るだけの係ではありません。 商品の弱いところを正直に伝え、法律に触れそうな表現を止め、公開前に危ないものが 混ざっていないか点検します。
① 商品へのフィードバック(文章を書く前)
ヒアリングのあと、AIはすぐ書き始めずに、次の5つが答えられるか確かめます。 埋まらないところがあれば、質問の形で返してきます。
| AIが確かめること | 埋まらないと、こうなります |
|---|---|
| 誰の問題か(1人に絞れているか) | 「みんな向け」=誰にも刺さらない |
| 申込の前と後で、何がどう変わるか | 機能の説明だけのLPになる |
| なぜ「あなた」から買うのか | 値段だけで比べられる |
| それが本当だとどう分かるか(証拠) | 「できます」の羅列で信用されない |
| 申込む人がいちばん不安なのは何か | FAQが的外れになり、迷った人が去る |
💡 遠慮なく指摘しますが、言うのは多くても2〜3点まで。 「今はこれでいい」と答えれば、それ以上は押さずに先へ進みます。
② 法律のチェック(特定商取引法・景品表示法など)
LPで有料の申込・購入をしてもらうなら、法律で決められた表記のページが必要です。 AIが「お金の申込がありますか?」と最初に聞いて判断し、必要なら項目を1つずつ聞いて作ります。
| 判定 | 意味 |
|---|---|
| ✅ 通過 | 明らかな問題は見当たらない |
| ⚠️ 要確認 | あなたの判断・専門家の確認が必要 |
| 🛑 ブロック | 直すまで公開しない(「大丈夫だから」では通しません) |
🛑になりやすいのは、「必ず〜できます」の断定、根拠のない「No.1」、 実際には売っていない「通常価格」との比較、実態のない「残りわずか」など。
⚠️ AIのチェックは、法律に適合していることの保証ではありません。 金額の大きい商品、健康・美容・投資に関わるものは、専門家に一度見てもらってください。
③ 公開前の安全点検
最後に、公開して困るものが混ざっていないかを点検します。とくに大事なのが
「公開されるのは public フォルダの中だけ」という決まりです。
ほかに点検するのは、こんなところです。
- 申込フォームの送信先が自分のものか(他人のフォームIDが残っていると、お客さんの情報が他人に届きます)
- HTMLにパスワードやAPIキーを書いていないか(HTMLは誰でも中身を読めます)
- 写真の位置情報(スマホの写真には撮影場所が埋まっていることがあります)
- 【仮】の価格や日程が残っていないか、リンク切れがないか
🚦 危ないものが見つかったら、AIは公開を止めて先に直そうと言ってきます。
公開(デプロイ)のしくみ
「デプロイ」とは、パソコンの中にあるLPのファイルを、インターネット上に置いて 誰でも見られるようにすることです。このキットではCloudflare Pagesという 無料サービスを使います。しくみは下の図のとおりです。
初回だけ:Cloudflareとつなぐ準備(2つ)
最初の公開のときだけ、次の2つの準備があります。2回目からは何も要りません。
あなた Cloudflareのアカウントを作る(メールアドレスで登録、無料)
あなた AIがログイン用コマンドを打つとブラウザが自動で開くので、「Allow(許可)」ボタンを押す
公開のコマンド(参考)
実際の公開はAIがやります。あなたが覚える必要はありませんが、 AIが打つのはこういうコマンドです(実行前に必ず「このURLで公開していいですか?」と確認されます)。
AIが実行 実行すると https://〇〇.pages.dev というURLが発行されます。
公開したあと
- 修正したいとき:AIに直してもらって、もう一度「公開して」と言うだけ。同じURLのまま中身が新しくなります(図4の点線)。
- 自分のドメイン(例:example.com)を使いたいとき:あとからCloudflareの画面で設定できます。必要になったらAIに「独自ドメインをつなぎたい」と相談してください。
あなたがやること/AIがやること
| あなた | AI |
|---|---|
| 質問に答える(1問ずつ来ます) | 質問を考えて、答えを形にする |
| 構成・文章・デザイン案にOKを出す/選ぶ | 構成案・文章・デザイン2案を用意する |
| Cloudflareのアカウント作成と「Allow」ボタン | コマンド実行・ファイル作成・公開・チェック |
| パスワードなどの秘密情報はチャットに貼らない | 秘密情報を聞かない・要求しない |
こまったとき Q&A
- Q. スキルが効いていない気がする
- A. ツール(Claude CodeまたはCodex)をいったん終了して、同じフォルダで開き直してください。
- Q. 「Cannot find module 'budoux'」というエラーが出た
- A. AIに「lp-lineのnpm installをして」と頼んでください。
- Q. Node.jsが無いと言われた
- A. nodejs.org から推奨版(LTS)をインストールしてください。ここだけは人間の作業です。
- Q. デザインの参考が思いつかない
- A. AIに「候補を出して」と言えば、日本の有名サイト318件の中から提案してくれます。
- Q. UI部品の名前が分からない(「あの丸いアイコンが重なってるやつ」みたいな)
- A. そのままの言葉で伝えてOK。AIがUI用語辞典(namethatui.com)で正式名称を確認してくれます。
- Q. ファイルを壊してしまった
- A. ZIPをもう一度解凍すれば、最初の状態に戻ります。
🍵 だいじなこと:パソコンは壊れません。出てくるのはエラーの文字だけで、 そのままAIに貼れば直してくれます。1回で終わらせようとせず、疲れたら翌日「続きから」でOKです。