Cocoon(コクーン)のカスタマイズ!404エラー画像の作り方を紹介【Aviutl】

記事内に広告を含みます

オリジナルの404ページを作る意味と作り方を紹介します。

グーグル公式からも以下の声明が出ていますね。

404 レスポンス コードを返す際に独自の 404 ページを使用すると、ユーザーの利便性を高めることができます。

グーグル クロールエラーレポートより引用

是非自分だけのオリジナル404エラー画像を作ってみてください。

大まかな作業手順は、

・背景画像の用意(ピクサベイ)
・キャライラストの用意(自作orココナラ/スキマ)
・吹き出しの用意(”吹き出し フリー素材”で検索)
・Aviutlで合成
・必要に応じてテキストの用意

です。以下で詳しく見ていきましょう。

404エラー(ページが見つかりませんでした)

404エラーとは、指定されたページにアクセスできないことを指します。

404エラーの例:
削除されたページにアクセスしたとき
ページURL(パーマリンク)を変更したページにアクセスしたとき

記事を削除したときもすぐにグーグル検索から削除したページが除かれるわけではありません。グーグル検索から完全に消えるまで、検索から来てくれたユーザーに迷惑をかけてしまいます。

デフォルトだと、

「ページが見つかりませんでした」

というそっけない1文の状態です。

エラーページにアクセスしてくれた方の直帰率や滞在率を上げるためにも、404ページに工夫を入れてみようというのが今回の試みです。

404エラーの最も多い原因

体感では、404エラーはパーマリンク(URL)を変更した時によく起こる現象です。

【ttps://melanic-game.com/archives/230〇

上記URLの黄色マーカー部分がパーマリンクです。個別ページごとのURLという感じですね。

このパーマリンクが原因で404エラーになる具体例としては、パーマリンクにカテゴリーを含むURLに設定しているときなどが挙げられます。

パーマリンクにカテゴリーを含めてしまうと、簡単にはカテゴリーの変更が出来なくなってしまいます。

そのため、パーマリンクにカテゴリーを含まないように気をつけましょう。

パーマリンクの設定については別の記事にてまとめています。

404画像の作り方

Aviutlで画像の合成をしていきます。

Aviutlは無料の動画編集ソフトです。

使用用途じゃ動画編集や画像編集など。

Aviutlを使いこなせれば有料の動画編集ソフトやフォトショップなどの画像編集ソフトも不要になるぐらい優秀なフリーソフトです。

Aviutlのダウンロードはこちら!

具合的な手順は以下の通りです。

・背景画像の用意(ピクサベイ)
・キャライラストの用意(自作orココナラ/スキマ)
・吹き出しの用意(”吹き出し フリー素材”で検索)
・Aviutlで合成
・必要に応じてテキストの用意

詳しい作業方法はこちらの記事にてまとめています。

↑の記事の方法にて、Aviutlで作った画像がこちら。

画像が出来上がったら設置をしていきましょう。

以下はWordPressの無料テーマ「コクーン」の場合の作業手順です。

その他のテーマの場合は【外観】→【ウィジェット】から変更できる場合もあります。

404画像の設定方法

コクーン 目次

【cocoon設定】→【404ページ】をクリック。

ここで画像の設定やメッセージを変更することが出来ます。

文言の例:
・ページが見つからなかったこと
・サイトマップやサイト内検索で探していた記事が見つかる可能性があること
・ブログのその他のページを見てもらえるためのアピールをすること

などを入れてみましょう。

柔らかい雰囲気を出すことで、ユーザの即離脱をできるだけ避けるのを意図しています。

設定が完了したら【変更をまとめて保存】をクリック。

これで404エラーの時に今回設定した画像とテキストが出てくるようになりました。

404画像の効果

サイトマップやサイト内検索など別の選択肢を用意しておくと、ユーザーの利便性が増えると考えられます。

デフォルトの「ページが見つかりませんでした」よりも、直帰率や滞在率が多少は向上するでしょう。

ないよりはあった方がマシというレベルかもしれませんが、是非独自の404画像を作って設定してみてください。