投稿日：2022年5月23日 | 最終更新日：2023年6月13日

画面が急にシンプルなデザインになり、文字だけの表示に。誰もが何度かは経験したことがあるのでは無いでしょうか？「404」はHTTPのステータスコードひとつで、アクセスしたサーバー上にページのデータが存在しない場合に「404 Not Found」というメッセージがブラウザに表示されます。

404エラーはどのような際に表示されるのか、サイト運営をする側はどう対応すべきかについてご紹介します。

404エラーが出てしまう原因について

404エラーが表示されるにはさまざまな原因が考えられます。

・URLの記述が間違っている

そもそも存在しないURLを表示させようとすれば、404 Not Foundが表示されるのは当然のこと。人間が操作する以上ヒューマンエラーを完全に無くすことはできませんので、URLを直接入力しようとすればタイピングミスも起こりますし、コピー＆ペースをミスすることもあり得ることです。

自社サイトのグローバルナビやサイドバーなどの内部リンクの設定が間違っていてはユーザーに悪い印象を与えてしまいますので、公開前にダブルチェックをするなど一通り確認を行うようにしましょう。

また、SNSでの告知だったり、メールマガジンの送信などにURLが間違っていて404エラーが出てしまうと修正がききませんので、注意が必要です。

簡単に修正できない状態で誤ったＵＲＬを表示してしまった場合には、メッセージ自体を取り下げる、もしくは誤ったＵＲＬから正しいＵＲＬへのリダイレクトの処理をかけるなどの対応も検討しましょう。

・過去に存在し、現在は存在しないURL

自社サイトのリニューアルに伴い、URLやディレクトリが変更になると404エラーが起こり得る原因の一つとなります。過去に存在したURLが検索エンジンの結果に残存している場合などには、後継のURLにリダイレクト処理をおこなうか、後継ページが存在しない場合にはTOPページへのリダイレクトをすることも大切です。

もしもに備えて作るべき404のオリジナルデザイン

404エラーが表示されてしまうことは決して良いことではありませんが、「404 Not Found」が表示されたとしても、サーバーとユーザーの間で正常なデータのやりとりが行われているということではありますので、ページとして存在しても問題はありません。

特に、サイト内を回遊中にエラーメッセージだけが白い背景に、黒文字で表示されるだけの画面が急に表示されてしまうとユーザー側としては戸惑いも大きいはず。

ユーザーからの心象を悪くしたり、サイト自体に対する無駄な警戒感を抱かせたりしないためにも404 Not Foundのデザインをしておくことも大切です。

404エラーデザインの例

海外のサイトや日本のサイトでもオリジナルの404デザインを作成しているサイトは沢山存在しています。ここではちょっとユニークな404ページのデザインを10個ピックアップし見ていきましょう。

・日本郵便（https://www.post.japanpost.jp/）

日本郵便が404のデザインとして採用しているのは、配送先が見つからなかった場合に実際に押印される「あて所に尋ねあたりません」スタンプのデザインを応用したもの。現実で住所が見つからないのと同様に、ＷＥＢ上の住所であるＵＲＬが見つからないことを上手く絡めて表現しています。

・ピクサーアニメーション（https://www.pixar.com/）

ピクサーは、映画「インサイド・ヘッド」に登場した喜怒哀楽のキャラクターのうち「カナシミ」をデザインに採用。情報が見つからないユーザーの心情にユーモアを交えながら寄り添う姿勢はエンターテインメントを生業としている企業だからこそのデザインと言えるでしょう。

・フェラーリ（https://www.ferrari.com/ja-JP/）

黒背景に白文字という実にシンプルなデザインですが、フェラーリのサイト全体のトーンと合致した高級感のあるデザイン。そして、「４０４」に使用されている文字フォントは、フェラーリの型番を表記する際につかわれているのと同じものを採用するなど細部にもこだわりを感じる画面です。

・ＮＡＳＡアメリカ航空宇宙局（https://www.nasa.gov/）

「あなたが探している宇宙の物質は、事象の地平面（地平線）を超えて消えてしまいました」ちょっとこのメッセージを見ただけでは何を言いたのかわかりづらいですが、理論上観測可能な最も遠い宇宙である「事象の地平面（地平線）」＝光すら到達できない宇宙の果てよりも先に行ってしまったという高尚なギャグを込めるのは非常にNASAらしい404デザインです。

・スターウォーズ公式サイト（https://www.starwars.com/）

「404」の中央の「０」の部分を作品に登場する印象的なモチーフの一つ「デス・スター」に置き換えて表現。ファン心理を巧みにくすぐる演出が込められています。

・江崎グリコ（https://www.glico.com/）

