SWELL 404ページを改善＆カスタマイズする方法｜初心者でもできる5つの手順

SWELLの404ページを改善＆カスタマイズする方法を初心者の方にも分かりやすく解説します。

結論を先に言うと「SWELLの404ページは、ブログパーツと簡単な設定だけでも見違えるので、早めに整えておくとサイト全体の損失が減らせる」です。

SWELLの404ページとは？役割と基本をサクッと整理

SWELL 404ページが果たす3つの役割

まずは、SWELLで表示される404ページがどんなポジションのページなのかを、ざっくり表にまとめてみます。

観点	SWELLの404ページの役割
ユーザー体験	迷い込んだ人に「このページはありません」と伝え、次の行き先を案内する
検索エンジンへのお知らせ	「このURLには今ページがないよ」と機械にも教える役割を持つ
ブランド・雰囲気	デザインや言葉遣いで、「丁寧で親切なサイトだな」と感じてもらうきっかけになる

404ページというと「エラー画面」というイメージが強いかもしれませんが、実際には「道に迷った人のための案内所」のような存在です。SWELLの場合、テーマ側でシンプルな404ページを用意してくれているので、表示が真っ白になるようなことは基本的にありません。

ただ、初期状態のSWELL 404ページは必要最低限のつくりなので、個性も少なく、回遊を促す導線も物足りないと感じる人が多いと思います。私もデフォルトの画面を見たときに「分かりやすいけれど、ちょっとさみしいな…」という印象でした。ここにひと工夫加えるだけで、読者の離脱をかなり減らせる可能性があります。

SWELLの404ページをそのまま放置すると何が起きる？

SWELLの初期状態の404ページでも、最低限の役割は果たしてくれます。ですが、そのまま何年も放置していると、じわじわと次のようなもったいない状況が積み重なっていきます。

• せっかくサイトに来てくれた人が、そのページを最後に帰ってしまう
• 関連記事や収益記事を見てもらえるチャンスを落としてしまう
• 「このサイト、ちょっと不親切かも」と感じられてしまうリスクがある
• SNSや他サイトからのリンクミスが、そのまま機会損失になる

雑記ブログでも特化ブログでも、古い記事を消したり、リライトでURLを変えたりすることはよくあります。そのたびに、どこかで404ページに流れ込む人が出てきます。だからこそ、SWELLの404ページは「どうせ見られないページ」ではなく、「見られる前提でちゃんと作るページ」と考えた方がいいな、と私は感じています。

SWELL 404ページをカスタマイズする前に整えておきたい準備

SWELL 404ページ編集前のチェックリスト

まずは、SWELLの404ページを編集しても大丈夫な状態かどうか、簡単なチェックリストを用意しました。自分のサイトに当てはめて確認してみてください。

チェック項目	状態	補足
SWELLの子テーマを使っているか	ほぼ必須	親テーマを直で編集すると、アップデートで上書きされやすい
サイト全体のバックアップ	強く推奨	プラグインやサーバーのバックアップ機能でOK
FTPやファイルマネージャーへのアクセス	あると安心	404.phpを編集するときにすぐ戻せる
ブログパーツの基本操作	できれば	このあと紹介する方法で使います
テキストエディタに触れたことがあるか	あると良い	ファイル編集のときに事故を防ぎやすい

全部完璧にそろっていなくても構いませんが、「子テーマ」と「バックアップ」の2つだけは、できれば押さえてから作業したいところです。私自身、昔は親テーマのファイルを直接いじってレイアウトを崩してしまい、「なんで触ってしまったんだ…」と後悔したことがあります。それ以来、子テーマとバックアップはテーマ編集のセットとして考えるようになりました。

SWELL 404ページの完成イメージをざっくり決めておく

いきなり手を動かし始める前に、「自分のサイトのSWELL 404ページをどんな雰囲気にしたいか」をざっくり決めておくと、作業中に迷いにくくなります。具体的な例をいくつか挙げてみます。

この記事では、ブロガーやアフィリエイターでも使いやすい「おすすめ記事＋検索フォーム＋カテゴリ一覧」の構成をベースに、SWELLの404ページを作り込んでいく流れを紹介します。自分のサイトの雰囲気を頭に思い浮かべながら読み進めてみてください。

