このテンプレートについて
Zyphorは判断の履歴を残しており、このヒーローセクションを生んだブリーフは3,562文字。「Manage projects effortlessly with smart tools, stay on track, meet deadlines, and keep your team productive」は、レイアウトが背負うために組まれた一行。配色は深いのブルー #0B0C10の下地に絞り、書体はInter。納品物はReactとTailwind CSSで、1930x1400で記録しているため、コードを書く前に枠が決まっている。モーションはループする動画の下地で、コピーが主役のままになる程度に抑えている。 SaaSのヒーローセクションを発注するなら、この構成から始めて主題だけ差し替える。
対象
- まず数値が要るデザイナー。20px刻みの余白、すべて仕様からの引用である。
- プロダクトマーケターで、コピーの背後に7.2sのループ映像があってもヒーローセクションが読める状態を保ちたい。
- 見出しをZyphorと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
含まれる内容
- 1つの幅で折りたたむリンク. ナビゲーションは1行だけで、下に第2階層を持たない。タブレットのブレイクポイントを下回ると、モバイル用のオーバーレイに切り替わります。バーは独自の背景を持たずに1930x1400の構図の上に載るため、その下のメディアは端から端まで届きます。ワードマークには文字が必要とする以上の幅を与えない。
- 目分量ではなく実測. ここに目分量はありません。仕様が20px刻みの余白を固定し、残りのレイアウトはその値から導かれます。値が固定されているので、差し替えてもリズムは変わらず見た目だけが変わる。
- 大きくなるほど詰まる字間. このトーンを作っているのはブリーフのサイズ段階とトラッキングです。詰めたディスプレイサイズのInterがあり、そこから補助コピーへはっきり落とします。ウェイトは役割ごとに指定されているため、実装時に勘で階層を決めることはありません。スケールは明記されています。それを使ってください。
- オーバーレイなしのメディア. メディアは7.2sのクリップ1本で、1930x1400の画幅にcoverで切り抜く。どの幅でも黒帯が出ない。1930x1400以上で書き出せば、coverの切り抜きはそのまま機能する。
モーションとインタラクション
効く場所だけポインター
ポインターに反応するのは操作要素だけ（すべてのカードではなくボタンとリンクのホバー状態）。すべての要素を的にせずに、ページは反応して感じられる。操作できそうに見えるコントロールは実際に反応するので、偽のアフォーダンスがない。この参考は1930x1400で収録しました。
見せ場は到達の順序
入場のモーションは一つの要素に絞る（見出しが一語ずつ現れる）。ほかの要素は読み込み時点で配置が済んでいる。完成した状態は静止画と同じ構図なので、動きの完了に何かが依存しているわけではない。モーションを切って試す。この参考は1930x1400で収録しました。
ヒーローセクションを支える数値
ここでの決定はほぼすべて、確認できる値である。20px刻みの余白。メディアは1930x1400の7.2sループ映像だ。書体はInterのままなので、差し替える側も同じ比率を守る必要がある。このヒーローセクションに、初期値任せの部分はない。
ヒーローセクションの再配置
デスクトップの固定スケールのほうが簡単だったはず。ブリーフは180px〜20pxのクランプを加えており、幅が変わっても見出しの比率が保たれるのはそのため。自動再生とモーションは誠実に扱われているので、それらが使えない環境でもページは内容を伝えます。
Zyphorの最初の読みの順序
自社のコピーをこのヒーローセクションに入れても順序は保たれる。要素が交換可能ではないからだ。ナビゲーション、背景のクリップはそれぞれ1つの役割を担う。 SaaSの読み手は、選択肢より先に訴求を受け取る。この参考は1930x1400で収録しました。
よくある質問（FAQ）
Zyphorのプロンプトは完成した仕様書ですか、それとも出発点ですか？
気分を書いた説明ではなく、制作のための仕様です。1930x1400のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
Zyphorを作り直すのにReactとTailwind CSSは必要ですか？
ZyphorはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Zyphorのデザインはどこから来たものですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は1930x1400で収録しました。
