できること
- 10 種類のライブラリから選んだ、異なるアートディレクションの、フルページのモックアップ 2〜3 点
- 選んだデザインを、本物のコピーで、静的ページまたはプロジェクトのコンポーネントとして組み上げたもの
- ヒーローとセクションの画像を、適切なサイズで描き直し、レスポンシブな WebP で書き出したもの
- デスクトップとスマホのスクリーンショット、モックアップとの並べた比較、QA レポート
- 機械的に作られた癖のリントレポートと、適用した修正
向いている用途
- スタートアップ、アプリ、製品のランディングページ
- 独自の見た目が必要なローンチや事前登録のページ
- 汎用テンプレートに見えてしまうページのリデザイン
向いていない用途
- 既存のデザインファイルからのピクセル単位の再現
- アプリのロジックや CMS を持つ複数ページのサイト
- メールのテンプレート
使い方
Claude・ChatGPT で
PopNow のスキル「AI モックアップからのランディングページ」(landing-page-from-mockup)を使って、次のことをしてください:Lumen Notes のランディングページ。入力中に関連するメモを提案する、プレーンテキストのメモアプリです。1 台のデバイスは無料、Pro は月 $6。推薦コメントはまだありません。
コーディングエージェントで
/popnow-landing-page-from-mockup Lumen Notes のランディングページ。入力中に関連するメモを提案する、プレーンテキストのメモアプリです。1 台のデバイスは無料、Pro は月 $6。推薦コメントはまだありません。
次はこれ
ヒーローはモックアップ B から、料金表はモックアップ A から取って。
当社の Astro プロジェクトの site/ の下に作って、レビューをもう一度実行して。
用意しておくもの
- 製品名、対象者、見出しの約束
- 3〜4 の機能と、それぞれの具体的な詳細、プランと価格
- 裏付けのある証拠(実際の引用、数字、事実)
- PopNow API キー。ブランドがすでに定義されていれば DESIGN.md
似ているスキル
すべて見る →3D アバター作成ツール
+3ぬいぐるみのようなかわいい 3D キャラクターをブラウザで作り、透過 PNG や 3D ページとして保存できます。
カレンダーヒートマップ
+31 年分の日々の活動を濃淡付きのカレンダーで表示。連続記録、合計、キーボード操作にも対応します。
AI SaaS ランディングページ
+3温かみのある砂色の紙に細い罫線とハッチングの溝を配し、AI アシスタントがタスクを計画するライブのかんばんボードを置きます。
アニメーション付きヒーローセクション
+3見出しの一語がゆるやかに切り替わり、ボタン 2 つと横長の画像枠を備えた LP のヒーローセクションです。
シェーダーのヒーロー付きの代理店サイト
+3下に固定された宣言文の後ろで、ライブのオレンジの熱をしたシェーダーのヒーローが動き、ピルのナビと、ずらして並ぶ事例のグリッドが続きます。
ダークモード SaaS ランディングページ
+3動きの多いダークトーンのソフトウェア製品向けマーケティングサイトを、自己完結した HTML ファイル 1 つで届けます。
デザイナーのポートフォリオサイト
+3落ち着いたグレーの上で、フェードする見出しの周りを 6 枚の傾いたカードが漂い、赤いポートレートのカードと、雑誌風の事例が続きます。
エンジニア向けポートフォリオサイト
+3事例紹介、執筆、登壇、履歴書、問い合わせフォームを備えた、エンジニア向けのダークな個人サイトです。
雑誌風の SaaS サイト
+3ネイビーの分割ヒーロー、ドキュメンタリー写真の横に並ぶ 5 行のセリフの見出し、斜めの帯、コバルトのアクセントひとつ。
グラスモーフィズムのサイトテンプレート
+3ほぼ黒のフィルムの上の、すりガラスのピル形ボタン。斜体の 1 語を含む大きなセリフの見出しと、メールの登録欄。
ハードウェア製品のサイト
+3銀色のスタジオ写真の上に、極細の巨大なモデル名。すりガラスのスペックカード、実寸比のラインアップ、ハードウェアのベントー。
インタラクティブなアーキテクチャ図
+3検証済みの JSON モデルから作る、オフラインでクリックできるシステム構成図。各ボックスの根拠も確認できます。
インタラクティブなグリッドのヒーロー
+3ほぼ黒の上の細い線のダークなグリッドが、カーソルの方へ曲がり、クリックのたびに光る輪が広がります。
ナレッジグラフ エクスプローラー
+3プロジェクトのメモを、すべての記述が出典の行にリンクする、オフラインで検索できるグラフに変えます。
KPI ダッシュボードのテンプレート
+3変化のチップ付きの 4 つの KPI タイルの下に、光る折れ線グラフ、内訳の表、目標のバー。温かい紙の上で。
Web マガジンサイト テンプレート
+3記事、トピック、小さなショップ、定期購読を備えた、紙の雑誌のような質感のサイトを HTML ファイル 1 つで。
パーティクルアニメーションのヒーロー
+3温かい紙の上の文章の横で、インクとティールのドットの回転する球体が、アイデアごとに形を変え、スクロールで散ります。
個人ブランドのウェブサイト
+3細い枠の中で、温かい紙にやわらかくなじむ肖像。両側には、軽めと太字の言い切り。
シネマティックな製品ローンチページ
+3映画の光に照らされたほぼ黒のページ。ゆっくり流れる光の上のセリフの表題カード、レターボックスの夜のシーン、予約フォーム。
管理画面ダッシュボード テンプレート
+3グラフ、表、カンバン、カレンダーを備えた、実際に動くバックオフィス画面を、オフライン HTML ファイル 1 つで。
SaaS ランディングページ テンプレート
+3実際に動く製品コンソール、料金、登録フォームを備えた、落ち着いた明るいトーンのソフトウェア製品向けマーケティングサイトです。
スクラップブック風ポートフォリオサイト
+3紙の小物で作る複数ページのオンライン履歴書。事例紹介と印刷できる履歴書付きです。
スニーカーショップ サイトテンプレート
+3カタログ、商品ページ、カート、デモ決済を備えた、靴・アパレルのショップ一式を HTML ファイル 1 つで。
ワークフロー自動化のランディングページ
+3グラファイトのページ。小さく左寄せの見出しと、その下で実行、再試行、ログの流れるライブのノードグラフ。
よくある質問
なぜコードを書く前にモックアップを作るのですか?
言葉でスタイルを説明するより、完成した見た目のページから選ぶほうが速く、正直です。また、組み上げに具体的な目標を与えるので、スクリーンショットの比較で、コードがどこでずれたかを正確に示せます。
PopNow は何を生成し、費用はいくらですか?
モックアップ(それぞれ約 30〜35 クレジット)と、希望すればきれいなヒーローとセクションの画像(それぞれ約 35〜75 クレジット)です。典型的なフルの実行は約 275 クレジット。モックアップ 1 点の軽量モードは約 35 クレジットです。どの生成も先に見積もり、あなたが同意してから実行します。
何かインストールが必要ですか?
Node と Python 3、それにスクリーンショット用のローカルの Chrome、Chromium、または Edge が必要です。プロジェクトに Playwright があればそれを使います。ほかの依存関係はありません。
ページにモックアップ画像の文字が入ることはありますか?
ありません。モックアップは画像で、その小さな文字は崩れることがあります。見出し、機能、価格、FAQ はあなたのブリーフから来ます。エージェントが下書きしたものは、確認してもらうために一覧にします。

