ガイド
AI でランディングページを作る方法
結論
Claude Code、Codex、Cursor にランディングページスキルをインストールするか、PopNow 経由でアシスタントに依頼し、製品と想定読者を伝えます。エージェントは先に 2〜3 案のモックアップを見せることができ、選ばれた案を HTML と CSS でレスポンシブなページに組み上げ、デスクトップとスマートフォンで確認します。ヒーロー画像、製品写真、背景ループは、料金を承認した後に PopNow で作ります。
アイデアからファイルまで 5 ステップ
PopNow を一度接続する
Claude、ChatGPT など MCP に対応したアプリに PopNow を追加するか、Claude Code、Codex、Cursor などのコーディングエージェントにスキルをインストールします。所要時間は約 1 分です。
作りたいものを伝える
何のためのものか、長さやページ数、必ず入れてほしい内容を、ふつうの言葉で書いてください。
スタイルを選ぶ
アシスタントが合うスタイルをプレビュー付きで示します。どれかを選ぶか、このページで見たスタイルを名前で指定してください。
料金を承認する
スキル自体は無料です。必要な画像、動画、BGM、音声には、実行前に料金が表示されます。承認するまで何も始まりません。
完成したファイルを受け取る
コーディングエージェントでは、スキルがあなたのパソコン上でファイルを作成し、描画します。チャットアプリでは、作品を企画し、PopNow でメディアを作ります。失敗した処理は自動で返金されます。
頼んでみる
私たちの AI スケジューリングアプリのランディングページを、ワークフロー自動化風のスタイルで、ウェイトリストのフォーム付きで作って。
スタイルを選ぶ
以下のスタイルはすべて無料のスキルです。開いてサンプルを見るか、スタイル名を指定してアシスタントに頼めます。
AI SaaS ランディングページ
+3温かみのある砂色の紙に細い罫線とハッチングの溝を配し、AI アシスタントがタスクを計画するライブのかんばんボードを置きます。
アニメーション付きヒーローセクション
+3見出しの一語がゆるやかに切り替わり、ボタン 2 つと横長の画像枠を備えた LP のヒーローセクションです。
シェーダーのヒーロー付きの代理店サイト
+3下に固定された宣言文の後ろで、ライブのオレンジの熱をしたシェーダーのヒーローが動き、ピルのナビと、ずらして並ぶ事例のグリッドが続きます。
ダークモード SaaS ランディングページ
+3動きの多いダークトーンのソフトウェア製品向けマーケティングサイトを、自己完結した HTML ファイル 1 つで届けます。
雑誌風の SaaS サイト
+3ネイビーの分割ヒーロー、ドキュメンタリー写真の横に並ぶ 5 行のセリフの見出し、斜めの帯、コバルトのアクセントひとつ。
グラスモーフィズムのサイトテンプレート
+3ほぼ黒のフィルムの上の、すりガラスのピル形ボタン。斜体の 1 語を含む大きなセリフの見出しと、メールの登録欄。
ハードウェア製品のサイト
+3銀色のスタジオ写真の上に、極細の巨大なモデル名。すりガラスのスペックカード、実寸比のラインアップ、ハードウェアのベントー。
インタラクティブなグリッドのヒーロー
+3ほぼ黒の上の細い線のダークなグリッドが、カーソルの方へ曲がり、クリックのたびに光る輪が広がります。
AI モックアップからのランディングページ
+3まず 3 つのフルページのデザインを見て、ひとつを選ぶと、エージェントがきれいでレスポンシブなコードに組み上げます。
パーティクルアニメーションのヒーロー
+3温かい紙の上の文章の横で、インクとティールのドットの回転する球体が、アイデアごとに形を変え、スクロールで散ります。
個人ブランドのウェブサイト
+3細い枠の中で、温かい紙にやわらかくなじむ肖像。両側には、軽めと太字の言い切り。
シネマティックな製品ローンチページ
+3映画の光に照らされたほぼ黒のページ。ゆっくり流れる光の上のセリフの表題カード、レターボックスの夜のシーン、予約フォーム。
SaaS ランディングページ テンプレート
+3実際に動く製品コンソール、料金、登録フォームを備えた、落ち着いた明るいトーンのソフトウェア製品向けマーケティングサイトです。
ワークフロー自動化のランディングページ
+3グラファイトのページ。小さく左寄せの見出しと、その下で実行、再試行、ログの流れるライブのノードグラフ。
PopNow で作る理由
これらのスタイル向けに作られている
各スキルのプロンプト、サイズ、モデルの選び方は PopNow 向けに書かれているため、最初の一回目から選んだ雰囲気に近い結果になります。
素材ではなく完成したメディア
画像、動画、BGM、音声、効果音、高解像度化、背景の切り抜き、BGM・ナレーション・字幕付きの自由な組み立てまで、すべて 1 つの PopNow アカウントから使えます。
予想外の請求なし
各処理は実行前に料金を表示し、承認するまで始まりません。失敗した処理は自動で返金されます。サブスクリプションはありません。
使うのはあなた
作ったものは個人利用にも商用利用にも使え、クライアント案件も含まれます。PopNow がそれを使ってモデルを学習させることはありません。
よくある質問
AI でランディングページを作れますか?
はい。ランディングページスキルは、テスト済みのデザインシステムをもとに、コーディングエージェントがレスポンシブなページを作り、デスクトップとスマートフォンで確認して、ファイルを渡します。
コードにする前にデザインを確認できますか?
はい。モックアップ先行のスキルは、2〜3 案のデザインを画像で見せ、選ばれた案だけをコード化します。
コードの所有者は私ですか?
はい。ページはあなたのプロジェクトにあるプレーンな HTML と CSS で、どこにでもデプロイでき、通常のコードと同じように編集できます。
料金はいくらかかりますか?
スキルは無料です。PopNow のヒーロー画像、製品写真、背景クリップにはクレジットを使い、各処理の前に料金が表示されます。

