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

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

Luminaは制作会社・スタジオに、完成したファーストビューと、それを生んだ数値を渡す。ページ全体は赤 #EC4899の下地、明るいのブルー #3B82F6のアクセントでできている。納品物は単一のコンポーネント。1ページで、プラグインも、デザインとの間に挟まるビルドツールもない。モーションはループする動画の下地に限っている。最初の画面で意図が伝わる必要がある制作会社・スタジオのヒーローセクションには、この参考が適している。収録したプロンプトは2056x1478で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、2056x1478の枠から最小の余白ステップまで含む。

対象

このヒーローセクションにブロックを足していく社内チームには、70px刻みの余白を変えずに新しいブロックへ引き継ぐ必要がある。
このページは、単一のコンポーネントで制作会社・スタジオヒーローセクションを組み直し、見た目の裏にある数値を探すフロントエンド開発者に応える。
このヒーローセクションは、単一のコンポーネントをすでに理解し、明るいのブルー #3B82F6のアクセントを文章にできれば足りるチームを対象にしている。

含まれる内容

邪魔にならないナビゲーションバー. バーに載るのはワードマーク、セクションのリンク、#3B82F6のボタン1つだけです。70px刻みの余白で測られているため、第二のヘッダーに膨らむことはありません。リンクはワードマークより小さいサイズで組み、#3B82F6の操作だけがバーの中で重みを持つ要素です。
文字の後ろのメディア. ブリーフは動画を2056x1478、ループを6sと指定し、すべてのテキスト要素はその画幅に合わせて置かれる。2056x1478以上で書き出せば、coverの切り抜きはそのまま機能する。
刻みを名指しするブリーフ. リストは短く（70px刻みの余白）、システム全体を手作業で確認できる。すべての値は収録時のプロンプトと突き合わせて確認できます。再現が近似ではなく検証可能になるのはそのためです。
新しい1つだけを示すピル. お知らせは見出しの上の#3B82F6のピルで、補助コピーより小さいサイズにします。第二のタイトルではなくラベルとして読ませるためです。バッジが#3B82F6を持ち、見出しは文字色に留まります。

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

インタラクティブな範囲は狭く

フィードバックはすべてのカードではなくボタンとリンクのホバー状態に限られるので、レイアウトの残りは固定された構図になる。フィードバックは操作要素に限られるので、その周りの構図は静止したままだ。ホバーでレイアウトにアニメーションを付けない。この参考は2056x1478で収録しました。

ループが環境演出を担う

環境の動きは6秒の映像1本を2056x1478で使うだけ。ポインターに反応させず、コピーの背後で静かにループさせる。自動再生が止められた場合はポスターフレームが代わりに立ち、動きは必須ではなく追加要素にとどまる。

ヒーローセクションを支える数値

ブリーフは仕様書であって、雰囲気の覚書ではない。70px刻みの余白を明記し、周りを設計する前に2056x1478のメディア枠を決めている。このヒーローセクションに、初期値任せの部分はない。

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

ここまで動きを抑えると、ページは書体と枠に頼ることになる。ホバー状態と押下状態、6sのメディアループ、ループするマーキーを完全に外しても構成は成り立つ。このヒーローセクションで、動くために動く要素はない。

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

再利用できるのは構成で、主題は自社のもの。70px刻みの余白を残し、言葉、メディア、ブランドマークを差し替える。再利用できるのは構図のほうで、別のブランドでもそのまま成立します。

よくある質問（FAQ）

Luminaの背後のブリーフには、実際に何が入っていますか？

収録されたブリーフは2,677文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。

Luminaを作り直すのに単一のコンポーネントは必要ですか？

この参考例はたまたま単一のコンポーネントで作られているだけで、レイアウトのどの部分もその選択に依存していません。余白、書体、モーションの値は、すでに使っている環境へそのまま持ち込めます。

手に入れたLuminaのブリーフで、何ができますか？

このページに引用している内容はすべて、収録された2,677文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。