このテンプレートについて
Fun 404 Pageは、教育・コミュニティブランドが404ページで抱える課題を記録済みのブリーフ1本で解く。見出しは「Oops, something went wrong!」で、404ページの残りはその周りに配置されている。色は明るいのオレンジ #FF8233の下地に限り、Interで組んでいる。納品物はReactとTailwind CSSで、1664x1248で記録しているため、コードを書く前に枠が決まっている。モーションは500msのトランジション、cubic-bezier(0.16,1,0.3,1)、ループする動画の下地で、コピーが主役のままになる程度に抑えている。新しいセクションを足す前に404ページの順序を決めたいときに使う。収録したプロンプトは1664x1248で記録したので、このページで引用する値はすべてそこにたどれる。
対象
- 教育・コミュニティブランドの404ページを作るチームで、スクリーンショットを写すのではなく実測値（22vhのセクション、200px刻みの余白）を求めている。
- 404ページのコピーを自社で書くプロダクトチームは、表示用の文字サイズが想定した行長を一行ずつ守る必要がある。
- プロダクトマーケターで、コピーの背後に10sのループ映像があっても404ページが読める状態を保ちたい。
含まれる内容
- ページのグリッドに乗るバー. バーは1行のテキストと1つの操作だけで、22vhのセクション、200px刻みの余白として測ってある。太い帯ではなく細い一行として読ませるためだ。バーは独自の背景を持たずに1664x1248の構図の上に載るため、その下のメディアは端から端まで届きます。
- 順序を決めるグリッド. 読み順はグリッドが決めます。同じ重みのパネルが1つずつ考えを担い、小さめのInterで組むことで構造が見えたままになります。パネルはUI書体を同じサイズで共有し、グリッドが第2のレイアウトにならないようにする。
- 刻みを名指しするブリーフ. ブリーフは22vhのセクション、200px刻みの余白、500msのトランジション、cubic-bezier(0.16,1,0.3,1)のイージングを固定し、残りは配置に任せる。ひとりでに段数が増えるスケールとは逆の発想だ。リストは短く、確認者は要素ごとに突き合わせられる。
- ループが背景になる. 動画は1664x1248の構図の最下層にあり、文字はその上に配置され、間に何も挟まない。自動再生が使えないときは1664x1248のポスター画像が構図を保つため、レイアウトが崩れることはありません。
モーションとインタラクション
ミリ秒で書かれた時間
モーションはミリ秒単位で測る。500ms、cubic-bezier(0.16,1,0.3,1)を使い。これがアニメーションの予算のすべてで、スクロールのタイムラインではなく状態変化に使う。コントロール間で同じ値を再利用するので、時間がばらけようがない。
ポインター状態以外は何もしない
ポインターに反応するのは操作要素だけ（すべてのカードではなくボタンとリンクのホバー状態）。すべての要素を的にせずに、ページは反応して感じられる。操作できそうに見えるコントロールは実際に反応するので、偽のアフォーダンスがない。この参考は1664x1248で収録しました。
404ページの再配置
この404ページを1664x1248とスマートフォン幅で見比べる。順序は同じまま保たれ、スケールは段階式ではなく可変、セクションは22vhに固定、ナビゲーションはモバイルメニューに畳まれる。変わるのは寸法だけだ。ビューポートに応じて変わるのは尺度で、順番は変わりません。
Fun 404 Pageの最初の読みの順序
厳密な順序は、後から自由度を奪う。ファーストビューにセクションを足すなら22vhのセクション、200px刻みの余白を切り直す必要がある。順序が装飾ではなく構造を支えているからだ。教育の読み手は、選択肢より先に訴求を受け取る。
404ページを自社のものにする
テーマが部品を渡すのに対し、このブリーフは構成を渡す。22vhのセクション、200px刻みの余白、500msのトランジション、cubic-bezier(0.16,1,0.3,1)のイージングとメディア枠、そして主題は自社に委ねられる。配色を変える前に、コピーとメディアを書き換える。
よくある質問（FAQ）
手に入れたFun 404 Pageのブリーフで、何ができますか？
このページに引用している内容はすべて、収録された6,085文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
Fun 404 Pageの土台になっているプロンプトはどれくらいの長さですか？
気分を書いた説明ではなく、制作のための仕様です。1664x1248のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
この項目にReactとTailwind CSSが書かれているのはなぜですか？
Fun 404 PageはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
