このテンプレートについて
Nexto 404は1986x1446で記録し、ギャラリー用の画像ではなく仕様として残した。配色はニュートラル #F5F5F5の下地、ほぼ黒 #1A1A1Aの文字で、書体はDM Sans。納品物はReactとTailwind CSSで、1986x1446で記録しているため、コードを書く前に枠が決まっている。結局、動きは5sのトランジション、cubic-bezier(0.77, 0, 0.175, 1)に尽きる。記録されたブリーフから始め、404ページをゼロから作り直すのではなく編集する。以下に引用する値はすべてこのブリーフのもので、1986x1446の枠から最小の余白ステップまで含む。収録したプロンプトは1986x1446で記録したので、このページで引用する値はすべてそこにたどれる。
対象
- AI・SaaSプロダクト404ページを提案する制作会社が、100vhのセクション、20px刻みの余白を提案書に書き込みたい。キックオフの後も見積もりが崩れないようにするためだ。
- 複数案件を同時に進めるスタジオ責任者は、この404ページを他ページが踏襲する型として使う。
- AI・SaaSプロダクト404ページを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
含まれる内容
- ページのグリッドに乗るバー. 細いバーを404ページの上に重ね、左にワードマーク、リンクはDM Sansで組みます。そのため構図はコンテンツが先、装飾は後に読めます。タブレットのブレイクポイントを下回ると、モバイル用のオーバーレイに切り替わります。バーは独自の背景を持たずに1986x1446の構図の上に載るため、その下のメディアは端から端まで届きます。
- 目分量ではなく実測. ブリーフは数値を名指ししています（100vhのセクション、20px刻みの余白、5sのトランジション、cubic-bezier(0.77, 0, 0.175, 1)のイージング）。書体とフレームの間に勝手な余白の段階がないからこそ、構図はまとまります。名指しされた値の間に勝手な中間値はありません。寸法の一覧がそのままシステム全体です。
- 中盤を担うカードグリッド. 文章を流し込む場所にパネルを並べている。404ページを見渡せるのはそのためだ。グリッド内でアクセントが示すのは多くても1要素で、パネル同士が競合しない。パネルは余白で分け、枠線では囲まないでください。この参考は1986x1446で収録しました。
- ベースラインに乗る数字. 数字はDM Sansで、本文よりも見出しに近いサイズで組む。アクセントは主張を担う数字だけに使い、行全体には使わない。ラベルを小さくする前に、数字を1つ削る。
モーションとインタラクション
コントロールは共通の時間
コントロールは5sで変化し終えるので、触れられた時点でページが応答し、反応が遅れて見えることはない。イージングは再生時間と一緒に指定されている（5s）ので、作り直しの際に別の感触へ黙って差し替わることはない。
ホバーは意味のある場所だけに
フィードバックはすべてのカードではなくボタンとリンクのホバー状態に限られるので、レイアウトの残りは固定された構図になる。各状態が変えるプロパティは1つなので、フィードバックが読み取りやすい。この参考は1986x1446で収録しました。
404ページの再配置
別に保守するモバイル用デザインは存在しない。スケールは段階式ではなく可変、セクションは100vhに固定、ナビゲーションはモバイルメニューに畳まれる。同じ階層が幅をまたいでそのまま通るので、二重管理にならない。どちらの状態も同じブリーフに書かれている。
Nexto 404を仕様として読む
このページは見た目より多くの数値でできている。作り直しで守るべきなのは100vhのセクション、20px刻みの余白、5sのトランジション、cubic-bezier(0.77, 0, 0.175, 1)のイージングで、残りは動かしてよい。この404ページに、初期値任せの部分はない。
この構図がSaaSで効く理由
メディアに色の膜をかぶせるのが簡単な解決だったはず。ブリーフはそれを外している。メディアは1986x1446の静止画だ。それでもコピーが保つのは、100vhのセクション、20px刻みの余白が画面を静かに保つから。 SaaSの読み手に、訴求へ至る最短の正直な道を示す。
よくある質問（FAQ）
手に入れたNexto 404のブリーフで、何ができますか？
このページに引用している内容はすべて、収録された5,689文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
Nexto 404の土台になっているプロンプトはどれくらいの長さですか？
気分を書いた説明ではなく、制作のための仕様です。1986x1446のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
Nexto 404はReactとTailwind CSSにどこまで依存していますか？
Nexto 404はReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
