CONTENTS

「デザインカンプって、よく聞くけど結局何のこと？」
「モックアップやワイヤーフレームと何が違うのかよく分からない」
「カンプを依頼したけど、どう確認すればいいの？」
「自社でカンプを作りたいけど、何から始めればいい？」

デザインを発注する側でも、自分で作る側でも、必ずぶつかるのが「デザインカンプ」という用語と、その実務的な扱い方です。

実は デザインカンプの理解度がそのまま制作物の品質を左右する と言っても過言ではありません。カンプを正しく作る・正しく確認するだけで、修正回数が激減し、コストも抑えられ、最終アウトプットの完成度がぐんと上がります。

この記事では、名古屋を拠点にイラスト・デザイン・看板・WEB・動画まで一貫制作するアークデザインが、現場で蓄積したノウハウをもとに、

  • デザインカンプの正しい意味と役割
  • モックアップ・ワイヤーフレームとの違い
  • 媒体別のカンプの種類
  • カンプの作り方6ステップ
  • おすすめツール7選
  • 発注者向けのチェックリスト

までを徹底解説します。Web・グラフィック・看板・印刷物——すべての制作現場に役立つ「保存版」の内容です。

デザインカンプとは？基本の意味と役割

デザインカンプの定義

デザインカンプとは、英語の “Design Comprehensive Layout” の略で、**「デザインの完成見本」のこと。略して「カンプ」**とも呼ばれます。

実際の納品物（HTML/CSSで実装されたWebページや、印刷されたチラシなど）を作る前に、ほぼ完成形に近いビジュアルを作成して、関係者で確認・調整するための資料です。

  • ✅ クライアントへのプレゼン用
  • ✅ チーム内の認識合わせ用
  • ✅ コーダー・印刷会社への指示書としての役割
  • ✅ 修正のたたき台

つまりカンプは「最終アウトプットの一歩手前」に位置する、最重要マイルストーンなのです。

何のために作るのか（カンプの目的）

カンプを作る目的は、主に4つあります。

  1. 完成形を視覚的に共有する 言葉や構成案だけでは伝わらない「見た目の印象」を、関係者全員で共有できる
  2. 手戻りを防ぐ 実装後に「思っていたのと違う」を発見すると修正コストが膨大になる
  3. 意思決定を促す ビジュアルがあると、クライアントが具体的な修正・承認の判断をしやすい
  4. 次工程の指示書になる コーダー・印刷会社・撮影スタッフが何を作ればいいか明確になる

良いカンプ・悪いカンプで制作物の質が変わる

良いカンプ：

  • ✅ ターゲット・目的が反映されている
  • ✅ 実装可能な仕様で組まれている
  • ✅ 修正・調整しやすい構造になっている
  • ✅ 関係者全員が同じ完成形をイメージできる

悪いカンプ：

  • ❌ デザイナーの自己満足で派手なだけ
  • ❌ 実装段階で再現できない要素が多い
  • ❌ パーツがバラバラで一貫性がない
  • ❌ クライアントが理解できない抽象度

つまり、カンプの段階で完成度の8割が決まると言われるほど重要なのです。

POINT カンプは「装飾を見せるもの」ではなく「完成形を共有するもの」。 ここでズレを潰しておかないと、後工程ですべてが破綻します。

デザインカンプ・モックアップ・ワイヤーフレームの違い

混同されがちな3つの用語の違いを整理します。

それぞれの定義

用語 内容 完成度
ワイヤーフレーム 構造・要素の配置を示した骨格設計図 20〜30%
モックアップ デザインを当てた試作・完成イメージ 70〜90%
デザインカンプ クライアント承認用の完成見本 90〜100%
プロトタイプ 実際に動作する試作品（クリック可能） 動作確認用

制作工程上の位置づけ

通常の制作プロセスでは、以下の順で進みます。

構成案・要件定義
   ↓
ワイヤーフレーム（骨組み）
   ↓
モックアップ（試作デザイン）
   ↓
デザインカンプ（最終見本）★承認ポイント★
   ↓
コーディング・印刷・実装
   ↓
納品

比較表でひと目で違いを整理

