Web制作会社から「デザインカンプが上がりました」と連絡が来たものの、何をどう見ればいいのか分からない。あるいは、初めてデザインカンプの作成を任されたが、ワイヤーフレームとの違いすら曖昧なまま手が止まっている。どちらも、Webサイト制作の現場で日常的に起きている悩みです。デザインカンプは、単なる「きれいな完成見本」ではなく、発注側と制作側の認識をそろえ、手戻りコストを削るための実務ドキュメントです。この記事では、デザインカンプの定義から作り方の5ステップ、2026年時点のツール料金、発注側が見るべきチェックポイントまでを整理します。
デザインカンプとは？意味と作る目的
「カンプ」はcomprehensive layoutの略
デザインカンプとは、Webサイトや紙媒体の完成イメージを、実物に限りなく近い形で可視化した完成見本のことです。「カンプ」は英語の comprehensive layout（コンプリヘンシブ・レイアウト＝包括的なレイアウト） の略で、日本の制作現場ではこれを短縮して「カンプ」と呼び慣わしてきました。
もともとは印刷・広告業界の用語で、印刷前にクライアントへ提示する仕上がり見本を指していました。Web制作に持ち込まれた現在も役割は変わらず、「これで実装に入って問題ないか」を関係者が判断するための材料として使われます。色、フォント、写真、余白まで実物と同じ状態で作り込まれているのが、他の設計書との決定的な違いです。
「カンプデザイン」と「デザインカンプ」は同じもの
検索では「カンプデザイン」という語順で調べられることも多いのですが、業界の正式な呼び方は 「デザインカンプ」 です。「カンプデザイン」「デザインカンプ デザイン」といった表記も同じものを指していると考えて差し支えありません。制作会社とのやり取りでは「デザインカンプ」「デザイン案」「カンプ」のいずれかで通じます。
なお、紙媒体では「サムネイル→ラフ→カンプ」という3段階の呼び分けが残っており、ラフ（ラフ画）は手描き程度の粗い下書き、カンプは完成品と見分けがつかないレベルの精度という違いがあります。
デザインカンプに含まれる要素
デザインカンプには、実装に必要な視覚情報がすべて盛り込まれます。
| 要素 | 具体的に決めるもの |
|---|---|
| レイアウト | 全体幅、カラム数、セクションの並び順、余白のルール |
| カラー | メインカラー、アクセントカラー、文字色、背景色（カラーコード） |
| タイポグラフィ | 書体、フォントサイズ、行間、字間、見出しの階層 |
| 画像・グラフィック | 写真、イラスト、アイコン、ロゴの実配置 |
| ボタン・リンク | CTAボタンの形状・色・文言、ホバー時の見え方 |
| 文言 | キャッチコピー、見出し、本文（可能な範囲で実テキスト） |
ポイントは、ダミーテキスト（「あああ…」やLorem ipsum）を極力使わないことです。実際の文章量が入って初めて、行数の増減によるレイアウト崩れや、見出しの長さのバランスが判断できます。
デザインカンプを作る3つの目的
デザインカンプは「見栄えを整えるため」に作るのではありません。実務上の目的は次の3つに集約されます。
- 関係者の認識を統一する：発注側の担当者、決裁者、デザイナー、コーダー、ライターが、同じ完成像を見て議論できる状態を作る。
- 手戻りコストを防ぐ：コーディング着手後にデザインの根本変更が入ると、実装のやり直しが発生します。デザイン段階で1時間かけて合意しておけば、実装後の数日単位の修正を回避できます。
- レビューと承認を効率化する：完成に近いビジュアルがあることで、社内稟議や経営層の承認が短時間で通りやすくなります。抽象的な線画では「よく分からないから保留」となりがちです。
BtoBのWebサイト制作では、プロジェクトが遅延する原因の多くが「デザイン確認フェーズでの差し戻し」です。デザインカンプの質と、それを確認する側の準備が、そのままスケジュールとコストに跳ね返ります。
ワイヤーフレーム・モックアップ・プロトタイプとの違い
制作フローのどこに位置するか
Webサイト制作は、おおむね次の流れで進みます。
要件定義 → サイトマップ作成 → ワイヤーフレーム → デザインカンプ → コーディング → テスト → 公開
デザインカンプは、設計（ワイヤーフレーム）とビジュアル制作の結節点にあたります。ワイヤーフレームで「何をどこに置くか」を決め、デザインカンプで「それがどう見えるか」を確定させ、その確定物をもとにコーディングへ渡す、という順序です。
4つの違い早見表
似た言葉が並ぶため、目的と精度で整理すると混乱しません。
| 用語 | 目的 | 精度 | 作るタイミング | 主に使うツール |
|---|---|---|---|---|
| ワイヤーフレーム | 情報の配置・優先順位を決める | 白黒の線画レベル | デザイン前 | Figma、Excel、手描き |
| デザインカンプ | 完成ビジュアルを確定させる | 実物と同等 | ワイヤーフレーム承認後 | Figma、Photoshop |
| モックアップ | 見た目の質感・雰囲気を確認する | 実物と同等（静止） | デザイン段階 | Figma、Photoshop |
| プロトタイプ | 遷移や操作感を検証する | 動く・触れる | デザインカンプ完成後 | Figma、ProtoPie |
モックアップとデザインカンプは実務上ほぼ同義で使われることが多く、厳密に区別しない現場も珍しくありません。強いて言えば、モックアップは「見た目の確認」に軸足があり、デザインカンプは「実装に渡す仕様としての完成見本」というニュアンスを持ちます。
一方、プロトタイプとの違いは明確です。プロトタイプは動作するもので、ボタンを押すと次の画面に遷移する、メニューが開くといったインタラクションを検証します。静止画であるデザインカンプでは検証できない「使い心地」を確かめるのがプロトタイプの役目です。
ラフ（ラフ画）との違い
ラフ画は、アイデアを素早く共有するための粗い下書きです。手描きやワイヤーフレームツールで数分〜数十分で作り、方向性の候補を複数出す場面で使われます。ここで方向性を絞り込んでからデザインカンプに進むことで、完成度の高いデザインを作った後にコンセプトごと否定されるという最悪の手戻りを避けられます。
発注側の担当者は、「ラフの段階で言うべきこと」と「カンプの段階で言うべきこと」を分けて考えると建設的です。全体の方向性やコンテンツの過不足はラフ・ワイヤーフレームの段階で、色味やあしらいの微調整はカンプの段階で伝えるのが、双方にとって効率的です。
デザインカンプの作り方5ステップ
STEP1 サイトの目的とターゲットを固める
デザインに手をつける前に、「誰に、何をしてほしいサイトか」を言語化します。BtoBサイトであれば、「情報収集段階の情報システム部門の担当者に、資料請求してもらう」といった粒度まで落とし込みます。
ここが曖昧なままだと、デザインの良し悪しを判断する基準がなくなり、レビューが「なんとなく好き・嫌い」の応酬になります。目的とターゲットが定義されていれば、「このターゲットには情報量が多すぎる」という具体的な議論ができます。
STEP2 参考サイトを複数集める
イメージのすり合わせに最も効くのが、参考サイトの提示です。発注側は「かっこいい感じで」ではなく、実在するサイトのURLを3〜5件、「どこが良いと思ったか」のコメント付きで渡します。「このサイトの余白の取り方が好き」「この配色は自社のイメージと合う」といった一言があるだけで、デザイナーの解像度は大きく上がります。
制作側も、業種を問わず幅広く集めるのがコツです。同業他社ばかり参考にすると、似通ったデザインに収束してしまいます。
STEP3 ワイヤーフレーム（構成案）を確定させる
デザインカンプの前に、掲載する要素と順序をワイヤーフレームで確定させます。ここでテキスト原稿と使用画像がそろっているのが理想です。原稿が未確定のままデザインに進むと、後から文章量が倍になってレイアウトを組み直す、という事態が起こります。
発注側にとっては、この段階が「内容に口を出す最後のタイミング」だと考えておくと、後工程がスムーズになります。
STEP4 アートボードとガイド（グリッド）を設定する
デザインツール上で、制作するデバイスごとにアートボードを用意し、コンテンツ幅・余白・カラム（列）のガイドを引きます。ガイドを先に引いておくことで、要素の左端がわずかにずれる、セクション間の余白がバラバラになる、といった精度の低さを防げます。
一般的には、12カラムのグリッドを基準にし、コンテンツの最大幅（例：1,000〜1,200px程度）を決めてから中身を作り始めます。余白のルールを8px単位や4px単位の倍数で統一すると、コーディング時のCSS指定も整理しやすくなります。
STEP5 パーツを配置し細部を作り込む
ガイドに沿って、ヘッダー、ファーストビュー、各コンテンツ、CTA、フッターの順にパーツを配置します。着手しやすいところから作り、全体が埋まってから細部を詰めるのが効率的です。
仕上げでは次の点を確認します。
- 見出し・本文のフォントサイズと行間が階層ごとに統一されているか
- ボタンのホバー時、リンクのアクティブ時の見え方が定義されているか
- 写真の解像度が実装時に耐えるか（Retina対応なら2倍サイズ）
- 使用フォントがWebフォントとして実装可能か
レスポンシブ対応のデザインカンプの作り方
PC・タブレット・スマホの基準幅
レスポンシブ対応のサイトでは、デバイスごとにデザインカンプを用意するのが基本です。実務でよく使われるカンプの基準幅は次のとおりです。
| デバイス | カンプの基準幅 | 補足 |
|---|---|---|
| PC（デスクトップ） | 1,440px または 1,280px | Figmaのデフォルトフレームは1,440px |
| タブレット | 768px | 必要なプロジェクトのみ作成することも多い |
| スマートフォン | 375px | Retina用に750pxで作る運用もある |
スマホを375px基準にするのは、余白や改行のズレが起きにくく、実装との差分が少ないためです。最低でもPCとスマホの2種類は用意しないと、スマホでの見え方をめぐる認識違いが後から必ず表面化します。
ブレイクポイントとカンプの幅は別物
混同しやすいのが、カンプの基準幅とブレイクポイント（レイアウトを切り替える境目の画面幅）の違いです。スマホカンプを375pxで作ったからといって、ブレイクポイントが375pxになるわけではありません。
実務では、768px（タブレット・スマホの境目）と1,024px（タブレット・PCの境目）を軸に、3〜4区分で設定するケースが一般的です。「375pxのカンプは、画面幅767px以下のときのレイアウトを代表して示したもの」という理解が正確です。
可変する箇所は注釈で伝える
デザインカンプは静止画のため、中間の画面幅でどう振る舞うかは表現できません。そこで、カンプの余白に注釈を添えて仕様を明示します。
- 「この画像は画面幅いっぱいに広がる（可変）」
- 「カード要素はPC3列 → タブレット2列 → スマホ1列」
- 「テキストは最大幅720pxで固定、それ以上は中央寄せ」
この注釈の有無が、コーダーからの質問回数と実装後の差し戻し件数を大きく左右します。
デザインカンプ作成におすすめのツールと料金【2026年最新】
Figma：現在の実質的な標準ツール
Figma は、ブラウザ上で動作し複数人が同時編集できるデザインツールで、Web制作の現場では事実上の標準になっています。URLを共有するだけでクライアントがコメントを書き込めるため、レビューのやり取りをツール内に集約できるのが最大の利点です。
無料の Starterプラン でも利用を始められますが、1チームにつきプロジェクト1つ・デザインファイル3つまで、1ファイルあたり3ページまで、バージョン履歴は30日間といった制限があります。個人の練習や小規模案件なら十分ですが、複数案件を並行する制作会社では早い段階で上限に当たります。有料の Professionalプラン は、編集権限のあるフルシートで 年払い時に1編集者あたり月額16ドル、月払いで20ドル が目安です（為替により円換算額は変動します）。
Photoshop / Illustrator：写真加工とベクター素材に強い
Adobe製品では、写真の加工・合成を伴うデザインに Photoshop、ロゴやアイコンなどベクター素材の作成に Illustrator が使われます。
料金は、Photoshop単体プランが年間プラン（月々払い）で月額3,280円、月々プランで月額4,980円、Illustrator単体プランが月々プランで月額4,980円、年間一括払いで34,680円が目安です（いずれも税込・個人版）。両方を使うなら、Creative Cloud Standard（月額6,480円）や Creative Cloud Pro（月額9,080円）といった複数アプリのプランのほうが割安になります。価格は改定されることがあるため、契約前に公式サイトで確認してください。
Adobe XDは「これから選ぶツール」ではなくなった
かつてWebデザインカンプの定番だった Adobe XD は、単体プランの新規販売がすでに終了しており、現在は新機能開発を行わないメンテナンスモードの位置づけです。Creative Cloudのコンプリート系プラン契約者は引き続き利用できますが、これから学習・導入するツールとして新規に選ぶ選択肢ではなくなっています。古い解説記事ではXDが第一候補として紹介されていることがあるため、情報の日付には注意が必要です。既存のXDデータを持っている場合は、Figmaなどへの移行を前提に計画を立てるのが現実的です。
ツールの選び方
| 判断軸 | 見るポイント |
|---|---|
| 共同編集・共有 | クライアントがアカウントなしでコメントできるか |
| コーディング連携 | CSS値や画像の書き出しがしやすいか |
| 写真加工の必要性 | 合成・レタッチが多いならPhotoshopが必要 |
| 料金 | 無料枠の制限、編集者1人あたりの月額 |
| チームの習熟度 | 既存メンバーが使えるか、外注先と揃うか |
外注先と同じツールを使えるかどうかは、見落としがちですが重要です。制作会社がFigmaで進行しているのに発注側がPhotoshopデータを求めると、書き出しの手間が余計に発生します。
【発注側向け】デザインカンプのチェックポイント
ファーストビューで見るべきこと
デザインカンプを受け取ったら、まずファーストビュー（スクロールせずに見える範囲）を確認します。
- 何の会社・何のサービスかが3秒で伝わるか
- キャッチコピーが背景画像に埋もれず読めるか
- 主要なCTA（問い合わせ、資料請求など）が視認できる位置にあるか
- 使用している写真が、届けたい企業イメージと合っているか
「デザインが好みかどうか」ではなく、「ターゲットが3秒で理解できるか」という基準で見るのがコツです。
本文・CTA・フッターで見るべきこと
| 箇所 | チェック内容 |
|---|---|
| 見出し | 大見出しが本文と明確に区別され、拾い読みできるか |
| コンテンツ | 情報のかたまりごとに区切られ、詰まりすぎていないか |
| リンク | クリックできる箇所が、見ただけでリンクだと分かるか |
| CTA | ページ内の適切な位置に配置され、周囲より目立っているか |
| フッター | 会社概要、プライバシーポリシー、問い合わせ先など必要項目が漏れていないか |
| スマホ版 | 文字が小さすぎないか、ボタンが指で押せるサイズか |
特に見落とされやすいのがスマホ版の確認です。BtoBサイトでもモバイルからのアクセスは無視できない比率を占めるため、PC版だけを見て承認すると、公開後に「スマホだと読みにくい」という指摘が出ます。
伝わる修正依頼の出し方
修正依頼は、「主観 → 事実 → 目的」の順に分解して伝えると精度が上がります。
- 悪い例：「なんかもう少し高級感を出してほしい」
- 良い例：「ターゲットが上場企業の管理職なので、信頼感を優先したい。青の彩度を抑え、写真は明るめのオフィス写真に差し替えられないか」
また、修正箇所はカンプ上のどこかを指し示す形で伝えます。Figmaならコメント機能、画像で受け取った場合はスクリーンショットに印を付けるだけでも、認識のズレは大幅に減ります。社内の複数人から意見を集める場合は、窓口を1人に絞り、矛盾する指示を整理してから渡すことも、制作進行を早める実務上の鉄則です。
デザインカンプで失敗しないための注意点
コーディングを前提に作る
デザインカンプは実装に渡す前提の成果物です。次の点を無視すると、「デザイン通りに実装できない」という事態を招きます。
- Webフォントとして提供されていない書体を多用しない（画像化が必要になり、更新性が落ちる）
- 1pxのズレが積み重なる配置を避け、余白を規則的な数値で統一する
- 画像は書き出しサイズを想定して配置する（Retina対応なら2倍解像度）
- CMSで更新する箇所は、文章量が増減してもレイアウトが崩れない設計にする
注釈とデザイン意図を言語化する
デザインカンプ単体では伝わらない情報は、必ず注釈や仕様書で補います。ホバー時の色、エラー表示のパターン、要素が0件のときの表示、可変領域の挙動などです。
さらに、「なぜこのデザインにしたか」の意図を短く添えると、レビューの質が変わります。「情報量が多いターゲットのため、比較表を上部に配置した」と一行あるだけで、感覚的な好みではなく目的に沿った議論ができます。
修正回数と費用感を事前に決めておく
デザインカンプの修正は、回数を決めておかないと際限なく続きます。「初回提案＋修正2回まで、それ以降は別途見積もり」といった条件を、発注前に契約書や見積書に明記しておくのが一般的です。
なお、Webサイト制作全体の費用相場は、テンプレート活用の小規模サイトで10万〜30万円、5〜20ページ程度の企業サイトで30万〜100万円、集客を目的とした本格的なコーポレートサイトで50万〜150万円、大規模・ブランディング重視なら150万〜300万円以上が目安です。デザインカンプの作成はこの制作費の中に含まれるのが通常で、単独で見積もりが立つケースは多くありません。ページ数、デバイス別カンプの点数、修正回数が増えれば工数も増えるため、「何ページ分のカンプを、何デバイス分、何回まで修正できるのか」を発注時に確認しておくと、後の認識違いを避けられます。
まとめ
デザインカンプは、Webサイトの完成イメージを実物と同等の精度で可視化した完成見本で、「カンプ」は comprehensive layout の略です。検索でよく使われる「カンプデザイン」も同じものを指します。
- ワイヤーフレームは「配置を決める線画」、デザインカンプは「見た目を確定させる完成見本」、プロトタイプは「動作を検証するもの」と役割が異なる
- 作り方は、目的とターゲットの定義 → 参考サイト収集 → ワイヤーフレーム確定 → ガイド設定 → パーツ配置と作り込みの5ステップ
- レスポンシブ対応では、PC 1,440px（または1,280px）とスマホ375pxを基準にカンプを用意し、ブレイクポイントは768px・1,024pxを軸に設定するのが実務の定番
- ツールはFigmaが実質的な標準。無料のStarterプランはファイル数・ページ数に制限があり、Professionalプランはフルシートで年払い月額16ドルが目安。Photoshopは単体プランで月額3,280円（年間プラン月々払い）から。Adobe XDは単体プランの販売が終了しており、新規に選ぶ選択肢ではない
- 発注側は「好みかどうか」ではなく「ターゲットに3秒で伝わるか」を基準に確認し、修正依頼は主観・事実・目的に分けて伝える
- 修正回数の上限を事前に決めておくことで、スケジュールと費用のブレを抑えられる
デザインカンプの精度と、それを確認する側の準備は、そのままプロジェクトの手戻りコストに直結します。制作側は実装を前提に注釈まで作り込み、発注側は目的に立ち返って確認する。この両輪がそろったとき、デザインカンプは単なる見本から、プロジェクトを前に進める実務ドキュメントになります。