できること
- オフラインで動き、iframe の中でも動く、自己完結型の料金セクション 1 つ
- バッジ、特徴、おすすめプランのリボン、プランごとのボタンがある 2〜4 のプランカード
- 節約の一行と、年払いの注記がついた月額と年額の切り替え
- ライトとダークのテーマに加え、完成したファイルの静的なチェッカー
- 任意：見積もりのあと、PopNow で作る、切り抜きのステッカーの絵
向いている用途
- インディーのアプリ、クリエイター向けツール、小規模な SaaS 製品
- 会員制、講座、ニュースレターのプラン
- 親しみやすくくだけた雰囲気のローンチページ
向いていない用途
- 長い比較表のあるエンタープライズの価格表
- フォーマルな、または厳密にミニマルな口調のブランド
使い方
Claude・ChatGPT で
PopNow のスキル「手描き風の料金表セクション」（pricing-page-section）を使って、次のことをしてください：Brewlog（コーヒーのテイスティング日記）の料金。Free、Barista は月 4 ドルか年 40 ドル、カフェ向けの Roastery は月 12 ドルか年 120 ドル。おすすめは Barista。
コーディングエージェントで
/popnow-pricing-page-section Brewlog（コーヒーのテイスティング日記）の料金。Free、Barista は月 4 ドルか年 40 ドル、カフェ向けの Roastery は月 12 ドルか年 120 ドル。おすすめは Barista。
次はこれ
アクセントカラーのドリップ用のケトルのステッカーを見積もって、切り抜いて。
Svelte のコンポーネントにして、ダークモードはサイトのテーマの切り替えに任せて。
用意しておくもの
- プラン名、月額と年額の価格、上限と機能
- おすすめのプランと、各ボタンの行き先
- トライアル、返金、解約について正直な一行
- 任意：ステッカーの絵のための PopNow API キー
似ているスキル
すべて見る →- Web
3D アバター作成ツール
+25ぬいぐるみのようなかわいい 3D キャラクターをブラウザで作り、透過 PNG や 3D ページとして保存できます。
- Web
カレンダーヒートマップ
+251 年分の日々の活動を濃淡付きのカレンダーで表示。連続記録、合計、キーボード操作にも対応します。
- Web
AI SaaS ランディングページ
+25温かみのある砂色の紙に細い罫線とハッチングの溝を配し、AI アシスタントがタスクを計画するライブのかんばんボードを置きます。
- Web
アニメーション付きヒーローセクション
+25見出しの一語がゆるやかに切り替わり、ボタン 2 つと横長の画像枠を備えた LP のヒーローセクションです。
- Web
飲料ブランドのウェブサイト テンプレート
+25ショップ、ケース作成、取扱店マップ、デモ用チェックアウトを 1 ファイルに収めた、明るい飲料・スナックのブランドサイト。
- Web
シェーダーのヒーロー付きの代理店サイト
+25下に固定された宣言文の後ろで、ライブのオレンジの熱をしたシェーダーのヒーローが動き、ピルのナビと、ずらして並ぶ事例のグリッドが続きます。
- Web
ダークモード SaaS ランディングページ
+25動きの多いダークトーンのソフトウェア製品向けマーケティングサイトを、自己完結した HTML ファイル 1 つで届けます。
- Web
デザイナーのポートフォリオサイト
+25落ち着いたグレーの上で、フェードする見出しの周りを 6 枚の傾いたカードが漂い、赤いポートレートのカードと、雑誌風の事例が続きます。
- Web
エンジニア向けポートフォリオサイト
+25事例紹介、執筆、登壇、履歴書、問い合わせフォームを備えた、エンジニア向けのダークな個人サイトです。
- Web
雑誌風の SaaS サイト
+25ネイビーの分割ヒーロー、ドキュメンタリー写真の横に並ぶ 5 行のセリフの見出し、斜めの帯、コバルトのアクセントひとつ。
- Web
フリーランスデザイナーのサイト
+25定額パッケージを売る、大胆な 1 人スタジオのサイト。プランのページ、事例、依頼フォーム付き。
- Web
グラスモーフィズムのサイトテンプレート
+25ほぼ黒のフィルムの上の、すりガラスのピル形ボタン。斜体の 1 語を含む大きなセリフの見出しと、メールの登録欄。
- Web
ハードウェア製品のサイト
+25銀色のスタジオ写真の上に、極細の巨大なモデル名。すりガラスのスペックカード、実寸比のラインアップ、ハードウェアのベントー。
- Web
インタラクティブなアーキテクチャ図
+25検証済みの JSON モデルから作る、オフラインでクリックできるシステム構成図。各ボックスの根拠も確認できます。
- Web
インタラクティブなグリッドのヒーロー
+25ほぼ黒の上の細い線のダークなグリッドが、カーソルの方へ曲がり、クリックのたびに光る輪が広がります。
- Web
ナレッジグラフ エクスプローラー
+25プロジェクトのメモを、すべての記述が出典の行にリンクする、オフラインで検索できるグラフに変えます。
- Web
KPI ダッシュボードのテンプレート
+25変化のチップ付きの 4 つの KPI タイルの下に、光る折れ線グラフ、内訳の表、目標のバー。温かい紙の上で。
- Web
AI モックアップからのランディングページ
+25まず 3 つのフルページのデザインを見て、ひとつを選ぶと、エージェントがきれいでレスポンシブなコードに組み上げます。
- Web
Web マガジンサイト テンプレート
+25記事、トピック、小さなショップ、定期購読を備えた、紙の雑誌のような質感のサイトを HTML ファイル 1 つで。
- Web
パーティクルアニメーションのヒーロー
+25温かい紙の上の文章の横で、インクとティールのドットの回転する球体が、アイデアごとに形を変え、スクロールで散ります。
- Web
個人ブランドのウェブサイト
+25細い枠の中で、温かい紙にやわらかくなじむ肖像。両側には、軽めと太字の言い切り。
- Web
ペットショップのウェブサイト テンプレート
+25カタログ、バリエーション、カート、補充プランナー、デモ用チェックアウトを 1 つの HTML ファイルに収めた、動くペット用品ショップ。
- Web
ポッドキャストのウェブサイト テンプレート
+25再生できるヒーロー、エピソードのアーカイブ、ゲストのページ、ページをまたいでも再生が続くプレーヤーを備えた番組サイト。
- Web
シネマティックな製品ローンチページ
+25映画の光に照らされたほぼ黒のページ。ゆっくり流れる光の上のセリフの表題カード、レターボックスの夜のシーン、予約フォーム。
- Web
論文のウェブサイト
+25論文のプロジェクトページ。インタラクティブな図 1、結果、限界、ワンクリックの引用つき。
- Web
管理画面ダッシュボード テンプレート
+25グラフ、表、カンバン、カレンダーを備えた、実際に動くバックオフィス画面を、オフライン HTML ファイル 1 つで。
- Web
SaaS ランディングページ テンプレート
+25実際に動く製品コンソール、料金、登録フォームを備えた、落ち着いた明るいトーンのソフトウェア製品向けマーケティングサイトです。
- Web
スクラップブック風ポートフォリオサイト
+25紙の小物で作る複数ページのオンライン履歴書。事例紹介と印刷できる履歴書付きです。
- Web
スニーカーショップ サイトテンプレート
+25カタログ、商品ページ、カート、デモ決済を備えた、靴・アパレルのショップ一式を HTML ファイル 1 つで。
- Web
スポーツクラブのウェブサイト テンプレート
+25時間割、コーチのページ、会員制度、コートの配置図、予約を 1 つのファイルにまとめた、クラブ、ジム、スタジオのサイト。
- Web
お客さまの声の壁セクション
+25お客さまの声を組石のように並べるか、ゆっくり流れる壁にするセクション。掲載の了承を得た声だけを出します。
- Web
旅行会社のウェブサイト テンプレート
+25ツアー、ガイド、ロッジのための写真中心のサイト。旅の検索、予約リクエスト、旅選びのクイズつき。
- Web
ワークフロー自動化のランディングページ
+25グラファイトのページ。小さく左寄せの見出しと、その下で実行、再試行、ログの流れるライブのノードグラフ。
よくある質問
年額の切り替えはフレームワークなしで動きますか？
はい。各価格は月額と年額の値を data 属性として持ち、数行の素の JavaScript で入れ替えます。1 つの請求サイクルしか売らないなら、切り替えは削除してください。
手書き風の文字は、どの端末でも読み込まれますか？
システムにすでに入っている手書き風のフォントを、代替フォント付きで使うので、何もダウンロードされず、セクションはオフラインでも動きます。正確な字形は、macOS、Windows、Android で少し違います。
PopNow は、ここで何を加えますか？
余白に置く、任意のステッカーの絵です。インクとフラットな色の同じ雰囲気で 1 枚描き、PopNow の背景除去ツールできれいに切り抜きます。各実行は先に見積もりが出て、同意してから始まります。
既存のサイトの中で使えますか？
はい。すべてのスタイルは .skp- のクラス名の下にスコープされ、スキルはこのセクションを React、Vue、Svelte、Astro のコンポーネントとして組み直し、テーマはホストのページに任せます。
SaaS の料金ページのテンプレートとして使えますか？
使えます。プラン、月額と年額の価格、機能の行、一番人気のバッジは、1 つのデータのブロックから作られます。多くの SaaS の料金ページがそう作られているように、ページ全体のテンプレートとしても、既存のページに料金表だけを入れることもできます。