Web制作を行う場合、いきなりWebデザインを生成したり、コーディングを行ったりするわけではありません。それらの作業を行う前にまず準備するものがあります。

それが「仕様書」です。

しかし、ひとことで「仕様書」といっても、いまいちピンとこない方も多いのではないでしょうか。

そこで今回は、Web制作を行ううえで必要となる「仕様書」について、記載すべきことがらや注意点、ならびに要件定義書との違いなどに焦点をあて解説を進めていきます。

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

まずはWeb制作における「仕様書」についてと、よく似た表現で使われる「要件定義書」との違いに関しても確認しておきましょう。

仕様書とは

仕様書とは、「Web制作を行うにあたり、どのようなWebサイト・Webアプリを作るのかをまとめた資料」となります。

1.Webサイトを制作する目的は○○とする
2.Webマーケティングを最適化するために、サイト構造は△△とする
3.Webデザインは、シックでモダンな基調とする
4.□□という機能は必須とする

など、自社がイメージするデザインや機能、サイト構造などをまとめたものが「仕様書」にあたります。

また、Web制作では実にさまざまな分野の方が一緒に作業を進めます。たとえば、「Webデザイナー」、「Webエンジニア」、「Webライター」といった方々があてはまりますが、たくさんの方々が関われば関わるほど、意思疎通をはかることが難しくなるといったことは否めません。

そのため、「仕様書」というものがあれば皆が同じ認識を持つことができるので、Web制作を行いやすくなるといったメリットにもつながります。

「要件定義書」との違い

仕様書とよく混同されがちなものに「要件定義書」というものがあります。要件定義書とは、Web制作の要件を明確に定義し、制作を進めるための基本的な資料のひとつとなります。

ここでいう要件とは、満たすべき機能や性能、または制約などを指し、Webアプリなどを開発する際には欠かせないものとなります。

この要件定義書と仕様書の大きな違いは、作成する段階が異なるところにあります。

要件定義書は、アプリを開発する前段階で、アプリの開発要件を明確にするための文書となり、仕様書は、要件定義書で定義された開発要件をふまえて、アプリやサイトの仕様を詳細に明文化するものとなります。

仕様書は、アプリの開発中でも作成され、エンジニアやWebデザイナーといった方々が参照する文書として活用されます。

Web制作で仕様書を作成すべき3つの理由

仕様書と要件定義書との違いについて理解していただいたところで、仕様書を作成すべき理由についても順次確認しておきましょう。

1. 依頼内容がまとまる

Web制作を行う際には、なにもいきなりWebデザインやコーディングからはじめることはありません。まずは仕様書づくりからはじめます。それは、皆が同じ認識をもってWeb制作にあたれるようにするためでもあります。

仕様書がないと、クライアントの具体的なイメージが湧かずに制作を進めることになるので、大切な情報が抜け落ちてしまう恐れが十分にありえます。

そのため、仕様書はクライアントと制作会社間双方で、制作内容をまとめる役割を担っているともいえます。

2. 修正・追加の依頼もし易くなる

仕様書があると、修正や追加の依頼もスムーズに進めることができるでしょう。

たとえば、できあがったWebデザインが思っていたものと違うなと感じることはよくあることですが、その際に仕様書があれば、それに沿ってもう一度デザインを練り直すことが可能となります。

仮に仕様書がなければ、問題点を見つけられずにそのまま納品することも考えられますし、はじめから確認し直しとなると、それだけでも多大な時間と労力を費やすことにつながります。

修正・追加の依頼がし易い状態にするためには、仕様書は必須だといえます。

3. 担当者とのやり取りをスムーズに行える

制作会社と仕様について議論する際にも、仕様書があるとスムーズに会話が進むはずです。また議論する中で、気になる点などを単なるメモ書きとして残しておくのではなく、仕様書に反映させておくことをおすすめします。

制作会社と認識が違う点などが発覚しても、仕様書を見返せる状態にしておくことで、揉めることを防ぐ役割が期待できます。

