Portalのライフスタイルヒーローセクションデザインとプロンプト

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

これはPortalのヒーローセクションを、スクリーンショットとしてではなく、それを生んだブリーフとともに公開したもの。「A voyage through forgotten realms, where past and future intertwine」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。配色は黒 #292926の下地、くすんだのオレンジ #F3BC9Eの文字、赤 #E1836Bのアクセントに絞り、書体はInter。納品物はReactとTailwind CSSで、800x609で記録しているため、コードを書く前に枠が決まっている。ブリーフはモーションの予算を300msのトランジションに使う。この参考例は、作り始める前にファーストビューを固めたいライフスタイルブランド向け。

対象

ライフスタイルブランドヒーローセクションを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
ヒーローセクションをモデルに指示する人は、6,663文字のプロンプトを出発点に使う。
見出しをPortalと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。

含まれる内容

操作1つだけの上段. バーに載るのはワードマーク、セクションのリンク、#E1836Bのボタン1つだけです。20px刻みの余白、300msのトランジションで測られているため、第二のヘッダーに膨らむことはありません。リンクはワードマークより小さいサイズで組み、#E1836Bの操作だけがバーの中で重みを持つ要素です。ワードマークには文字が必要とする以上の幅を与えない。
大きくなるほど詰まる字間. 大見出しはInterで、ブリーフが定めたサイズで組む。見出しは段落ではなく構図の要素になる。 UIテキストは1つの書体に固定し、同じサイズで2つの声が混ざらない。
検証できる数値. ここでは文字と余白を同じ1つのリストから取る（20px刻みの余白、300msのトランジション）。名指しされた値の間に勝手な中間値はありません。寸法の一覧がそのままシステム全体です。
根拠を置く位置に数値. 数値の行をファーストビューの中に置き、Interのスケール最大で組みます。#E1836Bは主張を担う数値だけに残します。数値だけが#E1836Bのアクセントを持ち、周囲は文字色に留まります。最も狭い幅でこの行を確認する。

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

コントロールは共通の時間

コントロールの動きは短く、繰り返しに耐える。状態が変わるたびに300ms。フォーカス状態もホバーと同じ値で時間を指定するので、キーボードとポインターの反応が一致する。

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

状態はグローバルなアニメーション層ではなく、コンポーネントごとに処理する（すべてのカードではなくボタンとリンクのホバー状態）。フィードバックは操作要素に限られるので、その周りの構図は静止したままだ。この参考は800x609で収録しました。

Portalの最初の読みの順序

このヒーローセクションには明示された読みの経路がある。ナビゲーションはプロダクトを提示し、再訪した読者に見慣れた導線を与える。そこから視線はナビゲーション、見出し、お知らせのピル、数値の行、背景のクリップを順にたどる。1画面が箇条書きに見えないのはそのため。ライフスタイルの読み手は、選択肢より先に訴求を受け取る。この参考は800x609で収録しました。

Portalで最初に変えるもの

装飾より先に約束を決める。「A voyage through forgotten realms, where past and future intertwine」を、自分の仕事を一文で言い切る形に書き直し、仕様が使っている表示サイズでInterに組む。赤 #E1836Bを自社のアクセントに置き換え、ほかを触る前に黒 #292926との対比を確認する。自社のアクセントも、参考例のアクセントと同じコントラスト検証を通過する必要がある。