Share on
真似したい！404ページ秀逸デザイン11選【海外サイトもあり】
あなたのサイトに「404ページ」はありますか？
404ページとは、「リクエストされたページが見つかりません」という意味のエラーページです。一方で、間違えてしまったユーザーにちょっとした楽しみを与えられるページでもあります。
この記事では、404ページのデザインを日本国内のサイトから5つ、海外サイトから5つ、合計10サイトご紹介します。
海外サイトも入れたのは、ユーモアの取り入れ方が素晴らしかったからです。ここは国内サイトよりも海外サイトが数段上の印象でした。
404ページの制作をお考えなら、ぜひ最後までお読みください。
404ページとは
「404ページ」とは、ウェブサイト上でリクエストされたページが見つからないときに表示されるエラーページのことです。
「あなたが探しているページは（残念ながら）存在しませんよ」という情報をユーザーに伝えます。
一方でユーザーがサイトから離れるのを防ぐために、メッセージやデザインで工夫ができるページでもあります。デザイナーの遊び心が垣間見えて、ちょっと得した気分にさせてもらえることもある。それが404ページです。
「404」は何の数字？
404は、HTTPのステータスコードです。
クライアント（Webブラウザ）からのリクエストについて、Webサーバーは３桁の数値を返します。クライアントのリクエストが正常に処理されたか、エラーが発生したかなどが、この数字でわかります。
エラーに関するものでは、「3xx」はリダイレクト、「4xx」はクライアント（Webブラウザ）についてのエラー、「5xx」はサーバーについてのエラーを意味します。
「404」は「not found」、ページが見つかりませんでしたという意味です。
404エラーはサイト評価に影響する？
Googleの「404 エラーがサイトに与える悪影響」によると、404エラー自体が悪いことはなさそうです。
ページの要点をまとめます。
- 404エラーは、ウェブの動作としてまったく正常なもの。
- サイトの一部のURLが404を返していること自体が、Googleの検索結果に影響することはない
- ただし、サイトにとって重要なページが 404 を返しているなら対処すべき
Googleの評価に影響しないとしても、見つからないページが多ければユーザーの離脱を招き、利便性や信頼性が損なわれます。404エラーが出るのはある程度仕方ないとしても、ユーザビリティの低下は最小限に止めたいところです。
404ページを作るメリット
404ページをカスタマイズして作成する主なメリットは、以下の2つです。
サイト離脱率の低減
404ページにサイトのホームへ戻るリンクや、検索バーなどを組み込むことで、訪問者がサイト内で行き場を失うことを防げます。404エラーが出ても、さらなる探索を続ける確率が高まるでしょう。
ユーモアやクリエイティビティの提示
ユニークな404ページはエラーが発生したにも関わらず、訪問者にちょっと得した印象を与えることができます。ユーモアやクリエイティブな要素を取り入れることで、ネガティブなエラーメッセージがポジティブな経験に変わるのです。本記事でとくに注目しているポイントです。
ちなみに404ページを作らないと、以下のような表示になります。どこにも行き場がありません。ユーザーを迷わせないためにも、404ページは用意しておくべきでしょう。
国内の404ページ事例6選
404ページにおけるユニークさの表現は、国内と海外で違うようです。
まずは国内の事例をご紹介します。
UUUM
参考
日本最大のYouTuber事務所「UUUM」のサイトの404ページです。
右下のキャラクターがアニメーションになっていて動きます。あくびをして、パッと目をさます動きがユーモラスです。
仲村プレイス
参考
義肢装具・医療用装具の製造販売を行っている島根県の会社、「仲村プレイス」のサイトの404ページです。
社員の方々と思しき、手書きの線画のイラストがほのぼのした気持ちにさせてくれます。
45R
参考
1977年創業の日本の服ブランド、45Rのサイトの404ページです。
こちらのサイトは、布の上に描いたような手書きイラストの質感がすごいのですが、その雰囲気が404ページにも表れています。カーソルの動きに合わせてイラストがちょっと動くところが楽しいです。
HA-RU
参考
ダクト・保温工事を主とする設備工事を行っている「株式会社HA-RU」のサイトの404ページです。
言わずもがな、インパクトNo.１のページでした。
301
参考
「Meaning=意味」を起点にしてブランドや場をプロデュースするクリエイティブカンパニー、「301（サンマルイチ）」のサイトの404ページです。
多くのサイトが中央に情報を集めている中で、左隅にそっと「404」を置いているのがサイトの雰囲気に合っています。こういうやり方もあるんだなと思ったページです。
クーミル
参考
Web制作やマーケティングを行っている「クーミル株式会社」のサイトの404ページです。
画面全体に表示される黄色と黒の「404」は、カーソルをホバーすると...びっくり！右下に「実は…見えない所までこだわる会社です。」と書いてあるように、こだわりが強い制作会社さんです！
海外の404ページ事例5選
続いて海外の事例です。
ふっと笑えるページが多かったのが印象的でした。
Hyer
参考
プライベートジェットチャータービジネスを展開する、「Hyer」のサイトの404ページです。
トップページではジェット機が青空を背景に悠々と飛んでいますが、404ページは打って変わって霧の中です。
エラーメッセージは、「Page not found（ページが見つかりません）」ではなく、「Nothing to see here（何も見えません）」。トップページに引っ掛けたうまい演出で、意味がわかるとちょっとニヤけます。
Superlist
参考
ユーザーの作業効率を上げるタスク管理アプリを提供するサービス、「Superlist」のサイトの404ページです。
背景は動画です。コントロールを失ったバイクがフラフラ走っているのですが、画面がめちゃくちゃ揺れます。「道を間違えた」のが感覚的にわかるおもしろい演出でした。
ちなみに背景の動画は、日によって変わるようです。
Bike Bear
参考
クリエイティブデジタルエージェンシー「Bike Bear」のサイトの404ページです。
「BEAR WITH US」の本来の意味は、「一緒に我慢しようぜ！」。この「Bear」は当然「熊」にかかっていますが、熊本人はまったく我慢している様子はなく、ご覧のとおり余裕の表情。テキストにもビジュアルにもウィットが効いた404ページです。
ROBOTO
参考
香港と中国全土を拠点とするゲームアートのアウトソーシングスタジオ、「ROBOTO」のサイトの404ページです。
実際は動画で、円形に並んだ「404」がゆっくりと回っています。
スクロールすると404の回転が早くなったり逆になったりするので、間違ってスクロールしてもちょっと遊べる小粋な仕掛けがしてありました。遊んだらホームに戻れるようにリンクがあります。
Ready
参考
仕事効率化サービス「Ready」のサイトの404ページです。
ご覧の通り、これ以上に潔いページはないでしょう.「404」としか書かれていません。他のページへ誘導するリンクもなし。
これならわざわざページを作らなくてもいい気もしますが、特殊なフォントを使ってデザインされているので、一応サイト内に止まっているのが雰囲気でわかります。リンクがなくても、ブラウザバックすれば問題ありません。むしろ「ブラウザバック」をしてもらうなら、これがベストなデザインでは？とさえ思えてきます。
まとめ
以上、404ページについて解説しました。
404ページは、ユーザーを迷わせないためのページであると同時に、ユーモアやホスピタリティを表現できるページでもあります。
ユーザーを「お！」を思わせる、あなたのサイトだけの404ページをぜひ作ってみてください。
この記事を書いた人
クーシーブログ編集部
1999年に設立したweb制作会社。「ラクスル」「SUUMO」「スタディサプリ」など様々なサービスの立ち上げを支援。10,000ページ以上の大規模サイトの制作・運用や、年間約600件以上のプロジェクトに従事。クーシーブログ編集部では、数々のプロジェクトを成功に導いたメンバーが、Web制作・Webサービスに関するノウハウやハウツーを発信中。
お問い合わせはこちらから
Web制作デザイン、丸ごとお任せ
お問い合わせする
執筆者：加藤久佳 デザイン：藤川有里紗、大坂間 琴美
Share on
COOSYの
制作実績
UIUXと美しさを両立させた、クーシーが誇る成功事例一覧。
課題解決のアイデア満載です。
