WEB制作

KNOWLEDGE

デザインカンプの作り方と進め方|制作会社とのやり取りをスムーズに

  • #WEB制作
  • #クリエイティブ

SHARE

デザインカンプは、色・書体・写真・余白を含んだ完成イメージです。発注者が最も判断しやすい工程である一方、ここで好みの議論が始まると、進行が止まります

「なんとなく違う」「もう少し明るく」といった指摘が続くと、修正回数を消費するだけで方向性が定まりません。原因は、判断基準が共有されていないことにあります。

この記事では、デザインカンプの位置づけを整理したうえで、確認の観点、フィードバックの伝え方、修正回数の使い方、そして承認までの進め方を、発注者の視点で解説します。

この記事でわかること

・デザインカンプで決めること・決めないこと

・好みの議論にせずに確認する5つの観点

・伝わるフィードバックの書き方

・修正回数の使い方と、社内調整の順序

・承認前の最終確認項目

デザインカンプの位置づけ

工程 決めること この段階で議論しないこと
情報設計 サイト全体の構造 各ページの見た目
ワイヤーフレーム 各ページの情報と並び順 色・書体・写真
デザインカンプ 色・書体・写真・余白・装飾 情報の過不足、並び順
実装 動作、表示速度、レスポンシブ デザインの方向性

デザインカンプの段階で「この情報も入れたい」「順番を変えたい」という指摘が出ると、大幅な手戻りになります。これはワイヤーフレームで決めるべき内容です。逆に言えば、ワイヤーフレームを丁寧に承認しておけば、カンプでの議論は表現に絞れます。

ワイヤーフレームの確認方法はワイヤーフレームとは?作る目的と作成時に押さえるべきポイントで解説しています。

デザインカンプで見るのは表現です。情報の過不足と並び順は、ワイヤーフレームで決めておいてください。

この段階で構成の議論が出ると、修正が実装まで波及します。

好みの議論にしない5つの観点

「良い・悪い」ではなく、次の観点で確認してください。

# 観点 具体的な問い
1 コンセプトとの一致 決めた印象(堅実/親しみやすい 等)を体現しているか
2 対象者との適合 想定する顧客層が見て、自分向けだと感じるか
3 可読性 本文サイズで読めるか。コントラストは十分か
4 優先順位の表現 最も見せたい要素が、実際に最も目立っているか
5 競合との差 同商圏の競合と並べて、区別がつくか

1番目が最も重要です。コンセプトが言語化されていないと、この観点が使えず、必然的に好みの議論になります。デザインに入る前に、伝えたい印象を1〜2語で決めておいてください。

5番目は自分で確認できます。競合他社のサイトを並べて表示し、区別がつくかを見てください。

伝わるフィードバックの書き方

伝わらない 伝わる
もう少し明るく 背景を白基調にして、写真の面積を増やしてほしい
なんとなく硬い 見出しの書体を明朝からゴシックに変えると印象が変わるか見たい
もっと目立たせて 問い合わせボタンを、他の要素より先に目に入るようにしたい
他社っぽい ◯◯社と配色の方向性が近いので、差をつけたい
ダサい (伝えるべきは、コンセプトのどこと合っていないか)

コツは「どうしたいか」ではなく「何が問題か」を書くことです。解決方法はデザイナーのほうが多く持っています。問題を正確に伝えれば、想定より良い解決策が返ってくることがあります。

フィードバックの形式

  1. 該当箇所を特定する:スクリーンショットに印を付ける、または位置を明記する
  2. 何が問題かを書く:判断できない、読みにくい、目立たない、コンセプトと違う
  3. 優先度を付ける:必ず直す/できれば直す/参考意見
  4. 社内の意見を1つにまとめてから渡す:複数人の指摘をそのまま流さない

4番目が実務では効きます。社内で意見が割れたまま渡すと、デザイナーがどれに従うか判断できません。窓口を1人決め、社内で調整してから渡してください。

修正回数の使い方

見積には修正回数の上限が設定されていることが多くあります。回数を無駄にしない進め方があります。

使い方 やってはいけないこと
1回目 方向性の判断。大きな軸を決める 細部の指摘に回数を使う
2回目 決めた方向での調整 方向性を変える
3回目 細部の詰め 新しい要望を追加する

初回で方向性を確定させることが最も重要です。ここで曖昧なまま進むと、2回目以降の修正が方向転換になり、回数が足りなくなります。

複数案が出た場合

初回に2〜3案が提示される場合、「どれが良いか」ではなく「どれがコンセプトに近いか」で選んでください。そのうえで、選んだ案に他案の良い要素を足すかどうかを判断します。

