Webデザインにおける仕様書とは？必要性や作り方・テンプレを紹介

• 要求定義書
• デザインガイドライン（デザイン方針定義書）
• スタイルガイド

• チーム全体の認識を合わせる

デザイン制作ならびにWeb制作に必要な情報を共有することで、プロジェクトにかかわるチームメンバーの認識の齟齬を小さくできます。Webサイトの制作には、デザイナーだけでなくディレクターやエンジニアなどの複数の職種が関わるのが一般的です。口頭で情報を共有するだけでは誤解や仕様漏れが生まれやすいため、仕様書を使って情報を共有し、クライアントのイメージ通りの成果物を納品する必要があります。

• 修正指示をしやすくする

仕様書に記載された要件に沿って成果物の内容をチェックすれば、修正が必要な部分を発見しやすくなります。やり直しの際も、仕様書に沿っていない部分だけを修正すればよいため、修正の労力が小さくなる点もメリットです。

• 言った言わないのトラブルをなくす

仕様書をベースに発注側と制作会社がコミュニケーションすれば、お互いの認識を記録できるので、言った言わないのトラブルをなくせるメリットがあります。また、打ち合わせの際に出たアイデアを仕様書に反映することで、よりクライアントの要望に合った成果物を作りやすくなります。

• 課題の例

• ホームページ経由での集客を増やしたい
• 製品やサービスの認知度を上げたい
• 採用への応募者を増やしたい

など

• 目的・目標の例

• 1年でホームページ経由での問い合わせ件数XX件
• 月間資料ダウンロード数X件
• 毎月の製品ページへのアクセス数＋X％
• 翌年度採用への応募者数＋X人

など

• ターゲット層に記載する項目例

• 個人か法人か
• 年齢
• 性別
• 居住地域
• 職業
• 年収
• 興味関心

など

• 基礎的な仕様

• ページ数
• 全体構成
• 対応ブラウザ
• 対応言語
• コンテンツ制作の有無

など

ユーザーフローとは、Webサイトに何らかの目的でアクセスしたユーザーが、どのようにWebサイトの中を回遊し、目標を達成するかを表した図のことです。例えば、Webサイト内で問い合わせのためにアクセスしたユーザーが、トップページから問い合わせページまでどのように移動するか、などを図の形で表現するのがユーザーフローです。

ワイヤーフレームとは、Webサイトのデザイン設計図のことです。各ページに画像やテキストなどの要素が納まる位置を可視化し、デザイン内容を伝わりやすくします。

• 画面遷移図を活用する

画面遷移図とは、Webサイトの各ページでどのような操作をすればどのページへと移動するのかを表した図です。Webサイトの各ページの関係が分かりやすくなるため、サイト構造や全体像を理解しやすくなります。

• 5W1Hを意識して分かりやすい表現を心がける

5W1H（いつ、誰が、どこで、何を、どのような目的で、どうやって）を意識し、できるだけ具体的に仕様を書きましょう。また、記載する内容は要点を絞って簡潔に書くと、分かりやすい仕様書になります。

• 画像や図を使って視覚的に表現する

文章だけで仕様を解説する場合、情報伝達に齟齬が生まれやすくなります。特にクライアントの抽象的なイメージを仕様に落とし込む場合は、画像や図を活用してできるだけ齟齬がない形にしましょう。