観点 ワイヤーフレーム モックアップ デザインカンプ
主目的 構造設計 デザイン検証 完成見本・承認
色・装飾 グレースケール 仮で配置 本番カラー
写真・素材 プレースホルダー 仮素材 本番素材
クライアント共有 あまりしない 場合により 必ずする
修正対応 容易 中程度 確定前に行う

「モックアップ」と「カンプ」は実務でほぼ同義として使われることもあります。厳密に区別しなくてOKです。

デザインカンプの種類【媒体別の特徴】

カンプは媒体によって作り方・確認ポイントが変わります。

Webサイト・LPのデザインカンプ

  • 画面サイズ別に複数枚作成（PC / タブレット / スマホ）
  • ホバー時・クリック時などインタラクションも明示
  • スクロールで見える順を意識した縦長レイアウト

近年は Figma などのオンラインツールで共有することが主流になっています。

印刷物（チラシ・パンフ・ポスター）のデザインカンプ

  • CMYKカラーで作成（Webと違いRGB不可）
  • **トリムマーク（トンボ）**を含めた印刷データ仕様
  • 塗り足しを考慮したレイアウト
  • 紙質・印刷加工（マット・光沢・箔押し）の指定も併記

紙の場合は実寸印刷でのチェックが必須。画面で見るのと印刷物では印象が違います。

ロゴ・ブランディングのデザインカンプ

  • 複数案（3〜5案）を提示
  • モノクロ・カラー・反転バージョンすべて作成
  • 使用シーン別の見え方（名刺・看板・封筒・SNS）
  • ガイドライン文書を併せて提出

ロゴは長く使うブランド資産なので、カンプ段階で慎重に詰めます。

パッケージ・グッズのデザインカンプ

  • 3D モックアップで立体的に見せる
  • 展開図 + 完成形の両方
  • **素材感（プラスチック・紙・布）**まで考慮

物販・販促物の場合、実物に近いビジュアルで確認することがCV率向上の鍵。

看板・店舗装飾のデザインカンプ

  • 設置場所の写真への合成画像で見せる
  • 朝・昼・夜の見え方
  • 通行人の視線レベルからの見え方
  • 周辺看板との差別化チェック

特に大型看板は 「設置後にやり直し」が極めてコスト高 なので、カンプの作り込みが命です。

動画・アニメーションの絵コンテ（カンプ相当）

動画制作では 絵コンテ・ストーリーボードがカンプに相当します。

  • カットごとの構図・キャラ位置・テロップ
  • 秒数・尺・BGM・効果音の指定
  • 主要シーンのキービジュアル

アークデザインのSNS用アニメーション動画制作でも、絵コンテ段階で90%の品質が決まります。

デザインカンプの作り方【6ステップ】

ここからはWebサイトを例に、カンプ制作のプロセスを解説します。

STEP1. 目的・ターゲット・ゴールの明確化

最重要工程。ここがブレるとすべてがブレます。

  • 目的：認知拡大／問い合わせ獲得／購買促進／採用
  • ターゲット（ペルソナ）：年齢・性別・職業・行動パターン
  • ゴール（KPI）：CVR・PV・滞在時間・問い合わせ件数

これらが1枚のシートに整理されている状態にしてから、初めてデザインに入ります。

STEP2. 参考リサーチ

優れたデザインから学ぶのは、デザインの基本中の基本です。

  • 同業界の上位サイトを5〜10件チェック
  • 異業種の優秀なデザインから発想を借りる
  • Pinterest・Behance・SANKOU!・I/O 3000 などギャラリーサイトを活用

⚠️ コピーは絶対NG。あくまで参考イメージとして「良いとこ取り」しましょう。

STEP3. 構成案・ワイヤーフレームの作成

カンプに入る前の骨組み。ブロックの順番・要素の配置を決めます。

  • ファーストビュー：何を見せる？
  • セクション順：問題提起 → 解決 → 実績 → CTA
  • カラム数：1カラム / 2カラム / 3カラム

このフェーズは紙やラフでもOK。スピード優先で複数案を出し、絞り込みます。

STEP4. ガイド・グリッドの設計

