バックオフィスから経営を強くする

新規登録
  1. 「マネーフォワード クラウド」
  2. 業務効率化の基礎知識
  3. Web制作の画面仕様書とは？テンプレートを基に作り方を解説
  • 更新日 : 2024年12月12日

Web制作の画面仕様書とは？テンプレートを基に作り方を解説

Web制作を依頼する際には、完成イメージを明確にするための画面仕様書の作成が必要です。仕様書の作成によりプロジェクトの進行がスムーズになり、制作会社との認識のズレをなくします。

本記事では、Web制作の画面仕様書の概要や作成するメリット、作り方を紹介します。テンプレートもダウンロードできますので、ぜひチェックしてください。

web 画面仕様書のテンプレート

web 画面仕様書のテンプレートを無料で提供しています。ぜひご自由にダウンロードして活用ください。

無料でダウンロードする

Web制作の画面仕様書とは？

画面仕様書とは、制作するWebサイトの制作で実現したいことを記載した書類です。Webサイトで実現したいことや、必要な機能を記載します。

画面仕様書を作成するのは、Web制作の発注者です。Web制作には明確な目的があり、画面仕様書にはその目的や希望するサイトのイメージ、納期、予算などを記載します。

システム開発などのプロジェクトを始める際は、その前段階で必要な機能や要求をわかりやすくまとめていく作業（要件定義）を行います。画面仕様書はその資料となり、発注者と受注者の認識をすり合わせる役割をするものです。

画面仕様書と似ている書類に設計書、要件定義書があります。それぞれの違いをみていきましょう。

設計書との違い

設計書は、画面仕様書と同じくWeb制作に欠かせない書類です。しかし、画面仕様書が実現したいWebサイトの内容をまとめた書類であるのに対し、設計書は完成するまでの工程を示す書類という点が異なります。

発注者が希望するWebサイトについて、画面仕様書は制作の目的を示すものです。一方、設計書は制作のプロセスを示すという違いがあります。

要件定義書との違い

要件定義書とは、Web制作の要件を明確に定義し、制作を進めるための資料になる書類です。要件とはWebサイトが満たすべき機能や性能のことで、Web制作に欠かせません。要件定義書は要件を明確にするため、Web制作の前段階で作成します。

一方、画面仕様書は、要件定義書で定義された要件を踏まえて、Webサイトの仕様を詳細に明文化しているという点が異なります。

Web制作の画面仕様書を作成するメリット

Web制作で画面仕様書を作成することで、Webサイトの全体イメージが明らかになり、プロジェクトの進行がスムーズになるなどのメリットがあります。

詳しくみていきましょう。

Webサイトの全体がイメージできる

画面仕様書を作成することで、Web全体のイメージをつかめることがメリットです。画面仕様書があればイメージを容易に伝えられるため、Web制作をスムーズに進めやすくなります。

多くの人が関わるプロジェクトでも、画面仕様書があることで認識を統一でき、プロジェクトを効率的に進められるでしょう。

プロジェクトの進行をスムーズにできる

画面仕様書があれば、発注者と受注者のやり取りもスムーズになります。口頭で伝えただけでは、きちんと伝わっていなかったというケースもあるでしょう。

要望をまとめた仕様書があればやり取りがスムーズになるだけでなく、しっかり要望が反映されたサイト制作につながります。

やり取りの中で議論になったこと、意見が合わなかったことなどもすべて仕様書に反映させておけば、双方の認識が違うことが起こっても、仕様書を見返すことでトラブルになるのを防げるでしょう。

画面仕様書は、双方の良好な関係を築く役割もします。

認識のズレを防ぐ

仕様書があれば、発注者と受注者の双方が共通の認識をもってWeb制作にあたれるようになり、認識のズレを防げます。

画面仕様書がないまま制作を進めると、認識の食い違いが生じても気づかずに進行してしまう可能性があるでしょう。発注者が希望する通りのWebサイトを制作するためにも、画面仕様書の作成が不可欠です。

修正や追加がしやすい

仕様書があれば、修正や追加もスムーズに進みます。たとえば、完成したWebサイトがイメージと違っている場合、画面仕様書がないと、どこに問題があるのかを見つけるのが容易ではありません。

問題点がわからず、そのまま納品してしまうことも考えられます。仕様書があれば、修正や追加をすべき点を見つけやすいでしょう。

予算管理に役立つ

画面仕様書は、予算を記載しておくことで予算管理に役立ちます。社内で決まっている予算を具体的に記載すれば、予算に合った提案を受けることが可能です。

納期も具体的に公開日を指定することで、それに合わせたスケジュールを立ててもらえるでしょう。

一般的なWeb制作の期間は依頼から3〜4ヶ月程度ですが、サイトの仕様や規模によって変わります。余裕をもって納期を設定することも大切です。

Web制作の画面仕様書のテンプレート-無料ダウンロード

以下のアドレスから、Web制作の画面仕様書のテンプレートをダウンロードできます。仕様書を作成する際は、ぜひご活用ください。

web 画面仕様書のテンプレート

web 画面仕様書のテンプレートを無料で提供しています。ぜひご自由にダウンロードして活用ください。

無料でダウンロードする

Web制作の画面仕様書の作り方

画面仕様書は、主に次の項目を記載します。

  • ページタイトルやプロジェクトの概要
  • ワイヤーフレーム
  • コンテンツ要素

詳しくみていきましょう。

ページタイトルやプロジェクトの概要

