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

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

Portiva Heroは判断の履歴を残しており、このヒーローセクションを生んだブリーフは2,639文字。見出しは「Less complexity, more impact in every project」で、ヒーローセクションの残りはその周りに配置されている。配色はティール #087573の下地、白 #D1E5E7の文字、オレンジ #C25E2Eのアクセントに絞り、書体はInter。納品形式は自己完結したHTMLファイル1つなので、ヒーローセクション全体をデザインの引き継ぎなしにプロジェクトへ持ち込める。モーションは120msのトランジション、ループする動画の下地で、コピーが主役のままになる程度に抑えている。制作会社・スタジオのヒーローセクションが、デザインを変えずにコピー変更へ耐える必要があるとき最も効く。

対象

制作会社・スタジオヒーローセクションを制作するチームが、見積もりを出す前に自己完結したHTMLファイル1つを記録に残したい。
引き継ぎメモに1466x1080のフレームを書け。次のビルドがページから導き直さずに済む。
自己完結したHTMLファイル1つでこのページを作り直すフロントエンド開発者で、トランジションを推測ではなく指定として受け取りたい。

含まれる内容

背景を持たないナビゲーション. ワードマーク、リンク、#C25E2Eの操作が同じベースラインを共有する。細い一行が偶然の産物に見えないのはそのためだ。リンクはワードマークより小さいサイズで組み、#C25E2Eの操作だけがバーの中で重みを持つ要素です。
ブリーフに直書きされたサイズ. ここに目分量はありません。仕様が62px刻みの余白、120msのトランジションを固定し、残りのレイアウトはその値から導かれます。すべての値は収録時のプロンプトと突き合わせて確認できます。再現が近似ではなく検証可能になるのはそのためです。
雰囲気を担うメディア1つ. 背景は1466x1080の4.5sループ1本だけで、coverでトリミングし、色は一切載せていません。ほかの要素はすべて上のレイヤーに浮かびます。1466x1080以上で書き出せば、coverの切り抜きはそのまま機能する。書き出しは1466x1080以上にして、トリミングを正確に保ってください。
スタイルを決めるタイポグラフィ. タイポグラフィはInterです。ブリーフは変化をつけるために混ぜるのではなく、書体に役割を与えています。ウェイト、トラッキング、サイズ段階がすべて指定されているため、差し替えても階層は保たれます。ウェイトは役割ごとに指定されているため、実装時に勘で階層を決めることはありません。

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

時間も仕様に書く

トランジションの指定は120ms。コントロールはこの時間に縛られる。値が短いので、作り直しでこれを遅くすればすぐに分かる。時間の値は実装にそのまま持ち込む。

スクロールライブラリなしの環境モーション

環境の動きはスクロール演出ではなく4.5秒の1466x1080ループから生まれる。だからページは落ち着き、文字は読める。ほかに連続して動くものがないので、注意を引くのは映像だけだ。

Portiva Heroの最初の読みの順序

トレードオフは我慢を強いること。走査しやすいグリッドなら即座に渡す詳細を、このページは保留する。代わりに得るのは、ナビゲーション、お知らせのピル、カードグリッド、背景のクリップが読み違えられないファーストビュー。制作会社の読み手は、選択肢より先に訴求を受け取る。この参考は1466x1080で収録しました。

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

開発者に渡すなら、役に立つ成果物はブリーフだ。62px刻みの余白、120msのトランジションを明記しており、2人の間で解釈する余地を残さない。このヒーローセクションに、初期値任せの部分はない。

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

広い幅では構成は密度が高い。狭い幅ではナビゲーションはモバイルメニューに畳まれる。どちらの状態も同じ1本のブリーフに書かれており、後から足したものではない。操作部はタップできる大きさを保ち、コピーはどの幅でも読む順番を維持します。この参考は1466x1080で収録しました。

よくある質問（FAQ）

Portiva Heroを作り直すのに自己完結したHTMLファイル1つは必要ですか？

Portiva Heroは自己完結したHTMLファイル1つで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。

Portiva Heroの土台になっているプロンプトはどれくらいの長さですか？

気分を書いた説明ではなく、制作のための仕様です。1466x1080のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。

Portiva Heroのトランジションを残したまま、時間だけ変えることはできますか？

モーションはレイアウトと同じ粒度で指定されています。状態変化は120msの範囲で収束します。先に構成を移植し、タイミングは後から合わせると、レイアウトが固まっている分だけ合わせやすくなります。