デザイン

デザイン

クリエイティブな404(Not Found) ページデザイン12選

LINE25

Line25 was built in March 2009 as a place to share web design ideas and inspiration through articles, tutorials and examples of stunning site designs.

本記事は、12 Highly Creative 404 Page Examples
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

122 views

読了時間 : 約5分42秒

ロイヤルカスタマーを創出することはそう簡単なことではありません。このブログでは、売上の向上、ロイヤルカスタマーの基盤を作る最新の方法を紹介します。その方法とは驚くことに、404ページの活用です。以下は、有益で優れたデザインの404ページを集めました。

 

 

エラー404とは何か?

404ページが表示されるのには様々な理由があります。リンク切れやコンテンツの移動が原因である場合もあれば、トピックや見出しの変更の為にパーマリンクを変えたことが原因である場合もあります。

 

一般的に404ページはユーザ体験、ロイヤルカスタマーや人々の商品に対する関心を低下させると言われています。しかし、クリエイティブな404ページはクライアントや、顧客を引き付けます。では実際にクリエイティブな404ページ12選を見ていきましょう。

 

1. LEG – フレンドリーなエラーページデザイン

 

 

レゴはその商品とブランド力でよく知られています。レゴの404ページはさりげないメッセージによりオーディエンスを引きつけています。これは広く知られている戦略です。また、レゴでは専門的なフレーズより誰もが理解できるようなフレーズ – “すみません。ページが見つかりません。でも心配しないで、そんなの関係ねぇ!”を用いています。ページが見つからないということを知らせるだけでなく、顧客の心的イメージへ関与します。

 

 

2. List2 – 404ページ上のオプション

 

 

 

List25の404ページは他の404に比べて、優れています。エラーページから、検索、問題の報告もしくはホームページへ戻ることができるからです。時に、トピックやページ名を打ち間違えたことが原因で404ページにたどり着くことがありますが、この場合ドロップダウンで再検索することが可能です。そうでなくても、問題を直接本部へ報告することができます。この方法は信頼を高めるだけでなく他社に比べより良いサービスを提供することを確実なものにします。

 

 

3. Brett Terpstr – シンプルな404デザイン

 

 

ほとんどのブランドは404ページを制作する際、風変わりなものにしたいがためにやり過ぎてしまいます。Brett Terpstraのシンプルな404デザインはブランドを魅力的、風変わり、ブランドのアイデンティティーに沿ったものにします。この404ページでは、エラーページから類似の関連ページへいけるようにリンクが表示されています。その結果、顧客は提案されたリンクから必要としていた情報を見つけることができるかもしれません。そうでなくても好奇心からクリックすることでしょう。ユーザーの興味を引き続けることができます。

 

GoogleのCustom Search APIを使うことで、検索キーワードに最もマッチした結果を得ることができます。この方法が手っ取り早くエラーページに対する答えを教えてくれます。Googleデベロッパーコンソールも必要となってきます。

 

 

4. 9Ga – アプリをダウンロードさせる

 

 

 9GagのWebサイトはアプリをダウンロードしてもらうことを目的としています。背景のGIF画像はブランドのスタイルに合っています。人々にメッセージを簡単に伝えるにはミニマルデザインであるべきです。オプションが沢山あることは混乱を招きます。行動を促すフレーズは最大でも2つに止めましょう。選択肢が沢山ありすぎると顧客の流出につながります。

 

 

5. IMD – 風変わりな404デザイン

 

 

IDMBは映画のレビューを投稿することができるWebサイトです。404ページでは映画の引用を一部紹介し、その映画のページへ行く、もしくはホームページに戻ることができる仕組みになっています。ブランドを強化するだけでなく、ブランドを構成する要素で楽しむことができます。ページの訪問者がブランドのアイデンティティーを忘れてしまわないためにも、ブランドの知名度を保つことは必要不可欠です。引用を紹介する際、ブランドやページに関連したものであるよう注意が必要です。

 

 

6. Marve – 究極の404ヒーロー

 

 

マーベルはスーパーヒーローを生み出す究極の集団であり、素晴らしいコミカルなグラフィックコンテンツを所有しています。404ページも素晴らしく、ページをリフレッシュするたびに新しいイラストが表示される仕組みになっています。404ページはコアなファンのために作られたようなものです。もし、マーベルのような複数の404ページを制作するのであれば、コンテンツが新しく、風変わりで、魅惑的であるものであるよう心がけましょう。同時に、ページがブランドのアイデンティティーに関連づいている必要もあります。

 

