Neurolink Hero Sectionの制作会社・スタジオヒーローセクションデザインとプロンプト

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

Neurolink Hero Sectionはヒーローセクションの仕様書として読める。値はページを組む前に書き出されていた。ページ自身の見出しは「Where Memories Live Forever」で、構図はその言葉をそのまま中心に組まれている。色は深いのブルー #0D1017の下地、白 #FFFFFFの文字、明るいのオレンジ #FFB733のアクセントに限り、Interで組んでいる。この参考例はvanilla JSで組んであり、レイアウトの判断はそれとは独立に書かれている。モーションの予算はループする動画の下地。制作会社のヒーローセクションを発注するなら、この構成から始めて主題だけ差し替える。収録したプロンプトは1526x1080で記録したので、このページで引用する値はすべてそこにたどれる。

対象

モーションを外さざるを得ないなら、このヒーローセクションは100vhのセクション、16px刻みの余白が階層を担ったまま読める。
プロダクトマーケターで、コピーの背後に3.9sのループ映像があってもヒーローセクションが読める状態を保ちたい。
ヒーローセクションをモデルに指示する人は、10,336文字のプロンプトを出発点に使う。

含まれる内容

余分を持たないバー. この行はコントラストを#FFB733の操作1か所だけに使い、ワードマークとリンクは文字色に退く。リンクはワードマークより小さいサイズで組み、#FFB733の操作だけがバーの中で重みを持つ要素です。
ブリーフに直書きされたサイズ. 値そのものが仕様です。100vhのセクション、16px刻みの余白は1526x1080での収録値で、スクリーンショットから推測したものではありません。リストの最小値と最大値が、構図の可動範囲を決める。変えるのは題材で、刻みではない。
大きくなるほど詰まる字間. Interに仕事を任せ、見出しから補助コピーへサイズを大きく落とし、サイズが大きくなるほど字間を詰めています。階層を担うのは色ではなく文字です。サイズの刻みが固定値なので、書体を差し替えても同じ階層を保てる。
目分量ではなく実測. 値そのものが仕様です。100vhのセクション、16px刻みの余白は1526x1080での収録値で、スクリーンショットから推測したものではありません。リストの最小値と最大値が、構図の可動範囲を決める。ページを持ち込むときも、名指しされた値はそのまま使ってください。

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

インタラクションは局所に

ポインターまわりの処理は小さく、仕様に書かれている。すべてのカードではなくボタンとリンクのホバー状態を、もともと操作できそうに見える要素にだけ適用する。操作できそうに見えるコントロールは実際に反応するので、偽のアフォーダンスがない。長い効果のリストより、確実な状態をいくつか。この参考は1526x1080で収録しました。

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

環境の動きは3.9秒の映像1本を1526x1080で使うだけ。ポインターに反応させず、コピーの背後で静かにループさせる。ミュートなので、音やフォーカスを奪わずにコピーの背後で回せる。

制作会社・スタジオがここで得るもの

このページの約束は1つだけで、それを支えているのが100vhのセクション、16px刻みの余白。ページは「Where Memories Live Forever」と明言している。折り返しより下の要素には、同じ訴求を二度背負わせていない。 Neurolink Hero Sectionは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。

ヒーローセクションの再配置

ブレイクポイントを、レイアウトを変えるためではなく収めるために選んでいるなら、この項目を読むとよい。隠す要素を並べる代わりに、スケールは段階式ではなく可変、セクションは100vhに固定。それがこの項目の内容だ。自動再生とモーションは誠実に扱われているので、それらが使えない環境でもページは内容を伝えます。

ヒーローセクションの背後にある順序

最初の判断と競合するものはここにはない。ページは「Where Memories Live Forever」と明言している。補助情報は折り返しの下で待たせ、ページ上部はナビゲーション、見出し、お知らせのピル、数値の行、背景のクリップだけで担う。視線を横へ散らす要素は置いていない。制作会社の読み手は、選択肢より先に訴求を受け取る。