SWELLでHTMLサイトマップを作る方法｜固定ページに記事一覧を表示する手順

WordPressブログの記事数が増えてくると、読者が目的の記事を探しにくくなってきますよね。

最初は10記事ほどだったブログも、運営を続けていると30記事・50記事・100記事と増えていきます。記事が増えるのは嬉しいことですが、その一方で新たな悩みも出てきます。

そこで役立つのが、HTMLサイトマップです。

HTMLサイトマップとは、読者向けに用意する「記事一覧ページ」のことです。Googleに送信するXMLサイトマップとは違い、読者が実際に見て使うページです。

この記事では、SWELLでHTMLサイトマップを作る方法を、固定ページの作成手順からフッターへの設置方法まで、初心者向けにわかりやすく解説します。

---

HTMLサイトマップとは？

HTMLサイトマップとは、読者がサイト内の記事を探しやすくするためのページです。

簡単にいうと、ブログ内の記事をカテゴリー別に整理した「記事一覧ページ」です。たとえば、以下のようなイメージです。

記事をジャンルごとに整理しておくと、読者は自分が読みたい記事を見つけやすくなります。記事数が30本・50本と増えてきたタイミングで作っておくと、サイト全体の見通しがかなり良くなりますよ。

読者向けの記事一覧ページのこと

HTMLサイトマップは、読者のために作るページです。

ブログに訪れた読者は、必ずしもトップページから順番に記事を読んでくれるわけではありません。検索結果から個別記事に直接アクセスし、そのまま別の記事を探すことも多いです。

このとき、サイトマップページがあると、以下のようなニーズに応えやすくなります。

HTMLサイトマップは単なる一覧ページではなく、読者の回遊を助けるページです。サイト全体の案内役だと考えるとわかりやすいですよ。

XMLサイトマップとは役割が違う

HTMLサイトマップとXMLサイトマップは名前が似ていますが、役割はまったく違います。

種類	対象	役割
HTMLサイトマップ	読者	記事を探しやすくする
XMLサイトマップ	Googleなどの検索エンジン	サイト内のURLを伝える

ここを間違えると、サイトマップ設定で混乱しやすくなります。XMLサイトマップの作り方やSearch Consoleへの送信方法は、別記事で詳しく解説しています。

SWELLでは固定ページで作るのがおすすめ

SWELLでHTMLサイトマップを作るなら、固定ページを使う方法がおすすめです。

固定ページで作ると、以下のようなメリットがあります。

URLを自由に決められる

「/sitemap/」のようにわかりやすいURLを設定できます。

フッターメニューに設置しやすい

プライバシーポリシーやお問い合わせと並べてフッターに置けます。

SWELLのブロックで見やすく整えられる

コードなしで、見出し・ボックス・カラムを使ってきれいに作れます。

重要記事への導線を作りやすい

読者に読んでほしい順番で並び替えが自由にできます。

プラグインで自動生成する方法もありますが、初心者の場合はまず固定ページでシンプルに作るのがおすすめです。

---

SWELLでHTMLサイトマップを作る方法は2つ

SWELLでHTMLサイトマップを作る方法は、大きく分けて2つあります。

初心者には、まず固定ページで作る方法がおすすめです。

方法	メリット	デメリット
固定ページで手動作成	見た目や並び順を自由に調整できる	記事追加時に手動更新が必要
プラグインで自動生成	記事追加時に自動反映される	表示デザインや除外設定に注意が必要

固定ページに手動で作る方法

固定ページで手動作成する方法は、最もシンプルです。

WordPressの固定ページに「サイトマップ」というページを作り、カテゴリーごとに記事リンクを並べるだけです。手動作成の良いところは、サイト運営者の意図を反映しやすいことです。

たとえば、以下のような調整ができます。

記事数が30〜50本程度であれば、手動でも十分管理できます。単純に全記事を自動で並べるよりも、読者にとってわかりやすいサイトマップを作りやすいですよ。

プラグインで自動生成する方法

もう1つは、HTMLサイトマップ用のプラグインを使う方法です。

プラグインを使うと、記事一覧を自動で表示できます。新しい記事を追加したときも、自動的にサイトマップへ反映されるため、手動更新の手間を減らせます。

ただし、プラグインには注意点もあります。

プラグインを使う場合でも、表示内容は必ず確認しましょう。

初心者には「固定ページで手動作成」がおすすめ

初心者には、固定ページで手動作成する方法をおすすめします。

