妙高市や上越市に縁のある新潟県民がホームページ制作に関してつぶやくサイト

MENU [+]閉じる [×]
ありませんで終わりは勿体ない!404ページ制作のアイディア

特定のWebサイトを閲覧していると時々、目当てのページが見つからないこともありますよね?

そんなときに多くのサイトでは「お探しのページは見つかりませんでした」のようなタイトルのWebページが表示されます。

どこかのサイトで、ご覧になった方も多いかも知れません(^^)

Web制作者の間では「404エラーページ(または404ページ)」と呼ばれることが多いです。

当サイトでもその呼び方で、404ページのコトについてお話ししたいと思います。

この記事の目次

404ページとはどういう意味?

改めて、404ページとは目当てのページが存在しなかったときに表示されるページとお考えください。

「404って何の数字なの!?」

……そうですよね、おっしゃるとおりです(^^;)

Webサイトは、閲覧したい人がサーバーに「このページの情報ください」っていうリクエストのようなものを送って、サーバーからそのお返事としてページの内容が送られてきて、それで閲覧できます。

でもそのとき、仮にお目当てのページが存在していなかったり、別のURLに変更にされてしまったりすると、Webページにアクセスできません。

サーバーにリクエストを送ったマシンに何かしらの返事を送らないと「見つかりませんでした」が伝わりませんよね。

そこでサーバーが返す返事の内容が「404」なんです。

ザックリとした表現なので、専門の方にはもっと詳細におっしゃりたいことがあるかと思いますが、ここではこの程度でご容赦くださいm(__)m

つまり404というのは「そのページは存在しないよ」の合図だとお考えください。

ページの先頭へ戻る

妙高Web屋がおすすめする404ページ

さぁ、ここでは私が拝見して「素晴らしい」と感じた404ページの例をいくつかご紹介したいと思います。

紹介している内容は記事執筆時点のものです。皆さんの閲覧時点では内容が変更されている場合もありますので、くれぐれもご注意ください。

株式会社LIG様

私も個人的に、調べ物や日々のお勉強で使用させていただいているWebサイトです。

404ページに、なんと退社された元社員さんを起用した大胆な404ページです(゜д゜)!

もっとも、ご本人さえ問題無いなら退社されていても問題は無いとは思いますが(^^;)

インターネットには繋がっているよと安心させておいてから、目的のページが存在しないことを伝えているユニークさがあります。

株式会社サクラクレパス様

サクラクレパスさん、こちらは子供から大人まで、その社名を見たことがあるという方も多いですよね(^^)

この404ページがユニークなのは「商品紹介」をしてしまっているところ。

「当社の良く消える消しゴムで、お探しのページも消しちゃったかも知れません、ごめんなさいね」

と言っているようにも聞こえますが、その演出が商品への興味をいっそう喚起していて、面白いと思います。

面白法人カヤック様

こちらもよく拝見しているサイトです(^^)

面白法人カヤックさんのデザイナーブログは、404ページをチャットやゲームに似た雰囲気で演出しています。

キャラクターの会話を読み進めると、おすすめコンテンツやトップページにもしっかり戻れるつくりになっています。

とてもエンターテインメント性のある404ページですね。


CSS HappyLife様

手書き風のフォントによるタイトルが目を引く404ページです。

このセリフを見ると、とある海賊漫画の女性のお医者さんも連想するのですが…、語尾がちょっと違うかも知れませんね(^^;)

あの魔女のお医者さんは、たしか「じゃ」とは言わなかったような…、他にモデルがいるのでしょうか?

ページの構造としては、トップページだけでなく、ユーザーの方が直前にアクセスしていたサイトに戻すリンクを用意したり、管理人さんのプロフィールページへの案内を設けてみたり、ポイントを抑えてWebサイトからの離脱を防ぐ工夫があります。

quote様

なんとも可愛らしく、なおかつシンプルにまとまっています(^^)

手書き風の「404 Not Found」のメッセージと共に、スタッフさんが謝っている写真、そこに猫のイラストもくっついています。

