HTMLとCSSでコピーできるオリジナルの404ページのデザイン20例と、役立つ404ページに必要な要素、文章のトーンの例を紹介します。さらに、Next.js、Netlify、Vercelなどで、ページが本物の404ステータスを返すようにする方法も解説します。
良い404ページは、ページが見つからないことをわかりやすい言葉で伝え、サイトのナビゲーションはそのまま残し、次に進む道を示します。具体的には、検索ボックス、人気ページへのリンク、リンク切れを報告する手段です。さらに、本物の404ステータスコードを返す必要もあります。そうしないと、検索エンジンにはソフト404として扱われてしまいます。以下に、コピーして使える20のデザインを紹介します。
404ページに入れるべき要素
以下のデザインはすべてシンプルなHTMLとCSSで作られており、ライブプレビューを見ながら編集して、自分の404ページにそのまま貼り付けられます。デザインの後には、ほとんどのギャラリーが触れていない部分、つまりサーバーに正しいステータスコードを返させる方法も説明しています。
「見つかりません」のような内容を表示しているのに200 OKのステータスを返すページや、検索エンジンにエラーだと判断される中身の薄いページのことです。GoogleはこうしたページをSearch Consoleでソフト404として報告し、検索結果から除外することがあります。対策は、存在しないページに対して本物の404または410のステータスを返すことです。
どちらもページが存在しないことを意味し、Googleは4xxのエラーをほぼ同じように扱うとしています。410 Goneは削除が恒久的であることを示すため、終了したキャンペーンや削除した商品に向いています。ほとんどの場合、特に判断に迷うときは404で問題ありません。
404エラーそのものは問題ありません。存在しないページがあるのはWebではごく普通のことで、Googleも、存在すべきでないページの404はサイトの他の部分に悪影響を与えないとしています。悪影響の原因になるのは、サイト内のリンク切れ、削除したページに向けられていた外部からのリンクを失うこと、そしてソフト404です。
ほとんどのシングルページアプリは、ルーターを動かすためにすべてのURLをindex.htmlに書き換えています。そのため、サーバーはどのURLにも200で応答してしまいます。対策は、実在するページを事前にレンダリングして、不明なパスは404.htmlにたどり着くようにするか、ルーターが知らないパスに対してサーバーが404ステータスを返すようにすることです。
どのデザインも、それだけで完結したHTMLとCSSです。コードを編集すると、プレビューが更新されます。
基本形です。メッセージ、検索、いくつかのリンク。どんな業種にも使えます。
大きな縁取りの数字が、画像を使わずにページに力強い印象を与えます。
左にメッセージ、右に人気ページの短いリスト。スマートフォンでは縦に並びます。
ダークテーマのサイト向けです。やわらかな光で、見出しを主張しすぎずに読みやすく保ちます。
オンラインストア向けです。人気商品を3つ並べて、行き止まりを買い物の続きに変えます。
件名を入力済みのmailtoリンクで、リンク切れの報告がワンクリックでできます。可能であれば、サーバー側で本文にページのアドレスを追加してください。
CSSだけで描いた道路標識なので、読み込む画像がありません。
ドキュメントや大規模なコンテンツサイト向けです。こうしたサイトでは、検索が元に戻る最も速い方法です。
シンプルなほど良い、ポートフォリオや個人サイト向けです。
お腹を空かせた訪問者を、メニュー、予約、電話番号へまっすぐ案内します。
職人や工事業者向けです。訪問者はおそらく依頼したい仕事があるので、電話番号を表示します。
遊び心のあるブランドに合う、カラフルな見出しです。
開発者向けツール向けです。本物のリンクを入れた、見せかけのコマンドラインです。
空のページの代わりに、最新の記事へ読者を案内します。
ソフトウェア向けです。サインイン済みのユーザーは古いブックマークから404にたどり着くことが多いので、ダッシュボードへの導線を用意します。
画面いっぱいの画像の上に、コントラストを確保する暗いオーバーレイを敷いて文字を重ねます。画像のURLを自分のものに差し替えてください。
多くの人が次に向かう先を提案しますが、リダイレクトは一切しないので、ステータスは404のままです。
色付きの背景の中央にカードを置いたデザインで、すっきりしたモダンなサイトに向いています。
2か国語のサイト向けです。両方の言語でメッセージを表示し、それぞれのホームページへのリンクを置きます。
二度と戻らないページ向けです。410ステータスと組み合わせて使います。
デザインが役に立つのは、サーバーも404を返している場合だけです。よく使われる環境での設定方法を紹介します。
不明なURLにアクセスがあったときや、notFound()を呼び出したときに描画されます。Next.jsは404ステータスを返します。
どちらも、公開フォルダーのルートにある404.htmlを404ステータスで配信します。すべてのURLをステータス200でindex.htmlに書き換える設定があると、この仕組みが動かなくなります。
公開元のルートに404.htmlを追加します。GitHub Pagesはそれを404ステータスで配信します。
404ステータスを保ったまま、存在しないURLに対して自分のページを表示します。完全なURLではなくローカルのパスを指定してください。そうしないと、Apacheはリダイレクトしてしまいます。
internalフラグを付けると、/404.htmlに直接アクセスして200で読み込まれることを防げます。
ハンドラーは他のすべてのルートの後に追加し、どのルートにも一致しなかったリクエストだけが届くようにします。
無料で始める · クレジットカード不要