COLUMN
コラム
2026.05.25
サイトマップとは？HTMLサイトマップ・XMLサイトマップの違いと作り方・デザインのコツ
- allmanage
- 株式会社オールマネージからの情報発信コラムです！
「サイトマップって何？どうやって作るの？」と悩んでいるホームページ初心者の方へ！サイトマップにはユーザー向けの「HTMLサイトマップ」とGoogleに読ませる「XMLサイトマップ」の2種類があります。この記事では2つの違い・作り方・見やすくなるデザインのコツをまとめて解説するので、ぜひ参考にしてください！
サイトマップとは？2種類の役割を整理する
サイトマップとは、Webサイト内の全ページを一覧化した「地図」のことです！ただし「サイトマップ」という言葉には、目的の違う2つの種類があります。
- HTMLサイトマップ：訪問者（人）が目的のページを探しやすくするためのページ
- XMLサイトマップ：Googleなどの検索エンジンのクローラー（ロボット）にページ情報を伝えるためのファイル
どちらもサイトマップと呼ばれますが、対象が「人」か「検索エンジン」かで用途がまったく異なります！ホームページ運営では両方を用意することがベストプラクティスとされています。
ポイント：HTMLサイトマップはユーザビリティ向上に、XMLサイトマップはSEO向上に効果があります。どちらか一方だけでなく両方を準備するのがおすすめなのだ！
HTMLサイトマップとXMLサイトマップの違い
2つのサイトマップの違いを比較表でまとめました！どちらを先に作るべきか迷ったときの参考にしてください。
| 項目 | HTMLサイトマップ | XMLサイトマップ |
|---|---|---|
| 目的 | 訪問者の回遊・迷子防止 | 検索エンジンへのページ通知 |
| 形式 | HTMLページ（Webブラウザで閲覧可能） | XMLファイル（テキストデータ） |
| 設置場所 | サイト内の1ページとして公開 | サーバーのルートディレクトリに配置 |
| 誰が使う？ | サイト訪問者（人） | Googleなどの検索エンジン |
| SEO効果 | 間接的（離脱率低下・回遊促進） | 直接的（インデックス促進） |
| 更新頻度 | ページ追加時に手動更新 | プラグインで自動更新が可能 |
中小企業・個人事業主のホームページであれば、まずXMLサイトマップをGoogleに送信してインデックスされやすくし、ページ数が増えてきたらHTMLサイトマップを追加するという順番が効率的です！
なお、
のような内部SEO対策と組み合わせると、さらに検索エンジンに評価されやすいサイトになります！
HTMLサイトマップの作り方・設置場所
HTMLサイトマップは、サイト内の全ページをリスト形式で一覧にしたWebページです！作り方と設置場所を解説します。
WordPressで作る方法
WordPressサイトなら、プラグインを使うのが最も簡単です！
- WordPress管理画面の「プラグイン」→「新規追加」を開く
- 「PS Auto Sitemap」などのHTMLサイトマップ用プラグインをインストール
- プラグインを有効化して設定画面を開く
- 「固定ページ」で新規ページを作成し、ショートコードを貼り付ける
- 「サイトマップ」という名前でページを公開する
PS Auto Sitemapのショートコード例：
[sitemap]
このショートコードをページ本文に貼り付けるだけで、自動でページ一覧が生成されます！
手動でHTMLコードを書く方法
WordPressを使わない場合や、デザインを細かく調整したい場合は手動で作成します！HTMLファイルを新規作成し、以下のような構造でページリンクを記述します。
シンプルなHTMLサイトマップの構造例：
大カテゴリを<h2>、中カテゴリを<h3>、各ページを<li>で記述するとスッキリ整理できます！カテゴリが深い場合はさらに<ul>をネストして階層を表現してください。
HTMLサイトマップの設置場所
HTMLサイトマップは フッターへのリンク が定番です！ユーザーがページの末尾まで読んで次の行動に迷ったときに目に入る場所なので、離脱防止に効果があります。
- フッターのナビゲーションメニューに「サイトマップ」リンクを追加する
- URLは
/sitemap/や/site-map/のようなわかりやすいパスにする - ページ数が多いサイトは、グローバルナビにも設置を検討する
XMLサイトマップの作り方・Googleへの送信方法
XMLサイトマップはGoogleのクローラーがサイトの構造を理解するために読む「設計図」です！適切に設定することで、新しいページが検索結果に表示されるまでの時間を短縮できます。
WordPressで作る方法（Yoast SEO / All in One SEO）
WordPressサイトであれば、SEOプラグインを使うのが最も確実です！
- 「Yoast SEO」または「All in One SEO」プラグインをインストール・有効化する
- Yoast SEOの場合：「SEO」→「一般」→「機能」タブで「XMLサイトマップ」をオンにする
- 設定後、
https://yourdomain.com/sitemap_index.xmlにアクセスして生成を確認する - ページ・投稿が更新されるたびに自動でサイトマップも更新される
ポイント：XMLサイトマップのURLは通常 /sitemap.xml または /sitemap_index.xml です。プラグインが自動生成するので、手動でファイルを作成する必要はありません！
手動でXMLサイトマップを作る方法
WordPressを使わない静的サイトの場合、以下の方法でXMLサイトマップを作成できます。
- オンラインジェネレーター：「XML-Sitemaps.com」などの無料ツールにURLを入力すると自動生成してくれます
- 手書き：XML形式でページURLを記述し、
sitemap.xmlという名前でサーバーのルートに設置する
Google Search Consoleへの送信方法
XMLサイトマップを作ったら、Google Search Consoleから送信してGoogleに知らせましょう！
- Google Search Console（search.google.com/search-console）にログインする
- 左メニューの「サイトマップ」をクリックする
- サイトマップのURL（例：
sitemap.xml）を入力して「送信」をクリックする - ステータスが「成功しました」になれば送信完了！
注意：送信後すぐにすべてのページがインデックスされるわけではありません！Googleのクロール頻度はサイトの更新頻度や評価によって変わります。送信はあくまで「Googleへの通知」と理解してください。
サイトマップの送信と合わせて、コンテンツの質を高めることがSEOの基本です！では記事制作から戦略設計まで一貫して支援しています。
見やすいHTMLサイトマップデザインのコツ
HTMLサイトマップはページ一覧を並べるだけでなく、視覚的に見やすく設計することで「迷ったときのナビゲーション」として機能します！デザインのコツを5つ紹介します。
コツ1：カテゴリ階層を明確にする
大カテゴリ → 中カテゴリ → 個別ページの順に階層を整理して表示しましょう！見出しタグ（h2・h3）とインデント（字下げ）を組み合わせると、構造がひと目でわかります。
例：
▸ サービス一覧（h2）
▸ ホームページ制作（h3）
▸ 制作の流れ
▸ 料金について
コツ2：アイコンや矢印で視覚的なアクセントをつける
各リンクの先頭に矢印（▸）や小さなアイコンを付けるだけで、クリックできることが直感的に伝わります！CSSで擬似要素（::before）を使う方法が一般的です。
コツ3：カテゴリごとに背景色・ボーダーで区切る
大カテゴリと小カテゴリを同じデザインにすると、構造が把握しにくくなります！カテゴリの見出し行に薄い背景色やボトムボーダーを追加して区切りを作ると、一覧が読みやすくなります。
コツ4：2カラム・3カラムレイアウトでコンパクトにまとめる
ページ数が多いサイトでは、リストを縦に並べると非常に長くなってしまいます！CSSのフレックスボックスやグリッドを使って2〜3カラムで並べると、スクロール量が減って見やすくなります。スマートフォンでは1カラムに戻すレスポンシブ対応も忘れずに！
コツ5：ホバー時にカラーが変わるリンクスタイルを設定する
リンクにホバーエフェクト（:hover）を設定することで、マウスを当てたときに色が変わり「クリックできる」とわかりやすくなります！テキストカラーをブランドカラーに変える方法がシンプルでおすすめです。
- リンク色：サイトのブランドカラーに合わせる
- フォントサイズ：大カテゴリは大きめ、小ページは14〜16px程度
- 行間（line-height）：1.8〜2.0で読みやすく
- スマホ対応：タップしやすいよう各リンクに十分なパディングを設定する
サイトマップデザインのNG例
以下のデザインはユーザーが迷いやすくなるので避けてください！
| NGデザイン | 問題点 | OKデザイン |
|---|---|---|
| カテゴリ分けなしで全ページを羅列 | どこに何があるかわからない | 大カテゴリ→小ページの階層で整理 |
| テキストリンクのみで装飾なし | どこが押せるのか不明 | ホバーエフェクト＋アイコンで視認性UP |
| ページタイトルが長すぎて折り返す | 一覧としての可読性が下がる | 短い見出し名で統一（20字以内目安） |
| スマホで横スクロールが発生する | モバイルユーザーが使えない | レスポンシブ対応で1カラムに切り替え |
よくある質問
Q. サイトマップは必ず必要ですか？
A. HTMLサイトマップは必須ではありませんが、ページ数が10ページを超えるサイトでは設置することをおすすめします！一方、XMLサイトマップはGoogleへのインデックス促進に直接効果があるため、サイト開設と同時に作成・送信するのがベストとされています。
Q. XMLサイトマップを送信しないと検索結果に表示されませんか？
A. 送信しなくてもGoogleがサイトを発見してインデックスする可能性はあります！ただし、送信することでクローラーが認識するスピードが上がり、特に新しいページやあまりリンクが張られていないページのインデックスには効果的とされています。
Q. WordPressでXMLサイトマップを作る場合、どのプラグインがおすすめですか？
A. 「Yoast SEO」または「All in One SEO Pack」が定番で信頼性も高くおすすめです！どちらも設定画面でXMLサイトマップをオンにするだけで自動生成・自動更新されます。すでにSEOプラグインを導入している場合は、機能が重複しないよう1つだけ使うようにしてください。
Q. サイトマップに含めてはいけないページはありますか？
A. 検索結果に表示させたくないページ（管理画面・テストページ・重複コンテンツなど）はXMLサイトマップから除外してください！noindexタグが設定されているページもサイトマップに含めるとGoogleのガイドラインに反する場合があるため、除外設定を確認することをおすすめします。