SWELL 404ページをブログパーツで作り込む7ステップ

1. 404用のブログパーツを作る

最初に、SWELLの管理画面から404ページ専用のブログパーツを作成します。通常の記事を書くときと同じように、ブロックエディタで組み立てていきます。構成イメージを表にまとめると、次のような感じです。

ブロック	内容の例	ねらい
見出しブロック	「お探しのページは見つかりませんでした」	今の状況をシンプルに伝える
テキストブロック	軽いお詫びと、次にできることの案内	不安な気持ちを少しやわらげる
検索フォームブロック	サイト内検索	本来探していた情報を見つけてもらう
ボタンブロック	「トップページへ戻る」ボタン	迷った人がとりあえず戻れる場所を用意する
投稿リストブロック	人気記事や最新記事	他の記事に興味を持ってもらう
カテゴリ一覧ブロック	主要カテゴリだけを表示	サイト全体の地図として使ってもらう

このブログパーツは、通常の記事と同じ感覚で、SWELLのブロックを組み合わせて作っていけばOKです。あとから404ページ側から呼び出すので、「404ページ用」「404-contents」など、自分が見てすぐ分かる名前を付けて保存しておきましょう。

2. 子テーマまたはスニペットでブログパーツを読み込む

次に「404ページが表示されたときだけ、今作ったブログパーツを出す」という仕組みを用意します。やり方は大きく分けて2パターンあります。

• 子テーマの404.phpを書き換えて、404ページの中でブログパーツを呼び出す
• Code Snippetsなどのプラグインを使い、条件付きでブログパーツを差し込む

具体的には、WordPressの条件分岐タグであるis_404()という条件を使って、「404ページのときだけブログパーツのショートコードを表示してね」とお願いするイメージです。コードの見た目は難しく感じるかもしれませんが、やっていること自体はシンプルで、「404のときだけ特定のパーツを出す」という動きに過ぎません。

子テーマを触るのが不安な場合は、テーマファイルを変更せずに済むCode Snippetsのようなプラグインを使うと、心理的なハードルが下がります。万が一エラーになっても、そのスニペットをオフにすればすぐ元に戻せるからです。

3. SWELL 404ページのレイアウトと余白を整える

ブログパーツを読み込めたら、実際に存在しないURLを開いて、SWELLの404ページがどう表示されるか確認してみましょう。特にスマホ表示を中心に、次のようなポイントをチェックしていきます。

必要に応じて、SWELLのカスタマイザーやカスタムCSSで、フォントサイズや余白を少しだけ調整します。私は404ページだけ文字を少し大きめにして、「ここは案内ページですよ」という雰囲気が伝わるようにすることも多いです。ちょっとした違いですが、読者側にとっては「読みにくいな」と感じるか「なんとなく親切だな」と感じるかの分かれ目になりやすい部分です。

子テーマでSWELL 404ページをガッツリ編集する方法

SWELLの親テーマから404.phpをコピーする手順

子テーマでSWELLの404ページを編集するときは、まず親テーマに含まれている404.phpというファイルを子テーマへコピーするところからスタートします。大まかな流れは次の通りです。

このとき、親テーマ側にある404.phpを直接編集してしまうのはおすすめできません。親テーマのアップデートで変更が消えてしまう可能性があるのと、もし書き換えに失敗したときに元の状態に戻すのが大変になるからです。必ず子テーマ側の404.phpを編集するようにしましょう。

SWELL 404ページでよく使うパーツと配置パターン

子テーマで404.phpを編集する場合、「どんなパーツを載せて、どんな順番で見せるか」がとても大事になってきます。よく使う要素と、そのねらいを表にまとめました。

要素	内容の例	効果
メインメッセージ	「お探しのページは見つかりませんでした。」	今の状況を短く、そしてはっきりと伝える
サブメッセージ	「URLが変更されたか、削除された可能性があります。」など	理由をやさしく伝えて、不安を少しやわらげる
検索フォーム	サイト内検索フォーム	本来行きたかったページを自分で探してもらえる
グローバルメニュー	ヘッダーのメニューをそのまま表示	サイト全体の入り口として機能する
人気記事リスト	収益記事や定番記事を中心にピックアップ	404からでも別の記事を読んでもらえる可能性が上がる
カテゴリ一覧	主要カテゴリだけに絞って表示	サイト全体の構造がひと目で分かる

