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

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

制作会社・スタジオ向けにヒーローセクションを作り直す前にNetwork Heroを読むと、構成とそれを支える仕様がここに揃っていることが分かる。「Unlock Top Marketing Talent You Thought Was Out of Reach -- Now Just One Click Away!」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。色は深いのインディゴ #070319の下地、白 #FFFFFFの文字、インディゴ #A068FFのアクセントに限り、Interで組んでいる。納品物はReact、Vite。1ページで、プラグインも、デザインとの間に挟まるビルドツールもない。結局、動きは35msのトランジション、cubic-bezier(0.22, 1, 0.36, 1)に尽きる。書いている間は開いておく。7,543文字のブリーフが、自社ページにそのまま持ち込める部分。

対象

制作会社の案件を提案し、クライアントへの初回返信に640x472のフレームを載せる必要がある制作会社のためのものだ。
見出しをNetwork Heroと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
#A068FFだけ決まっていて、ヒーローセクションの他の要素は未定の創業者のために作った。

含まれる内容

ドロワーを持たない一行. ナビゲーションは帯ではなく細いストリップです。ワードマークは左、リンクは中央やや右、操作は#A068FFの1つだけ。いずれも独自の背景を持たずにヒーローセクションの上に載ります。リンクはワードマークより小さいサイズで組み、#A068FFの操作だけがバーの中で重みを持つ要素です。ワードマークには文字が必要とする以上の幅を与えない。
検証できる数値. リストは短く（64px刻みの余白、35msのトランジション、cubic-bezier(0.22, 1, 0.36, 1)のイージング）、システム全体を手作業で確認できる。値が固定されているので、差し替えてもリズムは変わらず見た目だけが変わる。
役割が明確な2書体. 大見出しはInterで、ブリーフが定めたサイズで組む。見出しは段落ではなく構図の要素になる。キャプションの刻みは、図の下に置いてもページのリズムを変えない大きさだ。
お知らせのピル. お知らせは見出しの上の#A068FFのピルで、補助コピーより小さいサイズにします。第二のタイトルではなくラベルとして読ませるためです。バッジが#A068FFを持ち、見出しは文字色に留まります。

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

短く揃えた時間

1つの時間がすべてのインタラクションを覆う（35ms、cubic-bezier(0.22, 1, 0.36, 1)で）。ホバーと押下が同じ体系に読めるのはそのため。状態変化ごとに値が書かれているので、ブラウザの初期値が使われることはない。

入場の動きが決め手

動きは1つの挙動に集中しているので（タイプライターのように導入文が打ち出される）、ページがエフェクトの詰め合わせには読めない。入場は、読者の目が補足コピーに届く前に終わる。この参考は640x472で収録しました。

ヒーローセクションを自社のものにする

ブリーフはInterを指定し、その隣にスケールを置いている。同じ比率を持つ書体に差し替えるかぎり、構成は保たれる。再利用できるのは構図のほうで、別のブランドでもそのまま成立します。

ヒーローセクションを支えるタイミング

テンプレートがすべてのセクションを登場時に動かすのに対し、これは35msのトランジション、タイプライター演出、文字単位の見出しタイミングだけを動かし、あとは止める。このヒーローセクションで、動くために動く要素はない。

制作会社・スタジオに効くところ

制作会社・スタジオに対してこれが機能するのは、読み手に情報を組み立てさせないからである。「Unlock Top Marketing Talent You Thought Was Out of Reach -- Now Just One Click Away!」が最初のフレームからその役割を担っている。レイアウトも書体も色も決まっており（深いのインディゴ #070319とインディゴ #A068FF、Inter）、最初の画面は部品の寄せ集めではなく、結論の出た主張として読める。制作会社の読み手に、訴求へ至る最短の正直な道を示す。