【Google スプレッドシート】サイトマップ（構成図）を作成する
本記事で解説する “サイトマップ”
一口に「サイトマップ」と言ってもそれが意味するものは複数あります。
代表的なものは以下の3種類でしょう。
- 🧑💻開発者のためのサイトマップ
- サイトのページ構成図のこと。一般的に、ExcelやGoogle スプレッドシートなどの表計算ソフトで作られることが多い。
- 🔍検索エンジンのためのサイトマップ
- Googleなどの検索エンジンに自サイトの構造を知らせるもの。XML形式のファイル。
- 📱ユーザーのためのサイトマップ
- そのサイトが持つページのリンクを一覧化したもの。ユーザーに対してそのサイトにどういったコンテンツがあるのかを伝える役割がある。サイトのフッターに設置したり、それ専用に「サイトマップ」というページを設けることもある。
本記事では1の「🧑💻開発者のためのサイトマップ」の作り方について解説します。
サイトマップを作成する目的
そもそもなぜサイトマップを作るのか？
私が思う理由を以下に列挙します。
- サイトおよびアプリの全体像を、「ページ」という単位を元に概観するため
- 作ろうとしているサイトにどういったページが必要なのか、サイトマップの作成を通じて考えを整理するため
- ページ名を定義するため
- あらかじめページの英語名まで決めておけば実際の開発の際に都度ページ名を考えずに済む
- 各ページの階層構造（パス）までサイトマップ作成時点で決めておくことで、ページのディレクトリ構成やファイル構成も明確になり、フロントエンド開発者の負担が減る
- 開発するページの数を把握するため
- 何ページ分のワイヤーフレーム・デザインを作ればいいのかが明確になる
- 何ページ開発すればいいのかが明確になる
- フロントエンドの開発工数が計算しやすくなる
思いつくままに書き出してみましたが、個人的には、サイトマップを作成することで以上のようなメリットがあると考えています。
基本設計の時点でなるべく精緻なサイトマップを作成しておくと後の開発工程でかなりラクをすることができます。
サイトマップに記載すべき項目
では、実際にサイトマップを作るとして、具体的にどういった情報・項目を記載すればよいのでしょうか？
記載項目を重要度ごとに分けてリストアップしてみます。
1. 【💪必須】マストで用意すべきもの
- 連番
- ページ名（日本語）
- ページ名（英語）
- 備考欄
2. 【👍推奨】書かれていると嬉しいもの
- サイトに使用するドメインの名前
- ファイル名（実装時の、そのページファイルの）
- 相対パス
3. 【👀任意】書いても書かなくてもいいもの
- ページの種類、カテゴリー
- デザインの確認URL
- 各環境での、そのページのURL
- ローカル環境
- テスト環境
- ステージング環境
- 本番環境
- 何階層目のページか？
これから初めてサイトマップを作成するという方は、ひとまず 1.【💪必須】 の入力欄は確実に設けるようにしてみてください。必要に応じて 2.【👍推奨】 3.【👀任意】 の項目なども適宜追加するとよいでしょう。
※ちなみに後述する私が作成したサイトマップのテンプレートでは、上記の項目をすべて網羅しています。
どのようにサイトマップを作るか？
表計算ソフトの「Google スプレッドシート」がおすすめです。
究極、サイトのページ構造がわかれば単純なテキストファイルでも何でもいいのですが、
- サイトマップの作成・更新・共有が容易で、作業コストが低い
- 1つのサイトマップを複数人で同時に閲覧・編集できる
- 項目の並べ替えや検索の機能が充実している
- 簡易的なバリデーションを付けられる
- ページ数を自動計算できる
- Googleアカウントさえ持っていれば無料で利用できる
...などの理由から、「Google スプレッドシート」でサイトマップを作成することをおすすめします。
サイトマップのテンプレート（Google スプレッドシート）
私が日ごろ実務で使用しているサイトマップのテンプレートを共有します。
スプレッドシートのメニューの ファイル > コピーを作成 よりご自身のGoogle アカウントのGoogle ドライブにこのテンプレートを複製し、サイトマップ作成時のベースとしてご自由にお使いください。
このテンプレートの使い方、記入方法
1. ファイル名を変更する
コピーしたテンプレートを開くとはじめはこのような状態です。
ひとまずこちらのファイル名を書き換えましょう。
今回開発するサイトの名前に合わせてGoogle スプレッドシートのファイル名を変更します。
ここでは仮に「ポートフォリオ」とします。
2. 「テンプレート」シートを複製し、シート名を変更する
「テンプレート」シートはサイトマップを作成するシートのコピペ元として取っておきたいので、最初にこの「テンプレート」シートのコピーを取ります。
「テンプレート」シートをコピーした後の状態は以下のとおり。
コピーしたシートのシート名を変更しましょう（「テンプレート のコピー」の部分）。
シート名はサイトのドメイン名など、何のサイト・画面のサイトマップなのか一目でわかる名前がよいでしょう。
ここでは「my-portfolio.com」としています。
3. ページ名（日本語）を書き出していく
サイトに必要なページをまずは日本語でC〜H列の範囲に入力していきます。
C〜H列はそれぞれ以下のようにページ階層（＝パス）に対応しています。
| C列 | D列 | E列 | F列 | G列 | H列 |
|---|---|---|---|---|---|
| 第1階層 | 第2階層 | 第3階層 | 第4階層 | 第5階層 | 第6階層〜 |
「トップページ」であれば第1階層なのでC列に入力、
そのひとつ下の階層のページであれば第2階層なのでD列に入力、
さらにそのひとつ下の階層のページであれば第3階層なのでE列に入力、
...といったようなイメージでページ名を書き出していきます。
ちなみに入力した列（階層）に応じて行が青く色分けされるようにしています（「条件付き書式」の設定にて）。
階層が深くなればなるほど青みが強く、暗くなっていき、視覚的にページ階層の深さがわかるようになっています。
4. ページ名（英語）を書き出していく
今度はJ列に「ページ名（英語）」および「相対パス（URL）」を入力していきます。
5. 階層の数字を入力する
I列にそのページの階層を入力します。
6. ファイル名を入力する
フロントエンドの技術スタックが決まっていれば、このサイトマップ作成時点でK〜L列にファイル名まで書いてしまいましょう。
7. 相対パス（ファイル）を入力する
J列の「相対パス（URL）」とK〜L列の「ファイル名」が書けたら、この2つを元にM列の「相対パス（ファイル）」も入力します。
8. ドメイン名を入力する
ここで一度「ドメイン名」というシートに移動します。
サイトに使用するドメインがすでに決まっていればこの「ドメイン名」シートに入力します。
- ローカル環境
- テスト環境
- ステージング環境
- 本番環境
上記の環境それぞれのドメイン名を入力してください。
※用意しない環境があれば、その分のドメイン名は空欄のままで大丈夫です。
ドメイン名が入力できたらこれまで編集していたサイトマップのシートに戻ります。
「ドメイン名」シートにドメインを入力すると、O〜R列に各環境の各ページのURLが自動的に出力されます。
9. ページの種類（カテゴリー）を入力する
B列にそのページのおおまかな種類を入力します。
選択できる種類は「データの入力規則」にて設定しています。
こちらの種類・分類はお好みでカスタマイズしていただいて結構です。
10. 必要に応じて備考欄にメモを書く
S列は備考欄です。
そのページについて何かしらメモを残しておきたいことがあればここに記入しましょう。
11. デザインのリンクを入力する
デザインが作成できたらN列にそのページのデザインの確認リンクを入力します。
Figmaのデザインのリンクなどを入力し、そのページのデザインがすぐさま参照できるような状態にしておきます。
この列の入力は必須ではありませんが、ここを入力しておくとフロントエンドの実装を担当する方に喜ばれるでしょう。
ここまで入力できたらサイトマップの大枠は完成です！
一旦は完成ですが、デザインや実装のフェーズ中にも随時いるページ／いらないページが出てくることでしょう。
その都度このサイトマップは修正し、開発に役立てていただければと思います。
ほか、このシートに設定していることについて補足
簡易的な重複エラーのバリデーションを「条件付き書式」で設定しています。
C〜H列の「ページタイトル」にダブりがあるとセルが赤く塗りつぶされてページ名の重複があることを知らせてくれます。
J列の「相対パス（URL）」も同様の重複エラーのバリデーションを設定しています。
まったく同じパスがあった場合はセルが赤くなります。
最後に
サイトマップは一度作ってそれで終わりではありません。
「サイトマップを作成する目的」にも書いたとおり、作成したサイトマップをどう運用・活用していくかがもっとも大事です。開発者が参照するドキュメントとして逐一メンテナンスし、情報の信頼性を保っていくことが求められます。
また、このサイトマップの作りが絶対的な正解でもありません。
たとえばサイトマップにチェックボックスの列を追加し、このサイトマップ上でデザインや実装の進捗管理までしてしまってもいいでしょう。
逆に、不要だと思う列はご自身の判断で削除してしまってもOKです。
いちWeb系エンジニアのひとつのやり方として、この記事を読んでくださった方のサイトマップ作りの参考になれば幸いです！
Discussion