Webデザイン指示書（デザイン仕様書）のテンプレート｜外注デザイナーに伝える項目

まずは全体像です。次の表の左の列を見出しにして、右の列の内容を埋めていけば指示書になります。

すべてを完璧に埋める必要はありません。空欄の項目は「未定」と書いておくだけで、デザイナーが確認すべき点に気づけます。

印象の指定は、形容詞だけで終わらせないのがコツです。

次の3点を組み合わせると、解釈のぶれが小さくなります。

• 形容詞は3つまでに絞る（多いと優先度が分からなくなる）
• 避けたい印象も書く（「堅すぎない」「若すぎない」など）
• 参考サイトのどこが良いかを部分で指定する（配色・写真の使い方・余白など）

「このサイトのようにしてほしい」とだけ伝えると、全体を真似た案が出てきがちです。「配色はA社、レイアウトはB社」のように部分を分けて伝えると、狙いどおりの案に近づきます。

参考サイトを選ぶときは、同業他社だけに絞る必要はありません。業種が違っても「写真の大きさ」「文字の詰まり具合」「ボタンの形」など、部分的に良いと思うところがあれば十分な参考になります。反対に、競合のサイトを参考にする場合は「似すぎないようにしたい」と一言添えておくと、差別化を意識した案が出やすくなります。

ページの中身は、文章ではなく表で渡すのが確実です。

「上から順に」並べて書くと、ワイヤーフレームがなくても構成の意図が伝わります。ワイヤーフレームまで用意する場合はサイトマップとワイヤーフレームの作り方も参考にしてください。

ここが曖昧だと、デザインが確定した後にやり直しが発生します。

• ロゴの元データ（ai・svg）があるか、使用上のルールはあるか
• ブランドカラーの指定（カラーコード）と、使ってはいけない色
• 使用フォント（Webフォントの可否・ライセンスの有無）
• 写真は撮影するのか、素材サイトを使うのか、支給するのか
• 原稿は確定稿か仮テキストか（文字量でレイアウトが変わる）
• アイコンやイラストのテイスト（線・塗り・手描きなど）

写真や原稿の渡し方は原稿・画像素材の支給ルールにまとめています。

デザインの後にコーディングがあるなら、納品データの作り方も指示書に書いておきます。

当社が下請けとしてデザインからコーディングまで受ける際は、次の点を最初に確認しています。

• 使用ツール（Figma・XD・Photoshopなど）と、データの受け渡し方法
• デザインする画面幅（例：PC 1440px、スマートフォン 375px）
• スマートフォン版のデザインを作るかどうか
• ボタンのホバーや開閉メニューなど、動きの指定をどこまで描くか
• 文字サイズ・余白のルール（共通の部品として整理するか）

コーディング側へ渡すときのルールはデザインデータの渡し方、指示書の書き方はコーディング指示書のテンプレートで解説しています。

当社がデザインとコーディングの両方を担当する場合でも、デザインの段階で部品（見出し・ボタン・カードなど）の形をそろえておくと、コーディングの工数が減り、公開後にページを追加するときも同じ部品を使い回せます。指示書に「共通の部品として整理してほしい」と書いておくだけで、デザインの作り方が変わります。

デザインは、何度でも直せると思われがちな工程です。

初稿の提出日・修正の回数・確定日を指示書に書いておくと、終わりの見えない修正を防げます。修正を出すときの伝え方は修正依頼の伝え方が参考になります。

確認の進め方の例：

1. 1回目：トップページのみで方向性を確認する
2. 2回目：下層ページを展開し、全体の統一感を確認する
3. 3回目：細部の修正と、スマートフォン版の確認をして確定する

下請けとしてデザインを受けていると、次のような手戻りがよく起きます。

当社（RunLand）は制作会社様の下請けを専門にしているため、元請けの制作会社様がクライアントから聞き取った内容を、指示書としてお預かりすることがほとんどです。その中で「助かる」と感じる指示書には共通点があります。

特に大切なのは優先度です。要望がすべて同じ重さで並んでいると、デザイナーはどれを目立たせればよいか判断できません。「必須」「できれば」「今回は不要」の3段階をつけるだけで、1案目の精度が大きく変わります。

また、元請けの制作会社様とクライアントの間で合意した内容と、まだ相談中の内容が区別されていると、こちらから確認すべき点がはっきりします。指示書は完成させてから渡すものではなく、確認しながら育てていく資料と考えると気が楽になります。

Q. デザイン指示書とデザイン仕様書は違うものですか？

A. 呼び方の違いで、中身はほぼ同じです。目的や印象をまとめたものを「指示書」、色や文字サイズのルールまで決めたものを「仕様書」と呼び分けることもあります。

Q. 参考サイトは何件くらい用意すればよいですか？

A. 2〜3件で十分です。件数よりも、それぞれ「どこが良いか」「どこは真似しないでほしいか」を書き添えることの方が大切です。

Q. 指示書がないと依頼できませんか？

A. 依頼はできます。ただし手戻りが増えやすいので、目的・ターゲット・載せる要素の3点だけでも用意されることをおすすめします。打ち合わせで一緒に埋めることも可能です。

Q. ワイヤーフレームも必要ですか？

A. 必須ではありません。ページ別要素表で「上から順に」載せる内容が分かれば、デザイナー側で構成案を作れます。