このテンプレートについて
Space planetはヒーローセクションの仕様書として読める。値はページを組む前に書き出されていた。配色はトーン #071227の下地、#FFFFFFの文字、ティント #5FD0E1のアクセントに絞り、書体はPoppins。納品物は自己完結したHTMLファイル1つで、1920x1420で記録しているため、コードを書く前に枠が決まっている。モーションは6sのトランジション、cubic-bezier(.22,1.36,1)、ループする動画の下地で、コピーが主役のままになる程度に抑えている。教育のヒーローセクションを発注するなら、この構成から始めて主題だけ差し替える。以下に引用する値はすべてこのブリーフのもので、1920x1420の枠から最小の余白ステップまで含む。
対象
- 制作の仕様を書き、批判的に検討する材料としてcubic-bezier(.22,1.36,1)のイージングを探しているStudioのチーム。
- プロトタイプを作らずに500pxの挙動をクライアントへ説明する必要がある制作会社のために作った。
- 競合の教育ヒーローセクションを作り直すチームが、フレームワークを決める前に自己完結したHTMLファイル1つを明示したい。
含まれる内容
- 邪魔にならないナビゲーションバー. リンクは同じ文字サイズで1行に並び、#5FD0E1の操作が右端で行を締める。視線はナビゲーションの切れ目で止まる。500px以下では、リンクは2行目に折り返さず折りたたむ。リンクは4〜5本に抑えてください。その本数に合わせて行のサイズが決まっています。
- イラストではなくクリップ. 1920x1420の画幅は1本のループで埋まる。コピーの後ろで再生し、操作系を必要としない。自動再生が使えないときは1920x1420のポスター画像が構図を保つため、レイアウトが崩れることはありません。書き出しは1920x1420以上にして、トリミングを正確に保ってください。
- 段差の大きいスケール. ここではタイポグラフィがスタイルの仕組みです。ディスプレイサイズのPoppins、インターフェース全体で同じ書体、そして仕事を引き受ける第二のアクセントカラーはありません。書体の差し替えは可能ですが、比率がその差し替えに耐える必要があります。
- ブリーフに直書きされたサイズ. ブリーフは100vhのセクション、72px刻みの余白、6sのトランジション、cubic-bezier(.22,1.36,1)のイージングを固定し、残りは配置に任せる。ひとりでに段数が増えるスケールとは逆の発想だ。値は推測ではなく収録時のプロンプトからの引用で、再レンダリングでも変わらない。
モーションとインタラクション
タイムラインではなくループ
背景の映像は6.9秒、1920x1420でミュートのままインライン再生され、無限にループする。読者の注意がコピーにある間もページは動き続ける。環境モーションは映像そのものだけなので、スクロールライブラリは要らない。ミュートなので、音やフォーカスを奪わずにコピーの背後で回せる。
コントロールは共通の時間
状態変化は6sと指定されているので、コントロールの反応はブラウザの既定値ではなく設計された値になる。イージングは再生時間と一緒に指定されている（6s）ので、作り直しの際に別の感触へ黙って差し替わることはない。時間の値は実装にそのまま持ち込む。
教育・コミュニティに効くところ
このページの約束は1つだけで、それを支えているのが100vhのセクション、72px刻みの余白。折り返しより下の要素には、同じ訴求を二度背負わせていない。教育の読み手に、訴求へ至る最短の正直な道を示す。
ヒーローセクションの背後にある順序
教育の読み手は、1画面に着くと読む前に走査する。このレイアウトはそれに応える。ナビゲーション、見出し、お知らせのピル、数値の行、機能リストは走査される寸法で置き、100vhのセクション、72px刻みの余白が各停留点を区別する。教育の読み手は、選択肢より先に訴求を受け取る。
ヒーローセクションを支える数値
29,105文字のブリーフがそのまま完全な仕様になる。ただし構造を支えている部分は短く、実質は100vhのセクション、72px刻みの余白、6sのトランジション、cubic-bezier(.22,1.36,1)のイージングに集約される。このヒーローセクションに、初期値任せの部分はない。
よくある質問（FAQ）
この項目に自己完結したHTMLファイル1つが書かれているのはなぜですか？
Space planetは自己完結したHTMLファイル1つで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Space planetのブリーフは、自分で書くプロンプトと同じものですか？
このページに引用している内容はすべて、収録された29,105文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
Space planetのプロンプトは完成した仕様書ですか、それとも出発点ですか？
気分を書いた説明ではなく、制作のための仕様です。1920x1420のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
