Web制作に制作仕様書を必ず用意しておく理由と作り方を解説します

Webサイトの制作仕様書があるとプロジェクトを円滑に進めることが可能になります。この記事では制作仕様書が必要な理由と作り方を解説しています。
プロジェクトに導入際ぜひ参考してみてください。

Webサイトをコーディングする前に必ず用意しておきたい制作仕様書

ヒアリングシートがWebサイトの情報設計の際に必要であることに対して、制作仕様書はWebサイトをコーディングしていく際に必要になります。

例えば表示対応するブラウザがIEを含めるか否かを決めずに制作側の都合でIEブラウザに対応させない作りをした時に、後々クライアントと問題が出てくる可能性があります。（これをIE問題と言います。）

また、制作中で問題が発覚した場合、スケジュールやコストに大きな影響を与えてしまうことも考えられます。

Web制作業界においてのIE問題

Web制作業界においてのIE問題とはMicrosoftのInternet Explorerが独自の仕様が多いため、サイト表示の崩れのチェックや回避対応に時間やコストがかかってしまうことです。
予期しない表示崩れの対応にweb制作にかかわるすべての関係者が頭を悩ませています。
IEが無くなれば良いなと思っていますが、IEでの閲覧シェアが高いため無視できない状況で対応せざるを得ないようになっています。

制作仕様書の項目

制作仕様書の項目を抜粋しました。

HTML仕様
文字コード
改行コード
共通リソース格納先
SSI
パス記述方式
title要素記述ルール
description記述ルール
対応ブラウザ

一部の紹介になっていますので、詳細はWebデザイナー入門ガイド教材の制作仕様書を見てもらえると幸いです。

制作仕様書テンプレートはこちら

※上記のボタンからzipファイルがダウンロードされます。

このファイルはWindowsのMicrosoft Office 365 のExcel（エクセル）で作成しています。お使いのPCやofficeによっては表示が崩れる場合がありますので、ご了承下さい。

制作仕様書を作成するポイント

制作仕様書を使う際に注意が必要な項目について解説してみます。
制作仕様書を作成するポイントは次の3つです。

既存ガイドラインがあるか確認する
対応ブラウザを確認する
ブレイクポイントの説明と合意をとる

既存ガイドラインがあるか確認する

デザインやコーディングなど予め企業で適応されているルールのことをガイドラインといいます。
大きな企業であれば細かなデザインガイドラインなどありますが、中小企業は少ないと思います。
しかし、大きな企業、中小企業問わずにその企業のロゴのガイドライン（レギュレーション）は存在している場合があるので漏れなくヒアリングしておきたいです。

対応ブラウザを確認する

制作保証としての対応ブラウザをクライアントと合意しておかないと、制作中や制作後にスケジュールやコストに大きな影響が出てくるところですので必ず決めたい項目になります。

対応ブラウザの範囲を決めずに制作した後にクライアントと問題がよく起こるケースが多々ありますので、注意が必要です。

クロスブラウザテスト（複数ブラウザテスト）を必ずやっておくべき理由

公開されたWebサイトはユーザー各自のブラウザで閲覧することになります。本記事ではクロスブラウザテストが必要な理由とチェックすべきブラウザを解説します。クロスブラウザテストを理解することでユーザーにとって優しいWebサイトを提供することができます。

ブレイクポイントの説明と合意をとる

ブレイクポイントとはレスポンシブデザインで設計する時にスマホやタブレットに最適なデザインに切り換わるウィンドウ幅（ピクセル）のことを言います。
一般的には768pxでPC表示とスマホ表示ができるように考えられています。
最近では各社スマホ、タブレットのサイズが多岐に渡るため複数のブレイクポイントを作る場合もあります。（下記参照）

479px：SP縦
480px：SP横
600px：タブレット
960px：小型PC
1280px：大型PC

しかし、上記のような複数のブレイクポイントは各ブレイクポイントに合わせたデザインが必要になるためコストやスケジュールに影響がありますので注意が必要です。

ブレイクポイントのヒアリングについては専門的な知識が必要なためクライアントへの説明と合意が大事になります。

Webサイトはマルチデバイス対応させるレスポンシブコーディングの仕組み

いまのWebサイトはスマホ画面に対応（マルチデバイス対策）しており、コーディング初学者でもスマホ対策スキルは必須です。必須の理由とその仕組みを説明しています。

この記事のまとめ

制作するための仕様書の説明とポイントをまとめます。

Webサイトをコーディングする前に必ず用意しておきたい制作仕様書のおさらい

Webサイトをコーディングする前に必ず用意しておきたい制作仕様書: Webサイトをコーディングしていく際に必要です。
ヒアリングシートを使うときのポイント: 制作仕様書を使う際に注意が必要と思う項目は既存ガイドライン、対応ブラウザ、ブレイクポイントです。

ユウジの体感コラム

ヒアリングシートはクライアントが持っている情報を引き出すのに対して制作仕様書のヒアリングは制作の専門知識が無いと記入が難しいので、クライアントと顔を合わせて各項目に対して説明をしつつ行うことが大事かな～と思います。

企業なのでチームでやっているとWebディレクターの領域と思いますが、Webデザイナーもその領域の中に入っていくことで今後Webデザイナーとしての力になると思いますね。

Webサイト制作実践ガイド

「Webサイト制作実践」カテゴリー内ページではお好きなページから読んでも問題ありませんが、ステップ順に読んでいただけるとより理解できるようになります。