7. Omle – 卵の悪臭ページ

 

 

Omeletはクリエイティブな広告会社で、Webサイトのいたるところに(404ページを含む)ブランド名とチャンネルを表示しています。エラーページにたどり着くと、ひび割れが表示され最後に”このページは卵の悪臭がします”というメッセージが表示されます。顧客にエラーを知らせる良い手段であると共に、この風変わりなアプローチは顧客の気をひきつけます。カラーテーマやグラフィックスタイルがブランドの方向性を示し、確実かつクリエイティブなアプローチと言えます。

 

 

8.MantraLab – 家に帰るまで…秒

 

 

 

Mantra Labsの404ページはクリエイティブかつインタラクティブなものになっています。エラーページにたどり着いた際、エラーページへ誘導するパワーバーのアニメーションが表示されます。その後、”酸素が足りなくなってきていますよ”といった素敵なメッセージが表示されます。これはブランドの美学、アイデンティティーそして商品を方向付けています。さらに、一度”お家に帰るまで10秒前”タイマーが切れると自動的にホームページに飛ぶ仕組みになっています。この404ページは顧客の興味を保ち、ブランドを強化することを確かなものにします。

 

9. Uen- インタラクティブな404

 

 

この404ページの面白いところは、ホットドックが非現実的な背景の中無限ループを走り抜けているところです。カーソルを使うことによりホットドックを動かすことも可能です。ここはでは、ホットドックのイメージがこの傑作を作り出しているわけではありません。実際にページを見てみると、イメージはレイアウトとアニメーションの付加価値でしかないことがわかります。顧客を巻き込むということがこの404ページでの戦略です。

 

10. GymBo – シンプルかつ効果的な404

 

 

GymBoxはその名前の通り、イギリス発祥のジムのデジタルプラットフォームで、クラスや健康状態に応じたトレーニングの受講登録をすることができます。GymBoxの4040ページでは風変わりな集団クラスのイメージと共に”間違った場所にいます”というメッセージが表示されます。デザインへのアプローチが興味深く、デザインそのものはシンプルですが、太字の書体でエラーと記されることがメッセージとイメージをよりキャッチーなものにしています。この戦略は、ページ自体が不具合でも風変わりな背景に興味をそそられることで、ページにとどまり、Webサイトの他のページも見たい気持ちにビジターをさせるのです。

 

 

11. Slac – 最高のデザイン

 

 

2019年にロゴが新しくなってからWebサイトも新しくなり、それに伴い404ページも可愛らしいデザインになりました。虹がかかり、蝶、小さなニワトリ、子豚が動き回っているエチオピアのような風景を楽しむことができます。他にもカーソルを動かすことで動物がリアクションするようになっています。これらの機能はブランドのコンセプトから少しずれているかもしれません。ここで一番重要なのは、表示されるエラーメッセージです。エラーメッセージはこのエチオピアのような背景とシンクロしています。いかに背景とメッセージが上手く融合しているかどうかが重要なのです。

 

 

12. Pixar – あー!もう泣かないで

 

 

ピクサーは世界中一のアニメ制作会社です。数々のヒット作から見覚えのあるキャラクターの顔を、404ページに表示するのがふさわしいでしょう。ピクサーは映画インサイド・ヘッドのキャラクターであるカナシミのイメージを活用することでエラー404に出くわすことの悲しみを表現しました。しかし、一番注目したいのは引用部分 – “あなたが探しているものは、長期記憶の中で亡くなったのかもしれません” であり、映画の中からエラーページにふさわしいフレーズを引用したのです。

 

これらは、クリエイティブな404ページのほんの一部分に過ぎません。これらの有名企業がいかに独自のフックを用いて、最大限インタラクティブな404ページを制作しているか目の当たりにすると頭が真っ白になるでしょう。しかし、自身の商品やサービスから幾つかの要素を選択することで404ページを際立たせることは可能です。それらを選択する際は、アイテムがUSP(売り)であるか、一番売れているものであるようにしましょう。これらの戦略は顧客の心に寄り添い忠誠心を掴み取ることを可能にするでしょう。

 

404ページはデフォルトにされたりとその存在を見過ごされがちですが、ただのエラーページであってもブランドのイメージやアイデンティティーを表すものであるということを忘れてはいけません。404ページとは、ロイヤルカスタマーを増やしビックネーム企業へと導くブランディング戦略の一種であることを理解するべきです。

おすすめタグ