この記事は6分で読めます

Web制作における仕様書とは?記載すべき4つの項目

  • 投稿日
  • 更新日

あとで読む

Web制作における仕様書とは?記載すべき4つの項目
イッパイアッテナ

はじめまして、イッパイアッテナです。

ITと教養で、優秀なネコの手となり、あなたのあらゆる問題を解決します。あなたの相談役だったり、デザイナーだったり、広報だったり、わたしたちは”イッパイ”の顔をあなたに見せることができます。

Web制作における仕様書とは?

Web制作における仕様書とは、Webサイトで実現させたいことを整理・記載した資料です。Webサイトの設置目的や構造、デザインなどを詳細に記載します。

Webサイトの制作は1人で行うのではなく、社内のあらゆる部署や担当者が携わる場合がほとんどです。そのため、仕様書として情報をまとめて整理しておかなければ、異なる方向性に進んでしまうおそれが高まります。

このような事態を防ぐために仕様書を作成し、関係者で共有し、共通の認識を持つことが必要です。

制作で仕様書を作成する目的

仕様書を作成する目的は、情報やタスク進捗の管理、要件確認などが挙げられます。

また社外の担当者に情報共有を行いたい場合も、スムーズに進めやすくなります。ミーティングで決定した事項は、仕様書に反映させておくようにすると、認識の不一致を避けられます。

仕様書の情報更新を細かく行うと、仕様書が議事録とリマインドの役割を果たすことになるでしょう。その結果、関係者全員が同じ目標に向かって動けやすくなり、クオリティの高いWeb制作が行いやすくなります。

Webサイト制作の仕様書に記載すべき4つの項目

 Webサイト制作の仕様書に記載すべき項目には、以下の4つが挙げられます。

  1. プロジェクトの概要
  2. サイトマップ
  3. 制作スケジュール
  4. ワイヤーフレーム

ここではそれぞれに分けて解説しますので、見ていきましょう。

1.プロジェクトの概要

プロジェクトの概要は、Webサイトを制作する目的を記載します。最終的な目的を明確にしておくと、制作に携わる人全員が認識を一致させて制作に取り組みやすくなるでしょう。

Webサイトを制作する目的は、主に以下の3つが挙げられます。

  • ブランディング
  • 集客
  • 人材の募集

また、目的以外にも、以下のような基本的な項目や背景を記載しておきましょう。

  • Webサイト名
  • URL
  • 数値目標
  • 制作に至った背景
  • 問題点や課題
  • リリース予定日

2.サイトマップ

サイトマップは、Webサイトの構造を視覚化したページです。サイトにどのような導線が引かれているか、一目でわかるように図に起こしておきます。

サイトマップを作成すると、Webサイト全体のスケール感が把握しやすくなり、予算目安やスケジュール、工数を考える際に役立ちます。また、外注する場合もサイトマップを事前に作成し共有しておくと、スムーズにプロジェクトを進めやすくなるでしょう。

3.制作スケジュール

Webサイトを制作するスケジュールを決めて、仕様書に記載します。大まかな流れは以下の通りです。

  1. サイト設計
  2. デザイン
  3. プログラム開発
  4. 動作のテスト
  5. 公開

制作スケジュールを決める際、公開予定日から逆算してスケジュールを決めていくことがポイントです。外注する場合は、委託先のリソースやスケジュールに応じて納期が変動する場合も考えられるでしょう。

希望日を先に伝えておくことで、委託先も工数や人員を読みやすくなり、具体的なスケジュールを決めやすくなります。

4.ワイヤーフレーム

ワイヤーフレームは、Webサイトのレイアウトや配置を図で表したものです。制作を受けた委託会社が作成することが一般的です。レイアウトにこだわりたい場合は、自社で準備しておくとよいでしょう。

委託会社に依頼する場合、ワイヤーフレームを事前に準備しておくと、その分の作業負担が軽減されるため、制作費用を値引きしてくれる可能性が高くなります。Webサイト制作の予算が限られている場合は、自社でワイヤーフレームを作っておくとよいでしょう。

RFP、要件定義書との違い

仕様書と混同されやすいものとして、RFP(提案依頼書)要件定義書などが挙げられます。
ここでは、それぞれのドキュメントの違いについて解説します。

RFP(提案依頼書)とは

提案依頼は依頼者側がデザイン・システムに求める仕様を定義したものです。
Web制作に対するオーダーを記したものになるため、制作を依頼している側が作成します。

