404ページの作り方|必要な内容と導線設計

404ページの作り方|必要な内容と導線設計

404ページとは、ユーザーが存在しないURLへアクセスしたときに表示する案内ページです。 削除済みのページ、URLの入力ミス、古いリンクなどからアクセスした場合に、「ページが見つからない」と伝えつつ、サイト内の別ページへ戻れる導線を用意します。

重要なのは、単に「404 Not Found」とだけ表示するのではなく、トップページ・主要ページ・カテゴリ・検索・問い合わせなど、次に進める選択肢を用意することです。 一方で、存在しないURLに見た目だけ404ページを表示し、HTTPステータスが200のままになる設定は避けます。

30秒でわかる結論

  • 404ページは、存在しないURLへ来たユーザーを案内するためのページ
  • 「ページが見つかりません」と明確に伝える
  • トップページ・主要カテゴリ・検索など、次に進む導線を用意する
  • サイト全体のデザインと大きく離れないようにする
  • 存在しないURLは、原則として正しいHTTP 404を返す
  • 削除ページすべてをトップへ301リダイレクトするのは避ける
  • 404アクセスが多いURLは内部リンク切れや古い外部リンクを確認する

404ページとは?

404ページは、Webサーバーが「指定されたURLのページは見つからない」と判断したときに表示するページです。 HTTPでは通常「404 Not Found」というステータスを返します。

初心者向けに言い換えると

「この住所にはページがありません。でもサイト自体は使えるので、別のページはこちらです」と案内するページです。

ユーザーが間違ったURLを入力した場合だけでなく、記事削除、URL変更、古いブックマーク、外部サイトの古いリンクなどでも404ページへ到達します。

404ページを作る目的

404ページの最大の目的は、ページが見つからなかったユーザーをそのまま離脱させず、必要な情報へ戻しやすくすることです。

目的 役割
状況説明 ページが存在しないと伝える
離脱防止 別ページへの導線を用意する
迷子防止 トップ・カテゴリ・検索へ戻す
ブランド維持 通常ページと近いデザインを保つ

404そのものを完全になくすことは難しいため、「404が起きたときにどう案内するか」を考えることが重要です。

404ページに必要な内容

最低限、次の情報があるとユーザーが状況を理解しやすくなります。

基本項目

  • ページが見つからないこと
  • トップページへのリンク
  • 主要カテゴリまたは主要ページへのリンク
  • 必要に応じてサイト内検索
  • 問い合わせが必要なサイトなら問い合わせ導線

シンプルな文例

お探しのページは見つかりませんでした。
ページが削除・移動されたか、URLが間違っている可能性があります。
トップページまたはサイト内検索から目的のページをお探しください。

最初に「ページが見つからない」と明示する

404ページでは、何が起きたかを曖昧にしないことが大切です。 通常のトップページとほぼ同じ見た目だけを表示すると、ユーザーが「なぜこのページが表示されたのか」を理解できません。

分かりやすい表現

  • お探しのページは見つかりませんでした
  • ページが削除または移動された可能性があります
  • URLが正しいかご確認ください

技術用語に詳しくないユーザー向けサイトなら、「404エラー」だけでなく日本語の説明も併記します。

主要ページ・カテゴリへの導線を置く

記事数やサービス数が多いサイトでは、トップページに戻すだけでなく、主要カテゴリへ直接移動できるようにします。

会社サイト

おすすめ導線

サービス、料金、会社概要、お問い合わせ

ECサイト

おすすめ導線

商品カテゴリ、新着商品、人気商品、カート

ブログ・メディア

おすすめ導線

主要カテゴリ、人気記事、最新記事

店舗サイト

おすすめ導線

メニュー、料金、アクセス、予約

404ページをサイトの「再スタート地点」と考えると、どの導線が必要か決めやすくなります。

サイト内検索は必要?

記事数や商品数が多いサイトでは、404ページにサイト内検索を置くと便利です。 ユーザーが探していた言葉をそのまま検索できます。

サイト規模 検索機能
数ページの会社サイト なくてもよい
数十記事のブログ 必要に応じて
数百記事以上のメディア あると便利
商品数が多いEC 設置を検討

小規模サイトでは無理に付けない

