ユーザビリティを上げる【404ページ】のマイクロコピー

事例, 作り方, 基礎知識

「お探しのページが見つかりません」

Webサイトを閲覧していると、たまにこんなページに出くわしますよね。ページが存在しないことを伝える404エラーは、何かを期待してコンテンツにアクセスした人の意欲を削ぎます。しかし、マイクロコピーに工夫をすれば、ユーザーがサイトから離れてしまうのを防ぐことができます。

404ページは、リンク切れや、削除済みのページにアクセスした場合に表示されます。

このようにアクセスしようとしたページが存在していないと、ユーザーは興味関心が薄れ、そのままサイトを離脱してしまう可能性があります。

カスタム404ページ

ユーザーは自力でコンテンツに辿り着くことを望んでいる

カスタマーヘルプデスクサービスZendeskのリサーチによると、サイトを利用する上で何かしらの問題に直面した場合、全体のうちの91%のユーザーが「できるなら自分で問題を解決したい」と考えているようです。

したがって、カスタム404ページではトップページに戻るためのボタンや、または検索機能を設置するようにしてください。そうすれば、サイト訪問者は自力でコンテンツに辿り着くことができます。

Googleは「Search Console ヘルプ」の中で次のようにアドバイスしています。

Googleの有用なカスタム404ページを設計するためのヒント

  • ユーザーに対して、探しているページが見つからないことを明確に伝えます。親しみやすく平易な言葉を使用します。
  • 404ページを、サイトのその他の部分と同じデザイン(ナビゲーションを含む)にします。
  • 最も人気のある記事や投稿へのリンクのほか、ホームページへのリンクを追加します。
  • 無効なリンクを報告する方法をユーザーに提供することを検討します。

https://developers.google.com/search/docs/crawling-indexing/http-network-errors?hl=ja#soft-404-errors

探しているページが見つからないことを明確に伝える

404ページの初期設定、「404 Not Found」や「見つかりません。」のようなページを表示しているだけのサイトはどうでしょうか。


ユーザーはサイトの内部リンクや、以前ブックマークなどに保存していて再びページを見に来ようとして、既にそのURLが削除されてしまった場合などに404ページにたどり着きます。その時に急に上記のような曖昧なテキストが表示されるとユーザーは離脱してしまうでしょう。

「あなたがアクセスしようとしたページは削除されたかURLが変更されています。」というように、既にユーザーがアクセスしようとしたページが存在しないことを明確に伝えるテキストやわかりやすいマイクロコピーを用意してください。

https://www.xserver.ne.jp/bizhp/404-not-found/

その他のページのデザインと同一にする

カスタム404ページは、既存のサイトのカラーに合わせて表示させてください。カスタム404ページだけ、デザインを変えてしまうと、ユーザーは、外部サイトに放り出されてしまったような印象を感じてしまうかもしれません。

404ページは、オリジナリティを表現する場ではなく、あくまでも、意図せず存在しないページにアクセスしてしまったユーザーに対して役立つ情報を提供するための場だということを忘れないようにしよう。

Webサイトのトップページへ遷移できるリンクを用意する

ユーザーにとって役立つ情報のリンクを用意しましょう。

意図せず存在しないページにアクセスしてしまったユーザーを次のようなページに案内してください。

  • サイト内検索
  • カテゴリートップページへのリンク
  • サイトトップページへのリンク

任天堂の404ページは、サイトトップページへ戻るボタンがわかりやく表示されています。

https://www.nintendo.co.jp/404

ユーザーがフィードバックできるリンクを用意しておく

ヘルプデスクやヘルプセンターなどのリンクを用意して、ユーザーがアクセスできなかったリンクを報告できるきっかけを設けましょう。自社のサイトで認識できていなかったアクセスできない箇所を整備できます。

また、ユーザーにとっては、ヘルプデスクを通して、探したい情報を見つけられるかもしれません。

イギリスの高級スーパー、ウエイトローズは、ヘルプ&サポートのリンクを用意しています。

https://www.waitrose.com/404

カスタム404ページを制作するということ

カスタム404ページを制作することは、Google検索エンジンのクローラーが通る道を作ることです。
もし、カスタム404ページを用意しなければ、エラーが表示されるだけで、それ以上、ページが遷移できなくなってしまいます。

カスタム404ページを用意し、トップページに遷移させたり、カテゴリページに遷移させたりすることは、クローラーの巡回を促すことに繋がるのです。

また、ユーザーの行動を妨げないサイト設計をする上で、非常に大切なページでもあります。

ユーザービリティを上げる、ユーザー体験の向上も期待できますので、必要な施策として事前に対策を講じておきましょう。

色々なサイトを参考にすることが、上手なカスタム404ページを作成するコツとなります。

参考にしたい404ページの事例4選

共感・同調型 ebay

シンプルな子供の画像は、明確なメッセージと組み合わされ、ホームページやヘルプページ、トレンド情報へのリンクが張られているため、うまく機能しています。

https://www.ebay.com/n/error

ブランディングのチャンスに変える Ⅾribble

デザインプロフェッショナルのための有名なプラットフォームであるDribbbleは、魅力的な404ページを提供しています。

訪問者は「404」文字の下にあるドットを操作して、特定のカラースペクトルのデザイナーを発見することができるのです。

さらに、「404」文字を形成する各ブロックはポータルとして機能し、クリックするとそれぞれのデザイナーにつながっています。

また、伝統的なアプローチを好むユーザーのために、Dribbbleには検索バーもあり、ウェブサイト全体を簡単にナビゲートが可能です。

https://dribbble.com/404

遊び心 ウェンディーズ

この大手のファストフードであるウェンディーズは、その独特の声と遊び心のあるアプローチを、404ページを含むウェブサイトにまで広げています。

Wendy’sは404ページを、懐かしさのあるパックマンを彷彿とさせる、楽しくインタラクティブなビデオゲームに変身させました。

ユーザーは、ウェンディを終点までナビゲートするゲームをプレイして、404ページを楽しみとエンゲージメントの瞬間に変えています。

https://www.wendys.com/404

商品ページへ誘導 LEGO

遊び心のあるブランド理念で知られるレゴは、404ページでもそのトーンを維持しています。レゴのキャラクターの画像を表示し、「申し訳ありませんが、そのページは見つかりません!」というユーモラスな書き出しとともに、レゴのキャラクターの画像を表示するのです。

さらに、オンラインストアへのリンクを提供することで、ユーザーに商品の検索を続けるよう促し、効果的にユーザーをサイトに引き留めていますね。

https://www.lego.com/ja-jp/404

まとめ

404ページを工夫することで、ユーザーの離脱を防ぎ、自社をブランディングすることができます。

あなたが販売している商品やサービスを、「ページが消えてしまった」「ページが見つからない」ことと上手に関連づけて、マイクロコピーを最大限に活用し、ユニークな404ページを作ってみてください。

\ この記事をシェアする /

, , ,
前の投稿
「送信」だけのボタンは危険!CVRを改善するために欠かせない3つのポイント
次の投稿
誰も気付かないNetflixのUXに潜む欠陥


マイクロコピーメルマガ購読 
*
メニュー