404 エラーページ
大きな「404」の数字、見出し、説明文、戻り用の2ボタンを中央に並べた、シンプルな404エラーページです。背景はクリーム色、数字は 160px の極太セリフ体で、まず目に飛び込むようにしています。
このパーツの使いどころと実装ポイント
大きな「404」の数字、見出し、説明文、戻り用の2ボタンを中央に並べた、シンプルな404エラーページです。背景はクリーム色、数字は160pxの極太セリフ体で、まず目に飛び込むようにしています。display:gridとplace-items:centerで画面の真ん中に配置されるので、どんな画面サイズでも中央にきれいに収まります。
向いている場面
削除済みのページや古いURLにアクセスされたとき、ユーザーを行き止まりにせず案内するために使います。コーポレートサイト、ブログ、ECサイトなど用途を問わず必要なページで、「トップへ戻る」と「お問い合わせ」の2つの逃げ道を用意して離脱を防ぎます。
カスタマイズと注意点
- 「お探しのページは削除されたか…」の文言は、サイトのトーンに合わせて柔らかくも事務的にも書き換えられます。サイト内検索の入力欄を足すと、目的のページへ戻りやすくなります。
- 見出しは
h1になっていますが、404は実際には存在しないページなので、サーバー側でHTTPステータス404を返す設定も忘れないでください。見た目だけ404でも検索エンジンには伝わりません。 - 画面幅720px以下では数字が100pxに縮み、スマホでもはみ出しません。2つのボタンは折り返しに対応しています。
よくある質問
このページを置くだけで404扱いになりますか？
なりません。見た目は404ページでも、サーバーがHTTPステータスの404を返す設定が別途必要です。設定しないと検索エンジンには通常のページと認識されてしまいます。
検索ボックスは付けられますか？
付けられます。説明文の下にサイト内検索の入力欄を追加すると、迷子になったユーザーが目的のページを探しやすくなり、トップへ戻る以外の選択肢を増やせます。