このテンプレートについて
Liquid Glass CTAは、AI・SaaSプロダクトがCTAブロックで抱える課題を記録済みのブリーフ1本で解く。色は黒 #111111の下地、くすんだのインディゴ #9A83ABのアクセントに限り、Instrument Serifで組んでいる。納品形式はReactとTailwind CSSなので、CTAブロック全体をデザインの引き継ぎなしにプロジェクトへ持ち込める。主題ではなく構造を借りる。 CTAブロックとその数値は、そのまま自社ブランドに移せる。このページの残りは、CTAブロックをブロックごと、次にタイミングと値ごとに分解する。ブリーフにない主張は足さない。以下に引用する値はすべてこのブリーフのもので、640x466の枠から最小の余白ステップまで含む。
対象
- AI・SaaSプロダクトのCTAブロックを作るチームで、スクリーンショットを写すのではなく実測値（200px刻みの余白）を求めている。
- CTAのコピーを自社で書くプロダクトチームは、表示用の文字サイズが想定した行長を一行ずつ守る必要がある。
- 複数案件を同時に進めるスタジオ責任者は、このCTAブロックを他ページが踏襲する型として使う。
含まれる内容
- ブリーフに直書きされたサイズ. サイズは継承ではなく明記されています（200px刻みの余白）。書体やコピーを差し替えても、この関係は保たれます。値が固定されているので、差し替えてもリズムは変わらず見た目だけが変わる。
- 大見出し級の数字. 数値の行をファーストビューの中に置き、Instrument Serifのスケール最大で組みます。#9A83ABは主張を担う数値だけに残します。数値だけが#9A83ABのアクセントを持ち、周囲は文字色に留まります。
- 役割が明確な2書体. このトーンを作っているのはブリーフのサイズ段階とトラッキングです。詰めたディスプレイサイズのInstrument Serifがあり、そこから補助コピーへはっきり落とします。ブリーフが置いたサイズと字重を動かさなければ、書体の差し替えは安全だ。
- アクセントは操作系のみ. 彩度は1つの値（#9A83AB）に集中し、コピーを読まなくても次の操作が見つかる。ほかはすべて黒 #111111の上にあり、彩度の高い配色でも読めるのはそのためです。アクセントは1色、使うのは操作だけ。
モーションとインタラクション
インタラクティブな範囲は狭く
フィードバックはすべてのカードではなくボタンとリンクのホバー状態に限られるので、レイアウトの残りは固定された構図になる。ホバーとフォーカスはまとめて指定されているので、ポインターとキーボードが同じ情報を受け取る。状態は絞り、そのぶん書き切る。この参考は640x466で収録しました。
邪魔をしないモーション
スクロールライブラリはない。640x466の構図は静止したままで、動くのは自分に反応する要素だけだ。構図は静止したままなので、ページを支えるのは階層であり、それは成立している。スクロールのタイムラインは要らない。
CTAブロックを支える数値
ムードボードがスケールを開いたままにするのに対し、このブリーフは200px刻みの余白で閉じる。周辺の値はその判断から導かれる。このCTAブロックに、初期値任せの部分はない。
CTAブロックを自社のものにする
CTAブロックを自社のものにするのに作り直しは要らない。見出しとメディアを差し替え、スケール（200px刻みの余白）を守れば、レイアウトは設計どおりに読める。変えるべきなのは主題の部分だ。
CTAブロックの再配置
コピーが長いと、先に崩れるのは狭い幅のレイアウト。ここでは50px〜200pxのクランプが変化を吸収し、スケールは段階式ではなく可変。詰め込みのほうが安く済むが、保たない。
よくある質問（FAQ）
手に入れたLiquid Glass CTAのブリーフで、何ができますか？
このページに引用している内容はすべて、収録された10,077文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
Liquid Glass CTAの土台になっているプロンプトはどれくらいの長さですか？
気分を書いた説明ではなく、制作のための仕様です。640x466のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
Liquid Glass CTAのCTAブロックを別の技術スタックで作り直せますか？
Liquid Glass CTAはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