プラグインで自動生成すると便利ではありますが、何が表示されているかを確認しないまま使ってしまうことがあります。その結果、こんな状態になることがあります。

HTMLサイトマップは、読者のためのページです。ただ全記事を並べるだけではなく、読者が迷わず記事を探せるように整理することが大切です。

まずは固定ページでシンプルに作りましょう。記事数が増えて管理が大変になってきたら、プラグインの利用を検討するのがよいでしょう。

---

固定ページでHTMLサイトマップを作る手順

ここからは、SWELLでHTMLサイトマップを固定ページに作る手順を解説します。

難しい操作はありません。普段の記事作成と同じように、固定ページを作ればOKです。

固定ページを新規追加する

まず、WordPress管理画面から固定ページを新規追加します。

注意したいのが、投稿ではなく固定ページを使う点です。投稿記事として作ってしまうと、通常の記事一覧やカテゴリー一覧に表示される場合があります。

サイトマップは通常の記事ではなく、サイト全体を案内するページです。お問い合わせやプライバシーポリシーと同じように、サイトの案内ページとして固定ページで作るのが自然です。

タイトルとURLスラッグを設定する

固定ページを開いたら、タイトルに「サイトマップ」と入力します。タイトルはシンプルで問題ありません。

URLスラッグは以下のようにするとわかりやすいです。

このURLは読者向けのHTMLサイトマップです。Google Search Consoleに送信するXMLサイトマップとは別物なので、混同しないようにしましょう。

カテゴリーごとに見出しを作る

次に、カテゴリーごとに見出しを作ります。

たとえば、SWELL・WordPress・サーバー・AIなど複数ジャンルの記事がある場合は、以下のように整理すると見やすいです。

• SWELL関連
• WordPress運営
• レンタルサーバー
• VPS
• AIツール

読者は「サイト内の記事を全部見たい」というより、「自分が興味のあるジャンルの記事を探したい」と考えていることが多いです。ジャンルごとに分けておくと、目的の記事にたどり着きやすくなります。

見出しはH2またはH3を使うとよいです。サイトマップ内の大きな分類にはH2、細かい分類にはH3を使うと整理しやすくなります。

記事リンクを並べる

見出しを作ったら、その下に記事リンクを並べます。

記事リンクを並べるときは、読者が内容を想像しやすいタイトルにしましょう。「何についての記事か」「誰向けか」「どんな悩みを解決するか」がわかるタイトルの方がクリックされやすいです。

ただし、サイトマップ上に長すぎるタイトルが大量に並ぶと見づらくなります。必要に応じて、リンクテキストを少し調整してもOKです。

公開前にスマホ表示を確認する

HTMLサイトマップを作ったら、公開前にスマホ表示を確認しましょう。

ブログの読者はスマホからアクセスすることが多いです。PCで見やすくてもスマホで見づらければ意味がありません。

確認するポイントは以下です。

• 文字が小さすぎないか
• リンク同士が近すぎないか
• カテゴリーの区切りがわかりやすいか
• 横スクロールが発生していないか
• 装飾が多すぎて重くなっていないか

特にカラムブロックを使う場合、スマホでは縦並びになることがあります。PCではきれいに見えても、スマホでは長くなりすぎることがあるため、必ずスマホ表示をチェックしましょう！

---

SWELLで見やすく整えるコツ

SWELLではブロックエディタを使ってサイトマップを見やすく整えられます。ただし、HTMLサイトマップの目的は「読者が記事を探しやすくすること」です。おしゃれに作ることよりも、わかりやすく整理することを優先しましょう。

カテゴリーごとに整理する

HTMLサイトマップでは、カテゴリーごとに記事を整理するのが基本です。

ジャンルが多い場合は、さらに大きな分類を作ってもよいです。

記事数が増えてきたら、「カテゴリー名そのまま」ではなく、読者にとってわかりやすい分類名にするのもおすすめです。

重要記事を上の方に置く

HTMLサイトマップでは、必ずしも公開日順に並べる必要はありません。むしろ、読者に先に読んでほしい記事を上に置く方が効果的です。

たとえば、SWELL関連なら、初心者が理解しやすい順番に並べましょう。

サイトマップは単なる記事一覧ではなく、読者を案内するページです。読む順番を意識して並べると、サイト全体の回遊性が高まりますよ。

SWELLのボックス・カラムを使う

SWELLでは、ボックスやカラムを使うとサイトマップを視覚的に整理できます。

ジャンルごとにボックスで囲むと、区切りがわかりやすくなります。PC表示では2カラムにして左右にカテゴリーを分けるのもよいです。