画面仕様書に必ず記載しなければならないのが、ページタイトルとWeb制作におけるプロジェクトの概要です。

主に、次のような項目を記載します。

  • Webサイト名
  • WebサイトのURL
  • Web制作の目的・背景
  • 現状の課題
  • 目標とするPV数/お問い合わせ/注文数など
  • Webサイトの公開日（納期）
  • 予算

特に、制作の目的や課題を明確にすることで、解決に向けたWebサイトの制作につながります。

ワイヤーフレーム

ワイヤーフレームとは、Webサイトのレイアウトやコンテンツの配置を決めるための設計図です。どこに何を配置するのかを明確にするために、完成イメージを簡単な線と枠で表現します。

ワイヤーフレームは基本的に受注者が作成しますが、発注者の方で準備すれば制作料金を抑えることができ、打ち合わせもスムーズに進むでしょう。

コンテンツ要素

テキストや画像、動画などの具体的なコンテンツ要素を決め、配置を提示します。必要な情報の網羅と視覚的な効果を両立させるため、適切なスペースとバランスが必要です。ユーザーが必要な情報へとスムーズにアクセスできるよう、コンテンツの重要度や配置なども大切なポイントです。

コンバージョンポイントの配置も記載しましょう。コンバージョンポイントとは、商品の購入やお問い合わせフォームの送信など、ユーザーが特定のアクションを起こすためのボタンやリンクのことです。スムーズな導線で配置されたコンバージョンポイントは、ユーザーのアクションを促進し、Web制作の制作目的を達成するために重要です。

Web制作の画面仕様書を作る際のポイント

Web制作の画面仕様書を作る際は、いくつか押さえるべきポイントがあります。

詳しい内容を解説します。

スマホ対応・ブラウザ対応をどうするか

画面仕様書で忘れがちなのが、スマホ対応やOS・ブラウザ対応についての記載です。現代はスマホからWebサイトを閲覧する人も増えており、スマホ対応のサイトの評価が高いとGoogleの検索エンジンで上位表示されやすいという事情もあります。そのため、Web制作ではスマホ対応が必須といえるでしょう。

スマホ対応にする場合、料金が変動するケースもあるため、仕様書には必ずスマホ対応の記載が必要です。

OS・ブラウザ対応は、基本的に次のように記載します。

（OS対応）

  • Windows：Windows7およびWindows10
  • Mac OS：最新版

（ブラウザ対応）

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

このほか、特に必要なOS・ブラウザ対応があれば記載しておきましょう。

サーバー・ドメインの設定やSSL化はどうするか

サーバー・ドメインの設定やSSL化はどちらが行うかも記載しておきましょう。サーバーについて詳しい社員がいない場合は、設定を依頼したいことを記載しておきます。

SSLとは、インターネット上でデータを暗号化する仕組みのことです。第三者による改ざんやデータの傍受を防ぎます。SSL化は料金が変動する場合もあるため、仕様書に記載した上で、料金について確認しておきましょう。

コンテンツの準備はどちらがするか

Webサイトに掲載する原稿や写真素材をどちらが用意するかについても、記載が必要です。事前に決めておき、仕様書に記載しておきましょう。自社で揃えるのであれば、コストを抑えることができます。準備する時間や手間を省きたい場合は、依頼するとよいでしょう。

プロジェクトが開始したあとに準備を依頼することになると、納期が遅れる原因になります。あらかじめ決めておきましょう。

運用・保守をどうするか

Webサイトは公開して終わりではなく、その後も運用・保守が必要です。そのため、公開後の運用や保守も依頼するか、自社で行うかの記載もしておかなければなりません。自社で運用体制をおく場合は、更新しやすい仕様に構築してほしいことを記載するとよいでしょう。

運用・保守を一任したい場合は、その内容を記載しておくことで、打ち合わせの際に詳細の取り決めができます。

Web制作の画面仕様書を正しく作成しよう

Web制作の画面仕様書は、基本的に発注者が制作します。画面仕様書を作成することでWebサイトの完成イメージを明確にでき、追加や修正もしやすくなるでしょう。

画面仕様書を作成する際は、コンテンツの準備や運用・保守をどちらが行うかなども忘れずに記載してください。Web制作の画面仕様書を正しく作成し、Web制作を成功させましょう。


※ 掲載している情報は記事更新時点のものです。

  • 監修：青井 真吾（AOIS Consulting株式会社代表取締役）

    大学卒業後はIT企業に入社。システムエンジニアとして大手企業向けのERPシステム開発を経験。その後ITコンサルタントとして独立。人材派遣会社の基幹システムの開発、不動産会社の商業施設での販促システムの導入、自動車メーカーでコネクティッドカー開発のプロジェクト管理、SIerでのSalesforceの導入、ファッション業界の企業でのDX推進プロジェクトを経験。現在はAOIS Consulting株式会社を設立し、コンサルティングの傍らIT記事の監修および執筆を手掛ける。

※本サイトは、法律的またはその他のアドバイスの提供を目的としたものではありません。当社は本サイトの記載内容（テンプレートを含む）の正確性、妥当性の確保に努めておりますが、ご利用にあたっては、個別の事情を適宜専門家にご相談いただくなど、ご自身の判断でご利用ください。

関連記事

  1. 「マネーフォワード クラウド」
  2. 業務効率化の基礎知識
  3. Web制作の画面仕様書とは？テンプレートを基に作り方を解説