このテンプレートについて
Alumicaはヒーローセクションの仕様書として読める。値はページを組む前に書き出されていた。見出しは「Automation & Fintech」で、ヒーローセクションの残りはその周りに配置されている。配色は深いのインディゴ #080210の下地、明るいのオレンジ #FF8A00のアクセントに絞り、書体はInter。納品形式は単一のコンポーネントなので、ヒーローセクション全体をデザインの引き継ぎなしにプロジェクトへ持ち込める。ブリーフはモーションの予算を0.3sのトランジション、ループする動画の下地に使う。フィンテックのヒーローセクションを発注するなら、この構成から始めて主題だけ差し替える。以下に引用する値はすべてこのブリーフのもので、2056x1396の枠から最小の余白ステップまで含む。
対象
- このヒーローセクションを引き継ぐ外部チームには、最初のコミット前に単一のコンポーネントをリポジトリへ固定する必要がある。
- このヒーローセクションは、単一のコンポーネントの実装をエンジニアへ渡し、モーションを文章で残したいデザイナーに応える。
- このページは、単一のコンポーネントでフィンテックプロダクトヒーローセクションを組み直し、見た目の裏にある数値を探すフロントエンド開発者に応える。
含まれる内容
- 背景を持たないナビゲーション. ナビゲーションは帯ではなく細いストリップです。ワードマークは左、リンクは中央やや右、操作は#FF8A00の1つだけ。いずれも独自の背景を持たずにヒーローセクションの上に載ります。リンクはワードマークより小さいサイズで組み、#FF8A00の操作だけがバーの中で重みを持つ要素です。
- 実装まで持ち込む数値. レイアウトに勘で決める部分はない。ブリーフが10px刻みの余白、0.3sのトランジションを明記し、実装はその値に合わせる。これらの数値に合わせて再現すれば、追加調整なしで参考例に近づく。
- イラストではなくクリップ. 雰囲気を作るのは2056x1396の5.8sクリップです。ブリーフはトリミングを固定し、その上の文字には手を加えていません。自動再生が使えないときは2056x1396のポスター画像が構図を保つため、レイアウトが崩れることはありません。
- スタイルを決めるタイポグラフィ. 書体には混ぜるのではなく役割を割り当てています。 Interがディスプレイとインターフェースの両方を担います。数字はUI書体を共有し、統計もラベルも同じシステムに属する。
モーションとインタラクション
アニメーションの予算はこれで全部
モーションはミリ秒単位で測る。0.3s。これがアニメーションの予算のすべてで、スクロールのタイムラインではなく状態変化に使う。イージングは再生時間と一緒に指定されている（0.3s）ので、作り直しの際に別の感触へ黙って差し替わることはない。
ホバーは意味のある場所だけに
インタラクティブな要素はそれぞれ1つのことしかしない（すべてのカードではなくボタンとリンクのホバー状態）。状態が予測できるのはそのため。状態の色はコンポーネントの既定値ではなく、ページ自身の配色から取る。ホバーでレイアウトにアニメーションを付けない。この参考は2056x1396で収録しました。
Alumicaを仕様として読む
10px刻みの余白、0.3sのトランジションにコミットすることは、柔軟性と引き換えに再現性を得る取引。同じページを別のブランドで、新たな推測なしに作るのがこの参考例の狙い。このヒーローセクションに、初期値任せの部分はない。
Alumicaで最初に変えるもの
一行、1書体、1アクセント。この3つの差し替えがデザインを最も変える。動かさないほうがよい値は10px刻みの余白、0.3sのトランジション。構成より差し替えのほうが安い。それがこの参考例の狙いだ。
ヒーローセクションの背後にある順序
1本の読みの経路を選ぶことは、他の経路を閉じること。ブリーフはそれを受け入れ、ナビゲーション、見出し、お知らせのピル、数値の行、背景のクリップを固定し、10px刻みの余白、0.3sのトランジションを経路の明快さに使う。フィンテックの読み手は、選択肢より先に訴求を受け取る。
よくある質問（FAQ）
Alumicaのヒーローセクションを別の技術スタックで作り直せますか？
Alumicaは単一のコンポーネントで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
このAlumicaの項目はどういう構成になっていますか？
このページに引用している内容はすべて、収録された2,424文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
Alumicaのブリーフをコピーすると何が手に入りますか？
気分を書いた説明ではなく、制作のための仕様です。2056x1396のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
