このテンプレートについて
Skybridge 404はECブランドに、完成したファーストビューと、それを生んだ数値を渡す。配色はブルー #1165B4の下地、白 #E7E1D8の文字に絞り、書体はGeist Mono。納品形式はReactとTailwind CSSなので、404ページ全体をデザインの引き継ぎなしにプロジェクトへ持ち込める。モーションはループする動画の下地で、コピーが主役のままになる程度に抑えている。この参考例は、作り始める前にファーストビューを固めたいECブランド向け。ブリーフが固定しているもの（フレーム、文字サイズ、タイミング、ブレイクポイント）は下記にすべて書き出してあるので、404ページを作り直すときに背後の意図を推測せずに済む。このページの残りは、404ページをブロックごと、次にタイミングと値ごとに分解する。ブリーフにない主張は足さない。
対象
- プロトタイプを作らずに640pxの挙動をクライアントへ説明する必要がある制作会社のために作った。
- 低速回線でもこの404ページを成立させたいエンジニアは、1456x1080とタイプスケールを重さの予算に使う。
- この404ページを1スプリントに収め、新しい素材も増やしたくないプロダクトマネージャーのために作った。
含まれる内容
- 操作より前に置くリンク. ナビゲーションは1行だけで、下に第2階層を持たない。640px未満では、リンクが全画面オーバーレイに畳まれます。640px以下では、リンクは2行目に折り返さず折りたたむ。自社のページにセクションが多い場合は、バーを広げるのではなくまとめてください。
- 1本のクリップが担う. 4.7sの素材1つがファーストビュー全体を支え、同期させる2つ目のメディア要素はない。ループは4.7sと短く、目にはタイムラインではなくテクスチャとして映ります。
- 書体が決める階層. 大見出しはGeist Monoで、ブリーフが定めたサイズで組む。見出しは段落ではなく構図の要素になる。大見出し用の書体は1つのサイズでのみ使い、それ自体と競合しない。
- 構図そのものがコンテンツ. 構図全体が1画面に収まり、ReactとTailwind CSSで作られています。コピー、メディア、操作要素はブリーフで名指しされています。ページは1456x1080の1つの構図です。コピーが変わっても崩れないのはそのためです。
モーションとインタラクション
効く場所だけポインター
ここでのインタラクションは各コントロールの内側で完結する（すべてのカードではなくボタンとリンクのホバー状態）。ページのほかの部分が巻き添えで動くことはない。状態が単純なので、どんなコンポーネント体系にも移植できる。この参考は1456x1080で収録しました。
奥行きはレンダリングから
ページの見せ場はWebGLのキャンバスだけなので、インターフェースはそれと競わないように組んである。シーンはコンテナのサイズで描画されるので、固定の解像度に依存しない。この参考は1456x1080で収録しました。
404ページの再配置
この404ページは1456x1080で構成し、狭い幅向けに組み直す。スケールは段階式ではなく可変、レイアウトは640pxで切り替わる、セクションは100vhに固定。スマートフォン版は詰め込みではなく判断になっている。狭い幅のレイアウトは縮小ではなく判断であり、階層もそのまま保たれます。
404ページを支えるタイミング
アニメーションの対象を数え上げると、一覧はすぐ終わる。ホバー状態と押下状態、4.7sのメディアループ、ライブキャンバスだけで、ほかに動く要素はない。入場演出もスクロール連動も、この一覧の外にはない。この404ページで、動くために動く要素はない。
Skybridge 404の最初の読みの順序
いまのページが機能を先頭に置いているなら、真似すべきはこの順序。ナビゲーション、数値の行、背景のクリップを前に、補足を後ろに、距離は100vhのセクション、40px刻みの余白が決める。 ECの読み手は、選択肢より先に訴求を受け取る。
よくある質問（FAQ）
Skybridge 404のプロンプトは完成した仕様書ですか、それとも出発点ですか？
収録されたブリーフは7,104文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
手に入れたSkybridge 404のブリーフで、何ができますか？
このページに引用している内容はすべて、収録された7,104文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
Skybridge 404を作り直すのにReactとTailwind CSSは必要ですか？
Skybridge 404はReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