グリコのパッケージでおなじみのランナーに目が行ってしまいがちですが、よくよく見ると「404」の「4」は定番の人気商品である「ポッキー」で出来ています。細かな部分に「わかる人にはわかる」というデザイン性を込めるのも、ユーザーを楽しませる仕掛けの一つです。

・メイベリンニューヨーク（https://www.maybelline.com/）

メイクアップ用品のブランドらしく、「404」のステータスコードはリップで描かれます。しかも、一度すべて数字で描画された後「0」の部分が消え、キスマークが表示される趣向を凝らしたアニメーションになっているのも面白みを感じるポイント。

・ＺＯＺＯＴＯＷＮ（https://zozo.jp/）

ＺＯＺＴＯＷＮの404エラーは、取扱商品の豊富さをそのまま体現しているデザインです。すべて取扱商品で構成されており「NOT FOUND」すべての文字のモチーフとなっている商品はクリックで購入が出来てしまいます。

・さっぽろテレビ塔（https://www.tv-tower.co.jp/）

ステータスコードに合わせてテレビ塔の時計の時刻が「4：04」になっている写真を採用。塔の大きな特徴でもある設置当時日本初だった「電光時計」を前面に押し出すデザインは秀逸です。

・ドン・キホーテ（https://www.donki.com/）

朝から晩まで営業している「ドン・キホーテ」のキャラクター「ドンペンくん」。「そんな、ドンペンくんだって休みたいときはあるんです」と言わんばかりの404デザイン。キャラクターを持つ企業は、404のデザインにキャラを盛り込むパターンも沢山。表示されるメッセージはシンプルでも代表的なキャラクターが登場するだけで、ユーザーにも悪印象を与えずらいという効果を発揮します。

オリジナル404ページに加えておきたい要素

404という正しいステータスをクローラーに認識させるというだけではなく、ユーザーに優しいページを作るという意味では、「ただページが存在しない」と伝えるだけではない要素を加えるというのもよりサイトとしての質を上げることにつながります。

「ＴＯＰページへのリンク」というのは非常にメジャーですが、ＥＣの場合には他にも「オススメ商品」一覧の商品へのリンクを掲載するパターンもあります。また、カスタマーサポートやＦＡＱなどのページへのリンクを載せるというのも「すでに掲載されていない商品やサービスについて知りたい・聞きたい」と考えているユーザーにとっては親切な導線となるでしょう。

「ＴＯＰページへのリンク」の際、稀に自動でＴＯＰページにリダイレクトをかける設定をしているサイトも見られます。一つ注意しておきたいのは、0秒リンクでいきなりＴＯＰに飛ばされるような仕様のサイトも一部あるということ。ユーザーとしては、突然TOPに飛ばされることは困惑意外の何ものでもありませんので、数秒程度は転送まで猶予を持たせておくようにしましょう。

気を付けたいソフト404

データが無ければ「404 Not Found」、データがきちんと存在し正常な場合には「200」というステータスコードが返されます。しかし、実際はサーバー上にデータが存在していないにも関わらずステータスコード「200」が返されてしまっている状態を、「ソフト404」と呼びます。

クローラー側はステータスコードを信用しているため、仮に「データが存在しない」ページなのにも関わらず、コードでは「存在する」ということになってしまうと、クローラーとしては判断に困る「ページの現状とステータスコードの不一致」という状況に陥るのです。

親切心が仇になるソフト404

ソフト404の原因というのはさまざまではありますが、起こりやすいケースで言えばアクセスするユーザーに対する親切心が生んでしまうことがあるのです。

ECサイトなどで存在しない商品IDのページであれば「404Nof Found」を機械的に返せばそれで解決するはずですが、「404 Not Fond」のオリジナルデザインを作っていない場合、

「その商品は存在していません」といった内容のページを別で作ってしまい、「200」のステータスの状況を作り出してしまう。

ユーザーにとっては、いきなり味気ないページに飛ばされず親切に見える行為ですが、クローラーにとってはただの矛盾。このような状況の場合クローラーから「ソフト404」と判断されることがあるのです。

.htaccessの設定ミスにも注意

通常任意の404デザインを作成し、404表示させる場合には「.htaccess」のファイルに相対パスで指定する必要があります。しかし、ここが「絶対パス」になっているとステータスコードが正常に返されないため、ソフト404となってしまうので注意しましょう。

404 Not Foundまとめ

404ページが表示されないのはサイトとして理想的な状態です。しかし、表示が必要な場面で白背景で黒文字のそっけないデザインのページが表示されるのか、それともサイトのトーンに合わせたデザインが表示されるかでもユーザーの受けるイメージは大きく変わるということも意識しておきましょう。

必ずオリジナルデザインをしておかなくてはならないというわけではありませんが、デザインをしておいて決して損をするものではありません。