ホームページ制作のプロセスにおいて、ワイヤーフレーム（構成案）の確定後に提出されるのがデザインカンプ（デザイン案）です。デザインカンプは、実際のWebサイトの仕上がりイメージを色彩やフォント、画像を含めて高精度に作成した見本であり、ここでの確認作業が完成後のWebサイトの品質や成果を決定づけます。
しかし、デザインカンプの確認時に「見た目の好みだけで判断してしまう」「社長や役員の個人的な感覚で何度も修正を重ねてしまう」「PCの画面だけで確認してスマホ表示を失念していた」といった問題が発生し、プロジェクトの遅延や追加費用の発生、さらには公開後の成果不振につながるケースが後を絶ちません。
結論として、デザインカンプの確認で最も重要なのは、「個人の好み」ではなく「ビジネス目的（CV獲得やブランド構築）」と「ターゲットユーザー（ペルソナ）の視点」に基づいて論理的にチェックすることです。この記事では、Web制作のプロの視点から、デザインカンプを正しく確認するための具体的な5つのステップ、確認漏れを防ぐ詳細なチェックリスト、制作会社へスムーズに修正指示を伝えるコツを網羅して解説します。
ホームページ制作におけるデザインカンプ（デザイン案）とは？ワイヤーフレームとの違いと重要性
デザインカンプとは、「Design Comprehensive Layout（包括的なデザインレイアウト）」の略称であり、Webサイトの完成見本（カンプ）を指します。デザイン制作ツール（Figma、Adobe XD、Photoshopなど）を用いて作成され、実際のブラウザで表示される配色、フォントの種類やサイズ、写真・イラストなどの素材、ボタンの装飾、余白の取り方などが忠実に再現されています。
Webサイト制作の初期工程では「ワイヤーフレーム」と呼ばれる線画のレイアウト構成案を作成しますが、ワイヤーフレームとデザインカンプには明確な役割の違いがあります。
| 比較項目 | ワイヤーフレーム（構成案） | デザインカンプ（デザイン案） |
|---|---|---|
| 主な目的 | 「何（情報）をどこ（配置）に置くか」の骨組みを決定する | 「どのように見えるか」の視覚的表現（装飾・世界観）を決定する |
| 要素 | 白黒の線画、テキストの配置、レイアウト枠組み | カラー配色、フォント指定、高精度な画像素材、ボタンデザイン |
| 確認の主体 | 情報の優先順位、導線、ページの構造 | ブランドイメージとの一致、視認性、操作感、訴求力 |
| 作成タイミング | 要件定義後、サイトマップ策定の直後 | ワイヤーフレーム確定後、コーディング（実装）の前 |
ワイヤーフレームの作り方や確認ポイントについては、ホームページ制作のワイヤーフレームとは？確認時のチェックリストと失敗を防ぐコツで詳しく解説しています。
デザインカンプの段階で徹底確認すべき理由
デザインカンプの確定後、Web制作プロジェクトは「HTML/CSS/JavaScriptによるコーディング」や「WordPressなどのCMS組み込み」というシステム実装工程へと移ります。コーディングが完了した後に「やっぱりレイアウトを大きく変更したい」「カラー配色を全面変更したい」「ボタンの配置を変えたい」といった要望が発生すると、プログラムをゼロから書き直す必要が生じ、大幅な手戻りと追加費用が発生します。
つまり、デザインカンプは「レイアウトやビジュアル表現を変更できる最終防衛線」です。この段階で仕様やデザインの疑問点をすべて解消しておくことが、プロジェクトを予算内かつスケジュール通りに完了させるための絶対条件となります。
デザインカンプ確認時に陥りがちな失敗パターンと注意点
初めてホームページ制作を担当する企業や、社内の確認体制が整っていない企業では、デザインカンプの確認時に典型的な失敗に陥りがちです。事前に失敗パターンを知っておくことで、無用なトラブルや手戻りを防ぐことができます。
1. 担当者や経営層の「個人の好み（直感）」で判断してしまう
最も多い失敗が、発注企業の担当者や決裁権を持つ役員・社長が「自分はこの色が好きではない」「もっと華やかにしたい」「他社で見たアニメーションを入れたい」といった個人主観で評価してしまうケースです。
企業ホームページの主役は、自社の経営層ではなく「ターゲットユーザー（見込み客や求職者）」です。どれほど社内の評判が良いデザインであっても、ターゲットユーザーにとって読みづらく、必要な情報にたどり着けないデザインであればWebサイトとしての目的を果たせません。個人の好みではなく、「自社のペルソナがこのページを見た時にどのように感じるか」「信頼感や問い合わせ意欲につながるか」という客観的な軸で判断することが不可欠です。
2. デスクトップ（PC）の画面だけで確認し、スマートフォン表示を軽視する
オフィスでの確認作業は大型のPCモニターで行われることが多いため、PC版のデザインカンプだけに注目し、スマホ版のデザインカンプの確認を疎かにしてしまう傾向があります。
現在、BtoCサイトはもちろんのこと、BtoBのWebサイトであってもアクセスの40%〜60%以上がスマートフォンやタブレットからの流入となっています。PC画面では美しく見えても、スマホの画面サイズに縮小された際に「文字が小さすぎて読めない」「タップすべきボタンが小さくて押しづらい」「縦に長すぎてスクロールに疲れる」といった問題が頻発します。必ずスマホ表示での見やすさ・操作性を同等以上の優先度で確認しなければなりません。
3. 実際のテキスト量や画像素材の変更可能性を考慮していない
デザインカンプ作成時には、ダミーのテキスト（「ここにテキストが入ります」など）や、制作会社が用意したカンプ用ストックフォトが配置されていることがあります。美しいサンプル画像や短い仮テキストが入っている状態では見栄えが良く見えても、実際の運用で長い商品名や現場のリアルな写真に差し替えた途端、デザインのバランスが崩れてしまうことがあります。
確認時には「実際の運用でテキストが3行に増えた場合にレイアウトが崩れないか」「自社で撮影した写真素材に差し替えてもトーン＆マナーが維持できるか」という運用の柔軟性まで見越してチェックすることが重要です。
4. 静止画像と実際の「動的動作（アニメーション）」のギャップを理解していない
デザインカンプは基本的にPDFや画像ファイル（またはFigma等のデザインツール上）で提示されるため、「静止画」として確認することになります。しかし、実際のWebサイトでは、スクロールに応じた要素のフェードイン、ホバー時のボタンの変化、ハンバーガーメニューの開閉といった「動き（アニメーション）」が加わります。
静止画の状態だけで満足するのではなく、「このボタンにカーソルを乗せた時にどのような変化が起きるのか」「メニューを開いた時の見え方はどうなるのか」といった動的仕様についても、デザインカンプ確認の段階で制作会社に確認・合意しておく必要があります。
プロが実践するデザインカンプ確認の5ステップ（手順）
デザインカンプを効率的かつ網羅的に確認するためには、正しい順番でチェックを進めることが推奨されます。いきなり細かなフォントサイズや1ピクセルのズレに目を通すのではなく、全体像から徐々に詳細へ落とし込んでいく5つのステップを解説します。
ステップ1：要件定義書・ペルソナ・サイトの目的を再確認する
デザインカンプを開く前に、まずプロジェクトの初期段階で策定した「要件定義書」「ペルソナ設定」「Webサイトの目標（KPI）」を一度読み返します。判断の「基準」を頭にセットしてからデザインを見ることで、「かっこいいかどうか」という抽象的な感情論に流されず、「要件を満たしているか」という論理的な視点を持つことができます。
ステップ2：ファーストビュー（画面上部）と全体のビジュアル階層を確認する
ユーザーがWebサイトに訪問した際、スクロールせずに最初に目に入る領域を「ファーストビュー（FV）」と呼びます。ファーストビューの段階で「何の会社か」「どのような強みがあるか」「自分に関係のあるサイトか」が一目で伝わる構成になっているかを厳しくチェックします。
同時に、ページ全体を上から下へスクロールしながら、見出しの大きさ（H2、H3の差別化）、文章のまとまり、画像の配置など、視線誘導（Zの法則・Fの法則）が自然に機能しているかを確認します。
ステップ3：ユーザー導線とCTA（行動喚起）の視認性を確認する
Webサイトの最終目的である「お問い合わせ」「資料請求」「商品購入」などのアクションを促すボタン（CTA：Call to Action）が、周囲のコンテンツに埋もれずしっかりと目立っているかを確認します。
ボタンの色が背景色と同化していないか、クリック（タップ）できることが直感的にわかる立体感や装飾になっているか、スクロール追従型のヘッダーやフッターに適切に配置されているかをチェックします。
ステップ4：レスポンシブ（スマホ・タブレット）デザインを確認する
スマートフォン版のデザインカンプをチェックします。スマホ版では、画面の横幅が狭くなるため、要素が縦一列に並び替わります。以下の点に注目して確認を進めます。
- 文字サイズが極端に小さくなく、スマホ画面で快適に読めるか
- タップ領域（ボタンやリンク）が十分な大きさ（最低44×44ピクセル以上）で確保されているか
- 重要な情報（問い合わせボタンや電話番号など）がスマホ表示でも即座にアクセスできる位置にあるか
ステップ5：トーン＆マナー（ブランドイメージ）とカラー配色を確認する
最後に、企業としての「トーン＆マナー（トンマナ）」やカラーコーディネートが正しく表現されているかを確認します。自社のコーポレートカラーが適切に使用されているか、ターゲット層に与えたい印象（例：信頼感、先進性、親しみやすさ、清潔感など）とデザインの雰囲気が合致しているかを評価します。
トーン＆マナーの具体的な策定方法については、ホームページのトーン＆マナーとは？企業サイトのブランド価値を高める設計と策定手順で詳しく解説しています。
失敗を防ぐ！デザインカンプ確認の実務用チェックリスト
デザインカンプの確認漏れを無くすために、社内レビューや制作会社との打合せでそのまま使えるチェックリストを用意しました。以下の4つのカテゴリに分けて確認を実施してください。
【1. 視覚表現・ブランディング・配色】
- [ ] コーポレートカラーやブランドガイドラインに沿った配色になっているか
- [ ] 主色（メインカラー）・助色（サブカラー）・強調色（アクセントカラー）のバランス（目安は70:25:5）が適切か
- [ ] フォントの種類（ゴシック体、明朝体など）が企業のイメージと合っているか
- [ ] 写真・イラストなどの画像素材のトーン（明るさ・色味・世界観）が統一されているか
- [ ] 競合他社のWebサイトと酷似しておらず、自社ならではの差別化・強みが表現されているか
Webサイトにおけるカラー配色の心理効果や設計手順の詳細は、ホームページのカラーコーディネートと配色設計｜企業のブランドイメージを高める心理効果と実践手順をご覧ください。
【2. 文字・視認性・アクセシビリティ】
- [ ] 背景色と文字色のコントラストが十分に高く、可読性が保たれているか（薄いグレーの背景に白い文字など読みにくい配色になっていないか）
- [ ] 行間や段落間の余白（マージン）が適度にとられており、文章が詰まって見えないか
- [ ] 見出し（H2、H3など）と本文のメリハリ（サイズ差・太さ）が明確で、流し読みでも構造が理解できるか
- [ ] 専門用語や難解な表現が使われておらず、ターゲットユーザーにとって分かりやすい表記になっているか
【3. ユーザー体験（UX）・CV導線】
- [ ] 各ページの目的（お問い合わせ、資料ダウンロード、採用応募など）に対する導線が明確か
- [ ] CTAボタンのテキストが「送信」や「詳細」だけでなく、「無料資料をダウンロードする」「30秒でお問い合わせ」など行動を起こしやすい魅力的な言葉になっているか
- [ ] グローバルナビゲーション（ヘッダーメニュー）の項目数が適切（5〜7項目程度）で、探しているページに迷わず移動できるか
- [ ] パンくずリストやフッターナビゲーションなど、サイト内の回遊性を高める要素が配置されているか
【4. 運用性・レスポンシブ・拡張性】
- [ ] スマホ表示時に、画像内の文字が潰れて判読不能になっていないか
- [ ] 「お知らせ」や「ブログ」など、自社で定期更新するエリアのレイアウトがシンプルで更新しやすい構造か
- [ ] 文字数が予定より増減した場合でも、全体のレイアウトが崩れにくい設計になっているか
- [ ] 将来的にページや機能を追加する余地（拡張性）が考慮されているか
制作会社へ効果的なデザインフィードバックを送るためのプロのコツ
デザインカンプに対して修正や要望を伝える際、フィードバックの出し方によって修正作業のスピードや出来上がりの精度が大きく変わります。制作会社とのやり取りをスムーズにし、意図通りのデザインへ仕上げるための指示のポイントを解説します。
1. 感情的な「なんとなく」を避け、「理由」と「目的」をセットで伝える
NGな指示例：「このヘッダーの雰囲気がなんとなく気に入らないので、もっとかっこよくしてください。」
このような抽象的な指示では、デザイナーは何をどう修正すべきか判断できず、再提案されたデザインも的外れになる可能性が高くなります。
OKな指示例：「弊社のターゲット層は40代〜50代の経営層です。現在のフォントと色が少しカジュアルに見えるため、信頼感や重厚感を与える濃紺を基調とした落ち着いたトーンに変更していただけますか。」
「なぜ修正したいのか（理由・ペルソナ視点）」と「どのような状態を目指したいのか（目的）」を具体的に言語化して伝えることで、デザイナーはプロとしての技術と知見を活かした最適な代替案を提示できるようになります。
2. 修正指示の優先順位（MUSTとWANT）を明記する
社内から出た修正意見を取りまとめる際は、すべての意見を同列に制作会社へ送るのではなく、必ず優先順位をつけます。
- MUST（必須修正）：誤字脱字、ブランディング上のルール違反、CV導線の欠落、スマホでの表示崩れなど、公開までに絶対に修正すべき項目
- WANT（検討・提案依頼）：デザインの装飾や余白の微調整、好みの領域に関する変更など、スケジュールや予算内で対応可能であれば検討してほしい項目
優先順位を明確にすることで、制作会社側も重要度の高いタスクから迅速に対応することが可能になります。
3. 画面のキャプチャ（画像）に注記を入れて指示する
文章だけで「ページの中央あたりにある青い枠の右側のテキスト」などと説明すると、双方の認識にズレが生じやすくなります。
デザインカンプの画像キャプチャ（スライドショット）を撮影し、赤枠や矢印、テキスト注記を直接書き込めるツール（Gyazo、Monosnap、Figmaのコメント機能、PDFの注釈機能など）を活用して指示を出しましょう。「どの場所の」「何を」「どう変えるか」が一目で伝わるため、認識違いによる修正のやり直しを削減できます。
トラブルを防ぐ修正指示の具体的なフォーマットやコミュニケーションのコツについては、ホームページ制作の修正依頼・デザインフィードバックのコツ｜トラブルを防ぐ書き方と指示方法でも詳しく解説しています。
よくある質問
Q. デザインカンプの提出後、何回まで修正を依頼できますか？
一般的に、Web制作会社の契約内容や見積書には「デザイン修正回数は2回まで」といった上限規定が盛り込まれています。ここでの「1回」とは、「提出されたデザインに対して社内の意見を一つに取りまとめてフィードバックを返し、制作会社が修正版を再提出するまでの一連のサイクル」を指します。社内で意見がまとまらないまま小出しに修正指示を送ると、あっという間に規定回数を消費してしまい、追加費用が発生する原因となるため、必ず社内で全意見を集約してから1回分として送付しましょう。
Q. PC版のデザインカンプしか提出されません。スマホ版も確認すべきですか？
はい、必ずスマートフォン版のデザインカンプ（またはスマホ表示のレイアウト仕様）を確認してください。予算や制作規模によっては「PC版のみカンプを作成し、スマホ版は標準的なレスポンシブ規則に従って直接コーディングする」という契約になっているケースもあります。その場合でも、トップページや重要ページ（お問い合わせフォーム等）のスマホでの見え方やメニューの動作仕様について、コーディング前に制作会社と確認作業を行っておくことを強くおすすめします。
Q. 社内でデザインの意見が割れて決まらない場合、どう解決すべきですか？
社内で意見が割れた場合は、「どちらのデザインがペルソナ（顧客）の課題解決や行動喚起につながるか」という原点に立ち返って議論します。役員同士の好みの戦いになってしまった場合は、制作会社のディレクターやデザイナーに「専門家の客観的な視点から、成果を出すためにはどちらのデザインが適しているか」という根拠（他社事例やUXデザインの原則）を聞き、第三者のプロの判断を採用するのが最も合理的です。
Q. コーディング完了後にデザインカンプと異なる部分があった場合、修正費用は発生しますか？
制作会社の不備によって、確定したデザインカンプ通りに実装されていない（文字化け、レイアウトのズレ、色の間違いなど）場合は、当然ながら制作会社の責任として無償で修正が行われます。しかし、発注側が「カンプの段階では承認していたが、実際にブラウザで動く画面を見たら変更したくなった」という理由でデザインやレイアウトを変更する場合は、仕様変更扱いとなり追加費用とスケジュール延長が発生します。
まとめ
ホームページ制作におけるデザインカンプ（デザイン案）の確認は、Webサイトのクオリティと集客成果を大きく左右する極めて重要なプロセスです。
見た目の直感や個人的な好みだけで判断するのではなく、「プロジェクトの目的」「ペルソナ視点」「スマホでの操作性」「CVへの導線」という論理的な軸を持ってチェックを進めることが、失敗を防ぐ最大のポイントです。
今回ご紹介した5つの手順と確認チェックリストを活用し、制作会社と密なコミュニケーションを取りながら、自社の強みが最大限に伝わるWebサイトを構築していきましょう。
イノベートスコープ株式会社では、大阪市中央区を中心に、要件定義からワイヤーフレーム作成、高品質なデザインカンプ提案、WordPress構築、公開後のSEO・保守運用まで一貫したWeb制作支援を行っております。「成果につながるホームページを制作したい」「使い勝手とデザイン性を両立させたい」とお考えの企業様は、ぜひお気軽にご相談ください。
CONTACT
Web制作・SEO・AIOについてお気軽にご相談ください
ホームページ制作・リニューアル、WordPress、SEO・AIO対策、 ECサイト、Web集客、保守・セキュリティなど、 Webに関するご相談を承っています。 「何から相談すればよいかわからない」という段階でもお気軽にお問い合わせください。