このテンプレートについて
AsmeはAI・SaaSプロダクト向けのヒーローセクションの参考で、その背後のブリーフはムードボードではなく完全な構築仕様だ。色は黒 #000000の下地、グレー #C9CAB9の文字に限り、Instrument Serifで組んでいる。納品物はReactとTailwind CSSで、800x582で記録しているため、コードを書く前に枠が決まっている。結局、動きは500msのトランジションに尽きる。書いている間は開いておく。4,360文字のブリーフが、自社ページにそのまま持ち込める部分。収録したプロンプトは800x582で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、800x582の枠から最小の余白ステップまで含む。
対象
- 見出しをAsmeと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
- 最初の版を出したい創業者で、テンプレートを組み立てるよりInstrument Serifで組まれた構図を流用したい。
- Instrument Serifに触る前にヒーローセクションのコピーを差し替えろ。文字サイズは今の行長に合わせてある。
含まれる内容
- 意図的に細いナビゲーション. バーはヒーローセクションを下に押さず、その上に重なる。構図はファーストビューの高さをそのまま保てる。バーは独自の背景を持たずに800x582の構図の上に載るため、その下のメディアは端から端まで届きます。行は1行に保つ。
- 検証できる数値. レイアウトは固定値（500msのトランジション）を基準に決めているため、どの幅でもファーストビューの構図が保たれます。これらの数値に合わせて再現すれば、追加調整なしで参考例に近づく。差し替えるのは書体かコピーで、スケールではありません。
- 段差の大きいスケール. 最上位の文字はInstrument Serifで、補助コピーはそれよりずっと小さく落とす。階層は色に頼らず読める。書体は固定サイズと組になっています。ディスプレイの行とインターフェースの文字が同じ体系に留まるのはそのためです。
- 根拠を置く位置に数値. 数字はInstrument Serifで、本文よりも見出しに近いサイズで組む。数値はインターフェースと同じ書体を使うため、ページを中断させるのではなく、ページの一部になります。
モーションとインタラクション
反応するのは操作要素
フィードバックはすべてのカードではなくボタンとリンクのホバー状態に限る。密度の高い最初の画面が煩くならないのはそのためだ。状態は仕様に明記されているので、ページはホバー効果のライブラリに依存しない。この参考は800x582で収録しました。
意図を感じる速さ
仕様では状態変化ごとに時間が指定されている。トランジションは500ms前後に落ち着く。ブラウザの初期値のままの箇所はなく、だからこそページは動かされているのではなく設計されているように感じられる。値は短く、アニメーションではなくフィードバックとして読める長さだ。
ヒーローセクションの再配置
狭い画面は縮めても直らない。このブリーフは代わりに書体とナビゲーションで変化を処理する。スケールは段階式ではなく可変。どちらの状態も同じブリーフに書かれている。この参考は800x582で収録しました。
このヒーローセクションが立てる主張
1画面は読み手にとって1つの判断を意味し、それがこのレイアウトのコスト。残りはすべて折り返しの下へ移る。ブリーフが500msのトランジションを明記しているので、下のセクションも同じリズムを保つ。 Asmeは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。
ヒーローセクションの背後にある順序
ブリーフは4,360文字で、読み順を明示している。ナビゲーション、見出し、数値の行、背景のクリップ、フッターをこの順に並べ、その間の距離を500msのトランジションで決めている。順序を入れ替えれば、この距離も意味を失う。 SaaSの読み手は、選択肢より先に訴求を受け取る。
よくある質問（FAQ）
Asmeの背後のブリーフには、実際に何が入っていますか？
気分を書いた説明ではなく、制作のための仕様です。800x582のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
AsmeはReactとTailwind CSSにどこまで依存していますか？
AsmeはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Asmeはクライアント案件で使えますか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は800x582で収録しました。
