Animated Cardsのフィンテック機能紹介セクションデザインとプロンプト

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

Animated Cardsは640x464で記録し、ギャラリー用の画像ではなく仕様として残した。色は黒 #000000の下地、明るいのオレンジ #FF9500のアクセントに限り、JetBrains Monoで組んでいる。納品物はReactとTailwind CSSで、640x464で記録しているため、コードを書く前に枠が決まっている。主題ではなく構造を借りる。機能紹介セクションとその数値は、そのまま自社ブランドに移せる。以下に引用する値はすべてこのブリーフのもので、640x464の枠から最小の余白ステップまで含む。収録したプロンプトは640x464で記録したので、このページで引用する値はすべてそこにたどれる。

対象

まず数値が要るデザイナー。12pxで固定した表示サイズ、16px刻みの余白、すべて仕様からの引用である。
機能紹介セクションをモデルに指示する人は、36,212文字のプロンプトを出発点に使う。
見出しをAnimated Cardsと同じ長さに保ったまま機能紹介セクションを書き換えるコンテンツ責任者のために作った。

含まれる内容

刻みを名指しするブリーフ. ブリーフの寸法はすべて、測り直せる数値だ（12pxで固定した表示サイズ、16px刻みの余白）。値は推測ではなく収録時のプロンプトからの引用で、再レンダリングでも変わらない。
残りを担うベース色. 配色は下地と信号の2色（黒 #000000と明るいのオレンジ #FF9500）で、2色目は操作のために取ってある。ほかはすべて黒 #000000の上にあり、彩度の高い配色でも読めるのはそのためです。
文章ではなくグリッド. 構造はグリッドそのものだ。同じ大きさのパネルをJetBrains Monoで組み、視線が下ではなく横へ動くように並べる。グリッドはパネルの順序を変えずに1列へ折れます。
書体が決める階層. 書体はサイズと一緒に書いてある（JetBrains Mono、12px）。タイポグラフィが別の実装にも持ち運べるのはそのためだ。サイズが大きくなるほど字間を詰めるため、12pxの範囲でディスプレイの行がまとまります。

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

反応はコントロールに返す

インタラクティブな層は意図的に小さい（必要なときに内容を送るスライダー）。操作できそうに見えるコントロールは実際に反応するので、偽のアフォーダンスがない。ポインターの効果はコントロールに留める。この参考は640x464で収録しました。

画像ではなくキャンバス

3Dトランスフォームがページに奥行きを与え、周囲のレイアウトは平坦なままなので、注意を引くのは描画だけだ。仕様に画像の差し替えはなく、情景は最初の描画に含まれている。キャンバスが起動しない場合の代替フレームを用意する。この参考は640x464で収録しました。

機能紹介セクションを支える数値

作り直しがずれるとき、最初に崩れるのは余白だ。 Animated Cardsは構成と一緒に12pxで固定した表示サイズ、16px刻みの余白を公開することでそれを避けている。この機能紹介セクションに、初期値任せの部分はない。

この機能紹介セクションが正しい理由

別々のカードの積み重ねとして作り直すこともできるが、失われるのは主張そのもの。この機能紹介セクションは1つの判断として読ませる。数値の行、カードグリッド、機能リスト、背景のクリップを1本の順序に置いている。フィンテックの読み手に、訴求へ至る最短の正直な道を示す。この参考は640x464で収録しました。