楽しくてクリエイティブなWordPress 404ページデザインのアイデアと実例集

「404」という数字に心当たりはありますか?インターネットを長く利用している人なら、この数字を目にした経験は一度や二度ではないはずです。リンク切れ、URLの入力ミス、URLの変更、削除済みのページなど、さまざまな理由でサイトがユーザーのリクエストに応じられないときに表示されるのが404ページです。多くのサイト運営者にとって悩みの種である一方、これをクリエイティブな表現の場として活かし、驚くほど楽しい仕上がりを実現している事例もあります。

404ページとは何か

サイトを運営している側にとって、404ページはビジネス上好ましくない存在です。このページが読み込まれるたびに、訪問者を一人失う可能性があるからです。同時に、それはサイトのメンテナンスが十分に行われていない証拠でもあります。

ここで、ユーザーの視点に立って考えてみましょう。リンクをクリックしたら「お探しのページは存在しません」という404ページにたどり着いたとき、あなたはどうしますか?ほとんどの人はタブを閉じて、別のリンクへと移動してしまうでしょう。ただし、そこにとどまる理由が提示されない限りは。

つまり、訪問者を逃したくなければ、単なるエラーメッセージ以上の内容を404ページに盛り込む必要があるのです。

ドナルド・ノーマンは著書『エモーショナル・デザイン』の中で、優れたデザインとは「どんな気持ちにさせてくれるか」「何をする手助けをしてくれるか」「自分について何を語ってくれるか」だと述べています。この原則をWebデザインに当てはめると、成功する404ページは次の3つの要素を満たすべきです。

• 訪問者にポジティブな印象を与える – ユーモラスな言葉や画像で訪問者を楽しませたり、美しいビジュアルで驚かせたりすることができます。404ページにたどり着くことが、トラブル遭遇ではなく、イースターエッグを見つけたり宝くじに当選したりするような「予想外だけど得した体験」になるよう仕上げましょう。
• 訪問者の次のアクションを後押しする – 404ページはちょっとしたプロモーションの場としても活用できます。人気記事へのリンクや、訪問者にぜひ見てほしいサイト内の他のページへの導線を設置しましょう。加えて、検索ボックスとリンク切れ報告機能を用意しておけば、問題の修正にも役立ちます。
• サイトの個性を伝える – ブランディングと個性は、インターネット上での信頼を築くうえで重要です。だからこそ、404ページをブランドイメージを伝えるもう一つの機会と捉えましょう。世界に向けて発信したいイメージと調和のとれたデザインを心がけてください。

WordPressで404ページを作る方法

WordPressで404ページを作成する最も簡単な方法は、プラグイン「404page」を利用することです。このプラグインを使えば、任意の固定ページをカスタム404ページとして設定できます。ページを作成・カスタマイズし、それを404ページとして指定するだけで完了です。

WordPressでは自由にテーマを選べるうえ、多彩なページビルダーを組み合わせれば、思い描いた通りのページが実現できます。つまり、作れる404ページのバリエーションは事実上無限大です。

参考にしたいクリエイティブな404ページ実例

WordPressサイト向けのオリジナル404ページづくりを始める前に、こちらのユニークな事例からインスピレーションを得てみてはいかがでしょうか。

Ford(フォード)

自動車メーカーのフォードは、道路で「404」を描き、行き場なくぐるぐると走り続けるアニメーションの車を巧みに表現しています。

Roman Menshikov

孤独な雰囲気漂うビジュアルを活かし、「道に迷った感覚」を見事に表現した404ページのコンセプトです。

Derek Clark

写真・フォトグラフィー系のサイトにぴったり合いそうな404ページのコンセプトです。

GigMasters

ショーやパフォーマンスを扱うサイトらしく、忽然と消えたページをマジシャンで表現。ページ設計にかなりの工夫が凝らされています。

The Movie Nerd

このサイトは404ページをリクルートページとして転用しています。「お探しのものが見つかりませんでしたか?だったら、私たちのために書いてみませんか?」という趣旨です。

I Love Icons

これはどこ?あれは何?404っぽい…。迷子になっちゃった?

Brendan Pittman

客席には誰もいない。「そもそも誰もここにいるはずがなかったのかもしれない。あなたは迷子です。ホームへ戻りましょう」——音楽関連サイトに最適な404ページのコンセプトです。

Mitchell Geere for Kiss.com

パーティーはどこ?残念ながら、この404ページにはありません。

Lego(レゴ)

レゴのサイトを象徴するものといえば、やはりレゴのキャラクターたちしかありませんよね。

Umbro(アンブロ)

スポーツ関連企業としてのアイデンティティを守るため、アンブロはスポーツテイストの404ページを作り上げました。

IMDB

映画データベースサイトらしく、映画にちなんだ404ページを展開。ページを再読み込みするたびに、異なる映画の名台詞が表示されます。

Dilbert(ディルバート)

面白い404コミックストリップを掲載した404ページ。スコット・アダムスが先に生んだのは、漫画なのか、それともこのページなのか?

Mark Dijkstra

シンプルさが時に大きな力を発揮する好例です。ページ自体は簡素ですが、完成度は見た目以上に高いものがあります。

magnt

Magntは責任を一身に負いたくない様子。「あなたのタイピングミスも一因ですよ」と、ユーザーにも少し責任を負わせるユーモアある仕掛けです。

Blue Fountain Media

パックマンで遊んじゃいましょう。消えたページ?何の話ですか?

Huwshimi

なぜ忍者なのか?なぜダメなのですか?

Wearespry

いやいや、家には帰りたくない!「ママ、これ飼ってもいい?」といった遊び心あふれるデザインです。

NotFound.org

どんなWordPress 404ページを作ればよいか迷っているなら、エラーページを社会貢献に役立てるという選択肢もあります。NotFound.orgは、行方不明の子どもたちの捜索を支援する団体です。参加を決めれば、あなたの404ページには常に最新の行方不明児童情報が自動的に表示されます。情報を拡散することで、苦境にある子どもたちが見つかる確率を高めることができるのです。

今回ご紹介したのは、ほんの一部にすぎません。世の中には数え切れないほどのクリエイティブな404ページが存在し、すべてをここに掲載することは不可能です。あなたのお気に入りの404ページがあれば、ぜひコメント欄で教えてください。

画像クレジット:Jonathan Patterson