このテンプレートについて
Orbis NFTはフィンテックプロダクトに、完成したファーストビューと、それを生んだ数値を渡す。配色は深いのブルー #010828の下地、白 #EFF4FFの文字、明るいのライム #6FFF00のアクセントに絞り、書体はAnton。納品物はReactとTailwind CSSで、452x800で記録しているため、コードを書く前に枠が決まっている。最初の画面で意図が伝わる必要があるフィンテックプロダクトのランディングページには、この参考が適している。以下に引用する値はすべてこのブリーフのもので、452x800の枠から最小の余白ステップまで含む。収録したプロンプトは452x800で記録したので、このページで引用する値はすべてそこにたどれる。
対象
- このランディングページは、レイアウトの中で32px刻みの余白が何を決めているのかを知りたい実装者に答える。
- フィンテックプロダクトランディングページを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
- ランディングページをモデルに指示する人は、8,276文字のプロンプトを出発点に使う。
含まれる内容
- 操作より前に置くリンク. 上段に載るのはワードマーク、4〜5本のリンク、#6FFF00に染めた操作1つで、ページのほかの部分に対して静かに見えるサイズに抑えています。バーは独自の背景を持たずに452x800の構図の上に載るため、その下のメディアは端から端まで届きます。
- 順序を決めるグリッド. 読み順はグリッドが決めます。同じ重みのパネルが1つずつ考えを担い、小さめのAntonで組むことで構造が見えたままになります。パネル間の余白は1つの値で、密度の高いグリッドが窮屈に見えないのはそのためだ。パネルは余白で分け、枠線では囲まないでください。
- 目分量ではなく実測. 寸法は452x800のレンダリングから読み取った（32px刻みの余白）。画幅の比率も寸法と一緒に記録してあり、再現時に縦横比も合う。
- 控えめに使う1色のアクセント. 明るいのライム #6FFF00は構図の中で唯一彩度を持つ値で、ほかはすべて深いのブルー #010828の上にあります。ボタン、リンク、小さな強調だけがこの色を借りるため、情報量の多いファーストビューでも読めます。ほかはすべて深いのブルー #010828の上にあり、彩度の高い配色でも読めるのはそのためです。
モーションとインタラクション
ホバーは意味のある場所だけに
インタラクティブな層は意図的に小さい（すべてのカードではなくボタンとリンクのホバー状態）。フィードバックは操作要素に限られるので、その周りの構図は静止したままだ。この参考は452x800で収録しました。
モーションはほぼない
スクロールライブラリはない。452x800の構図は静止したままで、動くのは自分に反応する要素だけだ。構図は静止したままなので、ページを支えるのは階層であり、それは成立している。動きは操作要素にとどめる。
フィンテックプロダクトがここで得るもの
メディアがコピーより雄弁だとする。この構成はまさにその場合のためにある。メディアは452x800の静止画だ。枠は静かなままで、32px刻みの余白が読み手を文字につなぎとめる。 Orbis NFTは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。
ランディングページを支えるタイミング
既製のアニメーションライブラリならもっと動く。このブリーフが求めるのはその逆で、ホバー状態と押下状態だけ、装飾は載せない。このランディングページで、動くために動く要素はない。この参考は452x800で収録しました。
ランディングページの背後にある順序
注意は偶然に任せず、導いている。順序はナビゲーション、数値の行、カードグリッド、背景のクリップと進み、各停留点は32px刻みの余白に合わせて寸法を取るので、順番が崩れることはない。フィンテックの読み手は、選択肢より先に訴求を受け取る。
よくある質問（FAQ）
Orbis NFTのプロンプトは完成した仕様書ですか、それとも出発点ですか？
気分を書いた説明ではなく、制作のための仕様です。452x800のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
Orbis NFTを作り直すのにReactとTailwind CSSは必要ですか？
Orbis NFTはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Orbis NFTから作り直したページを、クレジット表記なしで公開してもよいですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は452x800で収録しました。
