第1章: はじめに
背景
この文書は「サイトマップ デザイン css」に関する調査結果を分かりやすくまとめたものです。サイトの構造を一覧で示すHTMLサイトマップの作り方と、見やすくするためのCSS装飾、WordPressで自動作成する方法、さらに実際のデザインパターンと参考サイトを扱います。
目的
読者が自分のサイトに合ったサイトマップを作れるように、基本から応用まで段階的に解説します。たとえば、企業サイトの「ページ一覧」、ブログの「カテゴリ別一覧」、ECサイトの「商品一覧」に応用できます。
想定読者
・HTMLとCSSの基礎がある方
・WordPressでサイトを運営している方
・サイトの情報設計を改善したい方
本書の構成
第2章ではHTMLサイトマップの基本構造と、WordPressでの自動生成プラグインの使い方を説明します。第3章ではデザインパターンを8種類紹介し、実際の参考事例を挙げながら、CSSでの表現方法を詳しく解説します。
進め方
まず第2章で土台を整え、第3章で見た目を作る流れで進めてください。具体例を多く示しますので、手を動かしながら学べます。
HTMLサイトマップとは？WordPressでの自動作成とCSSデザイン法
概要
HTMLサイトマップはサイト内のページを一覧で示すページです。訪問者が目的の情報にたどり着きやすくなり、サイトの信頼性も高まります。構造は分かりやすく、リンクが正確であることが大切です。
HTMLの基本構造（例と解説）
基本はul/liのリストです。ネストで階層を表現します。簡単な例：
<ul>
<li><a href="/">ホーム</a></li>
<li>サービス
<ul><li><a href="/service1">サービス1</a></li></ul>
</li>
</ul>
この形式は可読性が高く、スクリーンリーダーでも扱いやすくなります。
WordPressでの自動作成
プラグイン（例：Simple Sitemap、PS Auto Sitemap）を使うと、固定ページや投稿を自動で一覧化できます。ショートコードをページに貼るだけで更新も自動です。テーマのテンプレートに組み込めばデザインに馴染ませられます。
CSSでの見せ方
フォント、余白、リンク色、ホバー効果で見やすくします。階層はインデントで分かりやすくし、モバイルは折り畳み式にすると便利です。簡単なスタイル例：
ul{list-style:none;padding:0}
li{margin:6px 0}
a{color:#007bff}
a:hover{color:#0056b3}
実装時の注意点
リンクの更新を忘れない、重複ページを出さない、アクセシビリティ（代替テキストや明確なリンク文言）を意識してください。
サイトマップのデザインの作り方｜参考にしたいサイト8選も紹介
サイトマップの基本的な作り方
サイト訪問者が目的のページを素早く見つけられることを最優先にします。表示順は重要度や利用頻度で決め、視線の動きを意識して配置します。スマホ表示も必ず確認してください。
主なデザイン8種類とポイント
- シンプル型：文字のみでカテゴリー別に並べます。読みやすいフォントと余白で視認性を高めます。
- 階層構造視覚化型：大中小の見出しで階層を明示します。折りたたみを使うと長さを抑えられます。
- 色分け型：カテゴリーごとに色を割り当て直感的に分かりやすくします。色数は3〜5色が目安です。
- 縦2分割型：左右に分けて主要項目を並べ、縦スクロールを減らします。重要項目は左側に置きます。
- グラフィカル型：画像やアイコンで内容を示します。視覚で即理解させたい場合に有効です。
- 説明付き型：リンクごとに短い説明を付けて探しやすくします。説明は20〜40文字が目安です。
- カテゴリー別型：業種や用途ごとに明確に分類します。フィルター表示と相性が良いです。
- 辞書型：あいうえお順やキーワード一覧で探せます。大量コンテンツに向きます。
参考にしたいサイト8選
- 株式会社ニコン（シンプル型）：文字中心で整理されており探しやすいです。
- 早稲田大学（階層構造視覚化型）：学内情報を階層で分かりやすく示します。
- ひらかたパーク（色分け型）：色でカテゴリを区別し直感的です。
- シュテルン横浜東（縦2分割型）：左右分割で主要項目へ速くアクセスできます。
- 鬼怒川温泉あさやホテル（グラフィカル型）：画像で施設情報を伝えます。
- 日本郵便株式会社（説明付き型）：リンクに説明があり迷いにくいです。
- 楽天市場（カテゴリー別型）：膨大な商品をカテゴリごとに整理しています。
- ウィキペディア（辞書型）：見出しや索引で情報を効率よく探せます。
