はじめに
本ドキュメントは、GoogleスプレッドシートやExcelを使ってウェブサイトのサイトマップ(ページ構成一覧)を作成する方法をやさしく解説します。サイト設計やリニューアル、新規制作の際にページ構成を可視化し、チームで共有・編集するための具体的な手順や注意点をまとめています。
対象読者
– サイト制作や運用に関わるディレクター、デザイナー、エンジニア
– 小規模事業者や個人でサイト構成を整理したい方
本章での内容
– この資料の目的と進め方を説明します
– 準備するもの(GoogleスプレッドシートやExcel、既存ページ一覧など)を明確にします
なぜスプレッドシートで作るのか
– 編集や共有が簡単で履歴管理がしやすいです
– フィルタやソートでページをカテゴリ別に並べ替えられます
– 例:トップページ、サービスページ、ブログ、問い合わせページを表にして管理します
進め方のコツ
1. まずは既存ページの一覧を作成します(URLやページ名を列に)
2. 役割(公開日・担当者・SEOタイトルなど)を必要に応じて追加します
3. チームで共同編集し、定期的に更新します
次章では、サイトマップの基本概念とスプレッドシートでの設計方針を詳しく説明します。ご自身の状況に合わせて読み進めてください。
サイトマップとスプレッドシートの基礎知識
サイトマップとは
サイトマップは、ウェブサイト内の全ページ構成と階層を一覧にした資料です。設計段階やページ追加・修正、SEO対策で役立ちます。図で表す場合もありますが、表形式でまとめると管理が楽になります。
スプレッドシートが適している理由
GoogleスプレッドシートやExcelは、行や列の並べ替えが簡単で、チームで同時編集できます。URLや公開状況をすばやく更新でき、履歴も残るので変更管理に向いています。
基本用語と構成要素
- URL(例: /about): ページの場所を表します。
- 親ページ/子ページ: 階層を示します。トップページが親、詳細が子です。
- ページタイプ: 固定ページ、ブログ、カテゴリなど。
- ステータス: 草案、公開、保留など。
簡単な例(列の例)
- ID | 親ID | ページ名 | パス | ページタイプ | ステータス | 優先度
例: 3 | 1 | サービス詳細 | /services/a | 固定 | 公開 | 0.8
注意点
階層は親IDやインデントで表現すると管理しやすいです。URLは正確に記載し、変更履歴を残す運用を決めてください。共有設定で編集権限を限定すると誤編集を防げます。
スプレッドシートでのサイトマップ作成手順
はじめに
スプレッドシート上でサイトマップを作る手順を、実務ですぐ使える形で説明します。順を追って進めれば初めてでも作れます。
1. 目的の明確化
まずサイトの目的を決めます。例:見込み客の獲得(問い合わせ導線を強化)、商品販売、企業ブランディング。目的で優先するページが変わります。
2. 必要ページの洗い出し
トップページ、会社概要、サービス紹介、導入事例、料金、FAQ、ブログ、問い合わせなどをリストアップします。思いつく限り列挙して後で整理します。
3. ページのグルーピング・階層整理
リストをカテゴリごとに分類して階層を決めます。例:サービス(製品A/製品B)→製品Aの詳細。深すぎない(深さ2〜3目安)ように調整します。
4. スプレッドシートへの入力
推奨カラム例:ページ名、カテゴリ、階層(レベル)、URL(仮パス可)、説明、担当、優先度。1行1ページで入力し、フィルターや並べ替えで確認します。例:ページ名:製品A、カテゴリ:サービス、階層:2、URL:/service/a
5. 組織図(ツリー構造)の作成
視覚化は分かりやすさを高めます。Google Sheetsなら「挿入→グラフ(図表)→組織図」を使うと自動でツリー化できます。ExcelならSmartArtや図形を使うと良いです。
作業のコツ
- 色分けでカテゴリを見やすくする
- 優先度で並べ替え、公開順を決める
- URLは仮で良いので早めに入れて設計と整合させる
この手順で作れば、関係者との共有や制作指示がスムーズになります。
スプレッドシートサイトマップの活用例と応用
活用例
- サイト設計の全体把握:ページ一覧、階層、雛形(テンプレート)を並べるだけで構造が一目で分かります。ページ漏れや重複も見つけやすくなります。
- コンテンツインベントリ:公開日や担当者、ステータスを付けて管理すれば、更新優先度や責任範囲が明確になります。
- クライアント共有・レビュー:Google スプレッドシートなら同時編集やコメントで意見を集め、修正を素早く反映できます。
実践的テクニック
- 重複チェック:URL列をUNIQUEやCOUNTIFで重複を抽出します。条件付き書式で視覚的に強調すると見落としが減ります。
- 階層チェック:親ページIDや深さ(depth)列を作り、フィルターや並び替えで階層の過不足を確認します。
- HTML生成:URLとタイトルを結合する式(例:”
- “&B2&”
“)で簡易のサイトマップコードを作れます。
応用例
- ワイヤーフレーム連携:重要ページにワイヤーフレームのリンクを付け、デザインチームと連携します。
- 開発管理:ステータス、優先度、チケットIDを追加してスプリントのバックログとして使えます。
テンプレートと自動化
- 無料テンプレートで基本構造を用意し、プロジェクトに合わせてカスタマイズすると効率的です。自動生成ツールと組み合わせると初期作成が早くなります。
注意点・おすすめのカラム設計
基本カラム例
- ページ名:画面で表示する正式名称。例:「会社概要」
- カテゴリ:大分類(採用、商品など)で絞り込みしやすくする
- 階層:ツリー構造を示す(例:1、1.2、1.2.1)
- URL:実際の公開URL。変更時は旧URLを履歴として残す
- 担当者:更新責任者の名前と連絡先
- 更新日:最終更新日。自動更新の式を使うと便利
- 備考:デザインや改修メモ
編集性を高める設計
ページの追加・削除が多い場合は必須カラムを絞ります(例:ページ名・URL・担当者のみ)。ドロップダウンやデータ検証で入力ミスを減らし、ヘッダーを固定してスクロール時に見やすくします。テンプレート行を用意すると新規追加が早くなります。
大規模サイトの工夫
シートをセクションごとに分け、マスターシートに要約を置くと管理が楽です。フィルターやスクリプトで担当者別・状態別のビューを作ると作業が回りやすくなります。各ページにユニークIDと親IDを付けると階層管理や差分追跡が安定します。
SEO・運用向けカラム追加例
- ターゲットキーワード、meta title、meta description
- コンテンツ状態(下書き・レビュー・公開)
- 優先度・更新頻度・GAタグや目標ページの識別
これらを加えるとサイト制作とSEO設計を同時に進められます。
注意点
IDは固定して振り直しを避け、URL変更時は旧URLの履歴を残してください。複数人編集では競合を防ぐため編集ルールと権限設定を定めます。自動化(更新日やステータス更新)を導入すると運用負荷が下がります。変更履歴は定期的にエクスポートしてバックアップしてください。
おすすめツール・リソース
概要
サイトマップ作成で便利なツールを用途別に紹介します。無料で共有しやすいもの、ローカルで細かく集計するもの、自動で既存サイトを取得するものなどがあります。
クラウド共有に便利
- Googleスプレッドシート:無料で同時編集・コメントが可能。テンプレートを用意すると新規サイト作成が早くなります。CSVやExcelで出力できます。
ローカル作業や詳細集計
- Microsoft Excel:ピボットやマクロで大量データを整理できます。オフライン作業や細かな数式が必要なときに向きます。
自動生成・サイトクロール系
- Slickplan:既存サイトのインポートやドラッグ&ドロップでの編集、HTML/PDF出力が便利です。
- Screaming Frog:サイトをクロールしてページ一覧をCSV出力できます。構造把握やリンク調査に役立ちます。
補助ツール・テンプレート
- スプレッドシートのテンプレート(カラム設計済み)やブラウザ拡張で視覚化すると作業が速くなります。
- GitHubやNotionでバージョン管理や議事録を残すと履歴が分かりやすくなります。
学習リソース
- 公式ヘルプ、動画チュートリアル、ブログ記事やフォーラムが参考になります。具体的な手順やテンプレートを探すと導入がスムーズです。
組み合わせの例
- チームで編集:Googleスプレッドシート + Slickplan(自動取り込みと協働)
- 詳細分析:Screaming FrogでCSV出力 → Excelで集計
用途に合わせてツールを選ぶと効率が上がります。必要があれば導入方法やテンプレート例もご案内します。












