私がいくつか自分のサイトを運用していくにあたって、色々と試しているのですが、その中で404ページのデザインというものに頭を悩ませていたりします。ほとんど誰も目にすることのないサイトの404ページ…今回はそのデザインの使い勝手についてご紹介したいと思います。

遊び心を忘れずに

正直404ページなんてどうでも良いという考えもありますが、もしかして削除したページが意図せずリンクされていたとしたら…機械的な案内をするのもなんかもったいないですよね。ユーザーとして404ページに辿り着くよくあるパターンとしては、画像のファイルURL自体がインデックスされていたり、どこからかリンクされているケースもあります。私がネットサーフィンしていて一番404ページに出会う確率が高いのもこのパターンですかね。
ですので、そんな時に面白い404ページ例をご紹介します。

サクラクレパス

任意に//www.craypas.com/aと入力してみると以下のようなページが開きます。

craypas404

「よく消える消しゴムが消したかもしれないから、消しゴムのページを見て」なんて、シャレが効いてるじゃありませんか(笑)。もちろん、グローバルナビの他にもトップページやサイトマップを案内しており、丁寧な作りとなっていますね。スマホ対応していないのが残念ですが、有名な404ページ例なのでご紹介しました。

デザイナーさんのページ

couldというブログ(？)ですが、こちらも任意に//www.yasuhisa.com/could/aと入力いただくとチュートリアル的なページが開きます。

could404

こちらはとても親切にページの探し方をご紹介しています。やはりスマホ対応していませんが、真剣に情報を探している人には有難いですね。

他の事例を知る

少し情報が古いかもしれませんが、ネットPR.JPにおいて様々な事例を紹介されているのでご紹介します(//netpr.jp/trend/1982/)。各社遊び心とユーザーの使い勝手を考慮した404ページを作っていることが分かりますね。

必要な項目は何か

ちなみに404ページに関しまして、WordPress等のCMSを利用している場合は自動的に404.phpに飛ぶようにデフォルト設定されていたり、index.phpにリダイレクトされたりするようになっています。それとは別にイチからhtmlなどでページを作成している場合には、404.htmlというファイルを別途作成し、ディレクトリ直下に配置した後で.htaccessに ErrorDocument 404 /404.html と記載することで、存在しないファイルにアクセスした時404.htmlページを呼び出すことができるようになります。

しかし、こんな感じでご紹介していると、404ページには何が必要かが見えてくると思います。ざっくりご案内しますと以下がポイントとして挙げられます。

・サイトマップ(html)へのリンク動線
・トップページへのリンク動線
・関連すると想起されるリンク動線
・サイト内検索ツールバー
・気の利いたアイデアとデザイン性

どうでしょうか？もしお時間があれば、404ページにちょっとしたこだわりを持ってみるのも面白いかもしれませんね。

このブログの404ページですか？？それはご覧いただいてのお楽しみということで…(笑)。

404ページデザインで遊ぼう

Search for articles

Archives