POINT
■制作仕様書は、Webサイトを所定の品質で制作するためのルールをまとめたものです。
■複数の関係者が制作仕様書に基づき作業を行うことで、一定の品質を保つことができます。
■保守・運用フェーズを考慮して制作仕様書を作成することが、Webサイトの運用性を高めます。

【制作仕様書とは】
現在は複数人によるWebサイト制作が一般的になっていて、ディレクトリ（フォルダ）やファイルの命名、分類、設計方法などは人によって異なるため、制作仕様書を作成し、誰が作業をしても一定の品質が保てるようにする必要があります。
制作仕様書では、成果物の品質を保つためのさまざまな取り決めを記載します。制作仕様書という形で文書化された情報によって、ディレクターと作業者間、そして作業者同士のコミュニケーションを円滑に行うことができます。これらはウォーターフォール型開発においてもアジャイル型開発においても必須のものです。

ウォーターフォール型とアジャイル型

ウォーターフォール型開発の基本的な考え方は、『区切られた全ての工程が正しい』という前提で進める方法です。 この前提を守りながら進めるため、プロダクトはプロジェクト立ち上げ当初作成した要求仕様を忠実に実装し、その仕様を全て満たした時点で開発完了となります。アジャイルとは『すばやい』『俊敏な』という意味で、反復 (イテレーション) と呼ばれる短い開発期間単位を採用することで、リスクを最小化しようとする開発手法の一つです。

【制作仕様書の記載事項】
制作仕様書に含める内容には次のようなものがあります。

■コーポレートアイデンティティ(CI)規定
企業ロゴなどは、その会社のメッセージやイメージが集約されているため、厳密な利用方法が定められていることが多いものです。例えばロゴについては使用できるカラーコード、サイズ比率や余白量、異なる背景を使う場合や縮尺上の注意点などを規定し、一定のブランドイメージを提供できるようにしています。

■デザインガイドライン
ビジュアルデザインを作成する上で必要な要素や手法についてまとめたものです。レイアウトに必要なグリッドやカラムの使い方、各要素間のマージン規定、カラースキーム、タイポグラフィなどを定めることで、統一されたレイアウトを提供することができます。
●グリッド
グリッドとはウェブレイアウトを制作するときにを垂直/水平方向に分割するガイドラインのこと。すべてのデザインパーツをグリッドラインに揃えることが重要になります。
●カラム
段組みのこと。
●マージン(margin)
要素の外側の余白で枠からの距離。
●パディング(padding)
要素の内側の余白で枠からの距離。

■コーディングガイドライン
HTMLやCSSの記述方法をまとめたものです。HTMLやCSSのバージョンや文字コードについて、対象とするデバイスや制作ワークフローを考慮して適切な種類を選ぶ必要があります。また、HTMLのタイトル、メタ情報、CSS、JavaScript、フィードの指定方法、idやclassの命名規則、ソースコードの記述方法などについても、きちんと決めておくことが望ましいでしょう。

———-
CSS（スタイルシート）を記述する際に、「ある要素のうち一部だけ」を装飾したい場合、HTML側に付加する属性が「class」属性と「id」属性です。
class：「種別名を割り当てる」→ 同じclass名を、1ページ中に何度でも使えます。
id：「固有の名前を割り当てる」→ 同じid名は、1ページ中に1度しか使えません。
class属性が対象の「種類・部類」を表しているに過ぎないのに対して、id属性は対象に「固有の名前」を付けて一意に表すために使われます。ですから、1ページ中に同じid名は1度しか使えません。全てを「class」で指定しても問題ないのですが、ウェブサイトの規模が大きくなってデザインが複雑になってくると「どういう目的で用意されたスタイルなのか」「どこに適用されるスタイルなのか」といったことが分かりにくくなります。「class」と「id」を使い分けていれば、全部が「class」だけで書かれているよりソースを把握し易いのです。

●端寄せ画像
<img src=“photo.jpg” class=“subimage”>
●フッター
<div id=”footer”>
ここからページ末尾～
</div>

●格納規定（例）
・images：画像を格納するディレクトリ
・css：CSSファイルを格納するディレクトリ
・js：JavaScriptを格納するディレクトリ

●格納（例）
・/service/work/sample.htmlで使用されている画像は、/service/work/images/に格納
・ /service/work/sample.htmlで使用されているCSSファイルは、 /service/work/css/に格納
・ /service/work/sample.htmlで使用されているJavaScriptファイルは、 /service/work/js/に格納

●各ページ共通で読み込むファイルは
・root/common/images/
・root/common/css/
・root/common/css/images/　（CSSで背景配置する画像）
・root/common/js/

画像などのファイル名は連番を使うより、ユニークIDを使う方がSEO的にも望ましいと思います。
ロールオーバー画像などにはoff、over、downなどのステータスで決める方法もあります。
———-