WordPressで404ページのテンプレートを改善する方法（2つの方法）

WordPressのウェブサイトをデザインする際、最も見落とされがちでありながら重要な要素のひとつが404エラーページです。多くのサイトオーナーは、よく練られた404ページがユーザー維持とエンゲージメントのための強力なツールになることに気づいていません。

私たちの経験では、デフォルトの404ページはチャンスを逃すものです。私たちは、カスタマイズされた404ページが、潜在的な出口を価値あるコンテンツに誘導するチャンスに変えることができることを目の当たりにしてきました。

この記事では、WordPressの404ページテンプレートを改善する2つの効果的な方法をご紹介します。

なぜWordPressの404ページテンプレートを改善するのか？

初期設定のWordPressテーマを含め、ほとんどのWordPressテーマには基本的な404テンプレートが付属しています。

例えば、次の画像はThemeIsle Hestiaの404ページです。

これらの初期設定のテンプレートのほとんどはシンプルで、サイトのコンテンツは表示されません。つまり、404ページに辿り着いた人はWordPressサイトから離脱する可能性が高くなり、直帰率を上げることになります。

これはWordPressのSEOにとって悪いニュースであり、検索エンジンのランキングであなたのサイトが表示される場所に影響を与える可能性があります。

とはいえ、独自のコンテンツとブランディングで404ページを作成するのは良いアイデアだ。

カスタム404ページは、人気の投稿やオンラインショップの商品など、コンテンツを宣伝するのに最適です。また、ソーシャルメディアのプロフィールへのリンクや、最新のコメントなどをハイライトすることもできます。

もしインスピレーションをお探しなら、404エラーページのデザイン例を集めてみましたのでご覧ください。

それでは、WordPressで404ページのテンプレートを改善する方法を見ていきましょう。以下のクイックリンクから、使いたい方法にすぐにジャンプできます：

方法1：WordPressでコードなしでカスタマイザー404ページを作成する（推奨）

サイトの404ページを改善する最善の方法は、SeedProdを使用することです。

SeedProdはWordPressのための最高のランディングページビルダーです。コードを書くことなくWordPressページを作成、編集、カスタマイズできます。

SeedProdには、たくさんの404デザインを含む、300以上の既製テンプレートが用意されています。つまり、プロフェッショナルなデザインの404ページを数分で作成することができます。

最初に行う必要があるのは、SeedProdプラグインのインストールです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

プラグインを有効化した後、SeedProdはライセンスキーを要求します。

この情報は、SeedProdサイトのアカウントで確認できます。ライセンスを入力した後、「Verify Key」ボタンをクリックしてください。

それが完了したら、SeedProd ” ランディングページ にアクセスしてください。404ページ」のセクションで、「404ページを設定する」をクリックします。

404ページのテンプレートを選ぶことができます。

デザインをプレビューするには、マウスオーバーして虫眼鏡をクリックするだけです。

気に入ったデザインが見つかったら、「このテンプレートを選ぶ」をクリックするだけ。

すべての画像に『Oh No 404 Page』を使用していますが、お好きなデザインを使ってください。

テンプレートを選択した後、ドラッグ＆ドロップビルダーに移動し、404ページのカスタマイザーを開始することができます。

画面の左側には、デザインに追加できるブロックとセクションがあります。ページの右側にはライブプレビューが表示されます。

ほとんどの404テンプレートには、すでにいくつかのブロックがあり、SeedProdデザインの中核をなしています。

これらのブロックをカスタマイズするには、レイアウト内のブロックをクリックして選択するだけです。その後、左側のメニューにある設定を使って変更することができます。

デザインに新しいブロックを追加するには、左側のメニューでブロックを見つけるだけです。そして、レイアウト上にドラッグします。これで、上記のプロセスに従ってブロックをカスタマイズできます。

手始めに、404ページにあなたのサイトのロゴを追加し、訪問者がまだあなたのサイトにいることを認識できるようにするのが一般的です。

SeedProdロゴを独自のブランドロゴに置き換えるには、レイアウト内のプレースホルダーロゴをクリックして選択するだけです。次に、左側のメニューの画像にマウスオーバーします。

表示されたら、「画像を選択」ボタンをクリックします。

WordPressのメディアライブラリが起動し、任意の画像を選択するか、コンピューターから新しいファイルをアップロードすることができます。

多くの404テンプレートはサイトのメインナビゲーションメニューも表示します。複数のメニューがある場合は、代わりに別のメニューを表示する方がよいでしょう。

この変更を行うには、テンプレートの「Nav Menu」ブロックをクリックするだけです。メニュー’ドロップダウンを開き、リストから任意のメニューを選択することができます。

詳しくは、WordPressテーマでカスタムナビゲーションメニューを追加する方法をご覧ください。

訪問者が404ページに辿り着いたとき、どうしてここに辿り着いたのか、次に何をすればいいのか混乱するかもしれません。そのため、コンテンツが見つからないことを説明し、次に取るべき行動を提案するテキストを追加するのが良いでしょう。

