マーケターやIT担当者がよくトラッキングする重要な指標にアップタイムがあります。これはインターネットにアップされたウェブサイトが正常に機能し続ける時間を言いますが、どれだけ労力を費やして対策を施しても、ウェブサイトが障害を起こす時間をゼロにすることはほぼ不可能です。
まったく頭の痛い話ですが、こどうしようもない事実です。一時的にアクセス不能になっているウェブサイトをを見たときの、訪問者の反応はさまざまです。冷静に他のページへ移動する人もいれば、頭に血が上るほど怒り始める人もいるでしょう。
そのような状況でも、訪問者の気分をいくらか明るくする方法があります。それは、クリエイティブな404メッセージを作成して表示することです。そうすれば、訪問者のストレスを減らしたり、上手くいけばにっこり微笑んでもらえたりするかもしれません。
この記事では私たちが厳選した素晴らしいエラーページの例をご紹介します。これらのアイデアを参考に、皆さんもシャレの効いた404メッセージを作ってみてはいかがでしょうか。
４０４エラーとは？
404エラーとは、アクセスしようとしているウェブサイトがサーバーに見つからないことを意味する、HTTP標準のエラー・メッセージ・コードです。クライアント側でエラーが起きた場合に、すなわちウェブページが削除されたか、移動されたけれどもURLが適切に更新されていない場合、あるいはURLを間違って入力した場合などに表示されます。
ほとんどの場合、ウェブサーバーの設定を変えれば、自作の404エラーページを表示することができます。
自作の404エラーページには、ヒーローイメージや気の利いたメッセージ、サイトマップ、検索フォーム、問い合わせ先の情報などを表示するものもあります。この記事でご紹介する24の例はいずれも非常にクリエイティブで、ページを目にしたすべての人を喜ばせるものばかりです。ぜひお楽しみください。
テクニカルSEO用語辞典
〜検索順位とコンバージョン率改善のために知っておきたい用語を大公開〜
- 301リダイレクト
- 404エラー
- 504 Gateway Timeout
- XMLサイトマップ
今すぐダウンロードする
全てのフィールドが必須です。
「ページが見つかりません」の404エラーページ、クリエイティブな24の例
１）Bluegg
「とにかく笑うことが一番の薬」と言いますが、それが本当なら、この404エラーページを見ただけで、何の病気でも治ってしまうかもしれません。このページでは動画が自動再生され、そこに登場するヤギが人間のような声で叫びます。この動画はかなり有名だそうですが、ご覧になったことはありますか？これは何度見ても見飽きません。
２）Spotify
Spotifyは毎年マイクロサイトを公開して、その年に最もよく聴かれた音楽を発表します。このページで世界中の素晴らしいヒット曲のリストを眺めるのですが、実は名曲がもう1つ隠れていました。
このマイクロサイトの404ページは、ジャスティンビーバーによる2015年のヒット曲、「Sorry」に引っ掛けて作られています。なんともタイムリーで笑えますよね。
３）Cloud Sigma
クラウドサービスを提供するCloud Sigma社は、この404エラーページで私たちに企業の裏の顔を見せてくれています。このページには「junior developer's homepage（開発者の卵のホームページ）」と書かれていますが、その開発者の卵とは...真剣な顔で画面を見つめる猫なのでした。
画像クレジット：Crayon
４）CSS Tricks
ウェブサイトの表面を覆うカバーを剥ぐと、中から何が出てくるでしょうか。CSS Tricksによるこの404エラーページは、そのようなコンセプトを基に作られています。面白いアイデアであると同時に、同社のブランドが上手く表現されています。
５）Good Old Games (GOG)
表面のカバーを剥ぐと...今度は銀河が出てきました。こちらはGOGがネイティブクライアントを提供するビデオゲーム、GOG Galaxyに引っ掛けて作成されています。このゲームに登場する小さなキャラクターが、エラーを報告したい場合の方法を訪問者に教えているところが可愛らしいと思います。
６）Magnt
Magntはこの可笑しなエラーメッセージで、404ページが表示されたのはウェブサイトの何かが壊れたせいかもしれないし、あるいは入力を間違えたからかもしれないと、真面目に冗談を飛ばしています。そして、ベン図の画像の隣にベン図に関する詳しい説明を入れるほど冗談に徹しています。
７）Bitly
TwitterのFail Whaleをご存知ですか？これと同じく、Bitlyも同社のマスコットであるPufferfishをエラーページに登場させています。お腹を上に向けて漂ってますね。かわいそうに...
８）Daniel Karcher Film Design Studios
このショートムービーのような404エラーページは、フィルム制作会社であるDaniel Karcherにぴったりです。しかも、同社が制作したLOSTというテレビ番組に似せて作ったアニメーションを表示しています。画面上部の電光掲示板には「Please proceed to main level（メインフロアにお進みください）」とあり、ここをクリックするとホームページに移動します。
９）NPR
NPRのエラーページは、一見して特に面白そうではありませんが、内容を読んでいくと、行方不明になった人や物に関する興味深いストーリーがいくつか紹介されていることがわかります。たとえば行方不明になった女性飛行家のAmelia Earhart氏の記事や、バンクーバーのビルの屋上に巨大なウォーリーのポスターを貼り、Google Earthを使って探す記事へのリンクが表示されます。これらのストーリを読めば、エラーメッセージを見たときの寂しい気持ちが少しは紛れるかもしれませんね。
１０）Blizzard Entertainment
よく見ると、このページに表示されている画像は、Blizzard Entertainmentのホームページ画面が破壊されたところです。そこに「Grats.（おめでとう）」の文字があり、その下に「このページは存在しないか、あるいは何かひどいエラーが起きています」と書かれています。シンプルですがいかにも格好良く作られていると思います。
１１）Tin Sanity
私たちはこのTin Sanityの404ページを見て、笑いをこらえることができませんでした。血まなこになったカップが叫びながら画面を行ったり来たりして走り回るアニメーションに、低い音で鳴り響く音楽が合わさり、可笑しさを助長しています。この記事の他の404ページもそうですが、Tin Sanityもまた、404エラーがそれほど大きな問題ではないことを、ユーモアを使って伝えようとしています。
１２）OrangeCoat
いつかエラーページを作ることがあれば、このようにユーザーを楽しませながら、同時にサポートまでできてしまう画面を表示してはいかがでしょうか。Dear happy internet travelerというフレンドリーなタイトルの下に、このエラーページが表示された理由を調べることのできる綺麗なフローチャートを表示しています。
１３）Astuteo
ウェブデザインやデジタルマーケティングを手掛けるAstuteoが、404ページのテーマにカサブランカ（1942年製作のアメリカ映画）を選んだ理由はわかりません。ですが、これほど有名な映画を使うのですから、エラーページを見ることになった多くの人が興味を持ち、また喜んでくれるはずです。
１４）BrandCrowd
このエラーページは綺麗なイラストだけでなく、気の利いたメッセージも魅力的です。壁に貼られた紙に書いてあるのは、アメリカのヒット曲（Semisonicの「Closing Time」）の歌詞のパロディです。
１５）Cooklet
シンプルで楽しいCookletのエラーページです。何を食べ損ねたのか気になります。
１６）GitHub
このエラーページのメッセージは、スター・ウォーズ エピソード4でオビ＝ワン・ケノービがストームトルーパーに暗示をかけるときのセリフ「These aren't the droids you're looking for（ここにはお前の探しているドロイドはいない）」に引っ掛けたものです。この有名なセリフを、GitHubは404エラーページに使っています。
１７）Grant Burke
グラフィックデザイナーであるGrant Burkeは、フリーランサーである自らのデザインスキルを404ページでも宣伝しています。シンプルですが、「missing link = milk」のシャレが効いた楽しくて粋な画像です。
１８）Moveline
引っ越し業者であるMovelineの404エラーページですが、メッセージが秀逸です。引っ越し準備で大変なときに、エラーページなどを表示して申し訳ないと丁寧に伝えています。また親切にも、問い合わせ先の情報まで表示しています。
画像クレジット：Crayon
１９）LEGO
この404エラーページに言葉はいりません。LEGOで作られたキャラクターがすべてを物語っています。「お願い！プラグを挿して」と話しかけたくなります。
２０）Hoppermagic
HoppermagicのエラーページもLEGOと同じように、ページが表示されない理由（作り話ですが）を画像で示しています。同社のロゴにはウサギの絵が使われており、それと上手く引っ掛けています。
２１）IconFinder
探しているウェブページが宇宙を彷徨っているという、シンプルで楽しいエラーページをどうぞ。このアニメーションでは、宇宙服を着た絵文字が宇宙を漂い、ページを表示しているあいだにますます遠くへ離れて行ってしまいます。
２２）Hot Dot Productions
このエラーページは、Hot Dotの「the intersection of new technologies and design（新しいテクノロジーとデザインが交差する場所）」というタグラインを実に上手く表現しています。何百という小さな赤い点で作られた404の文字が、カーソルの動きに反応して向きを変えます。目を奪われるほど美しく、Hot Dotのデザイン力が非常に効果的に示されています。
２３）HomeStarRunner.com
フラッシュアニメの漫画シリーズを制作したHomeStarRunner.comは、非常に面白い404エラーページを何年も前からシリーズで作成しています。最新のバージョンでは漫画シリーズのキャラクターが登場し、その漫画にそっくりなシーンが表示されます。音声を有効にすると、ページが表示された直後に、Strong Badという名のいつも何かを叫んでいる登場人物が「404'd!」と叫ぶ声が聞こえます。
２４）HubSpot
最後は私たちのエラーページです。HubSpotはこのようなページで、ウェブサイトに何らかの問題があることを訪問者に伝えています。可愛らしく親しみやすい、そして有用であるというHubSpotのブランドボイスを可能な限り表現することを目標に、このページは作成されています。
他にも企業のクリエイティブな404エラーメッセージをご存知でしたら、下のコメント欄でお知らせください。
編集メモ：この記事は、2015年12月に投稿した内容に加筆・訂正したものです。Rachel Sprungによる元の記事はこちらからご覧いただけます。
