このテンプレートについて
Nexora Automationは書き下ろされたブリーフ1本から組んだSaaSのヒーローセクションで、このページはそのブリーフを記録している。「Now with GPT-5 support ✨」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。色は白 #FFFFFFの下地、深いのティール #092128の文字に限り、Instrument Serifで組んでいる。納品物はReactとTailwind CSSで、800x552で記録しているため、コードを書く前に枠が決まっている。モーションの予算は0.6sのトランジション。書いている間は開いておく。5,344文字のブリーフが、自社ページにそのまま持ち込める部分。以下に引用する値はすべてこのブリーフのもので、800x552の枠から最小の余白ステップまで含む。
対象
- AI・SaaSプロダクトヒーローセクションを提案する制作会社が、100vhのセクション、25px刻みの余白を提案書に書き込みたい。キックオフの後も見積もりが崩れないようにするためだ。
- 見出しをNexora Automationと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
- Instrument Serifを残し、それを軸にヒーローセクションを組み直せ。自社ブランド用に新しいタイプスケールを開くな。
含まれる内容
- 操作1つだけの上段. ナビゲーションは1行だけで、下に第2階層を持たない。バーは独自の背景を持たずに800x552の構図の上に載るため、その下のメディアは端から端まで届きます。
- 明記された寸法. ブリーフは数値を名指ししています（100vhのセクション、25px刻みの余白、0.6sのトランジション）。書体とフレームの間に勝手な余白の段階がないからこそ、構図はまとまります。画幅の比率も寸法と一緒に記録してあり、再現時に縦横比も合う。
- 役割が明確な2書体. 最上位の文字はInstrument Serifで、補助コピーはそれよりずっと小さく落とす。階層は色に頼らず読める。数字はUI書体を共有し、統計もラベルも同じシステムに属する。書体は1つ、役割は明確に。
- 根拠を置く位置に数値. この行はヒーローセクションの高い位置に、装飾ではなく根拠として置く。アクセントは主張を担う数字だけに使い、行全体には使わない。この参考は800x552で収録しました。
モーションとインタラクション
意図を感じる速さ
ブリーフはトランジションの値を0.6sに固定しているので、作り直すときに遅い既定値で代用できない。イージングは再生時間と一緒に指定されている（0.6s）ので、作り直しの際に別の感触へ黙って差し替わることはない。
インタラクティブ層はコントロール
インタラクティブな要素はそれぞれ1つのことしかしない（すべてのカードではなくボタンとリンクのホバー状態）。状態が予測できるのはそのため。各状態が変えるプロパティは1つなので、フィードバックが読み取りやすい。この参考は800x552で収録しました。
ヒーローセクションの背後にある順序
トレードオフは我慢を強いること。走査しやすいグリッドなら即座に渡す詳細を、このページは保留する。代わりに得るのは、ナビゲーション、見出し、お知らせのピル、数値の行、カードグリッドが読み違えられないファーストビュー。 SaaSの読み手は、選択肢より先に訴求を受け取る。この参考は800x552で収録しました。
ヒーローセクションの再配置
設計された狭い幅のレイアウトは、詰め込みより多くの判断を要する。ブリーフはその分を先に払っている。セクションは100vhに固定。実装時に発見するのではなく、明示されている。狭い幅でも重要な要素は削られない。
Nexora Automationで動くもの
ここのモーションをスクロール連動のページと比べる。どちらも動くが、これはブリーフが指定した場所（0.6sのトランジション、ホバー状態と押下状態）だけ動くので、コピーが前に出たままになる。このヒーローセクションで、動くために動く要素はない。
よくある質問（FAQ）
Nexora Automationのプロンプトは完成した仕様書ですか、それとも出発点ですか？
気分を書いた説明ではなく、制作のための仕様です。800x552のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
Nexora Automationを作り直すのにReactとTailwind CSSは必要ですか？
Nexora AutomationはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Nexora Automationの素材はクライアント案件でどう扱えばよいですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は800x552で収録しました。