カンプ制作で最初にやるべきは ガイド（補助線）を引くこと。

  • レイアウトのグリッド（12カラムなど）
  • マージン・パディングのルール
  • 共通余白の決定

ガイドに沿って配置すると、プロが作ったような美しい整列が自然に生まれます。

STEP5. 色・フォント・素材の決定

カンプ全体のトーン&マナーを決める要素を確定。

  • 配色：ベース・メイン・アクセント（70:25:5の比率）
  • フォント：和文1〜2種＋欧文1種が王道
  • 写真・イラスト：本番素材をできるだけ使用
  • アイコン・装飾：統一感のあるテイスト

STEP6. パーツの配置・カンプ完成

ガイドに沿って、決めた要素を配置していきます。

  • セクションごとのメリハリを確認
  • スマホ表示時の崩れチェック
  • 印刷物なら実寸プリントで最終確認
  • クライアント提出前に社内レビュー

完成したら、説明書き付きで提出するとクライアントの理解が深まります。

レスポンシブデザインのカンプ作成のポイント

WebサイトやLPのカンプでは、マルチデバイス対応が必須です。

最低3パターンは作成する

  • PC（1280px〜1920px）
  • タブレット（768px〜1024px）
  • スマホ（375px〜414px）

スマホファーストで設計するのが現代の主流

近年はスマホ閲覧が 70〜90% を占めるサイトも多いため、スマホ → タブレット → PC の順で設計するのが効率的です。

端末ごとの情報優先順位を考える

  • スマホ：縦スクロール前提でメッセージを段階的に
  • タブレット：両手持ち想定で操作性重視
  • PC：余白を活かした情報密度の高いデザイン

デザインカンプ作成におすすめのツール7選

カンプ制作の現場で実際に使われているツールを用途別に紹介します。

① Figma【最近の主流】

特徴：ブラウザ上で動作／リアルタイム共同編集可能／無料プランあり

  • ✅ Web/UI/UXデザインの第一選択肢
  • ✅ クライアントとの共有が簡単
  • ✅ プロトタイプ機能でクリック可能なモックも作れる

おすすめ用途：Webサイト、LP、UI/UX設計、複数人での共同作業

② Photoshop

特徴：画像加工の最強ツール／写真重視のデザインに最適

  • ✅ 写真を多用するLPやバナーに強い
  • ✅ レタッチ・合成・複雑なエフェクトに対応
  • ✅ Adobe Creative Cloudの中核

おすすめ用途：写真主体のWebデザイン、バナー、ECサイト

③ Illustrator

特徴：ベクター形式／印刷物・ロゴ制作に必須

  • ✅ 拡大縮小しても画質が劣化しない
  • ✅ 印刷データの入稿に最適
  • ✅ ロゴ・アイコン・複雑なイラストに強い

おすすめ用途：チラシ、パンフ、ポスター、ロゴ、看板、パッケージ

④ Adobe XD

特徴：UI/UX特化／プロトタイプ作成に強い

  • ✅ シンプルな操作性
  • ✅ アニメーション付きプロトタイプ
  • ✅ Adobe製品との連携良好

おすすめ用途：アプリUI、複雑なインタラクション設計

⑤ Sketch（Mac限定）

特徴：UIデザイン老舗／プラグイン豊富

  • ✅ Mac限定だが軽快に動作
  • ✅ 海外案件で多く使われる

おすすめ用途：Macユーザーのアプリ・WebUI設計

⑥ Canva

特徴：テンプレ豊富／初心者でも扱える

  • ✅ ノーコードで簡単
  • ✅ SNS投稿・簡易資料・チラシに
  • ✅ 無料で始められる

おすすめ用途：簡易チラシ、SNS画像、社内資料

⑦ GIMP（無料）

特徴：オープンソース／Photoshop代替

  • ✅ 完全無料
  • ✅ 個人利用や予算ゼロのプロジェクトに

おすすめ用途：個人ブログ、予算が限られる案件

ツール選びの早見表