5〜10ページ程度しかないサイトなら、検索ボックスより主要ページへのリンクを直接表示する方が使いやすい場合があります。

404ページのデザインはどうする?

404ページだけ別サイトのようなデザインにすると、ユーザーが「サイト自体が壊れた」と感じる可能性があります。

そろえたい要素

  • ロゴ
  • ヘッダー
  • 基本フォント
  • サイトカラー
  • フッター
  • 主要ナビゲーション

ユーモアのあるイラストや文言を使うこと自体は問題ありませんが、ユーザーが次に何をすればよいか分からなくなるほど演出を優先しないでください。

404ページでもHTTP 404を返す

404ページは見た目だけでなく、サーバーから返すHTTPステータスも重要です。 存在しないURLなら、原則として 404 Not Found を返します。

存在しないURL → HTTP 404 + 分かりやすい404ページ

見た目では「ページがありません」と表示しているのに、HTTPステータスが200 OKになっていると、検索エンジンにとって正常ページとの区別が曖昧になります。

見た目とHTTPステータスを分けて考える

404ページをきれいにデザインしても、HTTPレスポンスまで200へ変える必要はありません。存在しないページは正しい404を返したうえで、ユーザー向けの案内画面を表示します。

soft 404とは?

soft 404とは、実質的には「ページがない」「内容がほぼない」状態なのに、サーバーが404ではなく200などを返すケースです。 Googleは内容やレスポンスを見て、soft 404として扱う場合があります。

soft 404になりやすい例

存在しない商品URLを開く
↓
「商品がありません」というだけのページを表示
↓
HTTP 200を返す

削除済みURLについて代替ページがないなら、適切な404または410を返す方が分かりやすくなります。

404をトップページへ自動転送しない

存在しないURLをすべてトップページへ301リダイレクトする設定はおすすめできません。

ユーザーは特定ページを探していたのに、説明なしでトップへ送られるため、何が起きたのか分かりにくくなります。 検索エンジン側でも、内容が対応しない転送は適切なURL移転とは言えません。

避けたい例

削除した商品A
削除した記事B
存在しないURL C
↓
すべてトップページへ301

転送するなら

旧ページと内容が明確に対応する新ページがある場合だけ、その新ページへ301リダイレクトします。対応先がなければ404を返す方が自然です。

削除ページは404と410のどちら?

404は「ページが見つからない」、410 Goneは「意図的に削除され、今後も戻らない」ことを示すステータスです。

状態 候補
URL入力ミス・存在しないURL 404
削除済みで代替なし 404または410
対応する新ページあり 301

一般的なWordPress運営では404で十分なケースも多く、必ず410を設定しなければならないわけではありません。

WordPressで404ページを作る方法

WordPressでは、テーマに404用テンプレートが用意されていることがあります。 クラシックテーマでは 404.php、ブロックテーマではテンプレートエディターなどから404テンプレートを編集できる場合があります。

1
現在の404を確認
2
テーマの404設定を確認
3
必要な文言・導線を追加
4
存在しないURLで表示確認
5
HTTP 404も確認

テーマ更新に注意

親テーマの404.phpを直接編集すると、テーマ更新時に変更が消える場合があります。テーマ仕様に応じて子テーマや正式な編集機能を使ってください。

404ページの確認方法

公開後は、実在しないURLへアクセスして確認します。

テスト用URL例

https://example.com/this-page-does-not-exist-404-test/

確認項目

  • 404ページが表示されるか
  • HTTP 404が返るか
  • トップページへ戻れるか
  • 主要リンクが切れていないか
  • 検索が機能するか
  • スマートフォンでも使いやすいか

404アクセスが多いURLは調べる

404ページを整えても、重要な内部リンクが大量に404になっている状態を放置してよいわけではありません。

404が多いときの確認

  • 内部リンク切れ
  • メニューの古いURL
  • 記事URL変更後のリンク
  • 削除ページへの外部リンク
  • タイプミスされたURL
  • 過去サイトからの移転漏れ

対応する新ページがあるなら301、内部リンクの間違いならリンク修正、代替ページがなければ404のままにするなど、原因に応じて対応します。

404ページでよくある失敗

