ブログ

  1. トップ
  2. ブログ
  3. WordPress構築時のコーディング指示書<ディレクトリマップの作り方>

Web制作

WordPress構築時のコーディング指示書<ディレクトリマップの作り方>

皆さま、こんにちは。
今回はWordPressでWEBサイトを構築する時に必要となる”コーディング指示書”の中でも、核となる<ディレクトリマップ>の作り方をご説明します。

コーディング指示書は、コーディング作業をするときに必要な情報をまとめておき、制作担当者さんや制作会社さんにお渡しするものです。WEBサイトに掲載されるものではなく、制作時にのみ使う裏方のような存在のファイルです。作業をする側(コーダー、制作会社)はこの指示に沿って、見積もりを作ったり、作業を進めたりします。

■WordPressの制作作業でディレクトリマップが重要な理由
ディレクトリマップはWEBサイト内にあるページや階層などをまとめてマップ状にしたファイルのことです。特にWordPressでWEBサイトを作成するときには、ページ数が多かったり階層が複雑化しやすかったりするため、WEBサイト全体を見渡せるディレクトリマップがWEBサイト制作時に大変重要な存在となります。

この記事内で詳しくご説明しますので、最後まで御目通しいただければ幸いです。

1.ディレクトリマップとは

前述した通り、ディレクトリマップはWEBサイト内にあるページ、その階層、URL等を一覧にまとめたファイルです。ExcelファイルやGoogleスプレッドシートで作成することが多いです。

また、ディレクトリマップという名前以外に、サイト構成マップやサイト構成シートなどの名前で呼ばれることもありますが機能面では同じです。

■ディレクトリマップ例

↑Googleスプレッドシートを使い、ディレクトリマップを作った例です。

■ディレクトリマップ内に含む情報

  • ページ名
  • ページ番号
  • 階層
  • 区分
  • 参考URL
  • 備考=制作時の注意点や記事内容 など

ディレクトリマップはWEBサイトにどんなページを作るかを一覧にする他、それ以外にも複数の要素を書き加えてディレクトリマップを仕上げます。そのファイルを見ればWEBサイト全体が見渡せることが重要です。

ページ名以外に書き加える要素について、それぞれ以下でご説明致します。

2.ディレクトリマップに含める情報①ページ番号

全体で何ページあるのか、この作業は何番のページのものかを把握するため、各ページに番号を振ります。

【ページ番号】は、トップページを1とします。
その他はページを順番にリストアップしていきます。

3.ディレクトリマップに含める情報②ページ名

ページの内容を表す【ページ名】をそれぞれに付けます。
後々検索エンジンで表示されたり、訪問者様がブラウザ上で確認できたりするものなので、そのページに書かれている内容がわかる固有のものにします。

■OK例
会社概要、制作料金、お申し込みの流れ、イベントカレンダー、アクセスマップなど

■NG例
ページA、ページ1など

ページ名を後から変えることは可能ですが、ページ名を付ける作業は記載する内容が重複していないかなどを確認する重要な作業でもあります。そのWEBサイトに合ったページ名を付けられるよう、慎重に考えながら命名していきましょう。

■ページ名の付け方の注意点
・ページ名の重複を避ける
・ページ名を付けながら内容がかぶっていないか確認する

4.ディレクトリマップに含める情報③階層

聞き慣れない言葉かもしれませんが、WEB制作時の【階層】は、ページの親子関係を指しています。

トップページが第1階層です。
それ以外のページは第2階層〜で、ページの内容により階層が変化します。

「ニュース>ニュース詳細」「施設案内>組織図」など、どのページを主(親)として各ページが成り立っているか考えると階層がわかりやすいです。

ディレクトリマップに書き込むときに迷ってしまったら、マインドマップやパワーポイントの階層構造のテンプレートなどを使うとイメージが湧きやすいです。

5.ディレクトリマップに含める情報④区分

【区分】はWordPress内でのページの使い分けです。

■区分の種類とそれぞれの意味

  • 固定:独立した単体のページ(例:会社案内、商品紹介)
  • 投稿:随時更新して新しいページを作成していくページ(例:お知らせ)
  • CMS:ブログ機能を使うページ(=投稿と同等)
  • 投稿一覧:投稿した内容を一覧にして見せるページ(例:過去のお知らせ一覧)
  • フォーム:訪問者様が入力する欄があり、送信機能が備わったページ(例:お問い合わせ、申し込み)

WordPressで作成したWEBページは同じように見えて、実は区分にそれぞれ割り振られています。ブログのように更新していくページと、ほとんど更新しない会社案内のようなページは違う区分で作られています。

更新していくページか、制作後はほぼ更新しないページか、お客様に入力してもらうページかなどと考えていくとわかりやすいです。

6.ディレクトリマップに含める情報⑤参考URL

制作時に参考にできるURL、つまり作りたいページに似ているページを【参考URL】としてディレクトリマップに記載してください。制作に関わる全員が共通のイメージを持ちやすく、認識のズレを減らすことができるからです。

デザインや機能も含め、「どんなページにしたいか」考えるときは、たくさんのWEBサイトを見て、ご自身のイメージに近いページを見つけてください。そうすると共通見解ができ、イメージピッタリのものが出来上がりやすくなります。

7.ディレクトリマップに含める情報⑥備考

ページ作成時に注意すること、制作に関わる全員が知っておいたほうがよいこと、盛り込んでほしい機能などについては備考欄にまとめて記載します。

各ページをどのような意図で使うのか、どんな機能を付けたいかなどを文章でまとめます。WEBデザイン前に書き込んでおくと、内容の漏れがなくなります。

更新する箇所やその頻度、リンク先、フォームの項目など、明確にわかることは具体的に指示を書き入れます。

■備考欄での指示例
・ブログ更新は複数人で行う予定なので日付以外に更新者の名前も載せたい
・営業カレンダーはGoogleカレンダーを埋め込みたい
・会員用ページはパスワードをかける

また、揺れが発生する可能性のある箇所、例えば「ブログの写真はあったりなかったりする」、「スタッフ紹介は顔写真が載せられる人と載せられない人がいて、頻繁に入れ替わりがある」などわかっていることは備考欄に書いておくと配慮しながらの制作が可能になります。

まとめ

ディレクトリマップは表に出ないものとはいえ、各ページの掲載内容がわかる名前を付けるところから始まり、どれくらいの頻度で更新するか、どのページが親となるかなど考えなければならないことがたくさんあります。

マップ作りが思いの外時間のかかる作業となるかもしれませんので、時間に余裕を持って取り掛かることをおすすめします。

また、関係者が多い場合や社内でのチェックが必要な場合など、マップが適切に仕上がっているかどうか確認してから制作をスタートさせると、抜け漏れ防止や認識のズレの減少に効果が出て、最終的には修正が少なく、迅速な完成につながります。