制作会社と良好な関係を築き、成果に結びつく取り組みを行うには、「仕様書」が果たす役割は大きいといえます。

仕様書に記載すべき4つのことがら

ではここからは、実際にどのようなことを仕様書に書き込んでいくのかについて確認してみましょう。

1. プロジェクト概要

まず不可欠なのが、「プロジェクト概要」となります。Web制作におけるプロジェクト概要とは、WebサイトやWebアプリの制作目的やゴールを文章化したものが該当します。

・Webサイトの制作
・リニューアルをなぜ行うのか？
・どのようなデザインのWebサイトにしたいのか？
・公開後期待する効果とは何か？

など、まずは上記のような事柄を言語化してくことが大切です。

またプロジェクト概要には、制作・リニューアルの目的以外にも下記のようなものも記載します。

・Webサイト名
・WebサイトのURL（ドメイン名）
・Web制作の目的や背景
・現状抱えている課題や問題点
・目標とするPV数/お問い合わせ/注文数など
・Webサイトの公開日（納品日）

最低限上記のことだけでもまとまっていると、制作途中で方針がガラッと変わってしまったり、認識がブレたりするなどは抑えられるでしょう。

2. スケジュール表

次に大切なのが「スケジュール」です。いつどのような作業を行い、いつまでにそのタスクを終わらせるのかは、明確に決めておく必要があります。もちろん一番大事なのは「納期（公開日）」です。そこは「なるはやで！」などのあいまいな表現は避けるようにしましょう。

納期だけでなく、ある程度段階的にタスク完了のスケジュールは線引きしましょう。たとえば、次のようなものには、スケジュールの線引きが必須だといえます。

・Webサイトの設計
・Webデザインの制作
・コーディング
・テストや納品前チェック
・Webサイトの公開

これらの1つ1つに、現実的に実現可能な日付、どうしてもここまでには終わらせたいという期日などを設定していきます。

しかし、期日はできるだけ余裕をもって立てるようにしましょう。ギリギリの日付を設定してしまうと、制作にたずさわっている方々が焦ってしまい、思うようなものができない可能性もあります。そのため、可能であればバッファを持たせたスケジュール表を作ることをおすすめします。

3. サイトマップ

サイトマップとは、「Web全体でどのようなページが必要か？」といった、サイト全体の構成を図にしたものです。

多くのWebサイトでは複数のページから構成されており、かつ階層的な構造となっています。その複雑なWebサイトの構造を視覚的に確認できるようにしたものが「サイトマップ」となります。

サイトマップ自体は、制作会社が作成してくれるところもあり、必ずしも準備が必要なものではありません。ですが、事前に作成されていると、制作会社との打ち合わせがスムーズに進むことは間違いありません。また自社でもWebサイトの全体像を把握するのにも役立つはずなので、可能であれば作成することをおすすめします。

4. ワイヤーフレーム

ワイヤーフレームとは、レイアウトを決める設計図のことを指します。デザインの下書きともいえます。

おもにどこに何を配置するのかをはっきりさせるために作成していきます。

基本的には制作会社が作成するものですが、ワイヤーフレームも依頼側で準備できるならば、制作料金が安くなるだけでなく、打ち合わせもスムーズに進むことでしょう。

関連記事：ワイヤーフレームの作成方法を5つのステップで解説。おすすめのツールや注意点も紹介

Web制作の仕様書を作成する際の注意点

Web制作における仕様書を作成する際には注意点もありますので、最後に確認しておきましょう。

注意点1. スマホ対応・ブラウザ対応について

仕様書でも忘れがちになる項目が、「スマホ対応」「ブラウザ対応」についてです。

今の時代、スマホ対応は必須だといえます。近年では、WebサイトをPCから閲覧するよりもスマホから見る人の方が増えてきている印象です。実際Googleでは、スマホサイトをページ評価の基準にしているので、スマホサイトの評価が高いと、Googleの検索エンジンでも上位表示されやすくなります。

スマホ対応を行う場合、料金が変動する制作会社もあるので、仕様書には「スマホ対応必須」と明記しておきましょう。