ただし、スマホ表示では縦に長くなるため、カラムを使いすぎないようにしましょう。サイトマップは「装飾を見せるページ」ではなく、「記事を探すページ」です。見た目よりも、探しやすさを優先するのがポイントです。

記事数が多い場合はジャンル別に分ける

記事数が100本を超えてくると、1ページにすべての記事を並べるだけでは見づらくなることがあります。

さらに記事数が増えた場合は、サイトマップページ内に目次を設置するのもおすすめです。SWELLのアンカーリンクを活用すると、読者が目的のジャンルへ移動しやすくなります。

装飾しすぎずシンプルにする

SWELLは装飾機能が豊富なので、ボックス・ボタン・ふきだし・アイコンなどを使いたくなるかもしれません。ただ、サイトマップでは装飾しすぎない方が見やすいです。

装飾が多すぎると、以下のようなデメリットが出てきます。

HTMLサイトマップは、読者が素早く記事を探すためのページです。基本は見出し＋リンク一覧で十分です。必要に応じて、ボックスや区切り線を使う程度にしておきましょう。

---

HTMLサイトマップをメニュー・フッターに設置する方法

HTMLサイトマップを作ったら、読者がアクセスできる場所に設置しましょう。

おすすめはフッターメニューです。グローバルメニューに入れてもよいですが、サイトマップは頻繁にクリックされる主要導線ではないため、フッターに置くくらいが自然です。

外観からメニュー設定を開く

まず、WordPress管理画面からメニュー設定を開きます。

SWELLでは、ヘッダーやフッターにメニューを設置できます。先ほど作成した「サイトマップ」の固定ページをメニュー項目として追加します。

サイトマップ固定ページをフッターメニューに追加する

メニュー設定画面を開いたら、先ほど作成した「サイトマップ」の固定ページを選択してメニューに追加します。

表示名はそのまま「サイトマップ」で問題ありません。フッターに設置する案内ページの1つとして、以下のように並べると自然です。

• お問い合わせ
• プライバシーポリシー
• 運営者情報
• サイトマップ

読者が記事を読み終えたあと、サイト全体を見たいと思ったときにフッターからサイトマップへ移動できます。ヘッダーをすっきりさせたい場合にも、フッター配置が向いています。

グローバルメニューには無理に入れなくてよい

HTMLサイトマップをグローバルメニューに入れる必要はありません。

グローバルメニューは、サイトの主要な導線を置く場所です。ホーム・ブログ・おすすめ記事・カテゴリー・お問い合わせなど、読者が最初に使う項目を置く場所として考えましょう。

サイトマップは便利なページですが、読者が最初に見るべきページではありません。グローバルメニューに入れると、メニューがごちゃつく場合があります。特にスマホ表示では、メニュー項目が多いと見づらくなります。

サイトマップはフッターに設置し、必要な人がアクセスできる形にしておけば十分です。

---

プラグインでHTMLサイトマップを作る方法

記事数が多い場合や、毎回手動で更新するのが大変になってきたら、プラグインを使う方法も検討してみましょう。

プラグインを使うメリット

HTMLサイトマップ用プラグインを使う最大のメリットは、自動で記事一覧を表示できることです。

手動作成の場合、新しい記事を公開するたびにサイトマップへリンクを追加する必要があります。記事数が100本以上になると、管理がかなり大変になってきます。

運営規模が大きくなってきたら、プラグインによる自動化を検討してもよいでしょう。

代表的なプラグイン例

HTMLサイトマップを作るプラグインには、いくつか種類があります。代表的なものとしては以下があります。

• Simple Sitemap
• WP Sitemap Page
• PS Auto Sitemap

ただし、プラグインを選ぶときは必ず以下を確認してください。

最終更新日

長期間更新されていないプラグインは、WordPress本体の更新に追いついていない可能性があります。

WordPressの対応バージョン

「最新のWordPressでテスト済み」と表示されているかを確認しましょう。

表示内容を調整できるか

特定のページやカテゴリーを除外できる設定があるか確認しましょう。

ショートコードを固定ページに貼る

多くのHTMLサイトマップ用プラグインでは、ショートコードを固定ページに貼って使います。

表示内容を必ず確認する

プラグインでHTMLサイトマップを作った場合、表示内容の確認は必須です。

特に以下を確認しましょう。

• 固定ページが大量に表示されていないか
• noindexページが表示されていないか
• タグページが大量に並んでいないか
• カテゴリー分けがわかりやすいか
• スマホで見づらくないか

