Webサイトの制作仕様書があるとプロジェクトを円滑に進めることが可能になります。この記事では制作仕様書が必要な理由と作り方を解説しています。
プロジェクトに導入際ぜひ参考してみてください。
Webサイトをコーディングする前に必ず用意しておきたい制作仕様書
ヒアリングシートがWebサイトの情報設計の際に必要であることに対して、制作仕様書はWebサイトをコーディングしていく際に必要になります。
例えば表示対応するブラウザがIEを含めるか否かを決めずに制作側の都合でIEブラウザに対応させない作りをした時に、後々クライアントと問題が出てくる可能性があります。（これをIE問題と言います。）
また、制作中で問題が発覚した場合、スケジュールやコストに大きな影響を与えてしまうことも考えられます。
Web制作業界においてのIE問題
Web制作業界においてのIE問題とはMicrosoftのInternet Explorerが独自の仕様が多いため、サイト表示の崩れのチェックや回避対応に時間やコストがかかってしまうことです。
予期しない表示崩れの対応にweb制作にかかわるすべての関係者が頭を悩ませています。
IEが無くなれば良いなと思っていますが、IEでの閲覧シェアが高いため無視できない状況で対応せざるを得ないようになっています。
制作仕様書の項目
制作仕様書の項目を抜粋しました。
- HTML仕様
- 文字コード
- 改行コード
- 共通リソース格納先
- SSI
- パス記述方式
- title要素記述ルール
- description記述ルール
- 対応ブラウザ
一部の紹介になっていますので、詳細はWebデザイナー入門ガイド教材の制作仕様書を見てもらえると幸いです。
※上記のボタンからzipファイルがダウンロードされます。
制作仕様書を作成するポイント
制作仕様書を使う際に注意が必要な項目について解説してみます。
制作仕様書を作成するポイントは次の3つです。
- 既存ガイドラインがあるか確認する
- 対応ブラウザを確認する
- ブレイクポイントの説明と合意をとる
既存ガイドラインがあるか確認する
デザインやコーディングなど予め企業で適応されているルールのことをガイドラインといいます。
大きな企業であれば細かなデザインガイドラインなどありますが、中小企業は少ないと思います。
しかし、大きな企業、中小企業問わずにその企業のロゴのガイドライン（レギュレーション）は存在している場合があるので漏れなくヒアリングしておきたいです。
対応ブラウザを確認する
制作保証としての対応ブラウザをクライアントと合意しておかないと、制作中や制作後にスケジュールやコストに大きな影響が出てくるところですので必ず決めたい項目になります。
対応ブラウザの範囲を決めずに制作した後にクライアントと問題がよく起こるケースが多々ありますので、注意が必要です。
ブレイクポイントの説明と合意をとる
ブレイクポイントとはレスポンシブデザインで設計する時にスマホやタブレットに最適なデザインに切り換わるウィンドウ幅（ピクセル）のことを言います。
一般的には768pxでPC表示とスマホ表示ができるように考えられています。
最近では各社スマホ、タブレットのサイズが多岐に渡るため複数のブレイクポイントを作る場合もあります。（下記参照）
- 479px：SP縦
- 480px：SP横
- 600px：タブレット
- 960px：小型PC
- 1280px：大型PC
しかし、上記のような複数のブレイクポイントは各ブレイクポイントに合わせたデザインが必要になるためコストやスケジュールに影響がありますので注意が必要です。
ブレイクポイントのヒアリングについては専門的な知識が必要なためクライアントへの説明と合意が大事になります。
この記事のまとめ
制作するための仕様書の説明とポイントをまとめます。
Webサイトをコーディングする前に必ず用意しておきたい制作仕様書のおさらい
- Webサイトをコーディングする前に必ず用意しておきたい制作仕様書
- Webサイトをコーディングしていく際に必要です。
- ヒアリングシートを使うときのポイント
- 制作仕様書を使う際に注意が必要と思う項目は既存ガイドライン、対応ブラウザ、ブレイクポイントです。
ユウジの体感コラム
ヒアリングシートはクライアントが持っている情報を引き出すのに対して制作仕様書のヒアリングは制作の専門知識が無いと記入が難しいので、クライアントと顔を合わせて各項目に対して説明をしつつ行うことが大事かな～と思います。
企業なのでチームでやっているとWebディレクターの領域と思いますが、Webデザイナーもその領域の中に入っていくことで今後Webデザイナーとしての力になると思いますね。
Webサイト制作実践ガイド
「Webサイト制作実践」カテゴリー内ページではお好きなページから読んでも問題ありませんが、ステップ順に読んでいただけるとより理解できるようになります。
- Step1：Webサイトが出来るまでの制作の流れ【現場レベルでお伝えするよ】
- Step2：Webサイト制作でヒアリングシートを活用したい理由【ヒアリングシート付き】
- Step3：Webサイトをコーディングする前に必ず用意しておきたい制作仕様書←今ココ
- Step4：Webサイト制作に必要なペルソナの作り方と例題を解説【ペルソナシート付き】
- Step5：ペルソナを活用してユーザーシナリオからサイトコンテンツを導き出す方法
- Step6：Webサイトリニューアルの提案書の作成方法を解説します
- Step7：Webサイトリニューアルのためコンテンツマップの作り方と使い方
- Step8：Webサイトリニューアルに必要不可欠なディレクトリマップの書き方を解説【テンプレートあり】
- Step9：戦略的なWebサイト制作するためのワイヤーフレームの作成方法
- Step10：Webサイトのページデザイン「デザインカンプ」をPhotoshopでの制作を解説
- Step11：WebサイトのHTML/CSSコーディングの手順を解説
- Step12：Webサイトをコーディングしたら必ずチェックする項目と確認方法