どんなシステムを作りたいかを提示して、最適な提案を制作者側から引き出すためのドキュメントになります。

要件定義書とは

要件定義とは、制作者側がデザイン・システム開発をするための仕様を定義したものです。
依頼者側の合意・承認を得るためのもので、制作者側が作成します。

Web制作における要件定義フェーズのアウトプットとなるドキュメントで、後の工程の設計・デザインに必要な情報を記述します。

Web制作の仕様書で作成する際の5つの注意点

 Web制作の仕様書で作成する際の注意点には、以下の5つが挙げられます。

  1. スマホやブラウザへの対応
  2. 支払いの方法や時期
  3. 原稿や素材の提供
  4. 公開作業の担当
  5. 公開後の運用や保守

これらを記載し忘れると、予定外の費用が発生する可能性が高まります。ここではそれぞれに分けて解説します。

注意点1:スマホやブラウザへの対応

Webサイトはスマホをはじめ、さまざまなブラウザへ対応する必要があります。もし制作に入った段階でスマホに対応したWebサイトを作成依頼すると、料金が変動する場合が考えられます。

そのため、事前に対応するスマホやブラウザについて仕様書に明記しておくようにしましょう。ブラウザに関しては特に希望がなければ、対応デバイスの多い、以下のようなブラウザを選ぶとよいでしょう。

  • Google Chrome:最新版
  • Microsoft Edge:最新版
  • Safari:最新版
  • Firefox:最新版

注意点2:支払いの方法や時期

Webサイトの制作を外注する場合、支払い方法や納品時期は具体的に記載しましょう。Web制作に限らず、金銭のやり取りに関することはトラブルが発生しやすいものです。

事前に仕様書へ記載しておくことで、先方の希望や支払いルールが把握しやすくなります。事前に支払い方法などを擦り合わせておくことで、トラブルを未然に防げるでしょう。

注意点3:原稿や素材の提供

Webサイトへ使用する原稿や素材の提供についても仕様書に記載します。

費用を抑えたい場合はできるだけ自社で準備するようにし、時間やリソースを割きたくない場合は制作会社に提供を依頼しましょう。また、著作権の帰属先に関する事項も追記できるようにしておきましょう。

注意点4:公開作業の担当

仕様書には、公開作業を自社か制作会社のどちらが担当するのかについても記載しておきます。

契約内容にもよりますが、制作会社に依頼する場合はコンテンツ公開は制作側が行い、順次担当者へ公開作業を引き継ぐケースが多いです。

当初から社内リソースをWebサイトの作業に充てられるのであれば「自社で対応する」と明記しておくとよいでしょう。

注意点5:公開後の運用や保守

Webサイト公開後の運用や保守についても、社内で事前に取り決めて仕様書に記載しておきましょう。将来的に運用や保守に関しても自社で対応する予定であれば、更新しやすいシステムの構築を希望することを明記しておきます。

制作会社に運用保守を依頼したい場合も、その旨を記載しておけばランニングコストや必要な人員などの詳細事項を擦り合わせやすくなるでしょう。

仕様書を提出した後の大まかな流れ

 仕様書を提出した後の大まかな流れは以下の通りです。

  1. 制作会社と打ち合わせ
  2. 見積もりや提案
  3. 制作会社の選定・契約
  4. Webサイト制作開始

打ち合わせ前に、自社の希望や現時点で把握して決定している事項を反映させた仕様書を準備しておきましょう。その仕様書を元に、打ち合わせを重ねることで精密な仕様書を作成していきます。

制作会社側からしてみても、何も準備していない場合より、荒削りでも仕様書を準備してくれていた場合の方がスムーズに希望を把握しやすいでしょう。

まとめ

Web制作における仕様書の目的や記載すべき事項、注意点を解説しました。仕様書を作ることによって、制作に携わる関係者全員が同じ認識のもとで作業を進められやすくなります。

また認識の齟齬によるトラブルを回避したり、外部との連携が取りやすかったりとメリットが豊富です。Web制作を行う際は、この記事で解説したポイントを押さえて事前に仕様書を作成しましょう。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

Web制作について相談してみませんか?

必須は必須項目です。弊社へお問い合わせいただく方は、下記の「個人情報の取り扱いについて」を必ずお読みください。

会社名

任意

お名前

必須

メールアドレス

必須

電話番号

任意

お問い合わせ内容

必須