デザインカンプとは？確認と修正依頼のコツ

01はじめに｜この記事でわかること

要点：この記事は、制作会社からデザイン案が届いて「いかがでしょうか」と聞かれ、どう答えればよいか迷った方に向けたものです。デザインの善し悪しを語るのではなく、見る順番と伝え方を整理します。全体の進行はホームページ制作の流れもあわせてご覧ください。

デザイン案が3枚、PDFで送られてきました。開いてみると、確かにきれいです。でも、何をどう答えれば正解なのかがわかりません。

とりあえず「いいと思います」と返す。あるいは社内で回覧して、集まった感想をそのまま転送する。この2つが、あとで一番もめる進め方です。前者は公開直前に「思っていたのと違う」となり、後者は矛盾した指示でデザイナーが動けなくなります。

この記事では、2000年創業のWeb制作会社ZenWeb Japanが、打ち合わせで発注側にお伝えしている確認のしかたをまとめました。デザインの知識は前提にしていません。見るべき場所と、言葉にするときの型だけをお伝えします。

まずは、そもそもデザインカンプが何なのかを短く押さえておきましょう。次の動画も参考になります。

02デザインカンプとは｜公開前に見る完成見本

要点：デザインカンプとは、コーディングに入る前につくる完成見本です。英語のComprehensive Layoutを略した言葉で、色・書体・写真・ボタンまで実際の見た目どおりに再現します。ここで承認した内容が、そのままホームページ制作の完成形になります。

カンプは「絵」ではなく「決定書」だと考えてください。承認した瞬間から、その配置と色を前提に作業が進みます。

提出の形はFigmaの画面共有、PDF、画像ファイルのいずれかが一般的です。近年はFigmaが主流で、画面上の気になった位置に直接コメントを残せます。Figmaの公式ヘルプでも、閲覧権限があれば誰でもコメントを追加できると案内されています。専用ソフトを買う必要はありません。

カンプで決まるものと、決まらないものがあります。ここを分けておくと、確認がぐっと楽になります。

• カンプで決まるもの。色づかい、書体と文字の大きさ、写真の使い方、ボタンの見た目と位置、要素の並び順。
• カンプでは決まらないもの。スクロールしたときの動き、フォームの送信後の挙動、更新画面の使い勝手、表示速度。
• あとから変えると高くつくもの。ページの構成そのもの。これはサイト構成図の段階で固めておくべき部分です。

03ワイヤーフレームとの違い｜どこで何を決めるのか

要点：ワイヤーフレームは「何をどこに置くか」を決める骨組み、デザインカンプは「それをどう見せるか」を決める完成見本です。順番が大事で、骨組みで決めた並び順をカンプ段階でひっくり返すと、費用も日程も膨らみます。

2つを混同すると、確認の観点がずれます。ワイヤーフレームを見ながら「色が寂しい」と言っても意味がありませんし、カンプを見ながら「この項目をもう1つ増やしたい」と言えば、レイアウトの組み直しになります。

決裁者にカンプ段階で初めて見せるのは避けてください。骨組みの時点で一度目を通してもらえば、根本的なやり直しはほぼ起きません。実際、当社が受け取る修正依頼のうち13%は並び順の変更で、その多くは骨組みの段階で片づけられたはずのものです。

04案件規模別・カンプの提出枚数と確認日数

要点：提出されるカンプは、トップページ1〜2案と主要な下層ページ1〜3案が目安です。社内で確認に使える日数は3〜8日ほど。日程に余裕がないと感想レベルの返答になり、結局あとで直すことになります。

表の日数は、決裁者の予定を押さえたうえでの実働です。稟議が入る会社なら、ここにさらに数日を足しておくと安心です。

05カンプを見るときの5つの視点

要点：全体の印象から入ると、言葉が「なんとなく」で止まります。視線の流れ、文字の読みやすさ、写真、ボタン、スマホ表示の5点を順番に見てください。スマホ対応の考え方もあわせて確認しておくと安心です。

