POINT
■サイト設計書はプロジェクトメンバーがこれから制作する成果物に対して、共通の認識を得るための設計図となります。
■Webサイトの構造を把握するための設計書と、ビジュアルデザインの設計書が必要になります。
■紙による印刷を前提としたドキュメントではなく、オンラインで設計書を作成・共有するためのツールも登場しています。

【サイト設計書とは】
Webサイト設計書は、プロジェクトメンバーだけでなく発注者と制作者、そしてプロジェクトの企画者と制作者のコミュニケーションのためにも用いられます。
サイト設計書は目的に応じて作られる複数の書類で構成されることが多く、組織や現場ごとに異なる呼び名が付けられていることもあります。プロジェクトメンバーで共有するべき情報は、概ね以下のようなものになります。
—–
●サイト概要・プロジェクト計画
●ハイレベルサイトマップ
●詳細サイトマップ
●コンテンツリスト
●ワイヤーフレーム
●要件定義書
●画面遷移図
●カラースキーム
（おまけ）●紙に頼らないサイト設計書
オンラインのワイヤーフレームなど、さまざまなツールが存在します。
—–

【サイト概要・プロジェクト計画】
制作するWebサイトの目的、ターゲットユーザー、提供する情報や機能などを中心に、プロジェクトやWebサイトの概要をまとめます。Webサイトの中長期的なゴール、ターゲットユーザー、何をWebサイトで実現するかを示すコンセプトイメージ、クライアントの要望一覧、全体構成やコンテンツ、リリースまでのおおまかなスケジュールなどを含めます。必要に応じて、調査分析の結果などを含めます。
また、このドキュメントはプロジェクトスポンサーへのWebサイトの計画を示す際にも用いられることがありますが、制作者に対して必要な情報と、スポンサーにとって必要な情報は異なるので、記述する項目は同じでも内容は区別した方がより良いコミュニケーションが図れるでしょう。

【サイトマップ】
●ハイレベルサイトマップ
Webサイト内のコンテンツの理論的な分類方針を明らかにするために作る全体見取り図です。通常はWebサイトのグローバルナビゲーションレベルのコンテンツ名称を決め、提供する情報が入る場所として足りないところがないか、逆に提供する情報がダブって含まれる場所が生まれないかなども検討します。

●詳細サイトマップ
ハイレベルサイトマップを元に、Webサイト内に含めるページ単位のコンテンツを明らかにする見取り図です。これによってはじめてWebサイト全体を俯瞰することができます。通常は、メインカテゴリーごとに作成するか、コンテンツの量が多い場合や複雑なサイト構成の場合にはサブカテゴリーのレベルまで細分化した上で作成することもあります。
サイトマップは、あくまでWebサイト全体像を把握するためのものです。各ページに必要な最低限の情報は、コンテンツリストやコンテンツマトリクスに含めるのが一般的です。サイトマップは、各コンテンツを表す箇所に、制作するページのタイトルをつけることで全体像がイメージし易くなります。また、内部で表示する情報の概要を記述して理解度を高める場合もあります。

サイトマップ（樹形図）例

【コンテンツリスト】
ディレクトリリストやファイルリストとも呼ばれます。特に大規模サイトで必要とされるドキュメントで、Webサイト内に含まれるページのタイトル、ディレクトリ(フォルダ)の位置情報、ファイル名(URL)などの一覧表。ハイレベルサイトマップと併用して用いられるケースが多く、サイトマップを省略してハイレベルサイトマップとファイルリストでプロジェクトを進める場合もあります。また、CSS、Java Script、Flash、画像、音声、動画、テンプレートファイルなどの素材一覧も含めます。ニュースリリース、新商品情報、ブログなど、更新性が高く日々量産されるコンテンツについては、フォルダやファイルの命名規則を決めておく方が良いでしょう。
大規模サイトの場合、コンテンツ調達のチェック機能として使うことができます。(Googleの推奨するSEOとして、URLや画像のファイル名などはbotに対して代替テキストの代用にもなるなど関連性の高いものを推奨しています。ただし、階層の表現などは不要ですし、過度な期待をしないでください。)

【ワイヤーフレーム】
特定のWebページの中に含まれる情報として何が必要なのかを記載したドキュメント。一般的には「画像」「リードテキスト」「本文」など、抽象的な配置要素のみを記載しますが、情報を配置する位置を詳細に示すものではありません。(DTPのラフ的ものだと考えた方が良いでしょう)
制作現場では、この配置位置要求と配置情報要求が混同されることがよく見られ、本番に近い原稿を投入してモックアップを制作することもあります。このワイヤーフレームの制作は、ディレクターの領域なのかデザイナーの領域なのかは意見が分かれるところです。プロジェクトチームの編成と、ディレクターやデザイナーの力量にもよりますが、ビジネス視点からの落とし込みができる人間が行うことが理想でしょう。

ワイヤーフレーム例

