Webサイトの設計書を解説【テンプレートあり】

Webサイトを作る過程では、お客様からはじまり、ディレクター、デザイナー、コーダー、プログラマーなど様々な人が関わることが多くあります。

そのため、Webサイトの作成にかかわるメンバー全員が共通した認識を持っていないと、Webサイトを作った後のゴールが達成しづらくなってしまいます。かんたんに言うと、メンバー全員が同じ方向を向いて作業に取り組んでいけるように認識を統一する必要があります

みんながバラバラな方向を向いたままWebサイトを作ってしまうと、誰のためのホームページなのかよくわからなかったり、無駄な修正作業が増えスケジュールが伸びたり、まただれの役にも立たないWebサイトが出来上がってしまいます

そのような結果を避けるためにも、メンバー全員が同じ認識を持つために誰が見てもWebサイトの方向性がわかる設計資料(仕様書)を作る必要があります。

早速、設計資料について説明します。

まず前回の記事「カスタマージャーニーの作成例」で考えた、訪問者のストーリーから洗い出したページをまとめます。

(例)

  1. コンセプトを伝えるためのトップページ
  2. 施設の説明をするための施設案内ページ
  3. ご利用者様の感想を掲載するためのお客様の声ページ
  4. 所在地を確かめるためのアクセスページ
  5. 料金体系を伝えるための料金案内ページ
  6. 予約の空き状況が確認できる予約状況確認ページ
  7. お問い合わせ用のお問い合わせページ
  8. お問い合わせページ設置に伴って必要になる個人情報の取り扱いページ

これらのページを一覧化して「ディレクトリマップ」を作ります。

一覧には第一階層、第二階層など階層別にページをまとめられるように列項目を用意します。また公開前に設定しておきたい、ページタイトル、ページの概要文、主要キーワードもページごとに入力できるように列項目を用意します。

下記がディレクトリマップのサンプルになります。

ディレクトリマップ

次に、各ページに掲載する情報を設計するために、「ワイヤーフレーム」と呼ばれる資料を作成します。

下記がワイヤーフレームのサンプルになります。

ワイヤーフレーム

ワイヤーフレームを作成することで必要となる文章や写真が確認できます。その後、このワイヤーフレームをもとにしてデザインを進めることができるようになります。

以上、ホームページのサイト設計資料になります。

今回説明挙げた「ディレクトリマップ」のテンプレートは下記からダウンロードできます。

ディレクトリマップテンプレート

ぜひ、だれが見ても共通の認識ができるサイト設計資料を作成しましょう!


WORDPRESS集客用WEBサイト最適化初期セットアップマニュアル

今なら特典で『WORDPRESSをWeb集客に最適化するためのマニュアル』付き!

Webで安定した集客を手に入れたい個人起業家の方へ
実践WEB集客メール講座
【無料】

この講座では、ライターやデザイナー、カウンセラーなどの個人起業家の方が、Webを利用して集客していくための仕組みの作り方を実践しながら学ぶことができます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

15 − 5 =