Aurex Financeのフィンテックランディングページデザインとプロンプト

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

これはAurex Financeのランディングページを、スクリーンショットとしてではなく、それを生んだブリーフとともに公開したもの。色は黒 #000000の下地、白 #FFFFFFの文字、くすんだのブルー #AFDDFFのアクセントに限り、Manropeで組んでいる。納品物はReactとTailwind CSSで、1920x1410で記録しているため、コードを書く前に枠が決まっている。結局、動きは900msのトランジション、cubic-bezier(0.16, 1, 0.3, 1)、ループする動画の下地に尽きる。初見用ではなく、作り直しに耐えるフィンテックプロダクトのランディングページのブリーフとして扱う。収録したプロンプトは1920x1410で記録したので、このページで引用する値はすべてそこにたどれる。

対象

まず数値が要るデザイナー。12px〜68pxの可変型サイズ、20px刻みの余白、すべて仕様からの引用である。
プロダクトマーケターで、コピーの背後に6.5sのループ映像があってもランディングページが読める状態を保ちたい。
ランディングページをモデルに指示する人は、29,337文字のプロンプトを出発点に使う。

含まれる内容

背景を持たないナビゲーション. ナビゲーションは帯ではなく細いストリップです。ワードマークは左、リンクは中央やや右、操作は#AFDDFFの1つだけ。いずれも独自の背景を持たずにランディングページの上に載ります。リンクはワードマークより小さいサイズで組み、#AFDDFFの操作だけがバーの中で重みを持つ要素です。
文字と画幅で1つの尺度. ブリーフの寸法はすべて、測り直せる数値だ（12px〜68pxの可変型サイズ、20px刻みの余白、900msのトランジション、cubic-bezier(0.16, 1, 0.3, 1)のイージング）。すべての値は収録時のプロンプトと突き合わせて確認できます。再現が近似ではなく検証可能になるのはそのためです。レイアウトと一緒に数値も持っていく。
1本のクリップが担う. クリップは1920x1410で6.5s再生し、継ぎ目が見えないままループする。映像ではなく表面として読める。ループは6.5sと短く、目にはタイムラインではなくテクスチャとして映ります。
ベースラインに乗る数字. 数値の行をファーストビューの中に置き、Manropeのスケール最大で組みます。#AFDDFFは主張を担う数値だけに残します。数値だけが#AFDDFFのアクセントを持ち、周囲は文字色に留まります。各数字には短いラベルを付ける。

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

タイムラインではなくループ

環境の動きはスクロール演出ではなく6.5秒の1920x1410ループから生まれる。だからページは落ち着き、文字は読める。自動再生が止められた場合はポスターフレームが代わりに立ち、動きは必須ではなく追加要素にとどまる。

短く揃えた時間

モーションはミリ秒単位で測る。900ms、cubic-bezier(0.16, 1, 0.3, 1)を使い。これがアニメーションの予算のすべてで、スクロールのタイムラインではなく状態変化に使う。値が短いので、作り直しでこれを遅くすればすぐに分かる。挙動1つにつき時間1つ。

ランディングページを自社のものにする

ランディングページを自社のものにするのに作り直しは要らない。見出しとメディアを差し替え、スケール（12px〜68pxの可変型サイズ、20px刻みの余白）を守れば、レイアウトは設計どおりに読める。自社のアクセントも、参考例のアクセントと同じコントラスト検証を通過する必要がある。

このランディングページが立てる主張

フィンテックのページの多くは、ファーストビューが弱いとセクションを足す。これは逆に選択肢を削る。ナビゲーション、お知らせのピル、数値の行、カードグリッド、機能リストをこの順に置き、訴求を繰り返すものは置かない。フィンテックの読み手に、訴求へ至る最短の正直な道を示す。この参考は1920x1410で収録しました。