【要件定義書（ようけんていぎしょ）】
そのサイトで実装するプログラムが果たす機能を文書で定義したものが一般的です。(大規模なプロジェクトでは、広い意味で「WebサイトやWebサービスが実現するべき事」そのものを文書化する場合があります)
実際にプログラムを書く担当者は、何を作ればよいか分からないと作業を完了させることが出来ないため、達成すべき内容を詳細なレベルまで明らかにする必要があります。特にWebサイトでは同じ機能を達成する場合にも、異なる画面遷移やプロセス、異なるプログラムや言語で実現する方法があるため、実現方法まで決定できることが望ましいでしょう。(反して、指定のプログラム言語まであると、プログラムを書く担当者の専門や能力の壁が作業を不可能にする場合があります)
要件定義書にはユースケース図を併用することもあります。発注者側は「当然あるもの」と考えているのに、制作側が不要と考えているケースはよくあります。要件定義書を作る際には、そのWebサイトで必要な技術やシステムを漏れなく記載することが重要です。
例えば、ECサイトの要件定義書で「管理画面に購入履歴対応がある」とした場合、購入履歴の有無が表示されていれば良いのか、それとも購入履歴から未発送の商品を取り消したり発送先を別住所に変更出来ることを望んでいるのかなど、合意が得られているようで得られていない事が少なからず発生します。特にプログラム実装は、その機能によって工数がかかる為、コストと相談しながらブレのない設計仕様となるようプログラム要件のフィックスには充分に気を遣う必要があります。

【画面遷移図（がめんせんいず）】
特に入力フォームなどで、必要な画面遷移を明らかにすることが必要になります。この遷移もまた、ドキュメントとして示す必要があります。エラーが発生した際の遷移や、あるユーザータスクが終了した後の遷移など、サイトマップだけでは見えてこない必要なWebページが明らかになったり、ユーザビリティー上配慮が不足している部分が明らかになったりもします。
例えば「404エラー」表示画面を用意して誘導先を提示することで、ユーザーの行き止まりを防止できるかもしれません。また、関連ページへのリンクを設置することで、ツリー構造では作れなかった新しいユーザー動線を設定することもできます。

【コンセプトイメージ】
主にビジュアルデザインを制作する際に拠り所となるドキュメントで、再現したいビジュアルイメージやトーン＆マナーを写真や雑誌の切り抜き、サイトキャプチャなどを集めて提示することで、意識を共有するために用います。
例えば「未来的なイメージ」「斬新」「ふんわり」といった言葉を用いたコミュニケーションは、人によって受け取る印象やイメージする映像が異なるため、望まれるクオリティに達しない場合やデザインの方向性が異なってしまう場合が多々あります。このドキュメントを作成する場合は、イメージ伝達用の素材をストックしておかないと、必要となった際に収集に時間を要するため、普段から収集しておくことが望ましいでしょう。

【カラースキーム】
Webサイトの中で用いるべきカラーコンビネーションを示すドキュメントです。色によってユーザーに与える印象が大きく異なるので、どのような色合いの組み合わせを使用するか決定しておきます。通常は企業ロゴやブランドカラーなどCI（Corporate Identity）上、重要な要素から色を展開することが多く、ビジュアルデザインの作成は、このカラースキームに基づくことになります。
注意しなければならないのは、紙媒体ではCMYK方式で色を決定・指定しますが、WebではRGB方式だという点です。デバイスやディスプレイの種類、品質、デバイス個体の設定によって同一の色を表示しないという前提を認識しなければなりません。もちろん、プリンターで出力した紙なども同様です。Webサイトのテーマとなるカラーを決定して、自動的にカラースキームを適応してサンプルを表示してくれる無料のWebサービスもあります。
—–
●配色を考えやすくする基本ルール
色のバランスを取るのは難しいですが、ベースカラーを70％、メインカラーを25%、アクセントカラーを5％で割り振るとバランスよく見えます。サブカラーを使う場合は、サブカラーを5～10％にし、メインカラーやベースカラーの割合を調節します。

メインカラー：最初に決める色で、これが基準になります。全体のイメージを作る色になります。
サブカラー：メインカラーをサポートする色です。使わない場合もあれば2、3色使うこともあります。
ベースカラー：背景色にあたります。面積が一番広くなることが多く、影響力は大きいです。メインカラーとは意味合いが違うので、ここに主張の激しい色を持ってくると、意味が変わってしまいます。
アクセントカラー：面積は狭いですが、非常に重要な意味を持ちます。メインカラーに対して際立つような色を選択すると効果的です。
補色：アクセントカラーで出てきた補色とは、色相環において、反対側に存在する色同士のことをいいます。赤なら緑?青あたりが補色になります。純色や、明度の同じ補色同士を組み合わせると、ハレーションを起こします。
—–

【紙に頼らないサイト設計書】
ドキュメントは通常、印刷することを前提としていてMicrosoft WordやExcel、PowerPointを用いた作成物として関係者に配布することが多いのですが、HTMLを用いる方法も可能です。特に画面遷移やワイヤーフレームはHTMLで作成することができます。ハイパーリンクを用いることによってページの遷移も表現でき、実際に使うテキストや画像を入れ込むことで、遷移の際の情報提供の良否についても検討することができます。このような試作品を「プロトタイプ」といいます。
別の方法として、Google ドライブ（旧、Google Docs）を用いることで、一つのファイルを複数人数で共有・編集することも可能となり、様々なプロジェクトで利用されます。（Googleとの遣り取りにはGoogleドキュメントを用い、時系列に基づいた過去の経緯が分かる書式をスタンダードとしています）
サイト設計書の目的は、プロジェクトメンバーだけでなく、必ずしも制作のプロフェッショナルでない発注者や事業責任者にも、これから作るWebサイトの姿がわかるようにすることです。特に請負業務としてWebサイトの設計を行う場合、発注者にとってサイトリニューアルは何年かに一度の作業であることを忘れがちです。人事異動などで発注者側の担当者が初めてサイト設計書を見るというケースも多いので、そういった人にも理解できるよう留意して作ることが望ましいものです。（ただし、当然ながらサイト設計書の制作にも手間＝人件費が発生するのでコストの増加が発生します）