1. 視線の流れ。上から順に読んだとき、「何の会社か」「何ができるか」「どこから問い合わせるか」がこの順で目に入るかを見ます。
2. 文字の読みやすさ。背景と文字色の差が十分かを確認します。W3Cのガイドラインでは、通常サイズの文字は背景との明るさの比を4.5対1以上にすることが求められています。薄いグレーの文字は要注意です。
3. 写真。自社で用意できるものか、素材集なのかを確認します。用意できないなら早めに伝えます。自社での撮影のコツも参考になります。
4. ボタン。問い合わせや資料請求のボタンが、スクロールせずに見える位置にあるかを見ます。色が背景に埋もれていないかも大事です。
5. スマホ表示。パソコン版だけで承認しないでください。スマホ版のカンプも必ず出してもらいます。

この5点を紙に書き出して、順番に潰していくだけで、返答の質がはっきり変わります。配色の決め方やWebフォントの選び方を先に読んでおくと、2番目と3番目の判断がしやすくなります。

06修正依頼が集中する箇所

要点：修正依頼のおよそ4割は、文字まわりと写真に集まります。逆に言えば、原稿と写真を先に固めておくと修正はかなり減らせます。原稿の書き方の準備が効いてくる場面です。

並び順の変更が13%あります。この分は、本来なら骨組みの段階で片づいているはずのものです。

07伝わる修正依頼の3つの型

要点：修正依頼は「どこを・なぜ・どうなってほしいか」の3点セットで書きます。この形にすると、デザイナーが意図をくみ取る手間が減り、1回で狙いどおりの案が返ってきます。

実際の書き方を、よくある例で比べてみます。

• 型1：位置と理由。「トップの問い合わせボタンを、サービス紹介の直後にも置いてください。展示会で配る資料からアクセスする方が多く、途中で離脱しているためです。」
• 型2：状態の指定。「実績紹介の見出しを、本文よりはっきり大きくしてください。いまは本文と同じ太さに見えて、区切りがわかりにくいです。」
• 型3：判断を委ねる。「トップの写真が硬い印象です。社員が写っている案も見てみたいのですが、他に良い方法があればお任せします。」

3つ目の型は、色や余白のように専門的な判断が必要な場面で効きます。「こうしてください」と指定するより、困っていることを伝えて選択肢を出してもらうほうが、結果的に良い案が上がってきます。

Figmaを使っているなら、該当箇所に直接コメントを残してください。文章だけのメールより、位置のずれが起きません。

08書き方別・1回で意図が伝わった割合

要点：同じ内容でも、書き方で結果が変わります。感覚だけの依頼は1回で伝わる割合が3割台にとどまり、箇所と理由と期待する状態を書いた依頼は9割近くに届きます。差が出るのは理由の有無です。

「もっと明るく」だけでも、3件に1件は当たります。ただし外れた2件のために、日程が1週間ずれることがあります。

09避けたい修正依頼の出し方

要点：依頼の中身よりも、出し方でこじれることがあります。小出しに送る、社内の意見をそのまま転送する、承認後に前提から変える。この3つは日程と費用の両方に響きます。

• 小出しに送る。思いついた順に1件ずつ送ると、デザイナーは同じ画面を何度も開き直します。まとめて1回で渡してください。
• 社内の意見をそのまま転送する。「シンプルに」と「情報を増やして」が同じメールに並ぶと、作業が止まります。窓口で調整してから渡します。
• 承認後に前提を変える。ページを増やす、業種の見せ方を変えるといった依頼は、別途の作業になります。修正回数と追加費用の考え方を先に確認しておきましょう。
• 他社サイトの丸ごと指定。「A社と同じにしてください」は避けます。参考にしたいのは配色なのか構成なのか、要素を分けて伝えます。

参考サイトを添えること自体は有効です。ただし、そのまま真似ることはできません。写真やイラストには権利があります。フリー素材の商用利用もあわせてご確認ください。

10工程別・変更の反映しやすさ

要点：同じ変更でも、いつ言うかで手間が変わります。骨組みの段階なら大きな変更も吸収できますが、コーディング後は作り直しになります。カンプ段階は、大きく動かせる最後の機会です。

だからこそ、カンプの確認に日数をかける価値があります。ここでの数日が、公開後の数十万円を防ぎます。費用の全体像はホームページ制作の費用相場をご覧ください。

11社内の意見をまとめる進め方

