Webサイトを運営していて、「ページが見つかりません」という無機質なエラー画面が表示されてガッカリしたことはありませんか？
せっかく訪問してくれた読者が、そこで「もういいや」と離脱してしまうのは本当にもったいないですよね。
実は、この「404ページ」を工夫することで、ユーザーを逃さず、逆にサイトへの信頼感を高めることができるんです。

今回は、Web初心者の方でも簡単にできる「404ページの作り方」について、WordPressのプラグインを使う方法からHTMLでの設定まで、分かりやすく解説します。
おしゃれで親切なエラーページを用意して、ピンチをチャンスに変える準備を始めましょう。

404エラーページとは？基本知識と自作するメリット

404エラーページとは？基本知識と自作するメリット

まずは、そもそも404エラーページとは何なのか、なぜわざわざ自作する必要があるのかといった基本からお話しします。
単なるエラー表示だと思われがちですが、実はサイト運営において、ユーザーの信頼を守るための大切な役割を持っているんですよ。

404 Not Foundの意味と読み方

「404 Not Found」は、サーバー上にリクエストされたページが存在しないことを伝えるHTTPステータスコードの一つです。読み方は「ヨンマルヨン」や「フォーオーフォー」と読むのが一般的でしょう。

インターネット上の住所にあたるURLが間違っていたり、ページが削除されていたりするときに表示されます。難しく考えず、「お探しのページは見つかりませんでした」という意味だと覚えておけば大丈夫です。

404エラーが表示される主な原因

エラー画面が表示されてしまう原因は、主に以下の3つが挙げられます。

  • ユーザーによるURLの入力ミス（スペル間違い）
  • リンク先のページが削除または移動されている
  • 設置されたリンクの記述ミス（リンク切れ）

これらは、ユーザー側のうっかりミスだけでなく、運営側の設定ミスでも起こり得ます。どんなに気をつけていても完全に防ぐことは難しいため、表示されたときにどう対応するかが大切なんです。

オリジナルの404ページを作るメリット

サーバーデフォルトのエラー画面は英語だったり、デザインが崩れていたりと、ユーザーに不安を与えてしまいがちです。
そこでオリジナルの404ページを用意すると、以下のようなメリットがあります。

  • サイト内の別のページへ誘導して離脱を防げる
  • サイトの雰囲気（トンマナ）を統一でき、ブランドイメージを損なわない
  • 「お探しの記事はこちらですか？」と案内することで、ユーザーのストレスを軽減できる

ただのエラー画面を「おもてなしの場」に変えることができるのです。

404ページとSEO評価の関係性

「404エラーが出るとGoogleの評価が下がるのでは？」と心配される方も多いですが、404エラー自体がサイトの検索順位を下げることはありません。Googleも「404エラーはウェブの動作として正常」としています。

ただし、不親切なエラーページでユーザーがすぐに「戻る」ボタンを押して直帰してしまうと、間接的にサイトの評価に影響する可能性はあります。だからこそ、SEOの観点からもユーザー体験（UX）を意識した作り方が求められるのです。

初心者向け404ページの作り方3つのパターン

初心者向け404ページの作り方3つのパターン

では、実際にどうやってオリジナルの404ページを作ればいいのでしょうか。
Web制作のスキルレベルや使っているツールに合わせて、大きく分けて3つの方法があります。ご自身の環境に合ったやり方を選んでみてくださいね。

WordPressのプラグインで手軽に作成する

WordPressをお使いの方に一番おすすめなのが、プラグインを利用する方法です。
「404page」などの専用プラグインを使えば、難しいコードを一切書くことなく、いつもの記事作成と同じ感覚でエラーページを作れます。

専門知識がなくても直感的に操作できるので、初心者の方でも安心して取り組めますし、メンテナンスも簡単ですよ。

使用しているWordPressテーマの設定を利用する

最近の高機能なWordPressテーマ（SWELLやCocoonなど）には、最初から404ページをカスタマイズする機能が備わっていることがあります。

テーマの設定画面で画像やメッセージを変更するだけで完了する場合もあるので、まずは現在お使いのテーマのマニュアルや設定項目を確認してみましょう。余計なプラグインを増やさずに済むので、サイトの動作も軽快に保てます。

404.htmlを作成してサーバー設定を行う

