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

私がいくつか自分のサイトを運用していくにあたって、色々と試しているのですが、その中で404ページのデザインというものに頭を悩ませていたりします。ほとんど誰も目にすることのないサイトの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ページですか??それはご覧いただいてのお楽しみということで…(笑)。


関連記事
2014年に一世を風靡した(...私の中で)あのNAVERまとめがついに終了するそうです。残念とか悲しいとかではなく、なんとなく感傷的な気分になりましたのでご紹介しておきます。あの1件以来まるで目立たなくなってしまいましたが...それでも私はユーザーとして普通に見ていたんですけどね...。 終了の通 ...(続きを読む)
昔はマスメディアのことをAbove The Lineと呼び、インターネット周りをBelow The Lineと呼んでいた時代もありましたが...ついに2019年の日本の広告費の中でテレビCMをインターネット広告が上回ったようです。電通の「2019年 日本の広告費」により明らかになりました。マス系広告 ...(続きを読む)
Amazonのレビューが海外中心に荒れていることは皆さん結構ご存知の状況かと思います。競合他社による嫌がらせレビュー(わざと悪くコメントする)や自作自演(わざと良くコメントする)等、この専用事業者もいるほど横行しており、かなり問題視されている事象です。そこで今回は、既に有名なツールかと思いますが「サ ...(続きを読む)
私は頻繁にYahoo!メールを活用しているのですが、そのYahoo!メールにおいて、先日Yahoo! JAPAN側から「ブランドアイコン表示企業が増えました」という発表がございましたので、ご紹介したいと思います。 どんな内容? Yahoo!メールに届く送信元表示部分にファビコンのようなアイコンを付け ...(続きを読む)

コメントを書く

コメントは承認から反映までしばらく時間がかかる場合がございます。メールアドレスが公開されることはございません。