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ページですか??それはご覧いただいてのお楽しみということで…(笑)。


関連記事
Amazonプライムが今日から値上げするようです。年額プランの場合は3,900円から1,000円上がって4,900円に、月額プランは400円から100円上がって500円となります。予告無しでいきなりの値上げに個人的には動揺してしまいました。 どういうこと? Amazonプライムといえば、プライム会員 ...(続きを読む)
Googleで2018年の検索ランキングとInstagramの2018年MVIランキングが発表されていましたので、息抜きとしてご紹介したいと思います。 Google検索ランキング 2018年1月から12月1日までのGoogle日本での検索集計の結果です。急上昇キーワードランキングでは、1位は「ワール ...(続きを読む)
Googleは、米国現地時間11月27日にウォルトディズニーが広告配信におけるプラットフォーム「Googleアドマネージャー」を活用提携することになったと発表しました。少なくとも数年先まではGoogleの莫大な収益が見込めそうです。 どういう内容? ウォルトディズニーでは、様々なチャネルネットワーク ...(続きを読む)
Googleウェブマスター向け公式ブログにおいて「定期購入ページの説明が不十分な場合は警告が表示されるようになります」という記事が上がっておりましたので、ご紹介します。 どういう背景? ありがちな例として、サイトページにおいて「○○が1,000円です」というサービスを受けるべく、キャリア決済(携帯通 ...(続きを読む)

コメントを書く

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