WordPressを使っていない場合や、より自由度の高いデザインにしたい場合は、自分でHTMLファイル（404.html）を作成する方法があります。

作成したファイルをサーバーにアップロードし、設定ファイル（.htaccess）などで読み込み指定を行います。少し専門的な知識が必要になりますが、サイトのデザインを細部までこだわりたい方には適した方法です。

WordPressで404ページを設定する手順【プラグイン使用】

WordPressで404ページを設定する手順【プラグイン使用】

ここでは、最も手軽で多くの人に利用されている、WordPressプラグイン「404page」を使った設定手順を具体的にご紹介します。
プログラミングの知識がなくても、素敵なエラーページがあっという間に作れますよ。

プラグイン「404page」をインストール・有効化する

まずは、WordPressの管理画面からプラグインを導入しましょう。

  1. 管理画面の左メニューから「プラグイン」→「新規追加」をクリック
  2. 検索窓に「404page」と入力
  3. 「404page – your smart custom 404 error page」が表示されたら「今すぐインストール」をクリック
  4. インストール完了後、「有効化」をクリック

これでプラグインの準備は完了です。とても簡単ですよね。

固定ページで独自のエラー画面を作成する

次に、実際に表示させる404ページの中身を作っていきましょう。ここでは、通常の「固定ページ」機能を使って作成する手順をご紹介します。「404ページの作り方」として、まずは表示したい内容を用意するところからスタートです。

  1. 「固定ページ」→「新規追加」をクリック
  2. タイトルを「404 Not Found」や「ページが見つかりません」などにする
  3. 本文に、お詫びの文言や検索窓、トップページへのリンクなどを配置する
  4. デザインが整ったら「公開」をクリック

普段の記事を書くのと同じように、画像を入れたりレイアウトを調整したりして、親切な画面を作ってみてください。

ただし、固定ページを作って公開しただけでは、まだエラー時に表示されません。作成したページを404ページとして機能させるには、「404page」や「Custom 404 Pro」といったプラグインを使って設定を行うか、テーマファイルを編集する必要があります。まずは中身となるページをしっかり作成して、その後に設定へ進みましょう。

プラグインの設定で作成したページを404として割り当てる

ページが完成したら、それを404エラー時に表示されるようにプラグインで設定します。

  1. 「外観」→「404 Error Page」をクリックして設定画面を開く
  2. 「Page to be displayed as 404 page」のプルダウンメニューから、先ほど作成した固定ページを選択
  3. 「変更を保存」をクリック

これで設定は完了です。実際に存在しないURL（例: yourdomain.com/aaaaa）にアクセスして、作成したページが表示されるか確認してみましょう。

SEO対策としてサイトマップから除外設定を行う

作成した404ページは、あくまでエラー時に表示させるものであり、検索結果に表示させる必要はありません。
SEO対策として、XMLサイトマップからこのページを除外しておきましょう。

「XML Sitemap & Google News」やSEO系プラグインを使用している場合は、固定ページの設定項目で「サイトマップに含めない（Noindex）」にチェックを入れておくと安心です。これにより、検索エンジンに対して「このページは検索結果に出さなくていいですよ」と伝えることができます。

HTMLと.htaccessで404 not foundを表示させる手順

HTMLと.htaccessで404 not foundを表示させる手順

WordPressを使わない静的サイトの場合や、自作HTMLで対応したい方向けに、HTMLと.htaccessを使った設定方法を解説します。
少しコードに触れますが、コピペで使えるサンプルも用意しましたので、ぜひ挑戦してみてください。

コピーして使えるエラーページhtmlサンプル

まずは、表示させる内容となるHTMLファイルを作成します。以下のコードをテキストエディタに貼り付け、「404.html」という名前で保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページが見つかりません</title>
</head>
<body>
<div class="error-container">
<h1>404 Not Found</h1>
<p>申し訳ありません。お探しのページは見つかりませんでした。<br>
URLが間違っているか、ページが移動・削除された可能性があります。</p>
<a href="/">トップページへ戻る</a>
</div>
</body>
</html>Code language: HTML, XML (xml)

CSSで見やすいエラー画面デザインに整える

HTMLだけでは見た目が寂しいので、CSSで少しデザインを整えましょう。先ほどのHTMLの<head>内に以下のスタイルを追加するか、CSSファイルに記述します。

