2014/09/24 Webデザイン
WordPressで404エラーページを作るときに参考にしたいブログ7選
削除されたページや存在しないページにアクセスすると「404ページ」が表示されますよね。
WordPress ならこのページを自由に編集できるのですが、なかなか自分のブログの 404 ページにアクセスすることがないので、ないがしろにされがちなところです。
でも、ここをきちんと作っておくと、ユーザーの取りこぼしをほんのちょこっとだけ軽減できるかもしれません。それはなぜかって？
それでは、404 ページの役割とオリジナルページを作る意味について解説いたします。ブロガーさんがどんなページを作っているのか、実例も合わせてご覧ください。
ブログのアクセス数を伸ばす方法をお探しですか？ 「アクセス数が伸びない原因とその対策」が書かれた e-book を無料プレゼントしています。
404エラーページとは
「404」という3ケタの数字は、HTTPステータスコードと呼ばれるもので、ページ（情報）が存在しないことをあらわしています。
詳しい仕組みは以前記事にしておりますので、そちらをご覧ください。
参考301？404？503？これだけは覚えておこうHTTPステータスコード
とくにいじっていなければ、ブログにアクセスして 404 のコードが返ってくるとエラーページが表示されるようになっています。
では、このページを作る意味って何なのでしょう。
ユーザーを逃がさないオリジナル404ページ
Google ウェブマスターツールのガイドラインでは、404ページに関してこのように触れています。
標準の 404 ページは ISP によって異なることがありますが、通常はユーザーに有用な情報が提供されることはないため、ほとんどのユーザーはそのまま別のサイトに移動してしまいます。
Google を考慮に入れてサイトを管理する｜有益な 404 ページを作成する
※赤字部分は Naifix
設定にもよりますが、レンタルサーバーでブログを運営している場合、共通テンプレートで 404 ページが表示されます。
何度か見たことがあるんじゃないでしょうか。
ロリポップの404エラーページ
エックスサーバーの404エラーページ
リンクをたどってこんなページが表示されたらどうですか？
僕なら「読みたい熱」が一気に冷めて、ほかのサイトに移動してしまいます。わざわざ Google で記事タイトルを検索して…なんてことはしません。どこのブログにアクセスしたのかさえ瞬時に忘れそうです。
でも、これがブログトップページへのリンクや人気記事などが表示されているエラーページだったら、立ち止まることがあるかもしれません。
目的のページでなければ離脱するひとがほとんどですが、それを防ぐのがオリジナルの 404 ページなわけです。
WordPressの404ページ
WordPressではパーマリンクや .htaccess の設定で挙動が変わるのですが、基本的に存在しないページへアクセスがあった場合は 404.php が表示されます。
404.php がない場合は index.php を参照するので、メインコンテンツ部分に「記事がありません」などのメッセージが表示されるだけのことが多いですね。
これだとちょっと味気ないので、ぜひこの機会に 404 ページを作成してみてください。
参考Creating an Error 404 Page（Codex 日本語版）
404ページに表示させたいもの
具体的にどのような情報が 404 ページに含まれていると良いのでしょうか。これも Google ガイドラインに載せられています。
- ユーザーに対して、探しているページが見つからないことを明確に伝えます。親しみやすく魅力的な言葉を使用します。
- 404 ページを、サイトのその他の部分と同じデザイン（ナビゲーションを含む）にします。
- 最も人気のある記事や投稿へのリンクの他、ホームページへのリンクを追加します。
- 無効なリンクを報告する方法をユーザーに提供するのも 1 つの方法です。
絶対こうしなければならない、というわけじゃないので参考程度に。
ちなみに当ブログの 404 ページはこんな感じで、ほぼ要件を満たしているかなと思います。
Gush2 は、かわいいヒヨコ仕様にしてみたピヨ。
ホームページへのリンクしかないので、お問い合わせページや人気記事ランキング表示などカスタマイズしていただければと思います。
404ページに Google AdSense はNG！
逆に「表示させてはいけないもの」が1つだけあって、それが Google AdSense です。
ヘッダーやサイドバーなど、他のページと共通しているパーツに AdSense を設置している場合は注意が必要ですね。
エラー ページには、そのページにコンテンツがないことをユーザーに知らせる 404 エラー ページなどがあります。この種のページに広告を掲載すると、広告が実際のコンテンツだと誤解されてしまう可能性があるため、広告を掲載されないようお願いいたします。
WordPress でサイドバーに AdSense を配置している場合、規約違反にならないよう下記のような対策を講じましょう。
- 404.php ではサイドバーを読み込まない
- サイドバーには別の広告を置く
- 条件分岐タグで振り分ける
サイドバーを削除する方法
テーマにもよりますが、サイドバーの読み込み部分は下記の1行です。
<?php get_sidebar(); ?>
これを削除してそのままサイドバーがキレイに消えてくれれば良いのですが、ほぼレイアウトが崩れる原因になると思います。
サイドバーだけ消すというより、イチから404ページをデザインすることを考えたほうが良さそうです。
AdSense 以外は今のところ問題なし
僕が確認したかぎりでは、Google AdSense 以外の ASP では404ページに関する規約が見当たりませんでした。
単なる見落としかもしれませんし、今後規約が追加されるかもしれませんが、どうしても広告を載せたいとか振り分け処理が面倒な場合は AdSense 以外の広告を貼るのが無難。
サイドバーよりメインコンテンツ部分に置いたほうがクリック率高めなので、このさい配置を変えてみるというのもひとつの手ですよ。
条件分岐タグで振り分ける
WordPress の条件分岐タグを使うとしたら、こんな感じになります。
<?php if(!is_404()): ?>
//ここにAdSense広告コード
<?php endif; ?>
「!is_404」とアタマに “！” マークをつけることで、「404ページ “以外” で広告コードを出力する」という記述になります。
僕がオススメするのは、表示速度やクリック率などを総合的に考えて、サイドバーから AdSense を外す方法です。ご自分の環境に合わせて試してみてください。
ブログの404ページサンプル集
検索すると 404 ページサンプル集はいくつかヒットしますが、ここでは2014年9月版としてブログに限定したデザインサンプルをご紹介します。
シンプルなものから凝ったものまで全7個！
記事一覧を表示するタイプ
メインコンテンツ部分にかわいい猫の写真。その下に「最近の記事」および「ランダム記事」がつづきます。
ヘッダーやサイドバーなどは他のページと同じく表示されます。サイドバーの AdSense はそのまま表示されていました。
シンプルなタイプ
洗練されている！という印象の 404 ページ。
このページだけじゃないんですが、右上の「≡」を押すと画面全体に出てくるメニューがカッコイイんですよねー。
あれ？なタイプ
見出しがおかしいかもですが、404 ページに「あれ？！」とか「おっと！」みたいなコメントをいれているブログはけっこうあるみたいです。
gori.me さんのページは検索フォームが大きくて見やすいですね。
ロゴデザインが凝っているタイプ
404のロゴがタイトルロゴをベースにしたものになっていて、そこまで凝るか！という感じのページです。やっぱりこういうのは専業の方にかないません。
「解決方法」で誘導しているところも参考になります。
ユーザーの目をひくタイプ
「404 NOT FOUND」のロゴもさることながら、違和感なくデザインされているので、一瞬404ページということがわからないぐらい。
中央には tumblr の画像が表示されているので、思わず目を留めてしまいます。これなら離脱しようと思わないかも。
亜空間へ消え去った？タイプ
顔出しOKな方はこのようにアピールするのも面白いですね。
共通パーツを使うのではなく、404ページまるごとデザインしたいときに参考になります。
そんなページねえよｗタイプ
最後にご紹介する LIG さんは大きな画像で遊びまくっていますね。
ブログのキャラを活かして最大限遊べるのが 404 ページなのかもしれません。
まとめ
この記事を書くにあたって、100 近くの 404 ページを探し歩きましたが、おもしろい 404 ページを作っているブロガーさんは意外に少ないなー、という印象です。
有名ブログでも、ホームページにリダイレクトしているだけとか、メイン部分に簡単なコメントと検索フォームを置いてあるだけとか。遊び心たっぷりでしっかり作っているのは少数派みたい。
ということは、逆に存在をアピールできるチャンス？
まあ、404 ページは記事を削除した、あるいはパーマリンクを変更してリダイレクトミスしていることがほとんどなので、本当にユーザー目線で考えれば 404 ページが表示されることのないよう設計すべきかもしれませんけどね。
いつも目につく部分だけではなく、たまには人目に触れない部分もカスタマイズしてみませんか？というお話でした。
それでは、また。
