フレンドリー 404 ページ

このパーツの使いどころと実装ポイント

このパーツは、訪問者がリンク切れや古い URL にたどり着いたときに表示する 404 エラーページの中央寄せレイアウトです。大きな数字「404」を linear-gradient と background-clip:text で文字グラデーションにし、見出し・お詫び文・トップへ戻るボタンを縦に並べた、責めずに次の行動へ導く構成になっています。

向いている場面

サイト構成を変更した直後で旧 URL が残っているコーポレートサイト、商品の入れ替えが多い EC、記事を整理するメディアなど、リンク切れが起きやすいサイトに向きます。冷たいシステムエラー画面より、ブランドのトーンを保ったまま離脱を防げるのが利点です。

カスタマイズと注意

• グラデーション 2 色（#667eea と #764ba2）を自社カラーに変えるだけで雰囲気が合わせられます
• ボタンには検索窓や人気ページへのリンクを足すと回遊につながります
• background-clip:text は一部の古いブラウザで透明文字になるため、color のフォールバックを用意すると安全です
• サーバー側では必ず HTTP ステータス 404 を返し、見た目だけの 404 にしない点が重要です

見出しは h2 ですが、ページ単独で使う場合は h1 に上げると構造が明確になります。