☰
Web-saku Web-sakuではweb作成に関する情報をお届けしていきます!

魅力的な404エラーページを作成！設置方法を静的HTMLとWordPressで解説

WebDesign


はじめに

Webサイトを運営していると、どうしても発生してしまうのが404エラー（Not Found）です。
しかし、この404エラーページも、ただ「ページが見つかりません」と表示するだけではもったいないです。
オリジナルの404エラーページを作成することで、ユーザー体験を向上させ、サイトの印象を良くすることができます。
この記事では、静的なHTMLサイトとWordPressサイトの場合に分けて、具体的な404エラーページの作成・設置方法を解説します。

オリジナルの404ページを作る理由

  • ユーザー体験の向上: 単調なエラーメッセージではなく、ユーモアのあるメッセージや役立つ情報を提供できます。
  • ブランドイメージの向上: サイトのデザインに合わせた404ページで、ブランディングを強化できます。
  • 離脱率の低下: トップページやサイト内検索への導線を設けることで、ユーザーの離脱を防ぎやすくなります。
  • SEO対策: 適切な404ステータスコードを返すことで、検索エンジンからの評価を維持できます。

静的なHTMLサイトの場合

静的なHTMLサイトでオリジナルの404エラーページを作成・設置する手順は以下の通りです。

1. 404エラーページの作成

まずは、表示させたい404エラーページのHTMLファイルを作成します。ファイル名は慣例的に `404.html` とすることが多いです。

記述例 (404.html):

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>お探しのページは見つかりませんでした | Your Website Name</title>
    <link rel="stylesheet" href="style.css"> <!-- 共通のCSSファイルがあれば -->
</head>
<body>
    <header>
        <h1>お探しのページは見つかりませんでした</h1>
    </header>
    <main>
        <p>申し訳ございませんが、お探しのページは存在しないか、移動してしまった可能性があります。</p>
        <p>お手数ですが、以下のいずれかの方法をお試しください。</p>
        <ul>
            <li><a href="/">トップページに戻る</a></li>
            <li>サイト内検索をお試しください。<form action="/search" method="get"><input type="text" name="q" placeholder="キーワードを入力"><button type="submit">検索</button></form></li>
            <li>URLを再度ご確認ください。</li>
        </ul>
    </main>
    <footer>
        <p>© 2023 Your Website Name</p>
    </footer>
</body>
</html>

このHTMLファイルは、Webサイトのルートディレクトリに配置します。

2. サーバーの設定

Webサーバーに対して、404エラーが発生した場合に作成した `404.html` を表示するように設定する必要があります。代表的なWebサーバーの設定方法を説明します。

Apacheの場合 (.htaccess)

`.htaccess` ファイルに以下の記述を追加します。`.htaccess` ファイルがルートディレクトリに存在しない場合は作成してください。

ErrorDocument 404 /404.html

この記述により、404エラーが発生した場合に `/404.html` が表示されるようになります。

Nginxの場合 (設定ファイル)

Nginxの設定ファイル（通常は `nginx.conf`）のサーバー設定ブロック内に、以下の記述を追加します。

server {
    # ... その他の設定 ...
    error_page 404 /404.html;
    location = /404.html {
        internal;
    }
    # ... その他の設定 ...
}

`error_page 404 /404.html;` で404エラー発生時のリダイレクト先を指定し、`location = /404.html { internal; }` で内部処理として `/404.html` を表示するように設定します。

注意点: サーバーの設定ファイルを変更する際は、設定を間違えるとWebサイト全体に影響が出る可能性があります。設定変更前に必ずバックアップを取り、慎重に作業を行ってください。

参考（サーバーの設定が不要なケース）: 特定のホスティングサービスの場合、特定の命名規則に従った404エラーページ（通常は 404.html や error.html など）をサイトのルートディレクトリに配置するだけで、自動的にそれを404エラー時に表示してくれる場合があります。

WordPressサイトの場合

WordPressサイトでオリジナルの404エラーページを作成・設置する方法はいくつかあります。

1. テーマファイルを利用する方法

多くのWordPressテーマには、デフォルトの404エラーページ用のテンプレートファイル (`404.php`) が含まれています。このファイルを編集することで、オリジナルの404エラーページを作成できます。

  1. テーマファイルの確認: WordPress管理画面から「外観」 > 「テーマエディター」を開き、右側のファイル一覧に `404.php` が存在するか確認します。
  2. ファイルの編集: `404.php` が存在する場合は、そのファイルを編集します。HTMLやPHPコードを記述して、表示したい内容を作成します。
  3. ファイルの作成: `404.php` が存在しない場合は、新しいファイルを作成し、以下の基本的なコードを記述します。必要に応じてカスタマイズしてください。

