Webサイト制作の「仕様書」作り方やおすすめツールをプロが解説!

「Webサイトの仕様書ってなに?」
「具体的にどんなことを書くの?」
「発注者が準備すべきことを知りたい」

Webサイト制作の依頼を考えているものの、どういう仕様書を用意すればいいのか・何を書けばいいのか、お悩みではないでしょうか。

そこで本記事では、Webサイト制作会社であるじゃぱそんが

  • 仕様書の役割
  • 仕様書に必要な6つの項目
  • 忘れられがちな5つの項目
  • 仕様書提出後のWebサイト制作の流れ
  • 作成に適したツール

をまとめて解説します。

この記事を読めば「良質な仕様書」が作成でき、制作会社への要望がスムーズに伝わるようになるでしょう。
ぜひ最後までご覧ください。

 

Webサイト制作における仕様書の3つの役割

ここでは、Webサイトにおける仕様書の役割を解説します。

  • 仕様書とはなにか
  • なぜ必要なのか
  • だれが作るのか

それぞれ順番に確認していきましょう。

Webサイトの仕様書とは?

仕様書とは「Webサイト制作で実現してほしいことを、整理した資料」のことです。

  • 仕様書
  • 仕様定義書
  • 要件定義書
  • 要求定義書

など呼び方はさまざま。

「要件定義書」と「要求定義書」は厳密には違いますが、本記事では発注者が制作会社に「こんなサイトを作ってほしい」という要求定義書に近い意味合いで進めていきます。

仕様書は、Webサイトで実現したいことや機能を明文化して作成します。
具体的には、書くべき内容は以下のようなものとなります。

  • 今回のWebサイト制作の目的は、ブランドのイメージアップ。
  • そのために、社員一覧やブランドを立ち上げた背景が伝わるページも用意して欲しい。
  • デザインは、ブランドイメージに合わせてスタイリッシュにして欲しい
  • 簡単に記事を追加できる機能がほしい。

デザインや機能の希望を伝える際は、すでに公開されているサイトのURLを記載すると、イメージが伝わりやすいです。
また仕様書を作る過程で、あなたが「どんなサイトを必要としているか」がより明確になります。
簡単な内容でよいので、文章にして整理することが大切です。

仕様書が必要になる2つの理由

Webサイト制作で仕様書を作成する理由は、大きく2つあります。

  1. 情報を1つにまとめておくため
  2. 制作会社とサイトのイメージや認識を共有するため

1つ目の理由は「情報をまとめておくため」です。

Webサイトの制作時は、決めなければいけないこと・検討しなければいけないことがいくつもあります。
何かを決めるたびに資料が増えると、混乱の原因に。
情報をバラバラに管理するのではなく、仕様書として1つにまとめておくと、要件の確認がスムーズになるでしょう。

2つ目の理由は「制作会社とサイトのイメージ・認識を共有する」ためです。

仕様書があることで、制作会社とサイトのイメージを具体的に共有でき、認識のズレがおこりにくくなります。

Webサイト制作の仕様書に必要な6つの項目

ここでは、Webサイト制作の仕様書に必要な6つの項目を紹介します。

  1. Webサイト制作の目的
  2. サイトの目標
  3. 現状のWebサイトの課題
  4. スケジュール表(納期)
  5. サイトマップ(サイト構成図)
  6. ワイヤーフレーム

それぞれ詳しく解説します。

1.Webサイト制作の目的

一番重要なのが「Webサイト制作の目的」です。
この目的の達成のために、制作会社とサイトを作っていくことになるからです。

Webサイト制作の目的は大きく3つに分類できます。

  1. 集客
  2. 採用・ブランディング
  3. 業務改善

今回の制作が上記のどれを目的にしているのかを考え、具体的に明記します。

2.サイトの目標

Webサイト制作の目的を達成するため、具体的な目標数値を定めます。
達成したい目的までに必要な数字を細分化して、目標にするとよいでしょう。

たとえば以下の項目であれば目標に適しています。

  • お問合せ数を月に100件まで伸ばしたい
  • 採用サイトからの応募数を10件/月にしたい
  • LINE登録者数を月に100名増加させたい

これらの目標のことを専門用語でKGI・KPIと呼びます。
KGIとは年間売り上げ目標のような、大きな目標のことです。
大きな目標を達成するために、細分化した目標を立てて達成度合いをチェックすることをKPIといいます。

Webサイトの目標を具体的な数字で共有すれば、制作会社からより良質な提案を期待できます。