「404」だけ表示する

ユーザーが次にどうすればよいか分かりません。トップや主要ページへのリンクを付けます。

トップページへ強制転送する

ページが見つからなかったことを説明できません。代替ページがない場合は404を返します。

通常ページと全く違うデザインにする

別サイトへ移動したと誤解される可能性があります。ロゴやナビゲーションをそろえます。

リンクを大量に並べる

選択肢が多すぎると迷います。主要な導線だけに絞ります。

200 OKを返す

見た目だけ404でもHTTP 200ならsoft 404の原因になります。HTTPステータスも確認します。

404ページのおすすめ構成

会社サイトの例

  1. 「お探しのページは見つかりませんでした」
  2. URL変更・削除の可能性を短く説明
  3. トップページへ戻るボタン
  4. サービス・料金・会社概要へのリンク
  5. 問い合わせページへのリンク

ブログ・メディアの例

  1. ページが見つからないことを説明
  2. サイト内検索
  3. 主要カテゴリ
  4. 人気記事・最新記事
  5. トップページへ戻る

サイトの目的によって導線は変わります。 「404ページのテンプレートをそのまま使う」のではなく、ユーザーが次に行きそうなページを考えて配置します。

公開前のチェックリスト

404ページ公開前チェック

  • ページが見つからないことを明記しているか
  • トップページへ戻れるか
  • 主要ページへの導線があるか
  • 必要ならサイト内検索があるか
  • 問い合わせ先が必要なサイトでは導線があるか
  • サイト全体とデザインがそろっているか
  • スマートフォンで使いやすいか
  • 存在しないURLでHTTP 404を返しているか
  • トップページへ強制301していないか

教科書判定

教科書判定

404ページは「エラー画面」ではなく「戻り道を作るページ」と考える

初心者は、「ページが見つかりません」+「トップへ戻る」+「主要ページへの導線」を用意すれば基本形として十分です。

記事数が多いサイトなら検索を追加し、会社サイトならサービス・料金・問い合わせへの導線を加えてください。 同時に、存在しないURLでは正しいHTTP 404を返し、何でもトップページへ301転送しないことも重要です。

FAQ

Q.404ページは必ず作る必要がありますか?

多くのサーバーやWordPressテーマには標準404ページがあります。ただし、案内が不十分な場合はトップページ・主要ページ・検索などの導線を追加すると使いやすくなります。

Q.404ページを表示するとSEOに悪いですか?

存在しないURLが適切な404を返すこと自体は正常です。重要なのは、本来存在するページが誤って404になっていないか、対応する移転先があるのに放置していないかを確認することです。

Q.404ページからトップページへ自動転送してもよいですか?

すべての404をトップへ自動転送するのはおすすめしません。旧ページと内容が対応する新ページがある場合のみ301を使い、代替先がなければ404を返す方が自然です。

Q.404ページに検索フォームは必要ですか?

サイト規模によります。数百記事・多数商品があるサイトでは便利ですが、小規模サイトなら主要ページへのリンクだけでも十分です。

Q.WordPressでは404.phpを編集すればよいですか?

クラシックテーマでは404.phpを使う場合がありますが、ブロックテーマなどでは編集方法が異なります。親テーマを直接変更すると更新で消えることがあるため、利用テーマの正式な方法を確認してください。

まとめ

この記事の結論

  • 404ページは存在しないURLへ来たユーザーを案内するページ
  • ページが見つからないことを明確に伝える
  • トップ・主要ページ・検索など次の導線を用意する
  • サイト全体とデザインをそろえる
  • 存在しないURLではHTTP 404を正しく返す
  • すべての404をトップページへ301転送しない
  • 404アクセスが多いURLはリンク切れや移転漏れを確認する

404ページは、ユーザーにエラーを見せるためだけのページではありません。 目的の情報を見つけられなかったユーザーを、サイト内の適切な場所へ戻すための案内ページです。 まずは「ページが見つからない」「トップへ戻る」「主要ページへ進む」の3点を整え、サイト規模に応じて検索や問い合わせ導線を追加してください。

次に読む

「404エラーとは?SEOへの影響と対処法」「内部リンク切れを確認する方法」もあわせて確認してください。