当サイトの記事は編集部が国土交通省・IPA・デジタル庁などの公的機関の情報、規格や業界団体の公開情報を調べて独自に執筆しています。記事内にIT・Webエンジニアの転職サービスへの案内（広告）を含みます。
会社のホームページを作り直すことになり、制作会社から『まず仕様書か要件定義書をください』と言われた。そんな場面で手が止まってしまう方も多いはずです。
結論から言うと、Webサイトの仕様書は「目的」「ページ構成」「機能」「更新と運用」の4つを決めれば、最初の打合せには十分です。デザインの細かい所や作り方は、制作会社と一緒に詰めていけば大丈夫です。
この記事を読めば、Webサイト制作の仕様書に書く項目と、発注前に決めておくことが分かります。
Webサイトの仕様書と要件定義書は何が違う？
Webサイトの仕様書は「どんなサイトにしたいか」を作る人に伝える文書です。要件定義書は、その中から「今回作るサイトに必要なこと」を発注側と制作側で合意した物、と考えると分かりやすいです。
『仕様書と要件定義書、どっちを用意すればいいの？』と迷いますよね。実は、Webの現場ではこの2つがかなりゆるく使い分けられているんです。
発注前に発注側がまとめるメモを「仕様書」と呼ぶ会社もあれば、制作会社が作る詳しい資料を「仕様書」と呼ぶ会社もあります。言葉にこだわるより、誰が何を書くかを先にそろえておきましょう。
| 文書 | 主に書く人 | 書く中身 |
|---|---|---|
| 発注前の仕様のまとめ | 発注側 | サイトの目的、見てほしい人、ほしいページ |
| 要件定義書 | 発注側と制作会社 | 今回作る範囲、必要な機能、守る決まり |
| 設計書（画面・構成など） | 制作会社 | ページごとの項目、動き、使う仕組み |
| テストの確認表 | 制作会社 | 表示や動きをどう確かめるか |
デジタル庁のDS-100では、要件定義書の機能要件として、機能・画面・帳票・データ・外部インタフェースに関する事項を定めるとしています。Webサイトでも、要件定義書にはこれに近い項目が並ぶと考えておくとイメージしやすいですよ。
Webサイト制作の要件定義書は、ホームページ作成の要件定義書と呼ばれることもあります。呼び方が違っても、決めることはほぼ同じです。
要件定義書そのものの書き方は、要件定義書の書き方でもっと詳しく紹介しています。
Webサイトの仕様は4つで決める
発注側がまとめるWebサイトの仕様は「目的」「ページ構成」「機能」「更新と運用」の4つです。特に「更新と運用」は後回しにされやすく、公開後に困る原因になりがちです。
ホームページ作成の仕様書というと、デザインの好みから考え始める方が多いんです。でも、制作会社が最初に知りたいのは「何のためのサイトで、公開後に誰が触るのか」なんですよね。
そこで編集部では、サイト制作の仕様を4つに分けて決めるチェック表を作ってみました。
| 決めること | 書く中身 | 書き方の例 |
|---|---|---|
| 目的 | サイトで達成したいこと、見てほしい人 | 採用の応募を増やしたい。見てほしいのは転職を考えている人 |
| ページ構成 | ページの一覧と、つながり | トップ、会社案内、事業紹介、採用情報、お問い合わせ |
| 機能 | お問い合わせフォーム、検索、お知らせなど | 問い合わせが来たら担当者にメールで届くようにしたい |
| 更新と運用 | 誰がどのページを更新するか、公開後の窓口 | お知らせは総務が週1回更新。その他は制作会社に頼む |
目的は「困りごと」から書く
『目的なんて、会社を知ってもらうことでしょ』と思うかもしれません。ただ、それだと制作会社はどのページに力を入れればいいか判断できないんです。
例えばこんな書き方にすると、ぐっと伝わります。
「今は採用の問い合わせが電話だけで、夜に見た人が応募できていない。採用ページから応募できるようにしたい。」
困りごとが書いてあれば、トップのどこに何を置くかも自然に決まっていきますよ。
ページ構成は手描きで十分
ページ構成は、紙に四角を描いて線でつなぐだけでも十分伝わります。今あるサイトを作り直す場合は、今のページ一覧に「残す」「直す」「消す」を書き込むと早いです。
ページごとの項目や画面の流れの書き方は、画面設計書・画面仕様書の書き方で詳しく紹介しています。
更新と運用を決めておかないと困ること
『公開してしまえば終わり』と考えていると、後で困ることがあります。お知らせを誰が更新するのか、写真を差し替えたい時にどこへ頼むのかが決まっていないと、サイトが古いまま放置されがちです。
- 自社で更新するページと、制作会社に頼むページを分ける
- 更新する人が使う画面（管理画面）がほしいかを書く
- サーバーやドメインを、どちらの名義で契約するかを決める
- 公開後に不具合が出た時の連絡先を決める
- 写真や文章を誰が用意するかを書く
Webサイトの仕様書テンプレート
Web制作の仕様書テンプレートは、4つの決めることに「守ること」と「範囲と体制」を足した7章くらいの骨組みで十分です。Webシステムの仕様書テンプレートでは、ここにデータや外部とのつながりの章が増えます。
テンプレートを用意しておくと、書き漏れがぐっと減ります。ここでは、Webサイトの仕様書テンプレートの骨組みを紹介しますね。
| 章 | 書く中身 | 書き方のコツ |
|---|---|---|
| 目的 | サイトを作る理由、うまくいった状態 | 困りごとから書く |
| 見てほしい人 | 主に見る人、見る場面、見る端末 | スマホで見る人が多いかも書く |
| ページ構成 | ページの一覧と、つながり | 今のサイトの一覧に印を付けてもよい |
| 機能 | フォーム、お知らせ、検索など | 「今回」「次の段階」に分ける |
| 守ること | 見やすさ、個人情報の扱い、セキュリティ | 分からない所は相談したいと書く |
| 更新と運用 | 更新する人、管理画面の有無、公開後の窓口 | 名前ではなく担当の部署で書く |
| 範囲と体制 | 今回やらない事、担当者、希望の時期 | 決まっていない事は「未定」と書く |
守ることの例
DS-100では、非機能要件の項目として、ユーザビリティ及びアクセシビリティ、情報セキュリティ、運用、保守などに関する事項を挙げています。Webサイトでも、見やすさや個人情報の扱いはこの章にまとめておくと探しやすいですよ。
例えば「お問い合わせフォームで受け取った個人情報は、担当者以外が見られないようにしたい」と一文あるだけで、制作会社は必要な仕組みを提案しやすくなります。
Webシステムの仕様書テンプレートで足す章
会員登録や予約、在庫の表示など、裏側で情報を持つサイトはWebシステムと呼ばれることが多いです。その場合は、次の章を足しておきましょう。
| 足す章 | 書く中身 |
|---|---|
| データ | 登録する情報、今使っている台帳や表 |
| 外部とのつながり | 今使っている会計や顧客管理の仕組みと連携するか |
| 利用者と権限 | 管理する人と一般の利用者で、できることを分ける |
| 移行 | 今のサイトやシステムから引き継ぐ情報 |
アプリに近いWebシステムなら、アプリの仕様書の書き方の項目も参考になります。テンプレートの作り方そのものは仕様書のテンプレートで紹介しています。
Webの設計書は誰が書く？発注側はどこまで見る？
Webの設計書は、一般的には制作会社が作ります。発注側は、設計書のページ構成や項目が、仕様書で伝えたことと合っているかを確かめる役です。
『設計書まで発注側で書かないといけないの？』と不安になる方もいますよね。安心してください。発注側が設計書を書く必要は基本的にありません。
ただ、出てきた設計書を「よく分からないから」とそのまま通してしまうと、後で食い違いが見つかることがあります。見る所を決めておきましょう。
- 4つの決めることと、テンプレートで仕様をまとめる
- 複数の制作会社に同じ仕様書を渡して、提案と見積もりをもらう
- 選んだ会社と、要件定義書の形に仕上げていく
- 制作会社が作った設計書やページ構成の案を確かめる
- 公開前に、表示や動きを一緒に確かめてから公開する
設計書で発注側が見る所
全部を読み込む必要はありません。次の3つを、自分の仕様書と見比べてみてください。
| 見る所 | 確かめたいこと |
|---|---|
| ページの一覧 | ほしいページが全部あるか、余計なページが増えていないか |
| フォームの項目 | 受け取りたい項目がそろっているか |
| 更新の範囲 | 自社で更新できる所が、決めた通りになっているか |
打合せのたびに口頭でページや機能を足していくと、何が決まったのか誰も分からなくなります。追加や変更は仕様書に書き足して、日付を入れて残しておきましょう。
発注の仕様書全般の書き方は、発注仕様書とは？も参考にしてみてください。
Webサイトの仕様書でよくある相談
よく見かけるのは「業界の外の人がWebアプリの要件定義をまとめられるか」「縦に長いページの画面仕様書の書き方」「完成したサイトの仕様書を後から作れるか」の3つです。
よく見かける相談を、内容をまとめた形で紹介します。
相談1：ITの仕事をしていなくても要件定義や仕様書は作れる？
IT以外の業界で働いていて、自分のアイデアでWebアプリケーションを作りたい。要件定義や仕様書はどう作ればいいのか、という相談です。
専門用語で書く必要はありません。この記事の4つを、ふだんの言葉で書けば十分です。技術的な所は「分からないので相談したい」と書いておけば、制作会社が要件定義の中で一緒に決めてくれます。
相談2：縦に長いページの画面仕様書はどう書く？
縦に長いページや、横に広いページの画面仕様書をどう書けばいいのか、という相談もあります。
1枚の図に収めようとせず、ページを上から「ブロック」に分けて、ブロックごとに項目を書くと整理しやすいです。
| ブロック | 書く項目の例 |
|---|---|
| 一番上 | ロゴ、メニュー、問い合わせボタン |
| メインの画像 | 写真、大きな見出し、短い説明 |
| 中身 | 事業の紹介、実績、よくある質問 |
| 一番下 | 会社の情報、各ページへのリンク |
相談3：完成したWebサイトの仕様書を後から作りたい
すでに完成しているWebサイトの仕様書を作りたいが、代わりに作ってくれる所はあるか、という相談です。
作った制作会社に頼むのが一番早いです。難しい場合は、ページの一覧、フォームの送り先、更新の方法、サーバーやドメインの契約先の4つを自分で書き出すだけでも、引き継ぎの資料として役に立ちますよ。
Webサイトの仕様をまとめる経験を仕事に活かす
相手の困りごとを聞いて、作る人に伝わる文書にまとめる力は、Webの仕事に限らず広く通用します。
サイトの発注を担当してみると、『実は、こういう仕事が向いているかも』と感じる方もいるはずです。要件をまとめて仕様書にする力は、システム開発の要件定義や社内SEの仕事とも共通しています。
今の職場でサイトやシステムの発注を担当しながら経験を積むのも、立派な道です。そのうえで、ITの仕事に興味が出てきた方は、求人の仕事内容を比べてみると道が見えてきますよ。
IT・Webエンジニアの転職（PR）
仕様書を書く経験を活かせる職場を探すなら、求人も比べてみる
要件定義や設計を任されるか、発注側か開発側か、扱うシステムや働き方は会社によって大きく違います。担当したい工程や条件から、IT・Webエンジニアの求人を比べてみてください。
無料ITエンジニアの求人を探す求人の条件・待遇は各求人票と応募先の案内でご確認ください。
仕様書と要件定義書・設計書の関係をもう一度確かめたい方は、仕様書とは？意味と目的、設計書・要件定義書との違いを見てみてください。
よくある質問
Webサイトの仕様書には何を書けばいいですか？
発注前なら「目的」「ページ構成」「機能」「更新と運用」の4つが基本です。見てほしい人や今回やらない事も書いておくと、制作会社が提案しやすくなります。
ホームページ作成の仕様書と要件定義書は両方いりますか？
発注側がまとめた仕様をもとに、制作会社と一緒に要件定義書へ仕上げるのが一般的な流れです。最初から両方を一人で作る必要はありません。
Webの仕様書テンプレートはどこで手に入りますか？
制作会社が自社の書式を持っていることも多いので、まず聞いてみましょう。この記事の7章の骨組みをExcelやWordに写して使うのもおすすめです。
デザインの好みは仕様書に書きますか？
書いておくと伝わりやすいです。「明るい色」のような言葉だけでなく、参考にしたいサイトとどこが良いと思ったかを添えておきましょう。
まとめ
- Webサイトの仕様書は、発注側が「どんなサイトにしたいか」を伝える文書
- 目的・ページ構成・機能・更新と運用の4つで決める
- テンプレートは7章くらいの骨組みで十分。Webシステムはデータなどの章を足す
- 設計書は制作会社が作り、発注側は仕様書と見比べて確かめる
- 追加や変更は仕様書に書き足して残す
コメント