これを行うには、デザインに’ヘッドライン’と’テキスト’ブロックを追加します。その後、左側のメニューにあるテキストエディターにメッセージを入力することができます。

次に、「ホームに戻る」ボタンを変更し、単にホームページに戻るのではなく、特定の投稿をチェックするよう促す。

例えば、最新の投稿を宣伝したり、最もコメントされた投稿を表示したりすることができる。

ボタンをカスタマイズするには、クリックしてページレイアウトで選択するだけです。リンク」フィールドに、代わりに使用したいURLを入力してください。

ボタンがホームページにリンクしなくなったので、「Back To Home」ラベルを置き換える必要があります。ボタンテキスト」ボックスに新しいメッセージを入力してください。

それができたら、「詳細設定」タブをクリックします。ここで、ボタンの色やサイズなどを変更することができます。

シンプルなカスタム404ページを作成するのに必要なものはすべてこれだけです。しかし、訪問者の体験を向上させ、人々の関心を引きつけ、さらにコンバージョンを増やすのに役立つ機能やコンテンツは他にもたくさんあります。

とはいえ、404ページに追加できる高度な機能をいくつか見てみましょう。

WordPressの404ページに人気投稿を追加する

手始めに、最も人気のある投稿のリストを表示するとよいでしょう。これらの投稿は人気があるため、訪問者が気に入るものを見つけられる可能性が高い。

MonsterInsightsプラグインを使用すると、このリストを自動的に作成できます。300万以上のサイトで使用されているWordPressのための最高の分析ソリューションです。

MonsterInsightsは、どの投稿が最も多くの訪問者を獲得しているかを確認し、404ページに追加することができます。詳しくは、WordPressで人気投稿を表示する方法をご覧ください。

MonsterInsightsを有効化した後、WordPressでショートコードを追加することで、人気投稿を表示することができます。SeedProdの左メニューから「ショートコード」ブロックを探し、レイアウトにドロップするだけです。

次のショートコードをコピーしてください：

[monsterinsights_popular_posts_widget theme="beta"]

その後、SeedProdエディターでショートコードブロックをクリックして選択します。これで左側のメニューにコードを貼り付けることができます。

初期設定では、SeedProdはページエディター内に人気投稿のプレビューを表示しないので、ショートコードの動作を確認するには右上の「プレビュー」ボタンをクリックする必要があります。

SeedProdエディター内で人気投稿リストを見たい場合は、’Show Shortcode Preview’スイッチをクリックするだけです。

上記のショートコードでは、リストにtheme="beta "を使用していますが、MonsterInsightsには使用できるテーマがいくつかあります。

異なるテーマを見るには、WordPressダッシュボードのInsights ” Popular Postsに移動し、’Popular Posts Widget’をクリックします。

各テーマをクリックしてプレビューを見ることができます。

気に入ったデザインが見つかったら、SeedProdのショートコードを更新するだけです。例えば、「Alpha」テーマを使用したい場合、次のように入力する必要があります：

[monsterinsights_popular_posts_widget theme="alpha"]

WooCommerceの人気商品を表示する

オンラインストアをお持ちの場合、売れ筋のWooCommerce商品を404ページに表示したいと思うかもしれません。このように、カスタム404ページはより多くの売上を得るのに役立ちます。

左側のメニューから「ベストセラー商品」ブロックを探し、レイアウト上にドラッグします。

SeedProdはいくつかの商品を自動的に表示します。しかし、エディターでこのブロックを選択し、左側のメニューにある設定を使って微調整することができます。

例えば、ブロック内のカラム数を変更したり、ページ送りを追加したり、売れ筋商品をフィルターできるようにしたり、様々なことが可能です。

詳しくは、WooCommerceの人気商品を表示する方法をご覧ください。

名前とは裏腹に、このブロックを使って他のタイプの商品を表示することができます。例えば、セール品や人気アイテムを表示することができます。

さまざまなオプションを見るには、「タイプ」のドロップダウンメニューを開き、リストからオプションを選択する。

WordPressの404ページにお問い合わせフォームを追加する

また、お問い合わせフォームを追加して、訪問者が探しているものが見つからない場合に連絡できるようにするのもよいでしょう。このフォームでは、404エラーを簡単に報告することもできるので、リンク切れを修正し、今後の訪問者のエクスペリエンスを向上させることができます。

詳しくは、WordPressでリンク切れを修正する方法の完全ガイドをご覧ください。

お問い合わせフォームをサイトに追加する最良の方法はWPFormsプラグインを使うことです。WPFormsはWordPressに最適なお問い合わせフォームプラグインで、ドラッグ＆ドロップでフォームを作成できます。

詳しくは、WordPressでお問い合わせフォームを作成するステップバイステップガイドをご覧ください。

お問い合わせフォームを作成したら、’お問い合わせフォーム’ブロックを使って404ページに追加することができます。左側のメニューからこのブロックを見つけて、デザイン上にドラッグするだけです。

次に、「お問い合わせフォームの選択」ドロップダウンメニューを開き、リストからお問い合わせフォームを選択します。

ページエディターがお問い合わせフォームのプレビューを表示するようになりました。

