Webサイト制作のプロセスにおいて、コーディングの前に必ず行う工程が「デザインカンプ」の作成です。デザインカンプなしにいきなりコーディングを始めると、配色やレイアウトの修正が頻発し、結果的に制作時間が大幅に増えてしまいます。
デザインカンプとは、Webサイトの完成形を忠実に再現したビジュアルデータのことで、クライアントやチームメンバーとデザインの方向性を共有し、コーディング時の設計図として機能するものです。
この記事では、デザインカンプの基本概念から具体的な作成手順、使用ツールの選び方、制作時に気をつけるポイントまで詳しく解説します。
デザインカンプとは
デザインカンプの役割
デザインカンプ（Design Comprehensive Layout）は、Webサイトの最終的なビジュアルを示すデザインデータです。色・フォント・画像・レイアウト・余白など、実際にブラウザで表示される見た目をピクセル単位で再現します。
デザインカンプには主に3つの役割があります。
- クライアントへの確認：完成イメージを共有し、コーディング前に合意を得る
- コーディングの設計図：フォントサイズ、余白、色コードなど、コーディングに必要な数値を正確に定義する
- チーム内の認識統一：デザイナー・エンジニア・ディレクター間で完成形の共通認識を持つ
ワイヤーフレームとの違い
ワイヤーフレームが「構造」を示す骨格図であるのに対し、デザインカンプは「見た目」を示す完成予想図です。
- ワイヤーフレーム：モノクロのシンプルな図。要素の配置や情報の優先順位を定義する。色や画像は使わない
- モックアップ：ワイヤーフレームに色やビジュアル要素を加えたもの。デザインの方向性を確認する段階
- デザインカンプ：完成形に最も近いビジュアルデータ。実際に使う画像・フォント・色がすべて反映されている
デザインカンプ作成に使うツール
Figma
Figmaは、ブラウザベースで動作するUI/UXデザインツールです。現在、Webデザインの現場で最も広く使われているツールであり、デザインカンプ作成の第一選択肢と言えます。
- リアルタイム共同編集：複数人が同時にデザインファイルを編集できる
- コンポーネント機能：ボタンやカードなどの共通パーツを部品化し、一括変更できる
- プロトタイプ機能：ページ遷移やインタラクションの動作確認ができる
- Dev Mode：デザインからCSSコードや各種数値を取得でき、コーディング作業との連携がスムーズ
- 無料プランあり：個人利用なら無料プランで十分な機能が使える
Adobe Photoshop
Photoshopは長年Webデザインの現場で使われてきたツールです。写真の加工やレタッチの精度は他のツールを圧倒しており、写真を多用するデザインカンプの制作には依然として強みがあります。ただし、UIデザインに特化した機能はFigmaの方が充実しています。
Adobe XD
Adobe XDはUIデザインに特化したツールですが、Adobeが開発の重点をFigmaへ移行しつつあるため、新規のプロジェクトではFigmaを選択する方が将来的な安定性の面で有利です。既存のXDプロジェクトの保守には引き続き使用できます。
デザインツールに迷ったら、まずFigmaから始めることをおすすめします。無料で使えること、ブラウザだけで動作すること、業界シェアが急速に拡大していることが理由です。コーダーとの連携もFigmaのDev Modeが最も効率的です。
デザインカンプ作成の手順
ステップ1：情報整理
デザインカンプの作成に入る前に、以下の情報を整理します。
- サイトの目的：何のためのサイトか（コーポレートサイト、ECサイト、ブログなど）
- ターゲットユーザー：誰に向けたサイトか（年齢層、性別、関心事など）
- 掲載コンテンツ：どんな情報をどのページに載せるか
- 参考サイト：デザインの方向性を示すリファレンス
- ブランドガイドライン：ロゴ、ブランドカラー、フォントなどの規定
ステップ2：ワイヤーフレームの作成
情報整理が完了したら、各ページのワイヤーフレームを作成します。ワイヤーフレームの段階では、色や画像は使わず、要素の配置と優先順位に集中するのが鉄則です。
各要素がどのくらいの面積を占めるか、情報の優先順位はどうなっているか、ユーザーの視線の流れはどうなるかを検討します。
ステップ3：デザインシステムの構築
デザインシステムとは、サイト全体で使う色・フォント・余白・ボタンスタイルなどのルールを体系化したものです。デザインカンプの制作に入る前にデザインシステムを構築しておくと、ページ間のデザインに一貫性が保てます。
- カラーパレット：メインカラー、サブカラー、アクセントカラー、テキストカラー、背景色を定義する
- タイポグラフィ：使用するフォント、サイズ（h1〜h6、本文、キャプション）、行間、字間を定義する
- スペーシング：余白のサイズを4px・8px・16px・24px・32px・48pxなどの倍数で統一する
- コンポーネント：ボタン、カード、フォーム、ナビゲーションなどの共通パーツのデザインを定義する
ステップ4：デザインカンプの制作
ワイヤーフレームとデザインシステムに基づいて、デザインカンプを制作します。制作時に意識すべきポイントは以下の通りです。
- フレームサイズの設定：デスクトップ版は幅1440pxまたは1280px、スマートフォン版は幅375px（iPhone SEサイズ）が一般的
- グリッドの設定：12カラムグリッドが標準。Figmaではレイアウトグリッド機能で設定できる
- 実際のコンテンツを使う：ダミーテキスト（Lorem ipsum）の使用は最小限にし、できるだけ実際に掲載するテキストや画像を配置する
ステップ5：レスポンシブデザインの設計
デスクトップ版のデザインカンプに加えて、タブレット版（768px）とスマートフォン版（375px）のデザインカンプも作成します。
すべてのページのレスポンシブ版を作成する必要はありません。トップページと主要なページ（下層ページのテンプレート）のレスポンシブ版があれば、他のページはコーダーが判断できます。
ステップ6：確認とフィードバック
デザインカンプが完成したら、クライアントやチームメンバーに共有してフィードバックを受けます。Figmaの場合、URLを共有するだけでブラウザ上でデザインを確認でき、コメント機能で直接フィードバックを書き込めます。
デザインカンプ制作のコツ
配色のルール
配色は「60-30-10の法則」に従うとバランスが取りやすくなります。
- 60%：ベースカラー（背景色や全体の基調色）
- 30%：サブカラー（セクション背景やカードの色）
- 10%：アクセントカラー（CTAボタンや重要な強調箇所）
配色に迷ったときは、CoolorsやAdobe Colorなどの配色ツールを活用すると、調和の取れたカラーパレットを生成できます。
余白の設計
余白（スペーシング）は4の倍数（4px, 8px, 16px, 24px, 32px, 48px, 64px）で統一するのが一般的です。この「4px基準」を守ることで、要素間の余白に一貫性が生まれ、コーディング時の判断も楽になります。
コーダーへの配慮
デザインカンプは「コーダーが正確に再現できること」が前提です。以下の点に配慮しましょう。
- テキストはアウトライン化せず、テキストレイヤーのまま残す（フォント情報が取得できるようにする）
- アイコンやロゴはSVG形式で書き出せるようにベクターデータで作成する
- ホバー状態やアクティブ状態のデザインも作成しておく
- レイヤー名やグループ名を整理し、どの要素がどこに対応するかわかるようにする
デザインカンプで「実現不可能なデザイン」を作ってしまうと、コーディング段階で大幅な修正が必要になります。HTML/CSSの基礎知識を持っておくと、実装可能な範囲でデザインを検討できるため、手戻りが少なくなります。
デザインカンプからコーディングへの受け渡し
Figmaの場合
FigmaのDev Modeを使うと、デザインカンプから直接CSSプロパティ（フォントサイズ、色、余白など）を取得できます。要素をクリックするだけで、widthやheight、padding、margin、font-size、colorなどの数値がコードとして表示されます。
画像の書き出し
デザインカンプ内の画像は、以下のルールで書き出します。
- 写真：JPGまたはWebP形式。1x（標準解像度）と2x（Retina対応）の2サイズを用意する
- アイコン・ロゴ：SVG形式。拡大しても劣化しない
- 装飾画像：PNG（背景透過が必要な場合）またはWebP
よくある質問（Q&A）
Q：デザインカンプは全ページ分作る必要がありますか？
A：すべてのページを作る必要はありません。トップページ、下層ページ（テンプレート）、記事ページ、フォームページなど、レイアウトパターンが異なるページのみ作成すれば十分です。同じレイアウトのページは1つのデザインカンプで代表させます。
Q：デザインカンプの制作にかかる時間はどのくらいですか？
A：ページ数やデザインの複雑さによって異なりますが、トップページ1ページのデザインカンプで8〜16時間が目安です。ワイヤーフレームやデザインシステムの構築を含めると、5〜10ページ規模のサイトで1〜2週間程度かかります。
Q：デザインカンプはピクセル単位で正確に作る必要がありますか？
A：理想はピクセルパーフェクトですが、現実的にはブラウザ間の表示差異やレスポンシブ対応の関係で、完全な一致は困難です。フォントサイズ・余白・色コードなどの数値が明確で、デザインの意図が伝わるレベルの精度を目指しましょう。
Q：デザインカンプのツールはFigma以外でも問題ありませんか？
A：プロジェクトやチームの環境に合わせて選べば問題ありません。ただし、新規のプロジェクトであればFigmaを選択するのが、チーム連携・学習リソースの多さ・将来性の観点から最も合理的な選択肢です。
Q：個人のブログやポートフォリオサイトでもデザインカンプは作るべきですか？
A：簡易的なものでも作成しておくと、コーディング時に迷いが減り、結果的に制作時間が短縮されます。完璧なデザインカンプでなくても、配色・フォント・レイアウトの方向性をFigma上で固めておくだけで効果があります。
まとめ
デザインカンプは、Webサイト制作における「設計図」です。情報整理→ワイヤーフレーム→デザインシステム→デザインカンプ→レスポンシブ版→フィードバックという流れで制作を進めることで、手戻りの少ないスムーズな制作が実現できます。
まずはFigmaの無料プランでアカウントを作成し、既存のWebサイトを参考にしながら1ページ分のデザインカンプを作ってみてください。トレース（模写）から始めるのも効果的な練習方法です。ツールの操作に慣れながら、レイアウトや配色の感覚を身につけていきましょう。
