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


関連記事

Facebook:Ray-Ban Storiesの登場

Googleグラスじゃなくて...米国現地時間9月9日、Facebookがスマートグラス「Ray-Ban Stories」を発表しました。要はInstagram含むFacebookグループのSNSに連携できるカメラ搭載型サングラスです。FacebookとEssilorLuxotticaの共同開発によ ...(続きを読む)

ノーコード開発の可能性

最近感じている「ノーコード」という言葉。EC系ではShopifyやBASE、MAツール系ではb→dashやAB Tasty等、多くのノーコードサービスが増えてきました。というわけでノーコードについて触れておこうかと思います。 ノーコードとは 今の時代においては、中途半端な機能のパソコンよりよっぽどス ...(続きを読む)

アクションモーメントを考える

電通の人が提唱(?)しているトリガーモーメントやGoogleが提唱するマイクロモーメントがありますが、いずれもアクションを起こす瞬間のユーザー心理を指していますよね。なので、ここでは私がテキトーに「アクションモーメント」と称してその重要性を書いておこうと思います。 アクションモーメント 人には行動を ...(続きを読む)

グリッドデザインについて

近々本ブログをリニューアル予定です。目的としては私個人の仕事に対する向き合い方が変わってきたことと、仕事自体がニューノーマルになることで改めて気合を入れて仕事に取り組んでいこうと思ったこと、後は気分転換です(笑)。イメージとしてはNeumorphism(ニューモーフィズム)デザインで全体を形成しつつ ...(続きを読む)

コメントを書く

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