3.現状のWebサイトの課題

リニューアルの場合、現状のサイトで感じている課題や不満も書きましょう。
現状の課題は、制作会社にとって貴重な情報になります。

  • サイトが古くてスマホ対応されていない
  • 問い合わせ方法がわからないとよく言われる
  • 目的のコンテンツを探すのに時間がかかる
  • 会社名で検索しても出てこない

上記のような課題は、自社のWebサイトを見続けていたからこその気付きです。
「箇条書きで簡単に」でかまわないので、思いつく限りたくさん記載するとよいでしょう。

4.スケジュール表(納期)

仕様書には納期やスケジュール表も記載します。

とくに納期がある場合は、あとからトラブルになることを防ぐためにも具体的に指定することをおすすめします。
「なるべく早く」「急ぎで制作してほしい」など曖昧な表現ではなく「2021年〇月〇日」と期日を明確に記載するとよいでしょう。

Webサイトの公開にともなったキャンペーンなどを打ち出す場合は、そのキャンペーンの内容についても制作会社に相談することが望ましいです。

納期を明確に伝え、無理なく制作できるスケジュールを組んでもらいましょう。

5.サイトマップ(サイト構成図)

サイトマップとは、サイト全体の構成を組織図のように一覧で掲載することです。

Webサイトに掲載する全てのページを掲載します。
あらかじめサイトマップを作っておくことで、Webサイトの全体像がわかり、モレやダブりなく必要なページをそろえることが可能です。

サイトマップは制作会社が作成することもありますので、完璧なものを作る必要はありません。
自社で用意出来ない場合は、制作会社に相談してみるとよいでしょう。

6.ワイヤーフレーム

ワイヤーフレームとは「ページのレイアウトやコンテンツの配置を決めるための設計図」です。
通常は制作会社が作成します。

発注者がワイヤーフレームを用意すると制作費が安くなることもあるため、予算に余裕がない場合は自社での制作も検討するとよいでしょう。

仕様書で忘れられがちな5つの項目

ここでは、仕様書の作成時に忘れられがちな項目をピックアップしました。

  • スマホ対応
  • OS・ブラウザ対応
  • SSL化
  • サーバー・ドメインの対応(納品形式)
  • コンテンツの準備

一般的には仕様書上、補足事項として記載される項目となります。

見落としがないように、一つずつ確認していきましょう。

スマホ対応

Webサイトではスマホ対応は必須です。
サイトのジャンルにもよりますが、一般的なサイトは6割以上がスマホからのアクセスとなります。

パソコン上で見るときれいに整ったWebサイトでも、スマホで表示すると文字が小さかったり、画像が大きすぎたりと不便な場合があります。

ユーザーは不便なサイトからすぐに離れてしまうため、スマホで見る人を想定したデザインの用意が必要です。
対応に別料金が発生する場合もあるので、「スマホ対応必須」と仕様書に明記しておきましょう。

OS・ブラウザ対応

OSとブラウザの対応も、忘れられがちな項目です。

こだわりが無ければ、以下のように記載をおすすめします。

OS対応

  • Windows:Windows8およびWindows10
  • Mac OS:最新版
  • Android:最新版
  • iOS:最新版

OSとは、パソコンやスマホのシステム全体を管理し、アプリケーションを動かすための基本的ソフトウェアのことです。
パソコンで言えばWindowsやMac OS、スマホではAndroidやiOSが一般的です。

何らかの事情で一般的ではないOSや古いバージョンへの対応が必要な場合、必ず制作会社に口頭で伝え、仕様書に明記しておくことをおすすめします。

ブラウザ対応

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

ブラウザとは、Webサイトを見るためのソフトウェアのことです。
Googleが提供するGoogle Chromeや、iPhoneでWebサイトを見るSafariなどがあります。

Webサイトはブラウザごとに表示が変わってしまうことがあるため、それぞれで表示のチェックが必要になります。

仕様書に記載がないブラウザについては表示チェックは行われず、うまく表示されなかったとしても対応に追加費用がかかってしまう可能性があります。

ブラウザによる表示の差異は頻繁に起こるものではありませんが、確実に表示させたいブラウザがある場合は明記しておくとよいでしょう。

SSL化

SSLとは、インターネット上でデータを暗号化して送受信する仕組みのことで、ハッカーなど第三者による改ざんやデータの盗み見を防ぐためのものです。
たとえばサイト上で何かを購入するためにクレジットカード情報を入力した場合、SSL化していないサイトでは情報を盗まれる可能性があります。

