制作仕様書

設計フェーズ

これから創るwebサイトの設計図となるものがサイト設計ならば、制作仕様書は
webサイトを所定の品質で創るためのさまざまな取り決め
である。




制作仕様書とは

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

wikipedia:ウォーターフォール

wikipedia:アジャイル



制作仕様書の記載事項

制作仕様書に含める内容には次のようなものがある。


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


➡会社ロゴなどのイメージを崩さないよう、サイズ比率、余白、色などの決まりごと


２：デザインガイドライン
ビジュアルデザインを作成する上で必要の要素や手法についてまとめたもの。レイアウトに必要なグリッドやカラムの使い方、各要素間のマージン規定、カラースキーム、タイプグラフィなどを定めることで、統一されたレイアウトを提供することができる。


➡マージンやフォントなどを統一することで、洗練されたレイアウトを目指す



３：コーディングガイドライン
HTMLやCSSの記法をまとめたもの。HTMLやCSSのバージョンや文字コードについて、対象とするデバイスや制作ワークフローを考慮して適切な種類を選ぶ必要がある。また、HTMLのタイトル、メタ情報、CSS、JavaScript、フィードの指定方法、IDやクラスの命名規定。


➡HTMLやCSSのバージョン、メタ情報、IDやクラスの命名規定etc…


ファイル格納規定と命名規定（例）

《単一のHTMLで使用するファイルの格納規定》
使用しているHTMLと同階層に種類別のディレクトリを作成し、格納します。ディレクトリには次のものがあります。


  • images…画像を格納する
  • css…CSSファイルを格納する
  • js…JavaScriptファイルを格納する

※格納するファイルがない場合は、ディレクトリを創る必要はありません。





《単一のHTMLで使用する画像の命名について》
〔使用するHTML名〕_〔キーワード〕_〔2桁の連番orユニークID〕_〔ステータス〕_〔拡張子〕
を基本ルールとします。




１：キーワード

  • h1…h1画像
  • h2…h2画像
  • pic…写真、サムネイルなど
  • fig…図など
  • map…地図
  • logo…ロゴ、ICなど
  • bnr…バナー

２：2桁の連番、ユニークID

ロゴ、CIなど、連番よりユニークIDをつける方が判別しやすい場合があります。その場合は連番でなくユニークID


３：ステータス

ロールオーバーなど画像の状態を表現します。

  • off…マウスカーソルが載っていない状態に使用する
  • over…マウスオーバー時の画像に使用する。
  • down…マウスダウン時の画像に使用する。
  • actv…ナビゲーションなどで、現在位置を表す画像に使用する。