08. Web制作におけるページ一覧表の作成と活用
ページ数が多いサイトって、管理が大変そうだね…。
そんなときに活躍するのが「ページ一覧表」だよ！
✴️ ページ一覧表とは？
- Web制作における全ページの設計・進行状況を可視化する管理シート
- 特に複数ページを扱う中〜大規模サイトでは必須の成果物
- ExcelやGoogleスプレッドシートで作成・共有するのが一般的
✴️ ページ一覧表に含める主な項目
| 項目名 | 内容例 |
|---|---|
| ページ名 | トップページ、会社概要、お問い合わせ、ブログ記事など |
| ディレクトリ名 | /about/、/contact/、/blog/2025/06/ など |
| ファイル名（仮） | index.html、about.html など |
| URLパス | https://example.com/about/ |
| ページの目的・内容 | 商品紹介、フォーム、リスト表示など |
| ワイヤー有無 | 〇／×（リンクを貼ることも） |
| デザイン有無 | 〇／×（Figma／XDへのリンク） |
| コーディング進捗 | 未着手／作業中／完了／確認待ち など |
| 備考 | 特記事項や注意点（フォームあり・SEO強化ページ など） |
✴️ サンプル構成（GoogleスプレッドシートやExcelで）
| ページ名 | ディレクトリ | ファイル名 | URL | 内容 | ワイヤー | デザイン | コーディング | 備考 |
|---|---|---|---|---|---|---|---|---|
| トップページ | / |
index.html |
https://example.com/ |
トップビジュアル | 〇 | 〇 | 完了 | バナー自動切替あり |
| 会社概要 | /about/ |
about.html |
https://example.com/about/ |
会社情報紹介 | 〇 | 〇 | 作業中 | - |
| お問い合わせ | /contact/ |
contact.html |
https://example.com/contact/ |
フォーム設置 | 〇 | 〇 | 未着手 | 確認メール必要 |
✴️ どんな時に活用される？
- 制作初期：全体のページ数・構成・担当割り振りの把握
- 進行中：作業の進捗管理、優先度の把握
- クライアントとの共有：ページ構成の確認・レビュー用
- 公開直前：URL・リンクチェック・納品内容の最終確認に
✴️ ページ一覧表のメリット
- 全員が「何を作るか」「どこまで進んでいるか」を理解できる
- 修正や追加依頼にも迅速に対応できる
- チーム間の連携ミスやページの作り忘れを防止
✴️ 運用のポイント
- Googleスプレッドシートで常に最新情報を共有するのがおすすめ
- ディレクターが更新を管理しつつ、実装担当も編集できる体制が理想
- 状況に応じて「レビュー」「テスト済み」などの列を追加すると◎
🌟 まとめ：ページ一覧表でプロジェクトを見渡そう
| 要素 | 内容 |
|---|---|
| 目的 | ページの全体像と進捗を可視化するため |
| 管理ツール | Excel / Googleスプレッドシートなど |
| 含める項目 | ページ名・ディレクトリ・ファイル名・URL・進捗など |
| 運用の工夫 | 進捗やチェックの状態を列で整理。共有＆更新が鍵 |
この表があれば、何が終わってて何がまだか一目でわかるね！
そう！「見える化」がプロジェクト成功の第一歩なんだよ♪