404 エラーページレイアウト
404 エラーページは、存在しない URL にアクセスされたときに表示する案内画面です。このサンプルは JavaScript を使わず CSS のみで作られ、大きな「404」の数字は -webkit-text-stroke で輪郭だけを描く中抜き文字にして印象づけています。
解説
404 エラーページは、存在しない URL にアクセスされたときに表示する案内画面です。このサンプルは JavaScript を使わず CSS のみで作られ、大きな「404」の数字は -webkit-text-stroke で輪郭だけを描く中抜き文字にして印象づけています。数字とタイトルは clamp() で画面幅に応じて拡大縮小し、中央に「トップへ戻る」ボタンを置いて離脱を防ぐ動線を確保しています。
用意しておきたい理由
- リンク切れや古い URL でも訪問者を迷わせない
- トップや検索への動線で回遊を維持する
- サイトの世界観を保ったまま親切に案内する
文言やボタンのリンク先は自社サイトに合わせて書き換えます。検索ボックスや人気ページへのリンクを足すと、目的のページへ戻りやすくなります。サーバー側では HTTP ステータスを正しく 404 で返すことが重要で、200 を返すと検索エンジンが存在しないページを有効と誤認してしまう点に注意してください。
よくある質問
数字の中抜きデザインはどう作っていますか
.e404__num に color:transparent と -webkit-text-stroke を指定し、文字の塗りをなくして輪郭だけを描いています。stroke の太さや色を変えると印象が変わります。塗りつぶしたい場合は color を指定してください。
SEO 上で気をつけることはありますか
見た目だけでなく、サーバーが HTTP ステータス 404 を返すことが大切です。200 を返すと検索エンジンが空ページを正常ページと誤認するため、設定で正しく 404 を返すようにしてください。