サイトを運営する際に欠かせないのがコンテンツの更新やリニューアルです。
長期運用をしていると古いコンテンツを削除したりページを移動したりすることも必要になるでしょう。
中には以前のURLでは検索できないことも起こるはずです。
こうした時に画面に表示されるのが404 Not Foundというエラーページです。
今回は404ページの作り方やマーケティング的に理想的な404ページの条件について解説します。
併せて参考にしたい404ページについてもご紹介しますのでぜひ参考にしてみてください。
目次
404エラーページの概要
検索していて「404 Not Found」というエラー画面をご覧になったことはありませんか。
これはWebサイト上で指定されたURLが存在しないことを表しています。
いわゆる404ページと呼ばれるページです。
では404ページはどのような時に表示されるのでしょうか。
404ページが表示される代表的なケースは以下の通りです。
- 既存のURLが削除、または非公開になったケース
- URLが正しく入力されていないケース
- URLが間違って設定されたリンクをクリックしたケース
このようなエラーが起きた場合に404ページが自動で表示されます。
404が表示されるとユーザーは何が起きたのか分からず混乱してしまうでしょう。
そしてサイトから離脱してしまう危険性が十分考えられます。
ですが独自に作成したカスタム404ページがあればユーザーの混乱を防ぐことが可能になります。
唐突にサイト上のデザインと異なるデザインのエラーページが表示されるとユーザーは混乱を起こします。
こうした混乱を避けるためにもサイト内のページであることを示すカスタム404ページが必要になります。
404ページの仕組み
サーバーでリクエストを受信したことを知らせるHTTPステータスコードと呼ばれるコードがあります。
このコードは3桁の数字で構成されておりさまざまな意味を持っています。
通常、ユーザーからのリクエストに成功した場合ステータスコードが表示されることはありません。
しかし、アクセスしたURLが正常でないなどエラーが起きた場合には表示されます。
主に表示されるのが以下のケースです。
- 400から始まる3桁の数字…クライアントエラーを示す
- 500から始まる3桁の数字…サーバーエラーを示す
不正アクセスを示す401やサーバーがダウンした際に現れる503などがあります。
404はクライアントエラーに含まれるので400番に属します。
Webサイト・LP制作の事例はこちら
404ページを魅力的に作るメリット
404ページをカスタムすることでどのようなメリットがあるのでしょうか。
カスタム404ページのメリットは大きく3つあります。
- サイトの離脱を防ぐことができる
- サイト内リンクを設置することで回遊性が高まる
- SEO対策になる
カスタム404ページはページが存在しないことユーザーに分かりやすく伝えるために作成します。
これによりユーザーの利便性が高まるので離脱を防ぐ効果や回遊性を促す効果があります。
Googleでもカスタム404ページを設置することを推奨しておりSEO効果も高いといえるでしょう。
カスタム404ページを作成することで離脱防止や回遊性の向上につながります。
また、ユーザーの利便性を考えることはSEO対策にも効果的です。
支援実績やコンサルティングの詳細は、実績・事例紹介のページをご覧ください。
404ページを作成する際のポイント
404ページを作成する際のポイントは以下の2つです。
- 必要な内容を精査する
- サイト全体と同一のデザイン性を保つ
この2つについてお話をしていきましょう。
必要な内容の精査する
404ページをカスタムする目的はサイトからの離脱を防ぐことと回遊性を高めることです。
この目的を満たすためにはユーザーにとって分かりやすいページであることが前提になるでしょう。
1つのページに多くの要素を詰め込むことはサイトパフォーマンスの低下にもつながりかねません。
カスタム404ページは出来るだけシンプルに作ることが大切になります。
そのためにも必要な内容を精査することが重要です。
サイト全体と同一のデザインを保つ
カスタム404ページを作成する際に注意したいのがページのデザインです。
サイト全体と同一デザインを保つようにしましょう。
なぜ、カスタム404ページをサイト全体と同じデザインに統一させる必要性があるのでしょうか。
それはエラー画面が表示された時にユーザーの混乱を防ぐことに役立つからです。
通常の404ページはどのサイトでも同じデザインではないでしょうか。
この画面を見てユーザーは別のサイトに遷移されたと勘違いを起こしサイトから離脱しまうのです。
離脱を防ぐためにもカスタム404ページもサイト内と同一のデザインで作成する必要があるでしょう。
理想的な404ページの条件
理想的な404ページの条件は以下の3つです。
- ページがないことを明確にする
- ユーザーに役立つ情報を提供する
- 404HTTPステータスコードを定期的に確認する
これらの要素を満たしたページが理想とされています。
ここからはそれぞれの要素について詳しく解説してきます。
ページがないことを明確に示す
最も重要なのが指定のページが存在しないことをユーザーに分かりやすく伝えることです。
たとえば画面上に「404 Not Found」と表示されても何が起きているかを理解するのは難しいでしょう。
では「お探しのページは見つかりませんでした」と表示された場合ならどうでしょうか。
誰が見てもすぐに理解ができるはずです。
このようにページがないことを明確にすることがカスタム404ページを作成する上で必要になります。
ユーザーに役立つ情報の提供
ユーザーが回遊しやすいように役立つ情報を提供することも重要です。
具体的にどんな情報を提供すると良いのでしょうか。
サイトマップやサイト内検索窓の設置、トップページに遷移できるリンクの設置などが効果的です。
ユーザーが次にどんな行動を取れば良いかを促すことで回遊性を高めることができます。
関連情報や人気記事などが検索できればユーザーの悩みを解決することができるかもしれません。
結果として利便性の良いサイトとしてアクセス数が増えるきっかけにもつながるでしょう。
404HTTPステータスコードを定期的に確認
カスタム404ページは作成後サイトへアップすると自動的に画面上に表示されるようになっています。
しかしまれに表示されないケースもあります。
ページ作成後は念のために確認をしておくと良いでしょう。
WordPressで404ページをカスタマイズする方法
404ページのカスタムはWordPressでも可能です。
ここからはWordPressで404ページをカスタマイズする方法をお話していきましょう。
WordPressには404.phpという404ページを表示するファイルがテーマ内にあります。
しかし、テーマ内に404.phpがない場合は新たに作成する必要があるでしょう。
新たに404.phpを作成する場合の手順を次から詳しく説明します。
WordPressのテーマの概念
通常サイトはHTMLファイルで構成されています。
HTMLとはどのようなものなのでしょう。
HTMLとはコンピューター上で文章構成をするための言語です。
HTMLは1つの要素で構成されているのが特徴といえるでしょう。
対してWordPressは複数のphpと呼ばれるスクリプト言語で構成されています。
主に検索サイトや掲示板などを作成する際に利用されています。
ここからはphpを利用したカスタム404ページの作り方を解説していきましょう。
カスタム404ページを作成するには以下の2つのテンプレ―トを用意します。
- content-none.php
- 404.php
ページ内に検索窓を設置する場合はこの2つの他にsearch.phpが必要になります。
今回は基本のcontent-none.phpと404.phpの作成についてお話をします。
content-none.phpの作成
content-none.phpとはどのようなものをいうのでしょうか。
content-none.phpとはWordPressのインクルードファイルのことをいいます。
インクルードとはページを構成する部品のようなものと考えると良いでしょう。
このcontent-none.phpと後に解説する404.phpと組み合わせてページを作成します。
あらかじめPCのテキストエディタでcontent-none.phpを作成します。
content-none.phpではエラーページに伝えたいメッセージを記載しましょう。
この場合、冒頭文やカテゴリなどを表示させるソースコードを追加すると良いでしょう。
またユーザーの利便性を考えると新着記事やリクエストフォームなども追加すると親切です。
作成したファイルにcontent-none.phpと名前を付けて保存します。
固定ページを基に404.phpファイルを作成
次にcontent-none.phpを表示させる枠となる404.phpファイルを作成します。
その場合は固定ぺージを基にして作成をします。
では実際に固定ページを基に404.phpを作成する手順を解説していきましょう。
使用する固定ページはpage.phpです。
page.phpの格納先は以下の通りです。
- 外観→テーマエディタ→スタイルシート→page.php
page.phpを複製し404.phpと名前を付けて保存しましょう。
では、複製をした404.phpをどのように編集をすれば良いのでしょうか。
以下のソースを例に説明をします。
<?php if( get_the_post_thumbnail() ) : ?>
<div class=”post-thumbnail”>
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>
<?php the_content(); ?>
これはアイキャッチ画像・本文を表示するという命令が書かれています。
404.phpには必要のないソースコードなので削除します。
代わりにcontent-none.phpを呼び出すための関数を入力しましょう。
関数を入力したソースコードは以下の通りです。
<section class=”post-content” itemprop=”text”>
<?php get_template_part(‘content’, ‘none’); ?>
</section>
これで編集は完了です。
content-none.phpと404.phpをアップロード
それぞれのテンプレートが完成したら今度はアップロードに移ります。
ファイルのアップロードにはFTPソフトを使用します。
WordPressの管理画面でもファイル管理機能はありますが以下のファイルにしか対応していません。
- テーマエディタ…テーマの編集
- プラグインエディタ…プラグインの編集
ＰＣとサーバー間でファイルのやり取りができるFTPソフトが必要なのはこのためです。
では、アップロードの手順について解説をしていきましょう。
PC内のcontent-none.phpをサーバー内のファイルにドラッグアンドドロップをして転送します。
転送先は以下の場所です。
wp-contentフォルダ→themesフォルダにある自分のフォルダ
これらのフォルダはwordPressをインストールしたフォルダの直下にあるので確認しておきましょう。
これで404ページが実装されました。
転送後に404HTTPステータスコードが正常に返されているかを確認しましょう。
確認にはGoogle Chromeデベロッパーツールを使います。
エラーメッセージを表示させる方法
応用編としてエラーメッセージを表示する方法についてもご紹介しておきましょう。
これは404ページ内に設置した検索窓を使って関連記事を探す場合に使用します。
検索窓の設置にはsearch.phpを利用すると良いでしょう。
search.phpは404.phpと同様にテーマエディタ内のスタイルシートに格納されています。
万が一ない場合はindex.phpを複製しsearch.phpと名前を変えておくと良いでしょう。
検索窓を利用して関連キーワードがあった場合となかった場合で表示するべきページが異なります。
もし、検索窓を利用しても記事がなかった場合エラーページが必要になります。
こうした理由からエラーメッセージを用意しておくことはユーザーにとって親切といえるでしょう。
Webサイト・LP制作の事例はこちら
参考にしたい404ページ
せっかく404ページを作成するのであれば自社の個性を生かしたページにすると良いでしょう。
しかし、どのようなデザインが良いのか悩まれる方も多いのではないでしょうか。
そこで404ページを作成する際に参考にしたい企業の404ページの事例を4つご紹介します。
Amazon
Amazonの404ページは癒されると話題です。
米国Amazonのページでは社内で飼われている犬の画像がメッセージとともにランダムに表示されます。
この画像が話題になり数々のサイトでも取り上げられているのでご存じの方もいるのではないでしょうか。
日本Amazonではポメラニアンの画像が表示されます。
プラチナゲームズ株式会社
プラチナゲームズ株式会社の404ページではミニゲームをプレイすることができます。
このゲームは自社がリリースしたゲームをモチーフにしておりソースには攻略法が記載されています。
静止画が使われることが多い中ゲームがプレイできるのはかなり珍しいのではないでしょうか。
ゲーム会社ならではの遊び心が感じられる404ページといっても良いでしょう。
本田技研工業株式会社
本田技研工業株式会社の404ページはユーザーの利便性を考えた作りが特徴といえるでしょう。
ページ上には新着情報や商品別のカテゴリ表示などユーザーが欲しい情報が表示されています。
また、検索の際によく間違われるURLの入力方法などの案内も表示されており検索の際に役立ちます。
NASA
NASA(米国航空宇宙局)の404ページは一風変わったメッセージが表示されます。
表示されているメッセージは以下の通りです。
「The cosmic object you are looking for has disappeared beyond the event horizon.」
これは一体どう意味なのでしょう。
意味は次の通りです。
「あなたが探している宇宙の物体は、事象の地平線を越えて消えました」
「事象の地平線を超えて消えました」という言葉にNASAらしさを感じます。
このように自社の特性を生かしたメッセージもユーザーの心をつかむのには効果的といえるでしょう。
支援実績やコンサルティングの詳細は、実績・事例紹介のページをご覧ください。
オリジナルの404ページでユーザーの心を掴もう
ご紹介をした404ページはユーザーへの配慮はもちろん自社の特性を生かした作りになっています。
こうしたページはユーザーを飽きさせないだけでなく企業への親近感を感じさせる作りになっています。
ページを作成する際は自社ならではのアピールポイントを織り込んだページを作るようにしましょう。
こうすることでユーザーの心をつかむことも可能になるはずです。
404ページの作り方で悩んだら
カスタム404ページはWordPressでの作成が可能です。
しかし、プログラム言語などサイトの構築に関しての知識がないと作成には苦労することも事実です。
マーケティング担当者が通常業務を並行して行うのは難しいのではないでしょうか。
また、404ページもユーザーにとっては自社の印象を決める大切なツールです。
デジマクラスなら自社の特性を生かした404ページの作成が可能です。
404ページの作り方でお悩みでしたらぜひデジマクラスにご相談ください。
Webサイト・LP制作の事例はこちら
まとめ
今回は404ページの作り方について解説をしました。
404ページは時にユーザーに混乱を与える危険性を持つページです。
しかし、作り方によっては自社のアピールにも効果的なページにもなりえるでしょう。
実際に国内外の企業でもオリジナルの404ページを積極的に作成し話題を集めています。
ぜひ、自社ならではのオリジナルの404ページを作成してみてください。