オリジナルの404エラーページを作る方法

コーディング

削除されているページや、URLが間違ったままアクセスした場合に表示される404エラー（Not Found）ページ。
WordPressで作成したサイトであれば自動でトップページが表示されるようになりますが、そうではない静的ページの場合は設定をする必要があります。

今回は404エラーページとは何か？ということと作り方について解説いたします！

404エラーページとは？

404エラーページとは削除されているページにアクセスしたり、URLが間違ったままアクセスした場合に表示がされるページのことです。
アクセスしたページがサーバー上に存在していない時に返されるエラーコードが「404」のため、404エラーページ（表示されるテキストからNot Foundページ）と呼ばれています。

アクセスしたページがサーバー上に存在しておらず表示する内容がないため、404エラーページの設定をしていないサイトでは「Not Found」と表示されてしまったり、レンタルサーバーを使用している場合はサーバー独自のエラーページが表示されます。

未設定の場合

ロリポップのサーバーを使用し、未設定の場合

上記のような内容が表示されてしまうため、サイトへの流入の機会を逃してしまったり、離脱に繋がってしまいます。
それを防ぐためにも、サイトを作成する時には合わせてオリジナルの404エラーページを設定しておきましょう！

オリジナルの404エラーページを作る時の注意点

オリジナルの404エラーページを作成する方法の前に、404エラーページを作成するときに気をつけたいことをお伝えします。
難しいことではありませんが、下記内容を意識して作成することをお勧めします。

サイトのデザインとの統一感、世界観を意識する
「次に何をしたら良いか」をわかりやすくする

サイトのデザインとの統一感、世界観を意識する

極端な例を挙げると、全体的に落ち着いたデザインのサイトなのに404エラーページはカラフルでポップに…というようなページにしてしまうとサイト全体の統一感がなくなってしまいます。
表示される頻度は低いページですが、しっかりとサイト全体に合わせた配色やデザインにすることが大切です。

サイト全体との統一感があることで、エラー画面が表示された場合でも同じサイトにいることがわかるため、ユーザーが混乱してしまうこともありません。

Googleのエラーページ

「次に何をしたら良いか」をわかりやすくする

404エラーページはあるものの、サイトのどこにもいけないページ（リンクが全くないページ）の場合、ユーザーが正しいページにたどり着く方法がなくなってしまいます。
そのため、せっかく404エラーページを作成をしていても流入を逃してしまったり、離脱につながってしまう可能性があるのです。

ページが見つからなかったことを伝える文言と合わせて、トップへ戻るボタンや、サイト内検索の検索窓の設置など、ユーザーに対して「次に何をしたら良いか」を伝える要素を入れておきましょう！

また、ヘッダーやフッター、サイトマップがある場合は要素として入れておくことをお勧めします。
サイト全体のデザインとの統一感が出るだけでなく、ユーザーが目的のページに辿り着きやすい親切なサイトにすることができます。

静的ページで作成する場合

静的ページの場合、.htaccessを使って404エラーページを表示させます。
設定方法はとても簡単で、.htaccessと同じ階層（ドメイン直下のルートディレクトリ）に「404.html」を作成します。
このままではただ「404.html」というコンテンツが作成されただけの状態のため、.htaccessに下記の一文を追記します。

追記をすることで、「返ってきたステータスコードが404の時にどのページを表示させるか」を指定することができます。

ErrorDocument 404 /404.html

WordPressで作成する場合

WordPressで作成されたサイトの場合、デフォルトの設定で404エラーページはトップページを表示させるようになっています。
表示させる内容を変えるために難しい設定をする必要はなく、「404.php」を作成し、テーマフォルダの直下に設置をするだけでその内容が404エラーページとして表示されます。

404.phpをどうしても作れない場合や、管理画面上でコンテンツの編集をしたい場合などは404pageというプラグインを使用することで任意の固定ページを404エラーページに設定することも可能です。