【完全ガイド】WordPressで404ページをカスタマイズする方法｜デザイン・コード・プラグイン対応

WordPressの「404ページ」をオリジナルデザインにカスタマイズすることで、ユーザー体験（UX）を高め、サイトの回遊率やブランドイメージを向上させることができます。

この記事では、中級者〜上級者の方向けに、404.phpの編集方法からおすすめデザイン例、プラグインでの対応方法まで徹底解説します。

404ページとは？その役割と重要性
1. WordPressで404ページをカスタマイズする理由
2. デフォルトの404ページの問題点とは？
【基本編】WordPressで404ページを編集する方法
デザインで差がつく！おしゃれな404ページの作り方
コーディング不要！プラグインで簡単に404ページを作る方法
1. おすすめ：404page – your smart custom 404 error page
2. メリット・デメリットと注意点
SEOに強い404ページを作るための注意点
1. noindexを忘れずに！
2. 「Soft 404」を防ぐには？
まとめ｜ユーザーに優しい404ページを作ろう
【おまけ】人気記事・検索付き404ページの応用コード

404ページとは？その役割と重要性

WordPressに限らず、「404ページ（Not Foundページ）」とは、ユーザーが存在しないURLにアクセスした際に表示されるエラーページです。

リンク切れやURLの打ち間違いが原因で表示されることが多く、サイト全体の信頼性やUXに大きく影響します。

WordPressで404ページをカスタマイズする理由

デフォルトの404ページは無機質で情報量が少ないため、ユーザーは「迷子」になりやすく、そのまま離脱するリスクが高まります。逆に、次のようなカスタマイズを行えばUXが向上します。

サイト内へのナビゲーションを設置
ブランドに合ったビジュアルを使用
ユーモアあるコピーで印象づける

404ページは「離脱の場」ではなく、「回遊のきっかけ」に変えるチャンスです。

デフォルトの404ページの問題点とは？

WordPressテーマによっては、最初から404ページのテンプレートが用意されていますが、その多くは以下のような状態です。

味気ないテキストのみ
他のページへの導線がない
デザインが他のページと統一されていない

これではユーザーが混乱し、サイトへの信頼感を損ないます。

【基本編】WordPressで404ページを編集する方法

404.phpの場所と編集方法

WordPressの404ページは、テーマディレクトリ内にある 404.php というファイルで構成されています。

/wp-content/themes/your-theme/404.php

このファイルを編集することで、ページの見た目や構成を自由に変更できます。
ファイルが存在しない場合は自作しましょう。
get_header()やget_footer()で共通パーツを呼び出すのが基本です。

子テーマを使って安全にカスタマイズする

親テーマを直接編集すると、テーマ更新で上書きされてしまいます。必ず子テーマを使いましょう。

手順

子テーマを作成・有効化
子テーマフォルダに 404.php を作成
HTML＋WordPressテンプレートタグで構築

サンプルコード：シンプルで使いやすい404ページ

<?php get_header(); ?>

<main class="404-page">
  <section>
    <h2>ページが見つかりませんでした</h2>
    <p>URLが間違っているか、ページが削除された可能性があります。</p>
    <a href="<?php echo home_url(); ?>" class="button">トップページへ戻る</a>
  </section>
</main>

<?php get_footer(); ?>

get_header() / get_footer() はWordPressの共通テンプレートを読み込む関数です。
home_url() でトップページへのリンクを取得しています。

自由にコードを使いできるので、画像を挿入したり、CSSでデザインを整えてサイトの世界観を合わせたオシャレな404ページにもカスタマイズ可能です。

カスタマイズ例

CSSでデザインを整える
アイキャッチ画像を入れる
キャラクターイラストを表示

【応用編】functions.phpで条件分岐付きの404を作る

例えば、スマホユーザー専用の404ページを表示したい場合は、以下のように functions.php に記述します。

function custom_404_template($template) {
  if ( is_404() && wp_is_mobile() ) {
    $new_template = locate_template(array('404-mobile.php'));
    if ( '' != $new_template ) {
      return $new_template;
    }
  }
  return $template;
}
add_filter('404_template', 'custom_404_template');

このように条件によってテンプレートファイルを切り替えることで、より柔軟な対応が可能です。

デザインで差がつく！おしゃれな404ページの作り方

離脱を防ぐデザインのコツ

404ページで大事なのは、「404＝終わり」ではなく「新しい選択肢を提示する場所」と考えることです。

以下のような工夫が効果的です。

トップページや人気記事へのリンク設置
検索窓の設置で他ページへの導線を強化
ユーモアあるイラストやコピーで印象を残す

特にイラストやキャラクターを使った404ページは、SNSでシェアされやすいというメリットもあります。

画像・イラスト・CTAボタンの活用法

404ページに視覚要素を入れると、ユーザーの記憶にも残りやすくなります。

イラストやアニメーション：親しみやすさと印象に残るデザインに
CTAボタン：「ブログを見る」「お問い合わせへ」など次のアクションを明確に
ブランドカラーを使用：他ページと統一感を持たせると信頼感アップ

ユーザーが迷子になった状態から、自然に次の行動へ導けるようにしましょう。

コーディング不要！プラグインで簡単に404ページを作る方法

コード編集が苦手な方向けに、404ページを作れる無料プラグインもあります。

メリット・デメリットと注意点

メリット

HTMLやPHPを触らなくてOK
固定ページとして扱えるので自由度が高い
テーマ更新時にも安全

デメリット

ページ読み込みが若干遅くなることがある
テーマの動作によってはうまく反映されない場合も

SEOに強い404ページを作るための注意点

noindexを忘れずに！

基本的に404ページはGoogleにインデックスされる必要はありません。

検索結果に「404 Not Found」ページが表示されるのはユーザーにとってもマイナスなので、noindexタグを入れましょう。

<meta name="robots" content="noindex">

「Soft 404」を防ぐには？

404ページでも、HTTPステータスコードは必ず「404」を返すようにしましょう。
表示だけ404風でも、ステータスコードが「200 OK」だとSEO評価が落ちる原因になります。

Google Search Consoleで正しく404になっているか確認すると安心です。

まとめ｜ユーザーに優しい404ページを作ろう

404ページはエラーページでありながら、ユーザーと再接続する大切なポイントでもあります。

最低限おさえるべき要素

サイト全体と統一されたデザイン
検索・ナビゲーション機能の設置
明確なメッセージと行動導線（CTA）

【おまけ】人気記事・検索付き404ページの応用コード

<?php get_header(); ?>

<main class="404-page">
  <h2>ページが見つかりませんでした</h2>
  <p>お探しのページは削除されたか、URLが変更された可能性があります。</p>

  <a href="<?php echo home_url(); ?>" class="button">トップページに戻る</a>

  <div>
    <h3>人気の記事</h3>
    <ul>
      <?php
      $popular_posts = new WP_Query(array(
        'posts_per_page' => 3,
        'meta_key' => 'post_views_count',
        'orderby' => 'meta_value_num',
        'order' => 'DESC',
      ));
      while ($popular_posts->have_posts()) : $popular_posts->the_post(); ?>
        <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
      <?php endwhile; wp_reset_postdata(); ?>
    </ul>
  </div>

  <?php get_search_form(); ?>
</main>

<?php get_footer(); ?>

WordPressでの404ページカスタマイズは、UX・デザイン・SEOのすべてに効果的です。
ぜひあなたのサイトにも、オリジナリティと機能性を兼ね備えた404ページを取り入れてみてください！