このテンプレートについて
Email MarketingはAI・SaaSプロダクト向けのヒーローセクションの作り方を一つ示し、それを生んだ手順も公開している。「Design Rocket Certificates」は、レイアウトが背負うために組まれた一行。色は黒 #0A0A0Aの下地、明るいのイエロー #DCFF00の文字、明るいのイエロー #D8F90Aのアクセントに限り、Instrument Serifで組んでいる。納品物はReactとTailwind CSSで、800x702で記録しているため、コードを書く前に枠が決まっている。書いている間は開いておく。7,972文字のブリーフが、自社ページにそのまま持ち込める部分。収録したプロンプトは800x702で記録したので、このページで引用する値はすべてそこにたどれる。
対象
- このヒーローセクションを引き継ぐマーケターは、12px〜58pxの可変型サイズ、18px刻みの余白で書き直しが尺度を保ったか確認する。
- 見出しをEmail Marketingと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
- 午後しか時間がないなら、このヒーローセクションを#D8F90A中心に塗り直せ。800x702とグリッドはそのままにしろ。
含まれる内容
- ビューポート基準の計測. サイズは継承ではなく明記されています（12px〜58pxの可変型サイズ、18px刻みの余白）。書体やコピーを差し替えても、この関係は保たれます。名指しされた値の間に勝手な中間値はありません。寸法の一覧がそのままシステム全体です。変えるのは題材で、刻みではない。
- 大見出し級の数字. 統計はタイポグラフィとして扱います。数値はディスプレイサイズ、ラベルはブリーフ最小の段階、色付きのカードではなく#D8F90Aか文字色の上に置きます。数値だけが#D8F90Aのアクセントを持ち、周囲は文字色に留まります。数値は1行に収めてください。
- 流し読みを前提にした構成. 構造はグリッドそのものだ。同じ大きさのパネルをInstrument Serifで組み、視線が下ではなく横へ動くように並べる。グリッドはパネルの順序を変えずに1列へ折れます。1パネルにつき1つの考えを守ってください。
- 1画面に収まる構造. ヒーローセクションは、コピーが何より先に届くように組まれています。階層は文字が担い、800x702のフレームが構図を保ち、補助の値は静かに留まります。ページは800x702の1つの構図です。コピーが変わっても崩れないのはそのためです。
モーションとインタラクション
効く場所だけポインター
状態はグローバルなアニメーション層ではなく、コンポーネントごとに処理する（すべてのカードではなくボタンとリンクのホバー状態）。フィードバックは操作要素に限られるので、その周りの構図は静止したままだ。操作を確認しない状態は削る。この参考は800x702で収録しました。
モーションはほぼない
仕様はアニメーションを省き、800x702のレイアウトにページを任せる。変わるのはホバーと押下の状態だけだ。構図は静止したままなので、ページを支えるのは階層であり、それは成立している。静止も有効な選択だ。
SaaSのブリーフが効く理由
AI・SaaSプロダクトに対してこれが機能するのは、読み手に情報を組み立てさせないからである。ページは「Design Rocket Certificates」と明言している。レイアウトも書体も色も決まっており（黒 #0A0A0Aと明るいのイエロー #D8F90A、Instrument Serif）、最初の画面は部品の寄せ集めではなく、結論の出た主張として読める。 Email Marketingは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。
ヒーローセクションの再配置
狭い画面は縮めても直らない。このブリーフは代わりに書体とナビゲーションで変化を処理する。スケールは段階式ではなく可変。モバイル版は判断であり、代替ではない。この参考は800x702で収録しました。
ヒーローセクションの背後にある順序
順番どおりに読んでみる。見出し、お知らせのピル、数値の行、カードグリッド、背景のクリップ。各要素は役割を一つだけ持ち、明るいのイエロー #D8F90Aのアクセントは押してほしい要素にしか使われていない。 SaaSの読み手は、選択肢より先に訴求を受け取る。
よくある質問（FAQ）
Email Marketingのブリーフをコピーすると何が手に入りますか？
気分を書いた説明ではなく、制作のための仕様です。800x702のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
Email Marketingのヒーローセクションを別の技術スタックで作り直せますか？
Email MarketingはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Email Marketingの素材はクライアント案件でどう扱えばよいですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は800x702で収録しました。