この表をベースに、HTMLの順番を入れ替えたり、要素を追加したりしながら、自分のサイトに合う404テンプレートを作っていきます。私は「メッセージ → 検索フォーム → 人気記事 → カテゴリ一覧」という流れにすることが多いです。最初に状況を説明して、そのあと「代わりにこんな記事はどうですか？」とやさしく提案していくイメージですね。

SWELL 404ページのデザイン・文言のアイデア集

SWELL 404ページに使える文言例

同じ「ページが見つかりませんでした」という内容でも、言い回しひとつでサイトの雰囲気は大きく変わります。イメージしやすいように、テイスト別の例をまとめました。

テイスト	メインメッセージの例	サブメッセージの例
ていねい・おだやか	「お探しのページは見つかりませんでした。」	「URLが間違っているか、記事が移動した可能性があります。」
カジュアル	「ごめんなさい、このページは見つかりませんでした！」	「よろしければ、下の検索フォームから探してみてください。」
ユーモラス	「ここはどうやら空き地のようです…」	「でも、まだ帰るには早いかもしれません。人気の記事を置いておきますね。」
ビジネス寄り	「お探しのページは現在ご利用いただけません。」	「お手数ですが、検索またはメニューから目的のページをお探しください。」

SWELL 404ページの文言は、サイト全体のトーンと合わせるのがポイントです。ふだんの本文がカジュアルなのに、404だけ急にかっちりした敬語になると違和感が出ますし、その逆も同じです。私はクライアントさんのサイトを触るとき、まずトップページやプロフィールページの文章を読み込んでから、404の文言を考えるようにしています。そうすると、そのサイトならではの空気を崩さずにカスタマイズしやすくなります。

回遊性を高める導線のアイデア

SWELLの404ページは、ただ「ページがありません」と伝えるだけで終わらせてしまうのはもったいないです。せっかく一度サイトに足を運んでくれた人なので、別のページに自然に移動してもらえるような仕掛けを用意しておきましょう。具体例を挙げてみます。

特に「人気記事をいくつか並べるだけ」でも、404ページからの離脱率はかなり変わります。私が運営しているサイトでも、SWELLの404ページに人気記事のリストを足しただけで、「404から別記事に移動してくれる人」が明らかに増えました。難しいテクニックではないので、まずはここから試してみるのがおすすめです。

SWELL 404ページのSEO・エラー対策のポイント

SWELL 404ページでやってはいけないNGパターン

まずは、ついやってしまいがちなNGパターンを整理しておきます。SWELLに限らず、WordPress全体で気をつけたいポイントです。

パターン	内容	なぜNGか
すべての404をトップページへリダイレクト	404のURLを自動でトップへ飛ばしてしまう	検索エンジンにとって状況が分かりにくくなり、評価に悪影響が出る可能性がある
404ページを普通のページとして扱う	通常のコンテンツと同じように登録しようとする	ユーザーにも検索エンジンにも、ページの意味が伝わりにくくなる
404なのにステータスコード200	本当はエラーなのに「成功」として返してしまう	機械側がURLの状態を誤解し、後々の管理がややこしくなりやすい
広告だらけの404ページ	エラー画面なのに広告が目立ちすぎる	体験が悪くなりやすく、ポリシー面でもリスクが出やすい

SWELLの標準的な404ページは、基本的なところはきちんと押さえた作りになっています。カスタマイズをするときも、「404ページは404として扱う」「読者にとって分かりやすいページにする」という大枠を崩さないよう意識しておくと、大きく道を外すことはありません。

SWELL 404ページでエラーが多発するときのチェックポイント

もし自分のサイトで「404がやたら多いな」と感じたら、SWELLの404ページを整えると同時に、そもそもエラーが出る原因も見直しておきたいところです。よくある原因と、見る場所をまとめました。

