404ページの作り方|見つからないときに出すページに載せること

/ 更新 / Lapisデザインラボ

ホームページのリンクをクリックしたら「ページが見つかりません」という素っ気ない画面が出てきて、どこに進めばよいか分からず離脱してしまった、という経験をした人もいるでしょう。この「ページが見つからない」状態を知らせる画面が404ページ(404エラーページ)で、URLの入力ミス、ページの削除、リンク先の変更などで表示されます。

この記事では、404ページに何を載せればよいか、デザインで気をつける点、制作会社に依頼するときの伝え方をまとめます。

404ページとは何か、なぜ放置するとよくないか

404ページは、サーバーに存在しないURLへアクセスしたときに表示されるページです。CMSやレンタルサーバーによっては、最初から簡素な404ページが用意されています。

ただし、サーバーやCMS標準の404ページは、自社のデザインとかけ離れた素っ気ない見た目になっていることがあります。次のような場面で訪問者は404ページに行き当たります。

  • 古い名刺やチラシに印刷したURLの一部が間違っている
  • 他サイトやSNSから張られたリンク先のページを、リニューアルで削除・移動した
  • 検索結果にまだ残っている、削除・移動したページのリンクからアクセスした(Googleは、404などを返すようになったURLを徐々にインデックスから外します)

このときに標準の404ページが表示されると、訪問者は「サイトごと無くなったのでは」と誤解して離脱することがあります。自社のデザインに合わせた404ページを用意し、サイト内の別の場所へ案内することで、離脱を防ぎやすくなります。

404ページに載せること

404ページに最低限そろえておきたい要素は次のとおりです。

要素役割
分かりやすい見出し「お探しのページが見つかりませんでした」など、エラーだと一目で伝える
短い説明文URLの入力ミスや、ページが移動・削除された可能性があることを伝える
トップページへのリンク迷わず戻れる一番確実な案内
サイト内の主要ページへのリンク問い合わせ・サービス一覧など、訪問者が次に見そうなページ
サイト内検索(あれば)探していた情報に別の入り口からたどり着けるようにする

逆に、避けたほうがよいのは次のような作りです。

  • 広告やキャンペーンの告知だけを詰め込み、案内がどこにもない
  • 英語の “404 Not Found” としか表示せず、何が起きたか伝わらない
  • 自動で別のページへ強制的に転送し、訪問者が何が起きたか理解できないまま移動させる

デザインの考え方

404ページは「エラーを謝る場」ではなく「次の行動を案内する場」と捉えると、作りやすくなります。

  • サイト全体のデザイン(ロゴ・配色・ヘッダー)をそのまま使う:別サイトに迷い込んだような違和感を与えない
  • 謝る言葉は一言にとどめる:長々とした謝罪文より、次にどこへ進めばよいかの案内を目立たせる
  • トーンは他のページと揃える:堅い会社なら落ち着いた言い回し、親しみやすいブランドなら柔らかい言い回しなど、ブランドの雰囲気を崩さない

凝ったイラストやアニメーションを入れる例も見かけますが、中小企業のコーポレートサイトでは、シンプルに案内をまとめるだけでも十分に役割を果たします。

制作会社に依頼するときの伝え方

ホームページ制作やリニューアルを依頼する際は、404ページの作成が見積もりに含まれているかを確認しておくと安心です。制作会社によっては、404ページを「標準のページで済ませる」前提で見積もりを出していることがあるため、次の点を伝えておくとよいでしょう。

  • 自社のデザインに合わせた404ページを別途作ってほしいこと
  • 案内したいリンク先(トップページ以外に、問い合わせページや主要なサービスページなど)
  • URLを変更する箇所がある場合は、あわせてリダイレクト(転送)の設定も依頼すること
  • 404ページを出すときも、サーバーが「404」のステータスコード(ページが見つからないことを示す番号)を返すようにすること(エラーの内容なのに成功を示す「200」を返すと、GoogleのSearch Consoleで「soft 404」として知らされます)

リニューアルでURLの構成が変わる場合は、404ページの作成だけでなく、古いURLから新しいURLへのリダイレクト設定も重要です。リダイレクトを適切に設定しておけば、そのページは404にならず、訪問者は自動的に新しいページへ案内されます。Google検索セントラルは、検索結果に出ているページのURLを変えるときは、できる限りサーバー側の永続的なリダイレクト(ステータスコード301・308)を使うよう勧めています。既存のリンクやブックマーク、検索結果からのアクセスを失わないためにも、URL変更の際はリダイレクトの設定もあわせて制作会社に確認してください。

文例の作り方

404ページの文章は、長く書く必要はありません。次のような組み立てで、短くまとめます。

部分文例の考え方
見出し「お探しのページが見つかりませんでした」「このページは表示できません」など、エラーだと一目で分かる言い方
補足の一文「URLが変更・削除された可能性があります」など、原因の可能性を短く添える
案内の一文「下記のリンクからお探しのページをご覧ください」など、次の行動を促す言葉

謝罪の言葉を重ねるより、見出し・補足・案内の3行程度で簡潔にまとめたほうが、訪問者は次の行動に移りやすくなります。自社のブランドの文体(敬体か、親しみやすい言い回しかなど)に合わせて、他のページと同じトーンで書くことも忘れないようにします。

公開後に404ページを見直すきっかけ

404ページを一度作って終わりにせず、次のようなタイミングで見直すと、訪問者が迷う機会を減らせます。

  • ホームページをリニューアルし、URLの構成が変わったとき:古いURLへのアクセスが404にならないよう、リダイレクトの設定をあわせて確認する
  • 主要なページ(サービス一覧・問い合わせなど)が増えたり変わったりしたとき:404ページの案内リンクも合わせて更新する
  • 会社名・ブランドのデザインを変えたとき:404ページのロゴや配色も他のページと揃える

サーバーやアクセス解析のツールによっては、どのURLで404が多く発生しているかを確認できる場合があります。同じ古いURLへのアクセスが続いている場合は、404ページの案内だけで済ませず、該当のURLにリダイレクトを設定することも検討します。

まとめ

  • 404ページは「ページが見つからない」ことを伝える画面。標準のままだと素っ気なく、離脱につながりやすい
  • 見出し・短い説明・トップページや主要ページへのリンクを最低限そろえる
  • 制作会社への依頼時は、404ページの作成とリダイレクトの設定が見積もりに含まれているか確認する

サイト全体の構成や、案内すべきページの洗い出しについては会社のホームページの構成の例もあわせてご覧ください。リンク切れそのものの見つけ方・直し方はホームページのリンク切れの見つけ方と直し方で解説しています。

よくある質問

404ページは必ず用意しないといけませんか。

法律上の義務ではありません。CMSやサーバーによっては標準の404ページが用意されていますが、標準のままだと素っ気ない印象になることがあるため、自社のデザインに合わせて作り直す方法があります。

404ページに載せてはいけないものはありますか。

特に禁止事項があるわけではありませんが、広告や無関係な宣伝ばかりを詰め込むと、訪問者が本来探していたページへ戻る手がかりを見失います。案内はシンプルにまとめるのがおすすめです。

URLを変更したときも404ページの見直しは必要ですか。

404ページ自体の見直しというより、古いURLから新しいURLへの転送(リダイレクト)の設定が必要です。転送を設定しておけば、そのページは404にならずに新しいページへ案内されます。

参考にした資料

あわせて読みたい

Contact

まずは、どのプランが合うか
ご相談ください。

事業の内容と、いまお使いのロゴや印刷物の状況を伺い、合うプランと日程をお返事します。ご相談は無料です。