Rocket CTAのAI・SaaSCTAセクションデザインとプロンプト

このテンプレートについて

これはRocket CTAのCTAブロックを、スクリーンショットとしてではなく、それを生んだブリーフとともに公開したもの。カラースキームは深いのブルー #14191Eの下地で、ページはInterで組む。この項目は、ページを生んだ技術スタック（ReactとTailwind CSS）を隠さずに書いている。動きは300msのトランジションだけで完結する。 SaaSのCTAブロックを発注するなら、この構成から始めて主題だけ差し替える。

対象

AI・SaaSプロダクトCTAブロックを制作するチームが、見積もりを出す前に640x468のフレームを記録に残したい。
このCTAブロックを1スプリントに収め、新しい素材も増やしたくないプロダクトマネージャーのために作った。
AI・SaaSプロダクトCTAブロックを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。

含まれる内容

1つの幅で折りたたむリンク. ワードマークが左端を押さえ、その右にリンクが並ぶ。すべてInterで組んであり、バーは別系統ではなく下のページに属して見える。バーは独自の背景を持たずに640x468の構図の上に載るため、その下のメディアは端から端まで届きます。
ブリーフで固定した寸法. レイアウトに勘で決める部分はない。ブリーフが10px刻みの余白、300msのトランジションを明記し、実装はその値に合わせる。これらの数値に合わせて再現すれば、追加調整なしで参考例に近づく。
段差の大きいスケール. このトーンを作っているのはブリーフのサイズ段階とトラッキングです。詰めたディスプレイサイズのInterがあり、そこから補助コピーへはっきり落とします。大見出し用の書体は1つのサイズでのみ使い、それ自体と競合しない。役割が明確な1ファミリーは、競い合う2つに勝ります。
新しい1つだけを示すピル. バッジは1つ、メッセージも1つ。ピルは見出しの上にInterの最小段階で置き、その位置を争う要素はほかにありません。見出しが構図の中心を保つ位置に置きます。バッジは1つ、メッセージも1つ。

モーションとインタラクション

スクロールの挙動は1つだけ

ページのスクロール挙動はパララックスだけなので、この効果は構図の中で場所が決まっている。下の静的なレイアウトはそのままなので、効果を切っても構図は読める。挙動1つで効果は完結する。この参考は640x468で収録しました。

時間はブリーフ由来

アニメーションの予算は小さく、明示されている。300ms。適用先は入場ではなく状態変化だ。スクロール位置を待つものはないので、触れた瞬間にページが反応する。

Rocket CTAを仕様として読む

仕様はムードボードではなく、一冊の仕様書である。10px刻みの余白、300msのトランジションを固定し、メディアを640x468として指定する。この細かさがあるからこそ、作り直しても設計が生き残る。コピーを変えても関係は保たれる。このCTAブロックに、初期値任せの部分はない。

AI・SaaSプロダクトがここで得るもの

テンプレートのヒーローと比べると、違いは引かれているものにある。カードグリッドもカルーセルも第二のCTAもなく、ナビゲーション、見出し、お知らせのピル、数値の行、背景のクリップだけが10px刻みの余白、300msのトランジションに合わせて寸法を取る。 Rocket CTAは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。

Rocket CTAで動くもの

ここでのモーションはライブラリではなく、判断の積み重ねである。300msのトランジション、パララックスレイヤー、ホバー状態と押下状態。スクロールで動くものはない。結果として、著者のいるページになる。短い時間、一度だけの入場、そして装飾ではなく操作を確認するための状態変化である。このCTAブロックで、動くために動く要素はない。