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

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

TrustFlowはランディングページの仕様書として読める。値はページを組む前に書き出されていた。カラースキームは白 #FFFFFFの下地、黒 #191919の文字で、ページはInterで組む。納品物はReactとTailwind CSSで、1462x1080で記録しているため、コードを書く前に枠が決まっている。モーションは200msのトランジション、ループする動画の下地に限っている。フィンテックプロダクトのランディングページを作るときに、出発点ではなく完成した構図が欲しいなら、これを参考にする。収録したプロンプトは1462x1080で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、1462x1080の枠から最小の余白ステップまで含む。

対象

このランディングページを引き継ぐマーケターは、15pxで固定した表示サイズ、11px刻みの余白で書き直しが尺度を保ったか確認する。
このランディングページは、フィンテックのコピーが6.3sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。
ランディングページをモデルに指示する人は、6,275文字のプロンプトを出発点に使う。

含まれる内容

邪魔にならないナビゲーションバー. バーはランディングページを下に押さず、その上に重なる。構図はファーストビューの高さをそのまま保てる。バーは独自の背景を持たずに1462x1080の構図の上に載るため、その下のメディアは端から端まで届きます。自社のページにセクションが多い場合は、バーを広げるのではなくまとめてください。
ブリーフに直書きされたサイズ. レイアウトに勘で決める部分はない。ブリーフが15pxで固定した表示サイズ、11px刻みの余白、200msのトランジションを明記し、実装はその値に合わせる。リストの最小値と最大値が、構図の可動範囲を決める。
数字の下に置くラベル. 数値はカードではなく文字として組みます。ディスプレイサイズのInterに、1段下のラベルを添えます。ラベルは数値の下、ブリーフ最小の段階に置くため、その行は装飾ではなくデータとして読めます。
効いてくるポスターフレーム. 1462x1080の画幅は1本のループで埋まる。コピーの後ろで再生し、操作系を必要としない。ループは6.3sと短く、目にはタイムラインではなくテクスチャとして映ります。書き出しは1462x1080以上にして、トリミングを正確に保ってください。

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

インタラクティブ層はコントロール

フィードバックはすべてのカードではなくボタンとリンクのホバー状態に限られるので、レイアウトの残りは固定された構図になる。押下状態もホバーと同様に指定されているので、タップでもクリックと同じ確認が返る。この参考は1462x1080で収録しました。

時間も仕様に書く

ホバー、押下、フォーカスはいずれも200msで解決する。インターフェースが即座に感じられるのはそのためだ。同じ再生時間を複数の操作要素で使い回しており、インタラクションが一つの仕組みとして揃って感じられる。

ランディングページを支えるタイミング

値ではなくパターンを真似たい。200msのトランジション、6.3sのメディアループ、ホバー状態と押下状態の組み立ては保ち、持続時間だけ自社ブランドの数値に置き換える。このランディングページで、動くために動く要素はない。

TrustFlowで最初に変えるもの

自社のメディアを入れるときは、トリミングとレイヤーの順序を守る。メディアは1462x1080の6.3sループ映像だ。コピーの可読性を保っているのはその配置だ。色に触る前に、見出しの一行を書き換える。

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

テンプレートがファーストビューをモジュールで埋めるのに対し、このランディングページはナビゲーション、見出し、お知らせのピル、数値の行、カードグリッドで止める。差は15pxで固定した表示サイズ、11px刻みの余白に出る。空白を埋めるための余白はない。 TrustFlowは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。