悪意のある第三者に不正に情報を盗まれないように、SSL化による暗号化は必要です。

制作会社によってはSSL化は別料金となることもあるため、仕様書に明記しておくとよいでしょう。

サーバー・ドメインの対応

サーバー・ドメインの対応となる納品形式も、仕様書に書いておくべき項目です。

サーバーとはWebサイトのデータの置き場所のことで、ドメインとはサイトの住所のようなものです。ドメインはURLで指定します。

完成したWebサイトをどこに保存して、どのURLで表示されるようにするのかを決めると考えてよいでしょう。

納品形式

公開作業をどちらがおこなうのかをあらかじめ決めておき、仕様書に記載します。

たとえば以下のパターンが考えられます。

  • サーバー・ドメインの設定は制作会社にお願いしたい
  • サーバー・ドメインの設定は自社で行う
  • 制作会社のサーバーを利用する

自社にサーバーを扱える担当者がいない場合、サーバー・ドメインの設定や公開作業まで制作会社にお願いする旨を仕様書に記載するとよいでしょう。

コンテンツの準備

サイトに掲載するコンテンツの「原稿や写真素材」はどちらが準備するのかは、明確にしておくことをおすすめします。

原稿や写真素材を制作会社に依頼する場合、追加料金が発生することも少なくありません。
コンテンツの準備はどちらが行うのかを仕様書に記載しておくことで、言った言わないのトラブル防止にもなります。

制作会社と相談の上、コンテンツ作成のための準備はどちらが行うかを仕様書に明記しておくとよいでしょう。

仕様書提出後のWebサイト制作の流れ

仕様書の提出後は、以下の流れで制作が進行します。

  1. 制作会社から見積・提案を受ける
  2. 発注する制作会社を選定する
  3. 制作が開始される

仕様書の提出後に、制作会社から見積書と提案を受けます。

発注の確定は見積書や提案を受けた後になるため、2~3社に同時に仕様書を出し、見積依頼することが一般的です。
見積が出そろい次第、発注する制作会社を選定し正式に発注。制作が開始されます。

依頼前に仕様書を準備するメリット

依頼前に仕様書を準備していると、制作会社と良好な関係を築きやすくなります。

制作が始まる前から良好な関係が築けているなら、

  • 見積もりが安くなる
  • サービスをうけられる

などの恩恵を受けられる可能性も。
なぜなら仕様書を用意している発注者は、制作会社にとって「サイトについてしっかり考えている優良クライアント」だからです。

発注者自身が良いWebサイトを作ろうと考えているなら、制作会社としても制作を進めやすいため、より細やかな提案もしやすくなります。
制作会社と良好な関係を築く大きな一歩として、仕様書が役立つでしょう。

そういったメリットの面から考えても、依頼前の段階で「可能な範囲で仕様書を準備する」ことが重要です。

仕様書の作成に適したツールは?

仕様書の作成に専門的なツールは必要なく、次のような一般的なツールで作成可能です。

  • Microsoft Office:Word/Excel/PowerPoint
  • Google:ドキュメント/スプレッドシート/スライド
  • Adobe:XD

例としてMicrosoft、Google、Adobe製品のソフトを中心に紹介しましたが、文字や図形が書ければ別のツールでも問題ありません。

ツールによって文字・図形・計算表などの得意分野違うので、仕様書の種類によってツールを使い分けてもよいでしょう。

目的別のおすすめツールは、以下の通りです。

プロジェクト概要スプレッドシート/Excel/Word
スケジュールスプレッドシート/Microsoft/Excel/Word
サイトマップExcel/PowerPoint/Google図形描画
ワイヤーフレームAdobe XD/Excel/PowerPoint

 

サイト制作に関わるメンバー全員が仕様書を見られるツールを選ぶことをおすすめします。
また「PDFファイルでデータを保管する」など、データ管理体制に合った保存ができるかどうかもチェックしておくとよいでしょう。

Webサイト制作の仕様書 まとめ

Webサイト制作時の仕様書とは「Webサイト制作で実現してほしいことを、整理した資料」です。
「Webサイト制作で実現してほしいこと」は発注者の希望であり、制作会社に伝えるべきことでもあります。

  • Webサイト制作の目的
  • 必要なページ数
  • デザインのイメージ
  • 必要な機能

これらを可能な範囲でまとめておくとよいでしょう。
要件がしっかり伝われば、制作会社からの提案もより具体的なものになるはずです。
慣れない作業も多く大変だとは思いますが、作成することをおすすめします。