複数案の要素を混ぜすぎると、まとまりのないデザインになります。基本は1案を選び、そこから詰めてください。

社内調整の順序

手戻りの最大の原因は、決裁者が最後に出てくることです。

  1. コンセプト決定時に決裁者を入れる:伝えたい印象の合意を取る
  2. ワイヤーフレームで一度確認に入れる:構成の合意を取る
  3. デザイン初回提案で確認に入れる:方向性の合意を取る
  4. 以降は窓口担当が進める:細部の判断を委任してもらう

3番目までに決裁者の合意を取っておけば、完成間際の方針転換を防げます。「最後に見せて驚かせる」進め方は、手戻りのリスクが最も高くなります

承認前の最終確認

デザインを承認する前に、次を確認してください。実装後に気づくと修正コストが上がります。

  • スマートフォン版のカンプがあるか:PC版だけで承認しない
  • 実際の文章量で確認したか:ダミーテキストのままだと、本番で見え方が変わる
  • 実際の写真で確認したか:仮画像のままだと、印象が変わる
  • 本文サイズで可読性を確認したか:拡大表示ではなく実寸で
  • コントラスト比を満たしているか:薄いグレーの文字がないか
  • 更新される箇所の見え方:お知らせが増えたとき、実績が増えたときのレイアウト
  • 使用色・書体がルール内か:デザインルールがある場合

1番目と2番目が特に重要です。PC版のみ、ダミーテキストのままの承認は、実装後の指摘を確実に生みます。スマートフォンでの見え方についてはモバイルファーストデザインとは?重要視される理由と設計のコツで解説しています。

よくある失敗

失敗1:カンプの段階で構成を変える

ワイヤーフレームで決めるべき内容です。デザインと実装の両方に波及します。

失敗2:好みで指摘する

判断基準がコンセプトに戻らないと、議論が収束しません。

失敗3:社内の意見をそのまま流す

矛盾する指摘が混在すると、デザイナーが判断できません。窓口でまとめてください。

失敗4:決裁者が最後に出てくる

完成間際の方針転換は、最も手戻りが大きくなります。初回提案までに入れてください。

失敗5:PC版だけで承認する

実装後に「スマホだと違う」という指摘が出て、修正が二重になります。

よくある質問

Q. デザインカンプとワイヤーフレームの違いは?

ワイヤーフレームは情報と並び順を決める工程、デザインカンプは色・書体・写真・余白を含む完成イメージです。順序としてワイヤーフレームが先で、これを承認してからカンプに進みます。

Q. 何ページ分作るのが一般的ですか?

トップページと、代表的な下層ページ1〜2点が一般的です。全ページ分を作ると期間と費用が膨らむため、共通レイアウトが決まれば他は展開で対応します。

Q. 修正回数を超えたらどうなりますか?

追加費用が発生することが一般的です。見積の段階で回数と超過時の扱いを確認してください。回数を無駄にしないため、初回で方向性を確定させることが重要です。

Q. 途中で方向性を変えたくなったら?

早い段階なら伝えてください。初回提案の直後であれば、まだ調整の余地があります。ただし、実装に入ってからの方向転換は、費用と期間の再見積が必要になります。

Q. デザインデータはもらえますか?

契約によります。元データ(Figma、psd、ai)を受け取れるか、契約前に確認してください。受け取れないと、別の制作会社に依頼する際にゼロから作り直しになります。

まとめ

デザインカンプで見るのは表現です。情報の過不足と並び順は、ワイヤーフレームで決めておいてください。この段階で構成の議論が出ると、修正が実装まで波及します。

確認は好みではなく、コンセプトとの一致、対象者との適合、可読性、優先順位の表現、競合との差という5つの観点で行ってください。特にコンセプトが言語化されていないと、必然的に好みの議論になります。

フィードバックは「どうしたいか」ではなく「何が問題か」を書いてください。解決方法はデザイナーのほうが多く持っています。そして社内の意見は窓口でまとめてから渡してください。

承認前には、スマートフォン版があるか、実際の文章量と写真で確認したかを必ず見てください。PC版のみ、ダミーテキストのままの承認は、実装後の指摘を確実に生みます。

「デザインの議論が進まない」「完成間際に方針が変わった」といった経験がある場合は、確認の観点と社内調整の順序を見直す価値があります。

当社ではホームページ制作からデザイン制作までを一貫して支援しています。資料では制作の進め方と確認事項をまとめていますので、自社の課題を整理したい方はぜひダウンロードしてご活用ください。

SHARE