エラー（404）ページ 10の例

これらの404ページの例は、デザイナーが単純なコンピューティングエラーをブランド化されたユーザーエクスペリエンス（UX）に変える方法を示しています。

初期のパーソナルコンピュータは、RAMが64k以下のモデルでした。プログラマーは物事をシンプルにする必要がありました。そこで、プログラムの機能を分類するシステムを開発され、入力エラーはクラス400に割り当てられました。

• 400 Bad Request. 入力の構文が間違っています.
• 401 Unauthorized. ユーザー名とパスワードがないとアクセスできません。
• 403 Forbidden. 禁じられています。ユーザーはファイルにアクセスする権限を持っていません。
• 404 Not Found. ユーザーが存在しないURLを入力またはリンクしました。

昔は、ユーザーは正確なURLを入力する必要がありました。例えば、Yahoo Financeの場合だと: https://www.finance.yahoo.com

URLを入力する際にキーボードを入力ミスをしてしまうと、エラーコード400または404が表示されました。

最近のブラウザでは、www.finance.yahoo.com や finance.yahoo.com のような省略されたアドレスを入力することができます。実際には、上の例のような構文で検索バーに完全なアドレスを入力すると、ブラウザはリダイレクトします。 なぜでしょうか？それは、HTTPを使った古い構文だからです。更新されたサイトは、HTTPSを使ったより安全なURLになっています。最新のブラウザでは、自動的に修正されます。

404エラーをランディングページにして、ユーザーにウェブサイトの継続利用を促すことができるようになりました。404ページのデザインは、ユーザーが離脱しないようにする必要があります。

使用する要素としては、以下のようなものが考えられます：

• ホームページやその他の有用なページへのハイパーリンク
• 検索バー
• サイトのブランドを反映したグラフィック要素
• ブランドの声でユーザーに伝える簡単なメッセージ

これらの404ページの例では、さまざまなブランドがこれらのUX要素をどのように使用しているかを見ていきます。  

404ページ 例：ホームページリンク

UXPin

まず、弊社の404ページを見てみましょう。

ご覧のとおり、シンプルなデザインにしています。宇宙をテーマにしたグラフィックの周りには、たくさんのホワイトスペースがあります。メッセージはシンプルで、「キャプテン！どうやら間違った惑星に向かっているようです！」というシンプルなメッセージです。

CTA（コール・トゥ・アクション）ボタンを設置して、ユーザーをトップページに誘導しています。

Google

Googleの404ページも非常にシンプルで、ホワイトスペースが多く使われています。 “リクエストされたURLは、このサーバーでは見つかりませんでした。情報は以上です。”

壊れたロボットのグラフィックは、ハイテクブランドを反映しています。CTAはなく、マウスオーバーして初めてGoogleのロゴがホームページへのリンクであることがわかります。

UXライターの多くは、CTAを省くことは大きな間違いだと言いますが、ほとんどの場合はその通りです。忘れてはいけないのは、訪問者にサイトを使い続けてもらいたいということです。

Googleは例外で、訪問者が必ず戻ってくることを知っているからです。

404ページ 例：有用なページリンク

Angi

Angiの404ページは、他の有用なページへのリンクがたくさんあるホームサービスのコントラクターサイトです。

ユーザーへのメッセージは端的です：

“まずい、これは厄介だ…”　（現在は”Something went wrong（何かが変だ…）”）

“お探しのページは、移動、削除されたか、存在しないようです。ご不便をおかけして申し訳ありません。” です。

CTAは、提案されたページへのリンクのリストになっています。

フッターには、ニューヨーク、シカゴ、ロサンゼルス、ダラスなどの大都市圏のサービスを探すためのリンクがあります。その他の便利なリンクもフッターにあります。

Angiはすべてを “above the fold “にしています。つまり、どのリンクに行くにもスクロールする必要がないのです。

Starbucks

Starbucksの404ｐページでは、かつてカップがあった場所にコーヒーリングがあるというイメージが、そこにないページのメタファーとなっています。

このページでは、何が悪かったのかを説明し、次に何をすべきかを提案しています。

訪問者がリンク切れを報告するためのリンクも用意されています。

Glassdoor.com

Glassdoorの404ページを見てみると、人気のある求人情報サイトがいくつかの行動を提案しています。

• 求人情報を検索する
• 企業の従業員レビューを読む
• 社員の給料を見る
• インタビューの質問と回答を見る
• 働きがいのある会社のランキングを見る

404ページ 例：グラフィック重視

eBay

冬用コートを着てフードを目深にかぶった子供の写真が、eBayの404ページの焦点となっています。

“あらゆる場所を探しましたが”

“このページは行方不明のようです。それでも助けが必要な場合は、ヘルプページをご覧ください。”

下にあるのは、eBayのホームページにアクセスするためのCTAボタンです。

ページの下部には、トレンドのお得な情報を掲載したスクロールボックスがあります。

Lego

この404ページにアクセスすると、『レゴ・ムービー』のエメットが表示されます。彼は、「すべてがまだ素晴らしい」と言っています。

404ページ 例：エレメントのローテーション

Amazon.com

Amazonの 404 ページ は”Amazonの犬 “の写真とともに上部の検索バーを使って、検索するか、ホームページのリンクをクリックするかを提案しています。犬の写真をクリックするとアマゾンの犬にやさしい職場に関するニュースページにリンクしています。

ページを更新すると、別のアマゾンの犬の写真が表示されます。何度か更新すると、ランダムにたくさんの犬の写真が表示されます。404ページのために何匹いるのかはわかりませんが、7,000匹以上の犬がアマゾンで「働いて」います。

Marvel Comics

Amazonと同様に、Marvelも複数のバージョンの404ページをローテーションしています。これらのページでは、マーベル・コミックの世界の画像が表示され、次のようなメッセージが表示されます：

• “プロトコルが見つかりません…既存プログラム…”
• “ヒドラがこのページを攻撃中！”
• “$#&%、壊したな！冗談だよ”
• “ヌアツの目でさえ君の要求を見ていない”
• “ヒドラはシールドのデータベースから このページを盗んだんだ！”

IMDB

International Movie Database (IMDB)の404ページもローテーションしています。IMDBはブランドを維持し、映画の引用を提供することで、ファンに親しみやすさを提供しています。

• “ウェブページ？私たちが行くところにはウェブページは必要ない” – エメット・ブラウン博士、「バック・トゥ・ザ・フューチャー」
• “いつの日か見つけよう…ウェブサイトのつながりを” – カエルのカーミット、「マペット・ザ・ムービー」
• “確かに、あなたは本気ではないでしょう。” “私は本気よ そして、シャーリーと呼ばないで” -テッド・ストライカーとラムネ、「エアプレーン」
• “我々がここで得たものは…コミュニケーションの失敗だ” – キャプテン、「クール・ハンド・ルーク」
• “ページが見つからない？考えられない！” – ヴィズィーニ、「プリンセス・ブライド」
• “ここはもうカンザスではない気がする” – ドロシー、「オズの魔法使い」

UXPinで 404ページ のプロトタイプを作成する

UXPinは、フルスタックのUX/UIデザインプログラムで、どんなプロジェクトでもコンセプトから製品発売までを1つのアプリで実現できるツールを提供します。

404ページをデザインする際には、プラットフォームから直接、コラボレーターや関係者とリアルタイムで共有することができます。コラボレーターや関係者はコメントを加えることができるので、何度もメールをやり取りする必要がなく、イテレーションをスムーズに進めることができます。今すぐ無料トライアルを開始しましょう。