自動生成されたとしても、読者にとって見づらければ意味がありません。サイトマップにすべてのURLを載せる必要はなく、読者が探す可能性のある記事や重要ページを中心に整理することが大切です。

更新停止中のプラグインは避ける

プラグインを使う場合は、更新停止中のものに注意しましょう。

WordPress本体やPHPのバージョンが変わると、古いプラグインが正常に動作しなくなることがあります。セキュリティ面でも、更新されていないプラグインを使い続けるのはリスクがあります。

HTMLサイトマップを作るだけなら、重いプラグインは必要ありません。シンプルに作れるものを選ぶか、固定ページで手動作成する方が安心な場合もありますよ。

---

7. HTMLサイトマップ作成時の注意点

HTMLサイトマップは便利ですが、作り方を間違えると見づらいページになります。ここでは、作成時の注意点を整理します。

noindexページは載せすぎない

HTMLサイトマップには、noindexページを大量に載せないようにしましょう。

noindexページとは、検索結果に表示させない設定をしているページのことです。タグページ・内容の薄い固定ページ・テスト用ページなどが該当します。

HTMLサイトマップは読者向けなので、必ずしもnoindexページを載せてはいけないわけではありません。ただし、読者に見せる必要がないページまで並べると、サイトマップがわかりにくくなります。基本的には、読者に読んでほしいページだけを載せるのがおすすめです。

空のカテゴリーは載せない

記事がほとんど入っていないカテゴリーは、HTMLサイトマップに載せない方がよい場合があります。

1記事しかないカテゴリーや、今後使う予定のないカテゴリーを並べると、サイト全体が整理されていない印象になります。カテゴリーの数を増やすよりも、読者が迷わない構成にすることが大切です。

カテゴリーが細かく分けすぎている場合は、まとめてしまった方が見やすいこともあります。迷ったら読者の目線で考えてみましょう。

タグページを大量に並べない

タグページを大量に並べるのも避けた方がよいです。

WordPressではタグを自由に作成できます。ただし、タグを増やしすぎると、似たような一覧ページが大量にできてしまいます。1記事にしか使っていないタグを大量に表示するのはおすすめしません。

タグページを載せる場合は、読者が実際に使いやすいものだけに絞りましょう。基本的には、HTMLサイトマップではカテゴリー中心で整理する方がわかりやすいです。

記事を追加したら定期的に見直す

手動でHTMLサイトマップを作った場合、記事を追加したら定期的に見直しましょう。

新しい記事を公開しても、サイトマップに追加しなければ読者はそこからたどれません。毎回必ず即更新する必要はありませんが、以下の目安で見直すと管理しやすいです。

記事数が増えるほど、サイトマップは単なる一覧ではなく、サイト全体を整理するための管理ページにもなります。定期的に見直す習慣をつけておくとよいですよ。

XMLサイトマップと混同しない

最後に、HTMLサイトマップとXMLサイトマップを混同しないようにしましょう。

HTMLサイトマップ

読者向けの固定ページ。フッターやメニューに設置して、読者が使えるようにしておきます。

XMLサイトマップ

Googleなどの検索エンジン向けのファイル。Search Consoleに送信します（例：https://自分のドメイン/wp-sitemap.xml）。

固定ページで作ったサイトマップをGoogle Search Consoleに送信する必要はありません。この2つは別物です。

---

まとめ：SWELLのHTMLサイトマップは固定ページでシンプルに作ればOK

SWELLでHTMLサイトマップを作るなら、まずは固定ページでシンプルに作るのがおすすめです。

今回の内容をまとめると、以下のとおりです。

項目	内容
HTMLサイトマップ	読者向けの記事一覧ページ
XMLサイトマップ	Google向けのファイル（別物）
作成方法	固定ページで手動作成がおすすめ
設置場所	フッターメニューが自然
更新タイミング	月1回・5記事ごとを目安に

HTMLサイトマップを作るときは、すべての記事を機械的に並べるのではなく、読者が探しやすいように整理することが大切です。

特に意識したいポイントは以下です。

SWELLはブロックエディタでページを整えやすいテーマなので、固定ページでも十分見やすいHTMLサイトマップを作れます。最初から完璧に作り込む必要はありません。

まずは主要カテゴリーと重要記事だけを整理して、読者が迷わず記事を探せるページを作りましょう！

---

XMLサイトマップの作成やGoogle Search Consoleへの送信方法については、次の記事で詳しく解説します。