エラー画面を活かすときも、最優先はキャンペーンではありません。「ページが見つからない」と明確に伝え、トップページ、サイト内検索、主要ページなどへ戻れるようにすることが404ページの役割です。企画や会社らしい表現は、戻りやすさと正しい404応答を損なわない範囲で加えます。

404ページを派手にしても、探していた情報へ戻れなければ利用者の困りごとは解決しません。中小企業のホームページでは、まず必要な案内を揃え、その後に短いイラストや季節の案内を検討する順番が安全です。ページ全体で情報と見た目を揃える考え方は、見た目だけで終わらせないページ設計でも確認できます。

404エラー画面の役割は、迷った人を元の流れへ戻すこと

404は、指定したURLにページが存在しないことを示す応答です。入力間違い、削除済みページ、古い外部リンク、サイト内のリンク切れなど、訪問した人に責任がない場合もあります。責める言い方を避け、状況と次の選択肢を短く示します。

必ず用意したいもの利用者へ伝える内容実務上の注意
見つからないことこのURLのページを表示できない色や絵だけでなく文章で示す
考えられる理由URLの入力違い、移動、公開終了など利用者の操作を責めない
戻り先トップ、検索、主要な商品・サービス選択肢を増やしすぎない
知らせる方法リンク切れを連絡できる窓口問い合わせを強制しない
事業者と制作者がノートパソコンに表示した404ページの戻り先を確認する様子
404ページでは驚かせる企画より先に、見つからないことと、トップ・検索・主要ページへ戻る方法を分かりやすく示します。

404、301、soft 404を使い分ける

見た目が同じエラー画面でも、サーバーが返す状態によって検索エンジンの扱いは変わります。ページが本当にない場合は404または410、同じ目的の新しいページへ恒久的に移した場合は301を使います。存在しない内容なのに200を返すと、soft 404と判断されることがあります。

状況基本の応答してはいけないこと
URLのページが存在しない404または410正常ページとして200を返す
同じ目的のページへ恒久移動した301で新しいURLへ転送関係のないトップへ一律転送する
一時的な障害原因に応じた5xxなどエラーを404で隠し続ける
見た目だけエラーの正常応答実装を直して404にするsoft 404を放置する

過去のページを整理するときも、「なくなったから全部トップへ転送」は避けます。内容が一致する移動先がある場合だけ301を使い、ない場合は404または410のまま、利用者が別の情報を選べる画面にします。

キャンペーンを載せてよいのは、回復を邪魔しない場合だけ

404ページへ企画を加えること自体が誤りではありません。ただし、利用者は企画を探して来たのではなく、目的のページにたどり着けず困っています。最初に状況と戻り先を示したうえで、関連性があり、短く、いつ終了しても404の基本機能が残る内容に限ります。

加えやすい内容避けたい内容判断理由
会社らしい短い写真・イラスト大きな動画や自動再生表示や操作を妨げない
探していた内容に近い主要ページ関係のない商品や割引の強制表示困りごとの解決につながる
営業時間など短い季節案内期限切れの企画や古い告知更新責任を持てる
任意で閉じられる軽い演出閉じられないゲームや入力フォーム戻る操作を優先できる

戻り先は3〜5個に絞り、リンク先を具体的に書く

「こちら」「詳しく見る」だけでは、どこへ移動するか分かりません。「トップページへ戻る」「サービス一覧を見る」「サイト内を検索する」のように、リンク先を具体的に書きます。リンクの言葉を分かりやすくする考え方は、迷わせない短い言葉の選び方を参考にしてください。

  • トップページへのリンクを用意する。
  • 商品・サービス・採用など、サイトの主要入口を2〜3件に絞る。
  • 記事が多いサイトは検索窓やカテゴリー一覧を検討する。
  • リンク切れを知らせる連絡先は補助的に置く。
  • 現在のURLへ戻るだけのリンクや、同じ404を繰り返すリンクを置かない。

エラーは色だけに頼らず、普通の言葉で説明する

赤い背景や困った顔の絵だけでは、何が起きたか伝わりません。「お探しのページは見つかりませんでした」と文章で示し、次にできる操作を続けて案内します。専門的な番号を前面に出す必要はありませんが、404という語を併記すると、社内担当者が不具合を確認するときに役立ちます。

見出し、本文、ナビゲーションを正しいHTMLで組み、キーボードでもリンクへ移動できるようにします。画面の役割をコードでも伝える方法は、セマンティックHTMLの役割で説明しています。