<style>
body { text-align: center; padding: 50px; font-family: sans-serif; }
.error-container { max-width: 600px; margin: 0 auto; }
h1 { font-size: 48px; color: #333; }
p { font-size: 16px; color: #666; margin-bottom: 30px; }
a { background-color: #0073aa; color: #fff; padding: 10px 20px; text-decoration: none; border-radius: 5px; }
</style>Code language: HTML, XML (xml)

これで、シンプルですが見やすいエラー画面になりますよ。

.htaccessに404を表示させる記述を追加する

作成した「404.html」を表示させるために、サーバーの設定ファイルである「.htaccess」を編集します。
以下の1行を.htaccessファイルに追加してください。

ErrorDocument 404 /404.html

これは、「404エラーが発生したら、ルートディレクトリにある404.htmlを表示してね」という指示になります。ファイルのパスはご自身の環境に合わせて調整してください。

サーバーへアップロードして表示を確認する

ファイルの準備ができたら、FTPソフトなどを使ってサーバーにアップロードします。

  1. 「404.html」をドキュメントルート（一番上の階層）にアップロード
  2. 編集した「.htaccess」を同じくルートにアップロード

アップロード後、ブラウザで存在しないURLにアクセスして、作成したデザインが表示されれば成功です！もし表示されない場合は、パスの記述やファイル名が正しいか再確認してみてください。

ユーザー体験を高める404ページデザインのポイント

ユーザー体験を高める404ページデザインのポイント

404ページはただ表示されれば良いというわけではありません。
ユーザーが困惑せず、スムーズに次の行動へ移れるようなデザインや構成にすることが重要です。ここでは、ユーザー体験（UX）を高めるためのポイントをご紹介します。

ユーザーに伝えるべき適切な404文言の例

ユーザーに対して、丁寧で分かりやすい言葉を選ぶことが大切です。機械的な「Not Found」だけではなく、以下のような文言を添えてみましょう。

  • 「申し訳ありません。お探しのページは見つかりませんでした。」
  • 「アクセスしようとしたページは、削除されたかURLが変更されている可能性があります。」
  • 「以下のリンクから、他のコンテンツをお探しいただけます。」

このように、ユーザーに寄り添うメッセージがあるだけで、印象はぐっと良くなります。

「このページは存在しません」と明確に伝える

デザインに凝りすぎて、一見して何が起きたのか分からないページは避けましょう。
「ここはエラーページです」「ページが存在しません」という事実を、見出しやアイコンを使って明確に伝える必要があります。

大きく「404」と表示したり、困った表情のイラストを配置したりして、ユーザーが瞬時に状況を理解できるようにするのが親切な設計です。

検索窓やトップページへのリンクを配置する

エラーページに行き着いたユーザーは、次にどうすればいいか迷っています。そこで、迷子にさせないための道しるべを用意しましょう。

  • トップページへのボタン: 最も基本的な導線です。
  • サイト内検索窓: 具体的な情報を探していたユーザーに便利です。
  • 人気記事やカテゴリー一覧: 興味を持ちそうな他のコンテンツを提案します。

これらを配置することで、離脱を防ぎ、サイト内の回遊を促すことができます。

サイトの雰囲気に合った統一感のあるデザインにする

404ページだけデザインが全く違うと、ユーザーは「別のサイトに飛ばされたのかな？」と不安になってしまいます。
ヘッダーやフッター、ナビゲーションメニューは他のページと共通のものを使用し、サイト全体のデザインと統一感を持たせましょう。

ロゴやブランドカラーを適切に使うことで、「まだ同じサイト内にいる」という安心感を与えることができますよ。

参考になる404ページデザインの事例紹介

参考になる404ページデザインの事例紹介

実際にどのような404ページを作ればいいのか、イメージが湧きにくいこともありますよね。
ここでは、優れた404ページのデザイン事例をいくつかピックアップしてご紹介します。自サイトに取り入れられそうなアイデアを探してみてください。

イラストを活用した親しみやすい404デザイン

親しみやすさを演出するために、イラストやキャラクターを効果的に使っている事例です。
例えば、サイトのキャラクターが謝っているイラストや、少しユーモラスな絵を使うことで、エラーに遭遇したユーザーのネガティブな感情を和らげることができます。

「ごめんね」という気持ちが伝わるビジュアルは、ユーザーとの距離を縮める良いきっかけになりますよ。

シンプルで分かりやすい企業サイトの事例

企業のコーポレートサイトなどでは、信頼感を損なわないシンプルで整然としたデザインが好まれます。
余計な装飾は省き、明確なエラーメッセージと、サイトマップや主要ページへのリンクを整理して配置します。

ユーザーが求めている情報へ最短距離で辿り着けるような、機能美を追求したデザインは非常に参考になります。

ブランドの世界観を表現したユニークな事例

ブランド独自の世界観を404ページでも表現している事例も素敵です。
例えば、アパレルブランドなら「このアイテムは売り切れのようです」とおしゃれに伝えたり、宇宙関連のサイトなら「宇宙の彼方へ消えてしまいました」と表現したり。

エラーページさえもコンテンツの一部として楽しませる工夫は、ファンの心を掴むブランディングにつながります。

404ページ作成時によくある間違いと注意点

404ページ作成時によくある間違いと注意点

最後に、404ページを作成・運用する際によくやってしまいがちな間違いと、注意すべき点について解説します。
SEOにも関わる重要な部分ですので、しっかり確認しておきましょう。

ソフト404エラーにならないようステータスコードを確認する

見た目は「ページがありません」となっていても、内部的なステータスコードが「200（成功）」のままになっている状態を「ソフト404エラー」と呼びます。
これだと検索エンジンが「存在するページ」と誤認してしまい、SEO的に良くありません。

自作ページを設定した際は、HTTPステータスコードチェッカーなどのツールを使って、正しく「404」が返されているか確認することをおすすめします。

トップページへ無条件にリダイレクトさせない

エラーページを見せたくないからといって、404エラー発生時にトップページへ自動的に転送（リダイレクト）させる設定はおすすめできません。

ユーザーは「なぜ目的のページではなくトップページにいるのか」と混乱してしまいますし、Googleもこれを推奨していません。
「ページがない」という事実は正直に伝え、その上で次のアクションを促すのが誠実な対応です。

定期的にリンク切れをチェックして修正する

素敵な404ページを作っても、エラーが出ないに越したことはありません。
「Broken Link Checker」などのツールを使って、定期的にサイト内のリンク切れをチェックしましょう。

リンク切れを修正したり、正しいページへリダイレクト設定を行ったりして、そもそも404ページが表示される頻度を減らす努力も大切です。ユーザーにとっても、それが一番快適ですよね。

まとめ

まとめ 7

今回は、初心者の方に向けて404ページの作り方やデザインのポイントについて解説してきました。

404ページは、単なるエラー画面ではなく、ユーザーの信頼をつなぎ止めるための重要なページです。
WordPressのプラグインを使えば簡単に作成できますし、HTMLでこだわりのデザインを作ることも可能です。

  • ユーザーに分かりやすい文言とデザインにする
  • 次のアクション（検索やリンク）を案内する
  • サイトの雰囲気に合わせる

これらのポイントを意識して、ぜひあなたのサイトにも素敵な404ページを設置してみてください。
ちょっとした気遣いが、ユーザーにとっての「良いサイト体験」につながっていきますよ。

404ページ 作り方についてよくある質問

404ページ 作り方についてよくある質問

404ページの作成に関して、よく寄せられる質問をまとめました。設定時の疑問解消に役立ててください。

  1. 404ページは必ず作らないといけませんか？
    • 必須ではありませんが、ユーザー体験（UX）向上のために作成を強くおすすめします。デフォルトの画面は不親切で、離脱の原因になりやすいからです。
  2. 作成した404ページが検索結果に出てきてしまいます。
    • 404ページ自体にはnoindex設定を行うのが一般的です。WordPressのプラグインやメタタグで設定を確認しましょう。
  3. スマホでも同じ404ページが表示されますか？
    • レスポンシブデザインに対応していれば、スマホでも適切に表示されます。作成後は必ずスマホ実機でも表示確認を行いましょう。
  4. 404エラーが多いとSEOに悪影響ですか？
    • 404エラー自体は直接的なペナルティになりませんが、内部リンク切れが多いとクローラビリティが低下します。定期的なリンク切れチェックが大切です。
  5. おしゃれな404ページのテンプレートはありますか？
    • ネット上で「404 page template free」などで検索すると、無料のHTMLテンプレートが多く見つかります。これらをベースにカスタマイズするのも手です。