3D Collectible Heroの3D・ゲームヒーローセクションデザインとプロンプト

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

3D Collectible Heroはヒーローセクションの仕様書として読める。値はページを組む前に書き出されていた。色はくすんだのグリーン #85CC92の下地、赤 #F4845Fのアクセントに限り、Antonで組んでいる。納品物はReactとTailwind CSS。1ページで、プラグインも、デザインとの間に挟まるビルドツールもない。モーションは650msのトランジション、cubic-bezier(0.4,0,0.2,1)に限っている。この参考例は、作り始める前にファーストビューを固めたい3D・ゲーム・エンタメブランド向け。

対象

このヒーローセクションは、640x470の画角をクライアントの3回の修正に耐えさせたい制作会社のために作った。
3D・ゲーム・エンタメブランドのヒーローセクションを作るチームで、スクリーンショットを写すのではなく実測値（22pxで固定した表示サイズ、100vhのセクション）を求めている。
3D・ゲーム・エンタメブランドヒーローセクションを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。

含まれる内容

邪魔にならないナビゲーションバー. この行はコントラストを#F4845Fの操作1か所だけに使い、ワードマークとリンクは文字色に退く。リンクはワードマークより小さいサイズで組み、#F4845Fの操作だけがバーの中で重みを持つ要素です。
検証できる数値. 寸法は収録時点のブリーフに22pxで固定した表示サイズ、100vhのセクション、200px刻みの余白、650msのトランジションとして書かれている。再現は近似ではなく検証になる。画幅の比率も寸法と一緒に記録してあり、再現時に縦横比も合う。
構図そのものがコンテンツ. 構図全体が1画面に収まり、ReactとTailwind CSSで作られています。コピー、メディア、操作要素はブリーフで名指しされています。ページは640x470の1つの構図です。コピーが変わっても崩れないのはそのためです。
1書体、2つの役割. 最上位の文字はAntonで、補助コピーはそれよりずっと小さく落とす。階層は色に頼らず読める。サイズが大きくなるほど字間を詰めるため、22pxの範囲でディスプレイの行がまとまります。

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

状態変化にも時間を与える

コントロールは650msで変化し終えるので、触れられた時点でページが応答し、反応が遅れて見えることはない。示された時間が覆うのは状態変化だけなので、動きのうち仕様に書かれているのはフィードバックの部分になる。

素材としてのノイズ

仕様は640x470の構図にフィルムグレインを加える。だから表面は単色の塗りではなく素材として読める。こうしたページが奥行きのために使うグラデーションを置き換えている。

3D Collectible Heroで動くもの

仕様はすべてのトランジションを値に結びつけている（650msのトランジション、ホバー状態と押下状態、グレインのオーバーレイ）。だからこそ、モーションのプリセットを上から載せたテンプレートには見えない。このヒーローセクションで、動くために動く要素はない。

このヒーローセクションが正しい理由

主張は見出しサイズで一度だけ出す。ヒーローセクションの残りはすべてその一行を軸に並ぶ。ナビゲーション、数値の行、機能リストが続き、最初の読みで競合する第二の約束はない。3D Collectible Heroは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。この参考は640x470で収録しました。