チェック項目	見る場所	よくある原因
パーマリンク設定	WordPressの設定画面	パーマリンクの形式を変えたあと、古いURLに対してリダイレクトをしていない
内部リンク	記事本文やウィジェット	記事のURLを変えたのに、古いリンクのまま貼られている
外部からのリンク	アクセス解析やサーチコンソール	別サイトが間違ったURLでリンクしている
画像・ファイルURL	記事編集画面	画像やPDFを移動したことでパスが変わってしまった
リダイレクト設定	プラグインやサーバー設定	過去につくったリダイレクトが、今の構成と合わなくなっている

SWELLの404ページをいくら整えても、そもそもエラーが出る数が多すぎると、それだけで機会損失が大きくなります。私がサイトをチェックするときは、アクセス解析やサーチコンソールで「よく踏まれている404 URLの上位」をピックアップして、次のように分類しています。

• 今もニーズがありそうなら、新しい記事を用意するか、近い内容の記事へリダイレクトする
• 明らかに不要なURLなら、そのまま404として扱う
• 内部リンクの貼り間違いなら、リンク先を正しいURLに修正する

こうやって一つひとつ原因をつぶしていくと、SWELLの404ページを見る人自体が少しずつ減っていきます。そのうえで、残った404については、ここまでで紹介してきたように丁寧な案内ページにしておく、というイメージです。

SWELL 404ページのよくある質問

Q1. SWELL 404ページは絶対にカスタマイズしなきゃダメですか？

A. 絶対に必須というわけではありませんが、私は「最低限は手を入れておいた方が得だな」と感じています。デフォルトのSWELL 404ページでも動作に問題はありませんが、回遊を促す導線や、サイトの雰囲気を出す工夫はほとんどできません。

ブログパーツを使えば、SWELLの404ページをほぼノーコードでアレンジできます。検索フォームや人気記事、トップページへのボタンだけでも設置しておくと、「404＝行き止まり」ではなく「別のページへ案内してくれる場所」に変わります。

Q2. SWELL 404ページに広告を貼っても大丈夫ですか？

A. 技術的には可能ですが、私はあまりおすすめしていません。SWELLの404ページは「間違ってたどり着いた人を案内する」という位置づけなので、広告だらけにすると体験がかなり悪くなります。

広告の種類や配置によっては、広告ポリシーとの関係がグレーになってしまうケースも考えられます。短期的な収益よりも「このサイトは感じがいいな」と思ってもらえることを優先した方が、長い目で見てサイト全体の評価も上がりやすいと私は思っています。

Q3. SWELL 404ページをいじったら真っ白になりました…どうすればいいですか？

A. その状況、かなり焦りますよね。ただ、いちばん大事なのは、あわてて触る場所を増やさないことです。子テーマの404.phpなどを編集して、SWELLの404ページが真っ白になった場合は、まず編集前の状態に戻せるかどうかを優先して考えましょう。

具体的には、次のような順番で確認していくのがおすすめです。

• 編集前の404.phpのバックアップがあれば、それに差し替えてみる
• 親テーマの404.phpに切り替えると表示が戻るか試してみる
• Code Snippetsなどで追加したコードがあれば、一度オフにしてみる

この順番で見ていくと、「どこを触ったのが原因なのか」がだんだん見えてきます。編集前にバックアップを取っておけば、最悪「元に戻す」だけで復旧できるので、SWELLの404ページに限らず、テーマファイルを触る前にはバックアップを取る習慣をつけておくと安心です。

SWELL 404ページ記事のまとめと、今日からできる一歩

ここまでの内容をまとめます

そして、今日からあなたが取れる最初の一歩は、「404ページ専用のブログパーツをひとつ作ってみること」です。難しいコードはいったん横に置いて、まずは次の4つだけを入れたシンプルなパーツを用意してみてください。

• 状況を伝える短いメッセージ
• サイト内検索フォーム
• 人気記事のリストをいくつか
• トップページへ戻るボタン

それだけでも、「味気ないエラー画面」から「迷子になっても安心なページ」へと、SWELLの404ページの印象は大きく変わります。ぜひ、あなたのサイトらしい404ページを育てて、読者にとって居心地のいい場所にしていきましょう。