できること
- フォントと画像を埋め込んだ HTML ファイル 1 つ(ネットワーク通信なし)
- ライブの製品ウィンドウ:ボード、リスト、タイムラインの表示切り替え、検索、依頼されるとタスクを計画するアシスタント
- 機能タブ、週カレンダー、計画タイムライン、お客様の声、セキュリティ、料金、FAQ
- プラン・シート管理、顧客事例 1 件、リリースノート、会社概要、お問い合わせ、ログインと作成、規約、404 のページを、ライト・ダークで追加
- 任意:PopNow から、クレジットの見積もり後に届く写真、ストーリーのループ、SNS 用カード
向いている用途
- AI アシスタント、コパイロット、計画ツール
- タスク、スケジュール、チームの生産性アプリ
- 見せられる実際の製品がある SaaS のローンチ
向いていない用途
- ダーク基調の開発者ツールや紫基調のブランド
- オンラインストア、ポートフォリオ、ブログ
- ヒーローに写真や動画を使いたいチーム
使い方
Claude・ChatGPT で
PopNow のスキル「AI SaaS ランディングページ」(ai-saas-landing-page)を使って、次のことをしてください:小規模サポートチーム向けの AI 受信箱 Tidyline のトップページを作って。問い合わせを振り分け、フォローアップを予約します。プランは Free、Team がシート当たり $19、Business がシート当たり $39。
コーディングエージェントで
/popnow-ai-saas-landing-page 小規模サポートチーム向けの AI 受信箱 Tidyline のトップページを作って。問い合わせを振り分け、フォローアップを予約します。プランは Free、Team がシート当たり $19、Business がシート当たり $39。
次はこれ
何か生成する前に、顧客事例の写真と 2 枚のポートレートシートの見積もりを出して。
私の Next.js アプリに移植して、変更履歴のルートは外して。
用意しておくもの
- 製品名、一文の約束、主な操作
- アシスタントがすること、扱う対象、プラン
- 使ってよい顧客、見積もり、数字。または下書きの承認
- 任意:PopNow API キーか、自分のチーム写真
似ているスキル
すべて見る →3D アバター作成ツール
+3ぬいぐるみのようなかわいい 3D キャラクターをブラウザで作り、透過 PNG や 3D ページとして保存できます。
カレンダーヒートマップ
+31 年分の日々の活動を濃淡付きのカレンダーで表示。連続記録、合計、キーボード操作にも対応します。
アニメーション付きヒーローセクション
+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 タイルの下に、光る折れ線グラフ、内訳の表、目標のバー。温かい紙の上で。
AI モックアップからのランディングページ
+3まず 3 つのフルページのデザインを見て、ひとつを選ぶと、エージェントがきれいでレスポンシブなコードに組み上げます。
Web マガジンサイト テンプレート
+3記事、トピック、小さなショップ、定期購読を備えた、紙の雑誌のような質感のサイトを HTML ファイル 1 つで。
パーティクルアニメーションのヒーロー
+3温かい紙の上の文章の横で、インクとティールのドットの回転する球体が、アイデアごとに形を変え、スクロールで散ります。
個人ブランドのウェブサイト
+3細い枠の中で、温かい紙にやわらかくなじむ肖像。両側には、軽めと太字の言い切り。
シネマティックな製品ローンチページ
+3映画の光に照らされたほぼ黒のページ。ゆっくり流れる光の上のセリフの表題カード、レターボックスの夜のシーン、予約フォーム。
管理画面ダッシュボード テンプレート
+3グラフ、表、カンバン、カレンダーを備えた、実際に動くバックオフィス画面を、オフライン HTML ファイル 1 つで。
SaaS ランディングページ テンプレート
+3実際に動く製品コンソール、料金、登録フォームを備えた、落ち着いた明るいトーンのソフトウェア製品向けマーケティングサイトです。
スクラップブック風ポートフォリオサイト
+3紙の小物で作る複数ページのオンライン履歴書。事例紹介と印刷できる履歴書付きです。
スニーカーショップ サイトテンプレート
+3カタログ、商品ページ、カート、デモ決済を備えた、靴・アパレルのショップ一式を HTML ファイル 1 つで。
ワークフロー自動化のランディングページ
+3グラファイトのページ。小さく左寄せの見出しと、その下で実行、再試行、ログの流れるライブのノードグラフ。
よくある質問
製品をスクリーンショットではなく動くボードで見せるのはなぜですか?
ボードは HTML と SVG で作るので鮮明なままで、ダークテーマにも合い、自分の列、タスク、担当者に作り替えられます。訪問者は表示を切り替えたり、検索したり、アシスタントにタスクを計画させたりできます。静止画より多くを伝えられます。
私の製品はタスク管理ではありません。それでも合いますか?
段階を移動する対象があれば合います。サポート窓口ならチケットの列とルーティングのアシスタント、CRM なら商談の段階、リリース管理ならバックログから出荷済みまで。適応ガイドが各ケースを対応づけます。
ここで PopNow は何を生成しますか?
製品まわりの写真とメディアだけです。顧客事例のストーリー写真と詳細のショット、創業者とチームの写真、アバター用に切り出した 2 枚のポートレートシート、任意でストーリー写真のゆっくりしたループと SNS 用カード。毎回クレジットで見積もり、同意してから実行します。
PopNow API キーなしで使えますか?
使えます。同梱のポートレートと写真が新しい名前で代わりに入り、自分の写真は同じ切り抜きに差し込めます。SNS 用カードは HTML から描画できます。納品メモには、まだ代わりの素材が入っている枠がすべて載ります。