WordPressでは404用テンプレートと応答を一緒に確認する

WordPressテーマには、存在しないURLを表示する404用テンプレートを用意できます。テーマの仕組みに合わせて共通ヘッダー、本文、主要リンク、フッターを表示し、WordPress本体のファイルを直接書き換えないようにします。テーマ更新で消えない編集場所かどうかも確認してください。

  1. テスト用に、確実に存在しないURLを一つ決める。
  2. ブラウザで404画面が表示されることを確認する。
  3. 開発者向け機能などでHTTP応答が404であることを確認する。
  4. トップ、検索、主要ページ、連絡先のリンクを一つずつ開く。
  5. 管理画面へログインしていない状態でも同じ結果になるか確認する。

効果測定は「滞在時間」より回復できたかを見る

404ページに長く滞在しても、迷っているだけかもしれません。表示回数、発生したURL、直前のページ、どの戻り先が使われたかを確認し、リンク切れの修正と案内の改善につなげます。数字が変わった原因を404ページだけに決めつけないことも大切です。

確認項目分かること次の対応
404の発生URLどのURLで迷っているか誤記、削除、外部リンクを調べる
直前のページサイト内リンクが原因かリンク元を修正する
戻り先の利用案内が役立ったか名称・順番・件数を見直す
問い合わせ内容見つからない情報が何か必要な案内やページを整える

ページ単位の数字を見るときは、訪問者の目的や流入元も一緒に確認します。直帰率だけで良し悪しを決めない考え方は、直帰率を改善するときの実践手順をご覧ください。

404が多いURLは、画面より先に発生原因を直す

404画面が使いやすくても、リンク切れを放置してよいわけではありません。アクセスが多いURLから、サイト内リンク、メニュー、古い広告、QRコード、外部サイトの掲載先を調べます。移動先が明確なら301、誤ったリンクならリンク元を修正し、すでに役割を終えた情報は無理に別ページへ転送しません。

公開後もテーマやプラグインの変更で表示が崩れることがあります。定期点検と更新作業をまとめて相談したい場合は、ホームページの保守・管理をご確認ください。

公開前チェックリスト

  • 存在しないURLで404画面が表示され、HTTP応答も404になっている。
  • 見つからないことを文章で説明している。
  • トップ、検索、主要ページなど戻り先が3〜5個に整理されている。
  • 各リンクの行き先が言葉だけで分かる。
  • 期限切れの案内や、関係のない企画を表示していない。
  • パソコン、タブレット、スマートフォンで横にはみ出さない。
  • キーボードでリンクを選び、フォーカス位置を確認できる。
  • 画像が表示されなくても状況と戻り先が分かる。
  • 404の発生URLと戻り先の利用を確認できる。
  • サイト内のリンク切れを別途修正している。
制作者がノートパソコンとスマートフォンで404ページの表示と応答を確認する様子
見た目だけでなく、存在しないURLが404を返すこと、リンクを操作できること、各画面幅で横にはみ出さないことまで確認します。

スマートフォンでは、リンクの押しやすさ、検索欄の入力、戻った後のメニューまで操作します。端末ごとの確認項目は、公開前のスマホ実機チェックに沿って進めると抜けを減らせます。

Bämの判断基準｜404ページだけでなく、迷った原因まで直す

Bämでは、404ページの見た目だけを整えて終わりにしません。どのURLで発生しているか、サイト内のリンクが切れていないか、移動先があるか、主要ページへ戻れるかを順番に確認します。ホームページ全体の文章、写真、リンク、表示をまとめて見直す場合は、Bämのホームページ制作・改善支援をご覧ください。

既存ホームページの404やリンク切れを相談したい方へ

「削除したページの転送先が分からない」「404画面が正常な応答になっているか判断できない」「スマートフォンで戻りにくい」といった場合は、URL一覧と気になる箇所をお知らせください。現状を確認し、表示、リンク、転送、計測の優先順位を整理します。既存ホームページの404改善について相談する

まとめ

404ページの第一目的は、企画で引き止めることではなく、見つからない状況を伝えて利用者を戻すことです。正しい404応答、具体的な戻り先、分かりやすい言葉、端末での操作確認を先に整えます。キャンペーンを加えるなら、これらを邪魔せず、期限と更新責任を管理できる小さな内容にとどめましょう。

参考資料