Web制作やバナー制作の現場でよく出てくる言葉に「デザインカンプ」があります。
制作を進めるうえで超重要な資料なのに、なんとなく雰やっと理解している人も多いです。
この記事では、デザインカンプとは何かを初心者向けにわかりやすく解説しつつ、実務でどう扱うべきかまで整理していきます。
デザインカンプとは？
**デザインカンプ（デザインカンプル）**とは、
**完成形のデザイン見本（完成イメージ）**のことです。
Webサイト制作で言うなら、
この色で
このフォントで
このレイアウトで
このボタンの形で
この余白感で
という「完成した見た目」を、制作前に確認できる資料がデザインカンプです。
デザインカンプで決まっていること
デザインカンプには「見た目に関わる要素」が基本的に全部入っています。
例えば以下のようなものです。
レイアウト（配置）
文字サイズ
フォント
余白（マージン・パディング）
色（背景色、文字色、ボタン色など）
画像の使い方
ボタンのデザイン
見出しの装飾
影や角丸などの細かい装飾
つまり、コーディングするときの答えが詰まっている資料だと思ってOKです。
デザインカンプが必要な理由
デザインカンプがあると、制作がめちゃくちゃ進めやすくなります。
1. 完成のゴールがズレなくなる
最初に完成イメージが決まっていないと、
なんとなく作る
途中で方向性が変わる
「思ってたのと違う」が起きる
という事故が起きやすいです。
デザインカンプがあると、完成のゴールが明確になります。
2. お客さんと認識合わせができる
「このサイト、こんな感じになります！」が口だけだと伝わりません。
デザインカンプで見せれば、
この雰囲気で合ってるか
この色で問題ないか
文字の大きさは読みやすいか
などを事前に確認できます。
3. コーダーが迷わず作れる
デザインカンプがあると、コーダーは
どこまで正確に再現するか
どこを共通パーツにするか
どこが重要な見た目なのか
判断しやすくなります。
実務では「デザインカンプ通りに実装する」が基本です。
デザインカンプとワイヤーフレームの違い
初心者が混乱しやすいのがここです。
ワイヤーフレーム
ざっくりした設計図
レイアウトや構成を決めるもの
色やフォントは未確定
デザインカンプ
完成見本
実際の色・装飾・雰囲気まで決まっている
コーディングの基準になる
つまり、ざっくり順番でいうと
ワイヤーフレーム → デザインカンプ → コーディング
という流れになります。
デザインカンプには何種類ある？
実務では、用途によって以下のようなカンプが存在します。
PC版カンプ
パソコン表示の完成形
（横幅が広いデザイン）
スマホ版カンプ
スマホ表示の完成形
（縦に長く、操作しやすい設計）
最近はスマホ版のデザインが最優先になることも多いです。
デザインカンプをもらったら最初に確認すること
制作側（コーダー・制作者）としては、もらった瞬間にここを見ます。
1. PC版とスマホ版が両方あるか
片方しかない場合、もう片方は「作りながら考える」になりがちで危険です。
2. フォントが指定されているか
フォントが曖昧だと、見た目が全然違うものになりやすいです。
3. 色が統一されているか
ボタン色・リンク色・アクセントカラーが揃っているかチェックします。
4. 画像や素材が揃っているか
画像が仮のままだと、後から差し替えでレイアウトが崩れることもあります。
デザインカンプ通りに作れないケースもある
現場では「完全に一致」が難しい場合もあります。
例えば、
フォントがWebで再現できない
アニメーションが複雑すぎる
画像が足りない
余白が細かすぎてスマホで崩れる
こういう時は勝手に変えるのではなく、必ず相談して決めるのが大事です。
デザインカンプがない制作は危険？
結論、かなり危険です。
デザインカンプがないまま進めると、
デザインが途中で変わりまくる
修正が無限に増える
どこまで作れば完成かわからない
制作者と依頼者の認識がズレる
こういうトラブルが起きやすいです。
もしカンプがない場合は、最低でも
参考サイト
簡単な構成案
使う色
使用フォントの方向性
くらいは揃えておくとスムーズです。
まとめ：デザインカンプは「完成形の見本」
デザインカンプとは、ひとことで言うと
**完成したデザインの見本（完成イメージ）**です。
制作の現場では、
ゴールを明確にする
依頼者とのズレを防ぐ
コーディングの基準になる
という意味で、とても重要な資料です。
Web制作を仕事にしていくなら、
「カンプを見て再現できる力」はかなり武器になります。