くわえて、OSとブラウザの対応についても明記が必要です。

▼OS対応
・Windows：Windows7およびWindows10
・Mac OS：最新版

▼ブラウザ対応
・Google Chrome：最新版
・Microsoft Edge：最新版
・Firefox：最新版
・Safari：最新版

Internet Explorerに関しては、すでにサポート終了がアナウンスされていますが、業界や業種によってはまだまだ使っているところもあるので、必要ならば「Internet Explorer11」と明記しましょう。

注意点2. サーバー・ドメイン・SSL化について

Webサイトをインターネット上にあるひとつの家と仮定するならば、ドメインはその家の「住所」にあたり、サーバーは家を建てるための「土地」となります。土地となるサーバーを準備し、その住所となるドメインを決め、家であるWebサイトを建てる。これらはWebサイトを構築するためには不可欠な要素となります。

・サーバーとドメインの設定は制作会社に依頼したい
・サーバーとドメインの設定は自社で行う

これらの設定作業をどちらが行うかは、あらかじめ決めておきましょう。自社にサーバーに詳しい人材がいないケースでは、制作会社に依頼するほうが無難だといえます。

またSSLについても記載しておくことをおすすめします。SSLとは、「Secure Sockets Layer」の略称で、インターネット上で行われる通信を暗号化する技術のことを指します。

通信の暗号化によって、インターネットを通じて行う情報のやりとりすべてが暗号化されるため、悪意のある第三者が個人情報などを閲覧することを防げます。

SSL化の対応については、制作会社によって料金が変動するところでもあるので、仕様書に記載したうえで事前に確認しておくことが必要です。

SSLには有料・無料のものがあり、有料のものを利用する場合には別途料金が必要です。ただ、制作会社の見積もりには、SSLに関しては料金に含まれていないケースも多いため注意が必要でしょう。

注意点3. 原稿・素材の準備について

Webサイトで使用する原稿や素材については、自社で準備を行うのか、制作会社に依頼するのかはあらかじめ決めておくべき事柄となります。

コストを抑えたいならば、自社である程度準備するべきだといえますが、制作会社にすべて任せるケースでは費用は掛かるものの、時間的コストは削減できるはずです。

また、制作会社によってはプロのカメラマンが撮影してくれるところもあるので、事前に確認しておきましょう。

注意点4. 運用・保守について

Webサイトは公開すればそれで終わりではありません。そこからサイトを閉鎖するまでは保守・運用というフェーズに移行します。

自社で保守・運用を行うのであれば、更新しやすいようなカタチでWebアプリなどを構築してほしい旨は記載しておきましょう。

制作会社に一任するケースでも、保守・運用に関する事項について仕様書に明記しておけば、後々の打ち合わせの際に細かな部分まで擦り合わすることができます。

お互いにトラブルになることを避けるためにも、仕様書はWeb制作には不可欠なものとなります。

Web制作はGIGにお任せください

仕様書を作成することで制作会社とのやり取りがスムーズに行えるようになり、ひいては質の高いWeb制作を作るうえでの礎にもなります。

仕様書があることで皆が共通の認識のもと作業を行うことができ、かついつまでに何をするべきかも仕様書を見ればわかる状態にしておくことで、作業の効率化も図れるのではないでしょうか。

株式会社GIGは、Web制作、Webマーケティング、コンテンツ制作、サービス開発、保守運用など、Web戦略をトータルで支援するデジタルコンサルティング企業です。

Web制作や仕様書について疑問点や不明点、ならびにご支援が必要な場合には、ぜひGIGに一度お問い合わせください。

■株式会社GIG
お仕事のお問い合わせはこちら
会社紹介資料のダウンロードはこちら
採用応募はこちら（GIG採用サイト）
採用応募はこちら（Wantedly）

GIG BLOG編集部

株式会社GIGのメンバーによって構成される編集部。GIG社員のインタビューや、GIGで行われたイベントのレポート、その他GIGにかかわるさまざまな情報をお届けします。