404ページ
ページが見つからないときの案内。大きな「404」とやさしい文言、ホームへ戻る導線を中央に据える。上空を漂うイラストがゆっくり浮遊する。
プレビュー
操作動きのない質感・レイアウトの見本です。
使いどころ
URLの打ち間違い・削除されたページ・リンク切れなど、意図しない到達を穏やかに着地させる場面に使う。大きな「404」表示で状況を即座に伝えつつ、紙飛行機のイラストで殺伐としすぎない印象にし、迷わず次の行動(ホームへ戻る)へ誘導する。ECサイトの在庫切れ商品ページや、退会済みユーザーのプロフィールページのように「URLは正しいが対象が存在しない」ケースにもほぼ同じ構造で流用できるが、その場合は文言を「ページが見つかりません」ではなく「この商品は現在お取り扱いがありません」のように対象を具体的に言い換えると親切になる。サイト内検索やよく見られているページへのリンクを併置すると、ホームに戻るだけより離脱を防ぎやすい。
仕組み
実装はテキストとSVGイラストの静止レイアウトで、JSは一切使っていない。動きは紙飛行機(nf-plane)にtranslateとrotateを組み合わせたnf-floatアニメーションを3.6秒周期でかけ、破線の軌跡(nf-trail)はstroke-dashoffsetをずらすnf-dashアニメーションで飛行機の後ろを追いかけるように見せている。どちらもtransformとstroke-dashoffsetだけを動かしているためレイアウト再計算が起きず、静止画に対して軽量な動きを足せる。ホームへの導線はbutton要素ではなくa要素(class="nf-btn")にしてあり、実際のサイトに組み込むときはhrefを実際のトップページへ差し替える。404という数字自体もただの装飾ではなく実際のHTTPステータスと一致させ、サーバー側でも404レスポンスを返すよう対応させることが望ましい。
実装の注意
見落としやすいのは、静的サイトやSPAのクライアントサイドルーティングで「見た目だけ404ページを出してHTTPステータスは200を返す」構成になりがちな点。検索エンジンのクローラーはステータスコードで判断するため、ソフト404のままだと本来インデックスされるべきでないページが残り続ける。サーバー側の設定(Next.jsのnot-found.tsxやNginxのfallback設定など)で実際に404を返すところまでセットで実装する必要がある。またイラストのアニメーションはprefers-reduced-motionで止まるようになっているが、動きを止めた瞬間に紙飛行機が中途半端な角度で静止すると不自然に見えることがあるため、静止時の初期姿勢(rotate(-2deg))が破綻しないか確認しておくとよい。
アクセシビリティ
ページタイトル(documentのtitle)を「ページが見つかりません」のように明確に更新することが最重要で、SPAのルーティングでtitleを更新し忘れると、スクリーンリーダーのユーザーはページが遷移したことに気づけない。あわせてページ遷移時にフォーカスを本文の見出し(nf-title相当の要素、実装時はh1にする)へ移すと、読み上げが先頭から自然に始まる。イラストのSVGはaria-hiddenで隠されており装飾として扱われているため問題ない。「ホームへ戻る」のリンクはボタンのように見える見た目でもa要素として実装されており、キーボードのTabで到達しEnterで遷移できる操作可能な要素になっている点は適切だ。
調整して使う
変えやすいのは3点。まずイラストで、紙飛行機以外にも虫眼鏡や迷子の矢印などサイトのトーンに合わせて差し替えられる。次に文言のトーンで、事務的な「ページが見つかりません」からユーモラスな一言まで、ブランドの人格に応じて調整できる。最後に導線の数で、デモはホームへ戻るリンク1つだけだが、実際のサイトではサイト内検索フォームや直前のページに戻るリンク、よく見られているページ一覧を並べて出すと離脱を減らせる。ECサイトなど探しものが目的のサイトでは特に検索フォームの併置が効果的だ。イラストのアニメーション速度も3.6秒からもっとゆっくりにすると落ち着いた印象になり、逆に速めると軽快でカジュアルな雰囲気に寄せられる。
コード（コピーして使えます）
<div class="stage" id="stage">
<div class="nf">
<div class="nf-art" aria-hidden="true">
<svg width="120" height="88" viewBox="0 0 120 88" fill="none">
<!-- 漂う紙飛行機 -->
<g class="nf-plane">
<path d="M8 40 L58 20 L40 52 L33 44 L8 40 Z" fill="#eef1fb" stroke="#2b50c7" stroke-width="2" stroke-linejoin="round"/>
<path d="M33 44 L40 52 L36 42 Z" fill="#7fa4ff"/>
</g>
<!-- 破線の軌跡 -->
<path class="nf-trail" d="M12 62 Q40 58 58 44 T104 26" stroke="#c8c2b8" stroke-width="2" stroke-linecap="round" stroke-dasharray="1 8"/>
</svg>
</div>
<p class="nf-code">404</p>
<p class="nf-title">ページが見つかりません</p>
<p class="nf-sub">お探しのページは移動または削除された可能性があります。</p>
<a class="nf-btn" href="#">ホームへ戻る</a>
</div>
</div>