お問い合わせフォームを紹介したり、訪問者に連絡を取るよう促すテキストを追加するとよいでしょう。

これを行うには、お問い合わせフォームの上に「ヘッドライン」または「テキスト」ブロックを追加し、使用したいテキストを入力するだけです。

404ページを公開する方法

404ページの見た目に満足したら、いよいよ公開します。

保存」の隣にあるドロップダウンの矢印をクリックし、「テンプレートとして保存」を選択するだけです。

と聞かれたら、テンプレートの名前を入力してください。これは参考のためですので、お好きなものをお使いください。

その後、「Save Template」をクリックする。

次のポップアップで、’ページエディターに戻る’をクリックします。その後、右上の’X’ボタンをクリックしてSeedProdページエディターを閉じることができます。

この時点で、404デザインを公開するかどうかを尋ねるポップアップが表示されるかもしれません。もしこのまま進めてもよければ、’Yes, Activate’をクリックしてください。

今すぐテンプレートを公開したくない場合は、代わりに「いいえ、閉じる」をクリックしてください。

その後、SeedProd ” ページにアクセスして、いつでもデザインを公開することができます。ここで、’404ページ’セクションのスイッチをクリックし、’有効化した’と表示されるようにします。

404ページを実際に見るには、ドメイン名の末尾に/404を追加するだけです。

カスタマイザー404ページを公開したら、そのページがどのように利用されているかをトラッキングすることをお勧めします。そうすることで、何がうまくいっていて、何がうまくいっていないのかを確認することができ、より多くのコンバージョンとエンゲージメントを得るために404のデザインを微調整することができます。

さらに詳しく知りたい方は、WordPressにGoogleアナリティクスをインストールする方法についての初心者向けガイドをご覧ください。

方法2：フルサイトエディターで404ページを作成する（ブロックテーマのみ）

ブロック対応のWordPressテーマを使用している場合は、フルサイトエディターでサイトの404ページを編集できます。

始めるには、WordPressダッシュボードの外観 ” エディターへ向かいます。

初期設定では、フルサイトエディターはテーマのホームテンプレートを表示します。

404ページを編集するには、先に進んで「テンプレート」をクリックする。

ブログページや アーカイブページなど、ブロックベースのテーマを構成するすべてのテンプレートのリストが表示されます。

そのまま『404』をクリックしてください。

WordPressは現在の404デザインのプレビューを表示します。

このテンプレートを編集するには、小さな鉛筆のアイコンをクリックしてください。

フルサイトエディターは、標準のWordPressコンテンツエディターと同様に機能します。

デザインにブロックを追加するには、「+」ボタンをクリックします。

404ページに追加したいブロックをタイプしてください。

例えば、最近の投稿を表示したい場合があります。そのためには、「Latest Posts」と入力し、そのブロックをデザインにドラッグするだけです。

ブロックを追加した後、カスタマイズしたくなるかもしれない。

プレビューのブロックをクリックして選択します。右側のメニューには、ブロックのコンテンツや外観を変更するための設定がすべて表示されます。

表示されるオプションは、選択したブロックによって異なります。しかし、通常、背景色、文字色、フォントサイズを変更することができます。

必要であれば、最近の投稿をドロップダウンメニューとして表示することもできる。

あとは、上記と同じ手順でブロックを追加し、デザインを微調整していきます。WordPressのウィジェットをカラムに並べたり、WordPressのブロックパターンを使ってカスタマイザー404ページを素早く作成することもできます。

404ページの見た目に満足したら、’Save’をクリックし、本番の404ページにする。

サイトのドメイン名の最後に/404を追加すると、カスタマイザー404ページが表示されます。

404ページはいつリダイレクトすべきか？

404エラーの最も一般的な原因の1つは、訪問者がURLを入力する際に純粋に間違えた場合です。

この場合、通常ユーザーを別のページにリダイレクトする必要はありません。しかし、私たちが紹介したベストプラクティスに従って、ユーザーを元に戻すことをお勧めします。

とはいえ、カスタマイザーで404ページのテンプレートを作成する時間がない場合は、その間にユーザーをホームページにリダイレクトさせることもできます。そうすれば、ユーザーをサイトにとどめておくことができる。

その他、404エラーのトラッキングとリダイレクトを強くお勧めします。こうすることで、ユーザーがどのリンクにアクセスできなかったかを見つけることができ、最も関連性の高いページにリダイレクトすることができます。

その結果、ページビューを増やし、直帰率を下げる機会を最大限に生かすことができる。さらに、これらのページにリンクされているバックリンクを維持し、ドメイン・オーソリティを維持することができます。

All In One SEOプラグインには、便利な404エラーログとリダイレクト機能があります。ユーザーフレンドリーなプラグインなので、専門的な知識は必要ありません。

おすすめのプラグインをもっと知りたい方は、WordPress用の最高の無料404リダイレクトプラグインのリストをご覧ください。

動画チュートリアル

この記事がWordPressの404ページテンプレートの改善に役立てば幸いです。また、専門家が選ぶWordPressのベスト人気投稿プラグインや、高コンバージョンのランディングページの解剖に関する記事もご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.