このテンプレートについて
AI・SaaSプロダクト向けに料金セクションを作り直す前にRocket Pricingを読むと、構成とそれを支える仕様がここに揃っていることが分かる。「Clear pricing plans that scale with you」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。カラースキームは黒 #0E0D0Eの下地で、ページはInterで組む。納品物はReactとTailwind CSSで、640x472で記録しているため、コードを書く前に枠が決まっている。 AI・SaaSの料金セクションが、デザインを変えずにコピー変更へ耐える必要があるとき最も効く。ブリーフが固定しているもの（フレーム、文字サイズ、タイミング、ブレイクポイント）は下記にすべて書き出してあるので、料金セクションを作り直すときに背後の意図を推測せずに済む。
対象
- この料金セクションにブロックを足していく社内チームには、11px刻みの余白を変えずに新しいブロックへ引き継ぐ必要がある。
- 料金のコピーを自社で書くプロダクトチームは、表示用の文字サイズが想定した行長を一行ずつ守る必要がある。
- この料金セクションを1スプリントに収め、新しい素材も増やしたくないプロダクトマネージャーのために作った。
含まれる内容
- 明記された余白の刻み. ここに目分量はありません。仕様が11px刻みの余白を固定し、残りのレイアウトはその値から導かれます。リストの最小値と最大値が、構図の可動範囲を決める。ブリーフが触れていない箇所は、意図的に触れていません。
- お知らせのピル. バッジは1つ、メッセージも1つ。ピルは見出しの上にInterの最小段階で置き、その位置を争う要素はほかにありません。見出しが構図の中心を保つ位置に置きます。
- コピーが先、装飾は後. 640x472で構図は完成しています。コピー、メディア、操作要素はすべてブリーフで名指しされています。ページは640x472の1つの構図です。コピーが変わっても崩れないのはそのためです。ファーストビューに装飾は要りません。
- 根拠を置く位置に数値. 数値の行が根拠になります。1行に3〜4つの数字、その下に小さなラベル、インターフェースと同じInterで組むため、装飾ではなくデータとして読めます。ラベルは数値の下、ブリーフ最小の段階に置くため、その行は装飾ではなくデータとして読めます。
モーションとインタラクション
インタラクティブな範囲は狭く
状態はグローバルなアニメーション層ではなく、コンポーネントごとに処理する（すべてのカードではなくボタンとリンクのホバー状態）。操作要素はタップできる大きさで、ポインターの扱いは全体で揃っている。この参考は640x472で収録しました。
静止も設計
仕様はアニメーションを省き、640x472のレイアウトにページを任せる。変わるのはホバーと押下の状態だけだ。モーションは装飾ではなくフィードバックとして扱う。
料金セクションを自社のものにする
料金セクションを自社のものにするのに作り直しは要らない。見出しとメディアを差し替え、スケール（11px刻みの余白）を守れば、レイアウトは設計どおりに読める。色に触る前に、見出しの一行を書き換える。
SaaSのブリーフが効く理由
Rocket Pricingが機能するのは、階層を飾りではなく判断で決めているから。ブリーフが11px刻みの余白を定めているので、新しいコピーは枠を開き直さず、その中に収まる。 Rocket Pricingは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。
料金セクションの背後にある順序
1本の読みの経路を選ぶことは、他の経路を閉じること。ブリーフはそれを受け入れ、お知らせのピル、数値の行、カードグリッド、機能リストを固定し、11px刻みの余白を経路の明快さに使う。 SaaSの読み手は、選択肢より先に訴求を受け取る。
よくある質問（FAQ）
Rocket Pricingの土台になっているプロンプトはどれくらいの長さですか？
収録されたブリーフは8,841文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Rocket Pricingのブリーフは、自分で書くプロンプトと同じものですか？
このページに引用している内容はすべて、収録された8,841文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
Rocket Pricingを作り直すのにReactとTailwind CSSは必要ですか？
Rocket PricingはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
