オリジナル404デザイン【Blogger】
基本的にあまり表示されないエラーページではありますが、Bloggerデフォルトの404はつまらないので、QooQの時と同じくJetTheme版のオリジナルの404ページを設定してみました。
404ページとは
そもそも404ページは、削除されたページや間違ったURLなど「存在しないページ」にアクセスした時に表示されるエラーページです。
定番の文章
まず「404 Not found」「お探しのページは見つかりません」など、今アクセスしたこのページはエラーページであることを明確に伝える必要があります。
またいくつかアクセスしてみたところ、他サイトでは以下のような文章が定番のようでした。
アクセスしようとしたページは既に削除されているか、移動された可能性があります。お手数ですが、下記リンクからサイトTOPへ移動してください。※ブックマーク等をご登録されている方はお手数ですがURLの変更をお願いいたします。
他、表示するべき内容
ブログの場合は、どのページでも共通デザインでヘッダーやフッターなどが表示されるのであまり心配はいりませんが、404ページも他ページとデザインをあわせて「自分がまだ目的のサイト内にいること」が分かりやすい方が親切です。
その上で、サイト離脱率を低下させるために、
- おすすめコンテンツへのリンク
- サイトマップへのリンク
- 問い合わせへのリンク
- サイト内検索
など「アクセスしてくれたユーザーが本来目的としていた情報を探すにはどうすればいいのか」を考え、手助けできるような内容にするとよいとされています。
画像を入れる
画像については必須ではありませんが、この部分がオリジナル404として「らしさ」で他と大きく差がつく部分ではないでしょうか。どんな画像を表示させるかで、そのサイトへの印象も変わるかもしれません。
Bloggerのデフォルト404
Bloggerの場合は、お使いのテンプレートにカスタマイズ404が設定されている場合を除いて、テンプレートで設定されたヘッダー・フッター・サイドに加え、記事部分に「このブログ内でお探しのページは存在しません」と1行表示されます。
この1行があるので、オリジナル404の設定をしなくても特に問題はありませんが、画像を入れたい・表示される文章を変えたいという場合は、カズタマイズが必要です。
カスタム404の設定
Bloggerでは、簡単にオリジナルの404ページを設定することができます。
Bloggerのどのテンプレートをお使いの場合でも、基本的にはBloggerのサイドメニュー：歯車マークの 設定 ＞ エラーとリダイレクト ＞ カスタム 404 をクリックすると、小窓が開くのでそこにHTMLを書き込みます。
テンプレート：JetThemeの場合
JetThemeには404の設定があるので、記事タイトルにあたる h1 だけはテンプレート本体のHTML編集が必要です。以下を検索してお好みで書き換えてください。
<article id='page-content'>
<header class='entry-header'>
<h1 class='entry-title mb-4'>404 Not Found</h1>
</header>
<div class='entry-text text-break mb-5'>
<data:navMessage/>
</div>
</article>
それ以外（記事本文）の部分は、カスタム404の小窓にテキスト入力（HTMLコードの必要なし）すると、<data:navMessage/> の部分に入るので、実際に表示させた時は、以下のようになります。※前後のタグは既設
<div class="entry-text text-break mb-5">
カスタム404に入力したテキスト
</div>404ページにテキストだけでなく画像やリンクを入れたい場合には、個別ページなどで通常の記事を書くときと同じようにページを作成し、HTMLビューで表示されたソースコードを丸ごと小窓へコピペすればOKです。
テンプレート：QooQの場合
QooQは404の設定はありません。Bloggerデフォルトの1行が表示されるだけです。
ヘッダー・フッター・サイドの表示があるので、出来上がったHTMLをそのまま貼り付けても形にはなりますが、記事タイトルほか他ページとデザインを揃える場合には手を加える必要があります。※<h1>などの設定がないため
<h1 id="single-header-title">ページが見つかりません</h1>
<div class="post-body" id="single-content">
ページで作ったHTMLをここへ
</div>
タイトル：h1 （例：ページが見つかりません）はお好みでカスタマイズしてください。
こちらも画像などを入れたい場合は、個別ページなどで通常の記事を書くときと同じようにページを作成し、HTMLビューで表示されたソースコードを「ページで作ったHTMLをここへ」の部分に入れて下さい。
その後、<h1>も含めて小窓へコピペです。
8-stars.blogspot.com当ブログの404
画像や文章・リンクなど、作成したデザイン（HTML）をカスタム404へ追加した、当ブログの404ページはこんな感じで表示されます。※記事公開時の404ページ
※ https://8-stars.blogspot.com/404 で実際のページを見ることができます。
参考404デザイン
以下、おもしろいデザインの例としていくつかピックアップしてみました。遊び心のあるエラーページは、わざわざアクセスしたくなります。
サンリオ
キティちゃんのシルエットが表示されています。キティちゃんはここにはいないのですね。
日本郵便
リアル郵便物の宛先不明のスタンプが押されたデザイン。これは秀逸！
ドラえもんチャンネル
ゼロのまんなかに、ドラえもんの鈴がデザインされています。
タカラトミー
リカちゃんあたりが出てくるのかと思いましたが、黒ひげが飛び出てきました。私だったら、プラレールの青いレールで404をデザインしてもいいかな～などと妄想がはかどります。
東映
東映の映画見たことありますか？映画オープニング映像の「荒波ザッパ～ン（通称：荒磯に波）」がデザインに使われていました。
ライオン
ライオンちゃんが案内してくれます。シンプルですがわかりやすいページです。
SUUMO
CMで同じみのスーモ君がションボリと1人（1匹？）でブランコにのっています。迷子なのかな？
どこもユニークな404で「あぁ、あそこの会社のあれね！」というのがすぐわかります。有名なオリジナルキャラのいるところはデザインするのに困りませんね。
もちろん可愛くておもしろいだけでなく、統一されたデザイン・トップページへの案内・検索窓の設置など、どこも参考になる404ページです。
最後に
企業規模にかかわらず、存在しないURLへのアクセスを強制的にトップページに転送していたり、そもそもオリジナル404を作っていない（サーバーの超シンプルな英語だけの404ページが表示される）ところもありました。
もちろん404ページを作るうえで「ウケ」を狙う必要がありませんが、サイトを見に来る人への対応が、いろいろ違うものですね。
