• かちびと.net

    日本のWebサイトの404ページデザインいろいろ+α。探しても探しても海外デザインばかりなので日本のWebサイトの404ページを少し集めてみました。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

日本のWebサイトの404ページデザインいろいろ+α

スポンサーリンク

気になって探したのですが、ググッても
9割は海外のデザインだったので、日本
の素敵な404ページを探してみました。
時間の関係でさほど数を揃える事が出来
ませんでしたが、少しでも参考になれば
幸いです。

404は、誰でも訪れる可能性のあるページです。ある意味、用意したコンテンツよりも見られる可能性がありますのでほんの少しでも手を入れておくといいかも知れませんね。

どこかで「404は古い。無条件でトップページリダイレクトが最適」なんて意見も見かけましたが、個人的にはユーザーを混乱させる要因になるのでリダイレクトは避けたほうがいいと思います。

では、個人的に気になった404ページをご紹介していきます。順不同で、ややサイトの属性がWeb関係に偏っていますがご了承ください。尚、リンクは404ページではなく、TOPページにしてあります。

株式会社サクラクレパス


デザインも好評のサクラパレスの404ページ。ついでにプロダクトもアピールした秀逸なアイデアです。

株式会社サクラクレパス

CSS HappyLife


よく拝見させてもらっているcss happy lifeさんのユニークな404ページ。無駄に凝ってて和みますw

CSS HappyLife

KAYAC DESIGNER’S BLOG


最近よく見かけるカヤックさんのデザイナーブログの404。やはりというか想像通りユニークですね。会話式で、途中に最新記事も含めてあります。

KAYAC DESIGNER’S BLOG

面白法人カヤック


こちらは本家カヤックさんのサイトの404です。こちらも統一された404コンテンツです。

面白法人カヤック

これからゆっくり考L +α

導線がとてもわかり易く作られているこれからゆっくり考L +αさんの404。「見つからない。じゃあどうしよう?」と考えさせないよう工夫されている感じです。

これからゆっくり考L +α

could


couldさんの404ページはかなりユーザビリティを考慮したデザインです。ページが見つからない→URL正しい?→検索してみては?→アーカイブもあるよ→よかったら連絡してね、という流れが組まれているのでユーザーも何をすればいいか考えずに行動できそうです。

could

クックパッド


クックパッドの404です。ミニマルですね。最初見たときにどうかなと思ったのですが、あまりWeb慣れしてないユーザーも多いサイトでしょうし、無駄なコンテンツを表示させないのは正解なんでしょうね。でも検索窓くらいあってもいいような気もします。

クックパッド

楳図かずおオフィシャルホームページ


漫画家、楳図かずおさんの公式サイトの404です。放置していても漫画が出てくるユニークな作りです。ぜひご覧頂きたい404の1つですね。

楳図かずおオフィシャルホームページ

Website Usability Info


ユーザビリティ関連のWebsite Usability Infoさんもやはり導線を意識した404です。迷った方が来るページでしょうし、うまく誘導してあげるのが基本なのでしょう。

Website Usability Info

ビービット


同じくユーザビリティ関連で有名なビービットさんの404ですが・・・TOPに戻るリンクと短文のみですが、これはどうなんでしょう。個人的にはなぜこうしたのか疑問でしたけど、僕程度では分からないユーザビリティ的な理由があるのかも知れませんね。

ビービット

Webデザインレシピ


Webデザインレシピさんの404はシンプルに写真とテキストだけですが、ヘッダに検索ボックスが、フッターにプロフィールがもともとあるので問題なさそうですね。

Webデザインレシピ

WIRED VISION


WIRED VISIONさんの404もユーザビリティをしっかり考慮しています。誘導が旨いですね。

WIRED VISION

hail2u.net


hail2u.netさんの404ページも素敵です。今回調べた限りでは唯一、「もしかして」コンテンツがあった404です。

hail2u.net

sagool


sagoolさんの404は凄く腰の低いテキストでなんだかシュールでしたw

sagool

s5-style


Webデザインのギャラリーサイト、s5-styleさんは、普段表示させていないアーカイブを全て出しています。これはナイスアイデアですね。

s5-style

404NotDesign


国産のWebサイトの404ページを集約しているギャラリーサイトです。なかなか貴重では。

404NotDesign

サクラクレパスの404エラーが素敵なので、404ページを集めてみたくなったのだ


国産Webサイトの404ページデザインのまとめ記事です。

サクラクレパスの404エラーが素敵なので、404ページを集めてみたくなったのだ

その他Tipsとか。

404ページのデザインはユーザビリティ向上に必ず貢献してくれる、というより保険という感じになりますが、離脱率を減らすひとつの手にもなる可能性がありますので、手を入れて損はないかと思います。

URL :
TRB :

Comments & Trackbacks (17)

  1. Webデザインレシピ:高橋のり

    あわわわわ …
    Webデザインレシピがのってる … 恥ずかしい w
    でも、404ページ見てくれたんですね!

    密かに好きな感じの写真のスライドショーとかにして、自分で楽しもうかと企てていたところなんですよ w

    紹介してくれてありがとうございます :D
    ツイッタ—でも元気なシロさんのつぶやき待ってまーす ノシ

    • シロ

      こちらこそありがとうございますー!

  2. ka

    http://nagoya2010.wordcamp.jp/
    名古屋で行われたWordPressのカンファレンス、WordCampNagoya2010の404もなかなか面白いと思います

    • シロ

      おー!ほんとですねwみんな凝ってますね・・

  3. VALID SEO

    わー・・・すごいなー・・・。404のことなんて全然考えてませんでした。こういう所まで力いれないとダメですねー・・・。

    でも、あんまり面白いとわざと表示されて、エラーページチェックの作業が鬱陶しいかもしれません(笑)

    • シロ

      それは確かにw 個人的には見えないお洒落と読んでますw

  4. Mighty Works

    WordCamp Nagoya 2010 の404はこれですね。
    http://nagoya2010.wordcamp.jp/404/

    • シロ

      素敵ですなー。Cool!

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services