404 PlanetのAI・SaaS404ページデザインとプロンプト

このテンプレートについて

404 Planetは640x468で記録し、ギャラリー用の画像ではなく仕様として残した。ページ自身の見出しは「This page seems to have」で、構図はその言葉をそのまま中心に組まれている。カラースキームは深いのブルー #01010Cの下地、くすんだのティール #D1ECF4の文字、ブルー #0D214Eのアクセントで、ページはHelvetica, Arialで組む。この参考例はReactとTailwind CSSで組んであり、レイアウトの判断はそれとは独立に書かれている。モーションは200msのトランジションに限っている。主題ではなく構造を借りる。404ページとその数値は、そのまま自社ブランドに移せる。

対象

この404ページは、レイアウトの中で80px〜260pxの可変型サイズ、10px刻みの余白が何を決めているのかを知りたい実装者に答える。
404ページをモデルに指示する人は、7,598文字のプロンプトを出発点に使う。
見出しを404 Planetと同じ長さに保ったまま404ページを書き換えるコンテンツ責任者のために作った。

含まれる内容

操作より前に置くリンク. バーは構図の中で最も静かな部分です。ワードマーク、短いリンク列、#0D214Eの操作1つを、ブリーフで最小のタイプ段階に収めています。リンクはワードマークより小さいサイズで組み、#0D214Eの操作だけがバーの中で重みを持つ要素です。
刻みを名指しするブリーフ. レイアウトは固定値（80px〜260pxの可変型サイズ、10px刻みの余白、200msのトランジション）を基準に決めているため、どの幅でもファーストビューの構図が保たれます。すべての値は収録時のプロンプトと突き合わせて確認できます。再現が近似ではなく検証可能になるのはそのためです。
主張の代わりに数字. 数値の行をファーストビューの中に置き、Helvetica, Arialのスケール最大で組みます。#0D214Eは主張を担う数値だけに残します。数値だけが#0D214Eのアクセントを持ち、周囲は文字色に留まります。
ブランドを担うフッター. フッターは上のページから書体と#0D214Eのアクセントを引き継ぐため、404ページの下端も同じデザインに属します。ワードマークは独立したブロックに置き、長いリンク一覧でも読めるようにします。ワードマークには専用の列を用意してください。

モーションとインタラクション

時間も仕様に書く

コントロールの動きは短く、繰り返しに耐える。状態が変わるたびに200ms。同じ再生時間を複数の操作要素で使い回しており、インタラクションが一つの仕組みとして揃って感じられる。

反応するのは操作要素

ここでのインタラクションは各コントロールの内側で完結する（すべてのカードではなくボタンとリンクのホバー状態）。ページのほかの部分が巻き添えで動くことはない。ホバーとフォーカスはまとめて指定されているので、ポインターとキーボードが同じ情報を受け取る。この参考は640x468で収録しました。

404 Planetを仕様として読む

作り直しがずれるとき、最初に崩れるのは余白だ。404 Planetは構成と一緒に80px〜260pxの可変型サイズ、10px刻みの余白、200msのトランジションを公開することでそれを避けている。この404ページに、初期値任せの部分はない。

404ページを支えるタイミング

アニメーションの対象を数え上げると、一覧はすぐ終わる。200msのトランジション、ホバー状態と押下状態だけで、ほかに動く要素はない。入場演出もスクロール連動も、この一覧の外にはない。この404ページで、動くために動く要素はない。

404ページの再配置

仕様は各幅で何が変わるかを記述している（ナビゲーションはモバイルメニューに畳まれる）。つまりモバイル版は判断であり、縮小ではない。コントラストはメディア上の#0D214Eのアクセントで保たれ、動画はミュートのインライン再生である。狭い幅のレイアウトは縮小ではなく判断であり、階層もそのまま保たれます。