用途 第一選択 第二選択
Webサイト・LP Figma XD・Photoshop
印刷物・ロゴ Illustrator Photoshop
アプリUI Figma XD・Sketch
写真合成・バナー Photoshop Illustrator
簡易資料・SNS Canva Figma

デザインカンプを作るときの5つのポイント

経験の浅いデザイナーや、自社で初めてカンプを作る人が陥りがちな失敗を回避するコツです。

ポイント① コーディング・印刷を見据えた設計

カンプは最終アウトプットへの設計図でもあります。

  • 10px未満のフォントサイズは使わない
  • ブロック同士の余白は統一する
  • 画像のサイズと解像度は実装規格に合わせる
  • 印刷物ならCMYK・塗り足し・トリムマークを意識
  • WebならRGB・RWD（レスポンシブ）対応を考慮

「作れたけど実装できない」カンプは典型的な失敗例です。

ポイント② オリジナリティに縛られすぎない

新人デザイナーがやりがちな失敗が、**「自分の個性を出さなきゃ」**と気負うこと。

デザインの本質は 「目的に対する最適解」であり、独自性ではありません。優れた既存デザインの良いところを学び、組み合わせる姿勢のほうが、結果的に良い成果物になります。

オリジナリティは経験を積むうちに自然とにじみ出るもの。最初から狙うものではありません。

ポイント③ 構成案に縛られすぎない

構成案はあくまでも「案」。デザインを進める中で「ここはこの配置の方が伝わる」と気づいたら、柔軟に修正しましょう。

ただし、目的・ターゲット・KPIからは絶対にブレてはいけません。 構成案は変えても、戦略は守るのが鉄則です。

ポイント④ 修正しやすい構造で作成する

クライアントワークでは3〜5回の修正が前提です。

  • レイヤーを機能ごと・セクションごとに整理
  • フォント・カラーをスタイル登録しておく
  • 共通パーツはコンポーネント化
  • ファイル名・命名ルールを統一

これだけで、修正効率は3倍以上になります。

ポイント⑤ 共有・レビューの仕組みを整える

カンプは「作って終わり」ではなく「確認・承認のたたき台」。

  • クライアントに見せる前に社内レビュー
  • コメント機能で修正履歴を残す
  • バージョン管理でいつでも前の状態に戻せる

Figmaなら全部実現可能なので、現代の標準ワークフローとして覚えておきましょう。

発注者向け｜カンプを受け取ったときのチェックリスト

デザインを依頼した側が「カンプを正しく確認できる」と、後工程の品質が劇的に上がります。

チェック① 全体の方向性が合っているか

  • ✅ 目的・ターゲット・ブランドイメージとズレていないか
  • ✅ 競合との差別化はできているか
  • ✅ 第一印象で「これだ！」と思えるか

枝葉の修正より「方向性のズレ」を優先して確認しましょう。

チェック② 媒体・利用シーンに適しているか

  • ✅ Webならスマホでも見やすいか
  • ✅ 印刷物なら実寸で印刷して読めるか
  • ✅ 看板なら設置距離から視認できるか
  • ✅ 動画なら音なし環境でも伝わるか

実環境で確認することが超重要です。

チェック③ 文字・余白・色のバランス

  • ✅ 重要な情報が一番目に入るか
  • ✅ 余白は十分にあるか（詰めすぎていないか）
  • ✅ 色のトーンは統一されているか
  • ✅ フォントは2〜3種類に収まっているか

チェック④ 修正依頼の伝え方のコツ

NG例：「なんか違う」「もっとおしゃれに」「かわいくして」 👇 OK例：「ロゴを20%大きくしてください」「ブルー系をベージュ系に変更したい」「この余白をもう少し広く取れますか？」

具体的・定量的な指示が、修正のスピードと精度を高めます。

参考イメージを添えれば、さらに伝わりやすくなります。

デザインカンプに関するよくある質問（FAQ）

Q1. カンプ作成だけ依頼できますか？

A. はい、可能です。実装は社内で行い、カンプだけプロに依頼するケースも増えています。コーディングや印刷データへの変換も別途相談可能です。

Q2. カンプの修正回数に上限はありますか？

