404ページの作り方｜案内文・戻り先・HTTP応答をまとめて確認
存在しないURLで迷わせないために。404の意味、移転時との使い分け、案内画面の構成、ブラウザーでの応答確認を、架空例と検査表で解説します。
この記事でわかること
先に答え：案内画面と「404の応答」をセットで作る
ページが存在しないときは、見つからないことを画面で伝え、別の情報へ進めるリンクを用意します。同時に、サーバーがそのURLに404のHTTPステータスを返すことを確認します。画面に大きく「404」と書いただけでは、応答コードまで404になったとは判断できません。
MDNは404を、要求されたリソースをサーバーが見つけられない状態と説明しています。一方、ページが見つからない表示なのに成功を表す200を返す状態などは、Googleがsoft 404と判断する対象です。この記事では、404の見た目を整える作業と、応答を確かめる作業を分けて進めます。
最初に、そのURLをどう扱うべきか決める
どのエラーにも404画面を当てはめるのではなく、元のページの状態を確認します。判断がつかない場合は、ページの管理担当者へ「残す・移す・終了する」のどれかを確認してから設定します。
| 元のページの状態 | 対応の方向 | 確認すること |
|---|---|---|
| 公開を続けるはずのページ | ファイル・公開設定・参照先を直す | 修正後に本文が読めるか |
| 内容が別のURLへ移った | 対応する新URLへの恒久転送を検討 | 移転先が同じ目的に答えるか |
| 削除済みで適切な代替がない | 404または410を返す | 案内画面と応答が一致するか |
| 一時的なメンテナンス中 | 一時停止の応答を別途設計 | 再開予定と503等の扱い |
移転と削除を混同すると、残すべきページを消したり、無関係なページへ送ったりします。Googleは、削除して代替がない場合の404・410と、移動先がある場合の301を区別して案内しています。すべての不明なURLをトップページへ転送する設定は避け、対応する内容があるかを先に確認します。
404画面は「何が起きたか」と「次にできること」を伝える
次の例は編集部が作成した架空の構成案です。実在するサービスの画面ではありません。
その下に、記事一覧やサービス案内など、実際に使えるリンクを置きます。情報の数が少ないサイトでは、動かない検索窓を飾りとして置くより、入口を数個に絞った方が確認しやすくなります。これは編集上の提案で、必須の個数が定められているわけではありません。
| 画面の要素 | 入れる内容の例 | 避けたい状態 |
|---|---|---|
| 見出し | ページが見つかりませんでした | エラー番号だけで説明がない |
| 説明 | URL変更・公開終了の可能性 | 確認していない原因を断定する |
| 戻り先 | トップ、記事一覧、サービス案内 | 押しても反応しないボタン |
| 補助導線 | 必要なら問い合わせ | フォーム自体も故障している |
| サイト名・メニュー | 普段と共通の案内 | 別サイトに移ったように見える |
「前のページへ戻る」だけに頼ると、検索結果やブックマークから来た人に適切な行き先を示せません。確実に存在する一覧ページへのリンクも用意します。問い合わせを置く場合は、送信に失敗しないかも確認してください。
実装方法は公開環境に合わせる
HTMLファイルを置くだけの環境、CMS、アプリケーションのルーティングでは設定方法が異なります。管理画面に「404ページ」の編集機能があるなら、それを使って案内を整えた後、必ず実際の不明なURLで確認します。
ApacheでErrorDocumentを利用できる環境では、設定例は ErrorDocument 404 /notfound.html です。これはMDNで説明されている方法であり、すべてのレンタルサーバーやサイト作成サービスにそのまま適用できる設定ではありません。利用可否や設定ファイルの場所は公開先の資料で確認します。
制作担当者へ依頼するなら、次の3点をセットにすると作業範囲が明確になります。
- 存在しないURLで表示する案内文とリンク先。
- 元のURLに対して返すHTTPステータス。
- トップ・記事・画像など、正常なページへ影響しないことの確認。
ChromeのNetworkで、画面とは別に応答を確認する
- 自分が管理するサイトで、存在しないテスト用URLを一つ決めます。例は
/missing-test-guideです。 - Chromeのデベロッパーツールを開き、Networkパネルを選びます。
- パネルを開いたまま、そのURLを読み込みます。
- 対象ページ本体のリクエストを選び、Statusを確認します。画像やfaviconの行と取り違えないでください。
- 案内画面が表示され、ページ本体の応答が404であることを確認します。
- 案内内のリンクを押し、移動先の本文が読めることも確かめます。
Chrome公式資料ではNetworkのStatus列でHTTPステータスを確認できます。Networkにリクエストが出ないときは、パネルを開いてから再度読み込みます。結果が200なら、文章の変更ではなくサーバー・CMS・ルーティング側の設定確認が必要です。
検査記録はURLごとに残す
| 確認URL | 期待する状態 | 実際のコード | 画面・リンクの結果 |
|---|---|---|---|
| 存在しないURL | 404と案内画面 | ＿＿ | ＿＿ |
| 公開中の記事 | 本文が読める | ＿＿ | ＿＿ |
| 移転した旧URL | 対応する新URLへ転送 | ＿＿ | ＿＿ |
| 案内内の記事一覧 | 一覧が読める | ＿＿ | ＿＿ |
404が見つかったら、読者がどのリンクから到達したかも調べます。自分のサイト内のリンクなら修正し、公開終了したURLがサイトマップに残っていないかを点検します。「404の数をゼロにする」ことだけを目標にして、存在しない内容を作り直す必要はありません。まず、残すべきページの不具合と、終了したページへのアクセスを分けることが重要です。
SITE PORTを検討するときの確認ポイント
ページを増やした後も更新しやすいかを考えるなら、SITE PORTの編集デモで普段の文章やリンクの変更手順を確認するのが一つの方法です。404画面の変更や応答コードの設定については、通常の本文編集と同じ操作でできるとは限らないため、対応範囲を分けて確認します。
SITE PORTの完成例と編集デモを見ながら、普段の更新を自分で進められるか確認できます。契約前には、この記事で扱う設定を誰が担当するか、どの範囲まで対応するかを確認してください。
次に確認したいこと
[URL変更と転送の確認表](/articles/url-change-redirect-checklist)・[画像だけ表示されない場合](/articles/image-not-showing-path-check)
出典・確認情報
確認日：2026-10-12 ／ 公式情報の要点と編集部の提案を整理しています。価格・機能・条件は変更される場合があります。
MDN：404 Not FoundGoogle：クロールエラーとsoft 404の対処Google：404エラーの対処Chrome：Networkパネルのリファレンス