要点：意見が割れたときは、多数決ではなく目的で決めます。「問い合わせを増やす」といった目的に照らして、どちらが近いかを判断します。窓口を1人に決めておくことも欠かせません。

社内の確認では、立場によって見る場所が違います。営業は問い合わせのしやすさを、経営層は他社との違いを、現場は更新のしやすさを気にします。どれも正しいので、集めるだけでは決まりません。

1. 目的を先に共有する。カンプを回覧する前に、このサイトで何を増やしたいのかを1行で伝えます。
2. 期限と様式を決める。「金曜までに、該当箇所と理由を書いて」と指定します。自由記述だけだと感想が集まります。
3. 窓口が取捨選択する。矛盾する意見は、目的に近いほうを採ります。採らなかった意見は理由を添えて本人に戻します。
4. 1通にまとめて送る。優先度を高・中・低で分けておくと、日程が厳しいときに調整しやすくなります。

依頼前の準備段階から目的を言葉にしておくと、この工程はさらに軽くなります。依頼前に準備すべきことも参考にしてください。

12制作会社に確認したい5つの質問

要点：カンプを受け取ったら、答えを確かめておきたいことが5つあります。提出範囲、修正の回数、スマホ版の有無、写真の扱い、承認後にできる変更です。いずれも契約書やページ構成と関わります。

1. カンプは何ページ分出ますか。トップだけの場合、下層ページの見た目は完成まで見えません。主要ページは含めてもらいます。
2. 修正は何回まで含まれますか。回数と、1回の範囲を確認します。「軽微な修正」の定義も聞いておきます。
3. スマホ版のカンプも出ますか。出ない場合、どの段階で確認できるかを聞きます。
4. 写真はどちらが用意しますか。素材集を使う場合、公開後も使い続けられる契約かを確認します。
5. 承認後に変えられるのはどこまでですか。文言だけなのか、色や配置も含むのかで、確認の慎重さが変わります。

リニューアル案件では、既存サイトからどこまで引き継ぐかも合わせて確認しておくとよいでしょう。ホームページリニューアルでは、既存の写真やロゴの扱いが論点になりやすい部分です。

13まとめ｜カンプは「見る場」ではなく「決める場」

要点：デザインカンプの確認は、感想を述べる場ではなく決定する場です。5つの視点で順に見て、どこを・なぜ・どうしたいかを書き、社内の意見は窓口でまとめてから1回で渡す。この流れが守れれば十分です。

公開してから「思っていたのと違った」となる案件には、共通点があります。カンプを1日で流し見て、感想だけ返しているのです。

逆に、うまくいく案件では発注側が数日かけて確認し、箇条書きの依頼を1通で送ってきます。デザインの知識があるからではありません。見る順番と伝え方を決めているからです。公開後の運用については公開後にやることもあわせてご覧ください。

14よくある質問

要点：カンプの確認について、発注側からよくいただく質問をまとめました。文字の見え方が気になる場合はWebフォントの選び方もあわせてご覧ください。

1. デザインカンプは何案出してもらえますか？

トップページで1〜2案、主要な下層ページで1〜3案が一般的です。案の数を増やすほど費用と日数がかかります。方向性が固まっているなら、1案を丁寧に詰めたほうが良い結果になることが多いです。

2. カンプを見る時間はどれくらい必要ですか？

社内確認の実日数で3〜8日を見ておいてください。決裁者の予定を先に押さえるのが要点です。1日で流し見て承認すると、公開直前にやり直しが発生しがちです。

3. デザインの知識がなくても判断できますか？

できます。判断するのはデザインの善し悪しではなく、目的に合っているかどうかです。何の会社かがすぐ伝わるか、問い合わせ先がすぐ見つかるか。この2点だけでも十分に役立つ指摘になります。

4. 「もっとおしゃれに」と伝えるのは良くないですか？

その言葉だけでは伝わりにくいです。どこが気になるのか、誰に見せたいのかを一緒に伝えてください。「若い方に見てほしいので、写真の色をもう少し明るくできますか」のように書くと、意図が届きます。

5. スマホ版のカンプは必ず必要ですか？

必要です。多くの企業サイトでは訪問者の半数以上がスマホです。パソコン版だけで承認すると、公開後にスマホでの見づらさが判明します。トップページだけでも出してもらってください。