A. 制作会社や契約形態によりますが、一般的には2〜3回の修正が見積もりに含まれます。それ以上は追加料金になることが多いので、事前に確認しましょう。

Q3. カンプの料金相場はどれくらい？

A. 媒体・難易度により大きく異なります。

  • LP1ページ分のカンプ：5〜30万円
  • Webサイト全体のカンプ：10〜100万円
  • チラシ・パンフのカンプ：3〜20万円
  • ロゴカンプ（複数案）：10〜50万円
  • 看板カンプ：5〜30万円

Q4. カンプはPDFで提出してもらえますか？

A. はい、**PDF・PNG・JPG・元データ（PSD/AI/Figmaリンク）**などで提出可能です。クライアントの環境や用途に応じて使い分けます。

Q5. AIでカンプは作れますか？

A. 簡易的なラフレベルなら可能ですが、ブランド一貫性・実装可能性・修正対応を考えると、現状はプロのデザイナーによる制作が圧倒的に強いです。AIは素材生成に活用するのが現実的です。

Q6. 印刷物のカンプは紙で確認すべきですか？

A. 必ず実寸で出力してください。画面で見るのと紙で見るのでは、サイズ感・色味・読みやすさがまったく違います。看板の場合はさらに、A1サイズ程度に拡大プリントして確認するのが理想です。

アークデザインのデザインカンプ制作プロセス

アークデザインでは、お客様の認識を確実に揃えるため、段階的なカンプ提出を行っています。

ヒアリング → カンプ提出までの流れ

1. ヒアリング（目的・ターゲット・予算・納期）
   ↓
2. 戦略・コンセプト整理（簡易企画書）
   ↓
3. ラフ案・ワイヤーフレーム提出（複数案）
   ↓
4. デザインカンプ提出（複数案 → 1案に絞り込み）
   ↓
5. ブラッシュアップ（修正2〜3回想定）
   ↓
6. 最終データ納品

各段階でお客様と認識を擦り合わせるため、最終的に「思っていたのと違う」が起こりません。

多媒体（紙・Web・看板・動画）一貫対応

アークデザインの強みは、媒体を横断したカンプ提出ができること。

  • ロゴ → 名刺 → チラシ → 看板 → Web → 動画 → グッズ

すべての媒体について統一感のあるカンプを一気通貫で作成。複数の制作会社に依頼するよりも、進行管理・コスト・トーン統一のすべてで有利です。

修正対応も柔軟

アークデザインでは、お客様の納得感を最優先に、柔軟な修正対応を心がけています。「ここをもう少しこうしたい」というご要望にも、経験豊富なクリエイターが誠実に対応します。

累計1,000件超の制作実績

東海エリアの中小企業から全国の上場企業・自治体・テレビCMタイアップ案件まで、規模・業種を問わない実績を蓄積。お客様のビジネスに最適なカンプを、迅速かつ高品質にお届けします。

まとめ：デザインカンプは「制作物の完成度を決める設計図」

最後に本記事のポイントを整理します。

  • デザインカンプは 「最終アウトプットの設計図」であり、品質を左右する最重要工程
  • ワイヤーフレーム → モックアップ → カンプ → 納品の流れを理解する
  • 媒体（Web／印刷／ロゴ／看板／動画）ごとに最適なカンプは異なる
  • カンプ制作は 「目的設定 → リサーチ → ワイヤー → ガイド → 配色 → パーツ配置」 の6ステップ
  • ツールは用途別に使い分ける（Figma / Photoshop / Illustrator など）
  • 発注者は 「方向性 → 媒体適合 → バランス → 具体的な修正指示」 の順でチェック
  • 修正のしやすい構造・共有の仕組みを最初から整える

カンプの段階で品質が決まる——それを理解して正しく作り、正しく確認することが、成果物のクオリティを劇的に上げる近道です。

「多媒体を横断した一貫感のあるデザインカンプを作りたい」「プロのカンプ制作プロセスで安心して任せたい」とお考えの方は、ぜひお気軽にご相談ください。

🎨 アークデザインへのお問い合わせ・無料相談はこちら

▶︎ お問い合わせフォーム

▶︎ LINEで相談する

▶︎ サービス一覧を見る