記述例 (404.php):

PHP
<?php
/**
 * The template for displaying 404 pages (not found)
 *
 * @link https://codex.wordpress.org/Creating_an_Error_404_Page
 *
 * @package YourThemeName
 */

get_header();
?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">

        <section class="error-404 not-found">
            <header class="page-header">
                <h1 class="page-title"><?php esc_html_e( 'お探しのページは見つかりませんでした', 'your-theme-textdomain' ); ?></h1>
            </header><!-- .page-header -->

            <div class="page-content">
                <p><?php esc_html_e( '申し訳ございませんが、お探しのページは存在しないか、移動してしまった可能性があります。', 'your-theme-textdomain' ); ?></p>
                <p><?php esc_html_e( 'お手数ですが、以下のいずれかの方法をお試しください。', 'your-theme-textdomain' ); ?></p>

                <ul class="suggestions">
                    <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php esc_html_e( 'トップページに戻る', 'your-theme-textdomain' ); ?></a></li>
                    <li><?php get_search_form(); ?></li>
                    <li><?php esc_html_e( 'URLを再度ご確認ください。', 'your-theme-textdomain' ); ?></li>
                </ul>
            </div><!-- .page-content -->
        </section><!-- .error-404 -->

    </main><!-- #main -->
</div><!-- #primary -->

<?php
get_footer();

作成した `404.php` ファイルは、使用中のテーマのディレクトリに保存します。

2. プラグインを利用する方法

WordPressには、404エラーページを簡単に作成・管理できるプラグインが多数存在します。「Custom 404 Error Page」などのプラグインを導入することで、コードを記述することなく、管理画面から404エラーページのデザインやコンテンツを編集できます。

プラグイン利用のメリット:

  • コーディングの知識がなくても簡単に設定できる。
  • 視覚的なエディターでデザインを編集できる場合が多い。

プラグイン利用のデメリット:

  • プラグインの数が増えるとサイトが重くなる可能性がある。
  • プラグインの互換性やアップデートに注意する必要がある。

404ページのデザインのヒント

  • ユーモアを交える: ユーザーを笑顔にするような、ちょっとした遊び心のあるメッセージを取り入れる。
  • ブランドイメージを反映: サイトのテーマカラーやロゴを使用し、一貫性を持たせる。
  • 視覚的に分かりやすく: 大きなフォントで「404」と表示したり、イラストや画像を活用する。
  • シンプルで見やすい構成: 余計な情報を詰め込まず、必要な情報（トップページへのリンク、検索フォームなど）を分かりやすく配置する。

ユーザビリティを高めるために

  • トップページへのリンクを設置: 最も基本的な導線として、トップページへのリンクは必ず設置しましょう。
  • サイト内検索フォームを設置: ユーザーが目的のページを見つけられるように、サイト内検索フォームを設置します。
  • 人気のあるページやカテゴリへのリンクを設置: よく見られているコンテンツへの導線を作ることで、ユーザーの回遊性を高めます。
  • お問い合わせフォームへのリンクを設置: どうしても目的のページが見つからないユーザーのために、問い合わせ先を明記します。

SEOにおける404ページの考慮事項

  • 適切なステータスコードを返す: 404エラーページは、Webサーバーから「404 Not Found」というステータスコードを返す必要があります。これにより、検索エンジンは存在しないページであることを正しく認識できます。
  • ソフト404エラーを避ける: 404エラーページの内容が薄かったり、トップページにリダイレクトしたりすると、検索エンジンから「ソフト404エラー」と判断されることがあります。これはSEOに悪影響を及ぼす可能性があるため、避けるようにしましょう。
  • robots.txtでの制御: 誤ってクロールされたくない場合は、robots.txtで404エラーページへのアクセスを制限することもできますが、基本的には適切なステータスコードを返すことで対応できます。

まとめ

オリジナルの404エラーページを作成・設置することは、ユーザー体験の向上、ブランディング、SEO対策など、多くのメリットがあります。静的なHTMLサイトの場合はサーバーの設定、WordPressサイトの場合はテーマファイルの編集やプラグインの利用を通じて、簡単にオリジナルの404エラーページを作成できます。ユーザーにとって親切で、かつサイトの個性を表現できるような404エラーページを作成し、Webサイトの魅力をさらに高めていきましょう。

コメントを残す





このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

HOME > WebDesign > 魅力的な404エラーページを作成！設置方法を静的HTMLとWordPressで解説