WEBディレクションの修練場では、Web制作の現場で起こるさまざまなタスクをこなしながらWebディレクションスキルを磨いていただきます。
今回のお題はディレクトリマップ。
ディレクトリマップはサイトの新規立ち上げ時、リニューアル時、運用中のコンテンツ整理などの場面で登場する重要アイテム。
ディレクトリマップをもとに新規コンテンツの企画をしたり、デザインが必要なページを確認したり、コーディングしたり、SEO対策を行ったり、見積書を作ったり、進捗を確認したり、クライアントと認識合わせをしたり…などを行います。
演習を通してディレクトリマップが作れるようになりましょう。
お題
先日クライアントに提案したサイトマップ（構造図）でOKが出た。
いよいよWeb制作をスタートする段階。
これからWebデザイン、Web構築を進めるに当たってディレクトリマップを作りたい。
【サイトマップ（構造図）】
- ホーム
- 会社案内
∟企業理念
∟社長メッセージ
∟会社概要
∟社員紹介
∟沿革
∟グループ会社
∟アクセス - サービス案内
∟サービス詳細 - 当社の強み
∟当社の強み詳細 - 導入事例
∟事例詳細 - IR情報
∟IR情報詳細 - お知らせ
∟お知らせ詳細 - ブログ
∟記事詳細 - 採用情報
∟募集要項 - プライバシーポリシー
- お問い合わせ
【今回のお題】
サイトマップ（構造図）を元に最低限必要なディレクトリマップを作る。
ヒント
ディレクトリマップの基本項目（ページID・階層構造・URL・title・description）を盛り込んだディレクトリマップを作ります。
回答例
ディレクトリマップはWeb制作を始める前の資料で、サイト内の全ページのURLと各種設定情報をまとめたシートのことです。
サイトマップ（構造図）がツリー構造で視覚的にサイト全体を俯瞰するためのものであるのに対して、ディレクトリマップは表形式でサイトの全ページの設定情報を確認するためのものです。
今回は最低限必要な情報（ページID・階層構造・URL・title・description）を盛り込んだディレクトリマップを作ります。
次の順に作っていきましょう。
- ページの階層構造
- ページURL
- title
- description
1. ページの階層構造
ディレクトリマップはページの階層構造が分かるように作ります。
- 第1階層：ホーム
- 第2階層：親ページ
- 第3階層：子ページ
第1階層～第3階層が分かるようにインデントをつけて記入します。
第1階層はどのサイトでも1つのみになります。
2. ページのURL（ディレクトリ名・ファイル名）
ページのURLを決めましょう。
ページのURLは「ドメイン名＋ディレクトリ名＋ファイル名」で指定します。
（URL）ドメイン名/ディレクトリ名/ファイル名
ディレクトリ＝フォルダ。
ファイル＝HTMLファイル（○○.html）のことです。
（WebサイトはHTMLファイルの他に画像ファイル○○.png、cssファイル○○.css、jsファイル○○.js、phpファイル○○.phpなどの集合体ですが、ディレクトリマップではURLを表すhtmlファイル名だけ記入します）
ディレクトリ名とファイル名にはページ内容を表すキーワードを入れて作ると分かりやすいです。
たとえばお知らせの一覧ページなら「info」といった具合です。
- ドメイン名/index.html
- ドメイン名/info/index.html
- ドメイン名/info/info-20220401.html
3. title
コーディング時のtitleの設定情報を書きます。
titleは「ページ名｜サイト名」という書き方が一般的です。
- ホーム →ホーム｜サンプル株式会社（または、サンプル株式会社）
- 会社案内 → 会社案内｜サンプル株式会社
- お知らせ → お知らせ｜サンプル株式会社
（以下同様）
4. description
コーディング時のdescriptionの設定情報を決めます。
descriptionは80文字～100文字程度でページの概要を記入します。
- ホーム →サンプル株式会社のホームページです。…
- 会社案内 → サンプル株式会社の会社案内ページです。…
- お知らせ →サンプル株式会社からのお知らせをまとめたページです。…
（以下同様）
ディレクトリマップをダウンロードする ※「ファイル」→「コピーを作成」からダウンロードしてお使いいただけます
これで完成。
おつかれさまでした！
ディレクトリマップについての補足
ディレクトリマップは案件によっては作らないケースもありますが、管理用にできればあった方が良いです。
今回作ったディレクトリマップは最低限のシンプルなものですが、設定情報などもっと細かく書く場合もあります。
たとえばこんな情報を載せます。
- ページID
- 階層構造
- ページURL（ディレクトリ名・ファイル名）
- ページタイトル（title）
- ページ説明（description）
- 確認用URL（テスト環境URL）
- キーワード（meta keywords）
- カテゴリ
- タグ
- OGP設定情報
- インデックス設定（noindex,nofollow）
- 備考 など
スケジュール表は別で作ることが多いですが、ディレクトリマップに以下の項目も盛り込んで作ることがあります。
- 公開日
- 担当者
- 進捗状況（WF・デザイン・コーディング・システム開発など）
