このテンプレートについて
PROMPTはヒーローセクションの仕様書として読める。値はページを組む前に書き出されていた。配色は黒 #000000の下地、白 #FFFFFFの文字で、書体はInter Tight。この参考例はReactとTailwind CSSで組んであり、レイアウトの判断はそれとは独立に書かれている。ページはモーションを80msのトランジション、ループする動画の下地にとどめる。書いている間は開いておく。13,186文字のブリーフが、自社ページにそのまま持ち込める部分。収録したプロンプトは1472x1080で記録したので、このページで引用する値はすべてそこにたどれる。
対象
- モーションを外さざるを得ないなら、このヒーローセクションは100vhのセクション、32px刻みの余白が階層を担ったまま読める。
- このヒーローセクションは、制作会社のコピーが5.7sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。
- 見出しをPROMPTと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
含まれる内容
- 一行に収めたナビゲーション. ワードマークが左端を押さえ、その右にリンクが並ぶ。すべてInter Tightで組んであり、バーは別系統ではなく下のページに属して見える。バーは独自の背景を持たずに1472x1080の構図の上に載るため、その下のメディアは端から端まで届きます。
- 実装まで持ち込む数値. ブリーフは数値を名指ししています（100vhのセクション、32px刻みの余白、80msのトランジション）。書体とフレームの間に勝手な余白の段階がないからこそ、構図はまとまります。これらの数値に合わせて再現すれば、追加調整なしで参考例に近づく。
- 全画面の動画、パネルなし. ミュートしたループクリップ1本が1472x1080のフレームを覆い、5.7sで再生されます。 cover指定で配置し、コピーはその上に重なります。ブリーフは動画にオーバーレイを載せないため、色は曇りません。1472x1080以上で書き出せば、coverの切り抜きはそのまま機能する。
- 流し読みを前提にした構成. 文章を流し込む場所にパネルを並べている。ヒーローセクションを見渡せるのはそのためだ。パネルは罫線ではなく余白で区切るため、グリッドは静かに見えます。この参考は1472x1080で収録しました。
モーションとインタラクション
モーションは切れる
モーション層はオフスイッチ付きで、prefers-reduced-motionでは入場とループを外す。低減モーションを有効にすると、構図は遷移の途中で切り替わるのではなく最終状態を保つ。この参考は1472x1080で収録しました。
短く、明記された時間
ブリーフはトランジションの値を80msに固定しているので、作り直すときに遅い既定値で代用できない。値が短いので、作り直しでこれを遅くすればすぐに分かる。
この構図が制作会社で効く理由
制作会社のページの多くは、ファーストビューが弱いとセクションを足す。これは逆に選択肢を削る。ナビゲーション、お知らせのピル、数値の行、カードグリッド、機能リストをこの順に置き、訴求を繰り返すものは置かない。制作会社の読み手に、訴求へ至る最短の正直な道を示す。この参考は1472x1080で収録しました。
PROMPTの最初の読みの順序
1本の読みの経路を選ぶことは、他の経路を閉じること。ブリーフはそれを受け入れ、ナビゲーション、お知らせのピル、数値の行、カードグリッド、機能リストを固定し、100vhのセクション、32px刻みの余白を経路の明快さに使う。制作会社の読み手は、選択肢より先に訴求を受け取る。
ヒーローセクションの再配置
テンプレートが1カラムに畳んで成り行きに任せるのに対し、このブリーフは何が起きるかを明示し（セクションは100vhに固定、ナビゲーションはモバイルメニューに畳まれる、モーションに低減モーションの分岐がある）、順序を保つ。幅が変えるのは寸法で、読みの経路ではない。
よくある質問（FAQ）
PROMPTのブリーフをコピーすると何が手に入りますか？
収録されたブリーフは13,186文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
この項目にReactとTailwind CSSが書かれているのはなぜですか？
PROMPTはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
PROMPTにはどこまでアニメーションが入っていますか？
モーションはレイアウトと同じ粒度で指定されています。状態変化は80msの範囲で収束します。先に構成を移植し、タイミングは後から合わせると、レイアウトが固まっている分だけ合わせやすくなります。
