ディレクトリマップとは、どんな資料なのか？
どのようにディレクトリマップを作成するのか？
ディレクトリマップを他の人がどのように作成しているのか、気になりませんか？
こんな方におすすめ
- そもそもディレクトリマップが何か知りたい
- ディレクトリマップの作成方法を知りたい
- ディレクトリマップの活用方法を知りたい
- Webディレクターの方
- Web業界に携わっている方
上記のような方に、ディレクトリマップについてお答えします。
わたしはWeb業界で20数年、働いているモノコト（@monokoto68）です。
これまで様々なWebサイト制作に携わってきました。
そんな現役WebディレクターがWebサイト制作のディレクトリマップについて教えます。
以前、以下のツイートをしました。「Webサイトの制作がスタートして、進捗を確認するための資料は、ディレクトリマップが良いよ。サイト全体がリスト形式で把握できて、ワイフレ、デザイン、コーディング、システムの進捗をチェックできる。」
ディレクトリマップについて、詳しく解説します。
ディレクトリマップとは？
ディレクトリマップとは、Webサイトで制作するべき全ページを網羅した一覧表のことです。
Webサイトを制作するときに、一覧表がないと、どんなページが何ページ必要なのかが分からず、迷走することになります。
クライアントはもちろん、制作するデザイナー、コーダー、エンジニアがディレクトリマップを見ることによって、Webサイトの規模感や制作に必要な情報を正確に把握することができます。
ディレクトリマップの役割
役割
- クライアントがWebサイトの規模感を把握するために使われる（見積作成にも役立つ）
- Webサイトの構成を精査できる
- Webサイトを制作する上で、制作スタッフにとって必要な情報が網羅されている
- Webサイト制作の進捗を管理するシートになる
クライアントや制作スタッフがWeｂサイト開発において、理解を深め、制作するための重要な資料がディレクトリマップと言えます。
クライアントがWebサイトの規模感を把握するために使われる（見積作成にも役立つ）
ディレクトリマップは全ページを網羅しているため、規模感を把握できます。
全ページをリスト化してみると「意外にもページが多かった」ということは、よくあることです。
全ページを可視化することによって、見積の材料にもなるため、見積もり作成時にディレクトリマップを用意することがあります。
Webサイトの構成を精査できる
ディレクトリマップによって、全ページを洗い出すとクライアントでも把握できていなかったページの存在に気づくことがあります。
不必要なページがあれば、削除したり、別ページと統合したりすることができます。
また、どこにページを配置するかなどの構成の見直しにも役に立ちますね。
Webサイト全体を詳細に見渡すことができ、構成を精査できるのがディレクトリマップです。
Webサイトを制作する上で、制作スタッフにとって必要な情報が網羅されている
実際にWebサイトを制作する過程において、ディレクトリ名・ファイル名・title・descriptionなど情報が必要になります。
ディレクトリマップで一覧を用意し、制作に必要な情報を掲載することで、制作スタッフの開発がスムーズに行えます。
Webサイト制作の進捗を管理するシートになる
プロジェクトの進行管理をするWebディレクターにとっては、現在、どのページが完成しているのか、開発中なのか未対応なのかを把握しておくことができるのがディレクトリマップです。
プロジェクトの進捗に合わせて、ディレクトリマップを更新しながら、スケジュールに遅れが出ていないのかを判断できるものとなるため、進捗管理シートとして活用することができます。
ディレクトリマップに必要な項目
ディレクトリマップには、どんな項目が必要でしょうか？
モノコトわたしが本業で実際に使っているディレクトリマップには以下の内容が書かれていますので、参考にどうぞ！
ディレクトリマップに必要な項目
- No
- 項目名（階層）
- ディレクトリ名・ファイル名
- title
- description
- 画面設計（ワイヤーフレーム）No
- 進捗管理（ワイフレ・デザイン・コーディング・システム）
- 確認用URL
- 本番URL
- 備考
項目名だけでは、分かりにくいですよね。
実際のディレクトリマップの作成方法を紹介します。
ディレクトリマップの作成方法
ディレクトリマップの作成方法は以下の通りです。
ディレクトリマップの作成方法
- Webサイトの全ページをリストアップする
- ディレクトリ名を決める
- ファイル名を決める
- title、descriptionを決める
Webサイト制作の初期段階では、上記内容で充分です。
プロジェクトの進行具合によって、さらに追記や更新を行っていきましょう。
①Webサイトの全ページをリストアップする
ディレクトリマップを作成するためには、Webサイトの全体像を把握しておく必要があります。
トップページから始まって、他にどんなページがあるのかをリストアップします。
例えば、小規模のコーポレートサイトでよくあるコンテンツは以下の通りです。
よくあるコンテンツ
- トップページ
- お知らせ
- 会社概要
- 代表メッセージ
- 沿革
- サービス案内
- お問い合わせ
- 採用情報
- プライバシーポリシー
- ご利用規約
コンテンツを決める工程では、サイトマップを作成するとよいでしょう。
②ディレクトリ名を決める
各コンテンツごとにディレクトリ名を決めます。
ディレクトリ名とは、例えば以下のような「category」や「webdirector」の部分にあたります。
https://monokoto68.com/category/webdirector/
いわゆるフォルダ名のことですね。
ディレクトリという箱を用意するために、リストアップしたコンテンツに名前を決めていく作業になります。
| コンテンツ名 | ディレクトリ名 |
|---|---|
| トップページ | / |
| お知らせ | /info |
| 会社概要 | /company |
| 代表メッセージ | /company |
| 沿革 | /company |
| サービス案内 | /service |
| お問い合わせ | /contact |
| 採用情報 | /recruit |
| プライバシーポリシー | /pp |
| ご利用規約 | /terms |
※トップページは最上位階層のためディレクトリはありません。
※「代表メッセージ」と「沿革」は会社概要に含めたいので、同じ「company」としています。
ファイル名を決める
次にディレクトリ名の中に入れるファイル名を決めます。
| コンテンツ名 | ディレクトリ名 | ファイル名 |
|---|---|---|
| トップページ | / | index.html |
| お知らせ | /info | /index.html |
| 会社概要 | /company | /index.html |
| 代表メッセージ | /company | /message.html |
| 沿革 | /company | /history.html |
| サービス案内 | /service | /index.html |
| お問い合わせ | /contact | /index.html |
| 採用情報 | /recruit | /index.html |
| プライバシーポリシー | /pp | /index.html |
| ご利用規約 | /terms | /index.html |
全ページをどのディレクトリに格納して、どんなファイル名をつけるかを定義していく作業です。
title、descriptionを決める
各ページのtitle（タイトル）、description（ディスクリプション）を決めていきます
| コンテンツ名 | ディレクトリ名 | ファイル名 | title | description |
|---|---|---|---|---|
| トップページ | / | index.html | モノコト株式会社 | ここに説明文が入ります。 |
| お知らせ | /info | /index.html | お知らせ｜モノコト株式会社 | ここに説明文が入ります。 |
| 会社概要 | /company | /index.html | 会社概要｜モノコト株式会社 | ここに説明文が入ります。 |
| 代表メッセージ | /company | /message.html | 代表メッセージ｜モノコト株式会社 | ここに説明文が入ります。 |
| 沿革 | /company | /history.html | 沿革｜モノコト株式会社 | ここに説明文が入ります。 |
| サービス案内 | /service | /index.html | サービス案内｜モノコト株式会社 | ここに説明文が入ります。 |
| お問い合わせ | /contact | /index.html | お問い合わせ｜モノコト株式会社 | ここに説明文が入ります。 |
| 採用情報 | /recruit | /index.html | 採用情報｜モノコト株式会社 | ここに説明文が入ります。 |
| プライバシーポリシー | /pp | /index.html | プライバシーポリシー｜モノコト株式会社 | ここに説明文が入ります。 |
| ご利用規約 | /terms | /index.html | ご利用規約｜モノコト株式会社 | ここに説明文が入ります。 |
※上記はサンプルのため、内容はダミーとなります。
タイトルやディスクリプションは、SEO施策としても重要な情報となりますので、検討から確定まで時間のかかる項目になります。
ただ、コーポレートサイトは、SEO重視というよりは定型文を記載することが多いですね。
※SEOに関してはオウンドメディアで対応することが多い。
ディレクトリマップ作成ツールの紹介
ディレクトリマップを作成するツールは、エクセル（Googleスプレッドシート）が最適です。
ページをリスト化するためには、表計算ソフトが役に立ちます。
クライアントや制作スタッフと共有しやすいのは、Googleスプレッドシート（無料）ですね。
ディレクトリマップとサイトマップの違い
ディレクトリマップとサイトマップってどう違うのでしょうか？
モノコトページ数が少ないWebサイトは、サイトマップがディレクトリマップの役割を果たすこともあるため、ディレクトリマップと混同されやすいかもしれません。
ディレクリマップとサイトマップの違い
- ディレクトリマップ・・・Webサイトで制作するべき全ページを網羅した一覧表
- サイトマップ・・・Webサイトのコンテンツの繋がりを俯瞰して視覚的に見ることができる資料
ディレクトリマップはテキストベースのリストになり、サイトマップは図ベースで全体を俯瞰してみることのできる資料になります。
【テンプレート（無料）】ディレクトリマップ配布
現役のWebディレクターのわたしがエクセルで作成したディレクトリマップを共有します。
ぜひ、ご活用ください。
クライアントに提出するときや社内の制作用に利用するときなど、状況に応じて不必要な項目があれば削除や非表示をして使っていただければと思います。
あくまでもよく利用する項目のみに留めておりますので、以下のような項目も必要であれば追記ください。
- 素材提供の有無
- ディレクターチェック
- 旧URL／新URL ※リニューアル時などリダイレクトさせたいときに役に立つ
まとめ：【無料テンプレートあり】ディレクトリマップとは？作成方法も教えます！
Webディレクターの仕事は、Webサイトを円滑に進めることです。
円滑に進めるために必要な資料のひとつが「ディレクトリマップ」になります。
ディレクトリマップとは、Webサイトで制作するべき全ページを網羅した一覧表のこと。
クラアントにとっては、全体像を把握することができ、制作スタッフにとっては、実制作するために必要な情報となり、Webディレクターにとっては進行管理するための資料となります。
Webサイト制作を進めるために重要な資料である「ディレクトリマップ」を深く理解し、自分なりに使いやすいものとしてください。
