このテンプレートについて
制作会社・スタジオ向けにヒーローセクションを作り直す前にRetro-Futuristを読むと、構成とそれを支える仕様がここに揃っていることが分かる。ページ自身の見出しは「Glad you stopped in. Good taste tends to find us. Now, what are we building?」で、構図はその言葉をそのまま中心に組まれている。配色はグレー #B3B1B3の下地で、書体はHelveticaNowDisplay-Medium。実装はReactとTailwind CSSだ。中の寸法はすべて書き出してあるので、そのまま再利用できる。動きは38msのトランジションだけで完結する。書いている間は開いておく。5,713文字のブリーフが、自社ページにそのまま持ち込める部分。
対象
- 低速回線でもこのヒーローセクションを成立させたいエンジニアは、640x474とタイプスケールを重さの予算に使う。
- モーションを外さざるを得ないなら、このヒーローセクションは13px〜32pxの可変型サイズ、26px刻みの余白が階層を担ったまま読める。
- 見出しをRetro-Futuristと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
含まれる内容
- 1つの幅で折りたたむリンク. ワードマークが左端を押さえ、その右にリンクが並ぶ。すべてHelveticaNowDisplay-Mediumで組んであり、バーは別系統ではなく下のページに属して見える。バーは独自の背景を持たずに640x474の構図の上に載るため、その下のメディアは端から端まで届きます。背景を付ける前に、自社の素材の上でバーを試す。
- ブリーフに直書きされたサイズ. ブリーフは13px〜32pxの可変型サイズ、26px刻みの余白、38msのトランジションを固定し、残りは配置に任せる。ひとりでに段数が増えるスケールとは逆の発想だ。ブリーフは比率ではなく値を示すため、コピーの長さが変わっても構図の関係は保たれます。
- 新しい1つだけを示すピル. バッジは1つ、メッセージも1つ。ピルは見出しの上にHelveticaNowDisplay-Mediumの最小段階で置き、その位置を争う要素はほかにありません。見出しが構図の中心を保つ位置に置きます。
- 必要な箇所だけ可変. スケールの上端だけが可変（13px〜32pxのクランプ）で残りは固定のため、ビューポートが狭くなってもフレームの構図は保たれます。ビューポートが狭くなっても、文字はサイズが変わるだけで役割は変わりません。
モーションとインタラクション
見せ場は到達の順序
タイプライター演出だけで、ページ上のほかの要素は何も演じない。この手法を外しても内容は残り、レイアウトもずれない。この参考は640x474で収録しました。
コントロールは共通の時間
仕様では状態変化ごとに時間が指定されている。トランジションは38ms前後に落ち着く。ブラウザの初期値のままの箇所はなく、だからこそページは動かされているのではなく設計されているように感じられる。同じ再生時間を複数の操作要素で使い回しており、インタラクションが一つの仕組みとして揃って感じられる。
Retro-Futuristで最初に変えるもの
再利用できるのは構成で、主題は自社のもの。13px〜32pxの可変型サイズ、26px刻みの余白を残し、言葉、メディア、ブランドマークを差し替える。再利用できるのは構図のほうで、別のブランドでもそのまま成立します。
Retro-Futuristを仕様として読む
起点になる数値は13px〜32pxの可変型サイズ、26px刻みの余白。余白はそこから導かれ、ページの他のすべてはこの2つの値に対して位置を決める。このヒーローセクションに、初期値任せの部分はない。
この構図が制作会社で効く理由
Retro-Futuristが機能するのは、階層を飾りではなく判断で決めているから。ブリーフが13px〜32pxの可変型サイズ、26px刻みの余白、38msのトランジションを定めているので、新しいコピーは枠を開き直さず、その中に収まる。制作会社の読み手に、訴求へ至る最短の正直な道を示す。
よくある質問（FAQ）
Retro-Futuristの背後のブリーフには、実際に何が入っていますか？
収録されたブリーフは5,713文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Retro-FuturistはReactとTailwind CSSにどこまで依存していますか？
Retro-FuturistはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Retro-Futuristのモーションは何をきっかけに動きますか？
モーションはレイアウトと同じ粒度で指定されています。状態変化は38msの範囲で収束します。先に構成を移植し、タイミングは後から合わせると、レイアウトが固まっている分だけ合わせやすくなります。
