Aethera Studioの制作会社・スタジオヒーローセクションデザインとプロンプト

このテンプレートについて

Aethera Studioは制作会社・スタジオ向けのヒーローセクションの作り方を一つ示し、それを生んだ手順も公開している。ページ自身の見出しは「Beyond silence, we build the eternal」で、構図はその言葉をそのまま中心に組まれている。配色は白 #FFFFFFの下地、黒 #000000の文字で、書体はInstrument Serif。この項目は、ページを生んだ技術スタック（ReactとTailwind CSS）を隠さずに書いている。結局、動きは100msのトランジションに尽きる。書いている間は開いておく。3,169文字のブリーフが、自社ページにそのまま持ち込める部分。

対象

制作会社に発注する創業者は、1回目の受け入れ判定に800x582の画角を使う。
見出しをAethera Studioと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
自社書体でAethera Studioのヒーローセクションを描き直すなら、Instrument Serifの字面比率を保て。字サイズの段階が合わなくなる。

含まれる内容

一行に収めたナビゲーション. 短いリンク列と1つの操作がヒーローセクションの上に載り、寸法は75px刻みの余白、100msのトランジションで抑えてある。背後の構図と競合しないためだ。バーは独自の背景を持たずに800x582の構図の上に載るため、その下のメディアは端から端まで届きます。バーの要素はわずか数個なので、コンポーネントライブラリなしで組み直せます。
大きくなるほど詰まる字間. タイポグラフィはInstrument Serifです。ブリーフは変化をつけるために混ぜるのではなく、書体に役割を与えています。ウェイト、トラッキング、サイズ段階がすべて指定されているため、差し替えても階層は保たれます。字間はサイズごとに設定し、大見出しとキャプションで同じ値を共有しない。役割のないサイズは足さない。
明記された余白の刻み. サイズは継承ではなく明記されています（75px刻みの余白、100msのトランジション）。書体やコピーを差し替えても、この関係は保たれます。値は推測ではなく収録時のプロンプトからの引用で、再レンダリングでも変わらない。
コピーが先、装飾は後. ファーストビュー内の要素は、どれも置かれるべき理由があります。ブリーフはコピー、800x582のフレーム、文字サイズを名指しし、それらと競う装飾は残していません。ページは800x582の1つの構図です。コピーが変わっても崩れないのはそのためです。ファーストビューに装飾は要りません。

モーションとインタラクション

短く揃えた時間

仕様では状態変化ごとに時間が指定されている。トランジションは100ms前後に落ち着く。ブラウザの初期値のままの箇所はなく、だからこそページは動かされているのではなく設計されているように感じられる。値は短く、アニメーションではなくフィードバックとして読める長さだ。

ホバーは意味のある場所だけに

インタラクティブな層は小さく予測可能だ（すべてのカードではなくボタンとリンクのホバー状態）。ほかは静止したままで、構図への集中が保たれる。操作できそうに見えるコントロールは実際に反応するので、偽のアフォーダンスがない。この参考は800x582で収録しました。

Aethera Studioで最初に変えるもの

ヒーローセクションを自社のものにするのに作り直しは要らない。見出しとメディアを差し替え、スケール（75px刻みの余白、100msのトランジション）を守れば、レイアウトは設計どおりに読める。自社のアクセントも、参考例のアクセントと同じコントラスト検証を通過する必要がある。

このヒーローセクションが立てる主張

別々のカードの積み重ねとして作り直すこともできるが、失われるのは主張そのもの。このヒーローセクションは1つの判断として読ませる。ナビゲーション、見出し、背景のクリップを1本の順序に置いている。 Aethera Studioは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。この参考は800x582で収録しました。