場合によっては、404ページに出くわすことで、閲覧する方は「目的の情報にたどり着けなかった」ということを理由にガッカリしたり、ときにはイライラすることもあるかも知れません。

でもこれなら、ユーザーさんに不快な思いをさせない工夫もありますし、逆にほのぼのさせる効果もありそうですね(*^_^*)

OZPAの表4(おつぱのひょうよん)様

こちらも私がよく拝見して、勉強させていただいているサイトです(^^)

構成としてはすっごくシンプルな404ページなのですが、「亜空間へ消え去った」かもしれないという表現に、思わず吹いてしまいました(笑)

ページ構成はまじめなままで、文言だけちょっと遊び心を入れてみるのもアリかも知れませんね。

または、マスコットキャラクターがある商品のサイトならば、

「お探しのページはURLが変更されたか、マスコットの何々が食べちゃった可能性があります(笑)」

なんて茶目っ気を見せてみても良いかも知れません(*^▽^*)

ページの先頭へ戻る

妙高Web屋が考える404ページの役割

ここでは、私の中での「404ページはこうであったら良いのでは!?」という考え方をご紹介します(^^)

まずは「ユーザーがどういう状況に直面したか分かっていただくこと」が大切だと考えます。

例えば、ニュースサイトなどで特定のURLをクリックして記事が見たかったけれど、事前にURLが変更されていた場合。

何も施されていないサイトでは「Not Found」という文言が表示されるだけではないでしょうか?

「え!なに?Not Foundって何!?」

「Notっていうことは何かを否定しているの?Foundって何だっけ?」

と、ユーザーの方を混乱させてしまうかも知れません。

WordPressだったら「探しているページは見つかりませんでした」という趣旨の英語の文言が表示されますよね?

一方で、事情があってURLが変更されてしまうことも、やむを得ないものでしょう。

なので、せめて「お探しのページが存在しないことを伝えてあげる」ということは意識して404ページを作るようにした方が良いでしょう。

次に「類似のコンテンツを提案したり、一度トップページに戻してあげること」ができれば、404ページの重要性も増してくるでしょう(^^)

繰り返しますが、事情があってURLが変更されてしまうのはやむを得ないこと。

その代わりに、

「探していたページは無かったけど、類似のページはこの一覧の中から見つけられるかも?」

「URLが変わっただけかも知れないし、カテゴリはここで間違いないはずだから、もう一度探してみよう!」

「困ったなぁ…、だけどトップページなら何か情報があるかも知れないし、トップページに戻ってみよう!」

など、様々な対応を提案できる404ページ(リンクを表示させておくだけでOK!)を設置しておけばベターだと思います。

ページを探してきたユーザーの方を「Not Found」だけで追い返してしまうのは勿体ないもの。

PCやスマートフォンなど、アクセスしてくださっている端末の向こうに「人の存在」を意識しながら、

「ごめんなさい、お探しのページはありません。でも、よく似たこういうものはいかがですか?」

「お探しのページは存在しませんが、トップページに戻れば再度調べられますよ!」

など、「存在しない」の先を案内してあげられればベストかも知れませんね(^o^)v

ページの先頭へ戻る

404ページの詳細なカスタマイズ

ちなみに、私は「バズ部」様というWebサイトでも、よく勉強させていただいています(^^)

WebサイトのSEO(検索エンジン最適化)やコンテンツ作成のコツなどを紹介してくださっており、404ページに関する説明も、もちろんコンテンツがあります。

「404ページとは」というところから理想的な404ページへの考察、さらには404ページのカスタマイズ方法など、一部ではphpのサンプルソースも含めて紹介してくださっています。

自社やご自身で運営されているサイトの404ページをカスタマイズされる場合は、こちらのページを参考にしてみても良いのではないでしょうか??

ページの先頭へ戻る

いいね!と思っていただけたらSNSでシェアしてください♪

感想などあればコメントください♪

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Copyright (C) 妙高Web屋 All Rights Reserved.

ページの先頭へ