はじめに
本ドキュメントの目的
このドキュメントは、ホームページ制作における「デザインカンプ」について、定義から作成方法、関連用語との違い、使うツールや注意点までを分かりやすく解説することを目的としています。デザインカンプを初めて扱う方や、チームで制作する方に向けた実践的なガイドです。
読者の想定
- 制作会社で働くデザイナーやコーダー
- クライアントとして制作物の確認を行う方
- 個人でサイトを作りたい方
誰でも読みやすいよう、専門用語は必要最小限にとどめ、具体例で補足します。
本章で伝えたいこと
デザインカンプは「完成見本」として制作チームとクライアントのイメージを一致させます。見た目だけでなく、仕様の確認や工程の効率化にも役立ちます。この記事を読むことで、デザインカンプの役割が明確になり、次章以降で実際の作り方や注意点をスムーズに理解できるようになります。
デザインカンプとは何か？その定義と役割
概要
デザインカンプは、ホームページやWeb制作物の完成見本です。見た目を実際の表示に近い形で作り、クライアントや制作チームが完成イメージを共有するための設計図として使います。
定義（わかりやすく）
ページごとに写真やイラスト、ロゴ、アイコン、テキスト、フォント、カラー、メニュー、ボタン、余白やレイアウトを具体的に配置したデザイン案です。静止画でも、表示サイズや色味が最終に近いことが重要です。
含まれる主な要素（具体例）
- 画像やイラスト：どの写真がどこに入るか
- ロゴ・アイコン：サイズや配置
- テキストとフォント：見出しや本文の書体・大きさ
- カラー：ブランド色や背景色
- ボタン・ナビゲーション：形状やラベル
- 余白・レイアウト：要素間の間隔や配置バランス
役割と効果
デザインカンプは認識のズレを防ぎます。クライアントは「完成後にどう見えるか」を確認でき、制作チームは実装時の基準を共有できます。開発者は画像の切り出しやCSSの指定に使い、スムーズに実装へ移れます。
使われる場面
- 提案時のプレゼン資料
- クライアント承認のためのチェック
- フロントエンド実装の指示書
以上がデザインカンプの基本的な定義と役割です。
デザインカンプを作る目的とメリット
目的
デザインカンプは完成イメージを視覚化し、クライアントと制作側が同じゴールを共有するために作ります。言葉だけの説明で伝わりにくい配色や余白、視線の動きなどを具体的に示せます。制作チーム内でも方向性を統一でき、後戻りを減らします。
主なメリット
- 合意形成が早くなる：見た目を基に承認を得られるので、認識のズレを防げます。
- 修正コストの削減：早期に問題を発見しやすく、完成後の大幅な手戻りを減らします。
- 制作効率と品質向上：コーディング担当はカンプを見本に実装でき、意図したデザインを再現しやすくなります。
- 見積りとスケジュール精度の向上：必要な要素が明確になり、工数見積もりが正確になります。
具体例
- クライアントが色や文字サイズに不満を出しにくくなり、承認がスムーズになります。
- デザイナーとエンジニアで共有すれば、実装時の質問が減り作業時間を短縮できます。
実務での活用ポイント
優先度の高いページから順にカンプを用意し、レビューサイクルを決めておくと効果的です。差分が出やすい箇所（ボタンやフォーム）はバリエーションを用意すると、合意が取りやすくなります。
デザインカンプの作成フローと工程
概要
ホームページ制作では「設計→デザイン決定→コーディング」の段階でデザインカンプを作成します。ワイヤーフレームが骨組みなら、デザインカンプは色・画像・文字の見え方まで決めた具体案です。
主な工程（順序）
- ターゲット設定
- 想定ユーザー（例：20代女性、店舗来店者）を明確にします。配色や写真の方向性が決まります。
- 要件定義
- 必要な機能（問い合わせフォーム、ECカートなど）やページ構成を確定します。
- ワイヤーフレーム作成
- レイアウトや導線を決めます。見出しの位置やボタン配置をざっくり固めます。
- デザインカンプ作成・決定
- カラー、フォント、画像、アイコンを適用してビジュアルを作ります。クライアント確認→修正を繰り返します。
- コーディング準備
- アセットの書き出し、スタイルガイドやレイヤー命名で引き継ぎやすくします。
- コーディング・テスト・公開
- 実装後は表示確認や動作チェックを行い、問題なければ公開します。
補足のポイント
- フィードバックは早めに集め、修正は小さく分けて対応します。レスポンシブ時の見え方（スマホ・タブレット）も早期に確認してください。
デザインカンプと類似用語（ワイヤーフレーム・モックアップ）の違い
Web制作でよく混同される「ワイヤーフレーム」「デザインカンプ」「モックアップ」について、実務での違いと使い分けを分かりやすく説明します。
ワイヤーフレーム
ページの骨組みを示す設計図です。レイアウトや要素の配置、優先順位に注目し、色や装飾は基本的に省きます。手早く作れて、仕様決めや情報設計の確認に適します（例：白黒の線画、ボタンや見出しの位置のみ）。
デザインカンプ
ワイヤーフレームをもとに、色・画像・フォント・余白まで含めた完成見本です。見た目の最終イメージをクライアントや開発チームに示し、ビジュアル承認やコーディング指示に使います。細かいスタイルやアセットの指定が含まれます。
モックアップ
本来は実物大の模型を指しますが、Web制作ではカンプとほぼ同義で使われることが多いです。ただし、動作やインタラクションを含めた「プロトタイプ」とは区別します。
使い分けの例と実務的なポイント
- 企画初期はワイヤーフレームで構成を確定します。
- ビジュアル確認やクライアント承認はデザインカンプで行います。
- 実際の動きや動作確認が必要なときはプロトタイプを作ります。
納品時は各ファイルに役割を明記し、色やフォントの仕様（スタイルガイド）を添えると認識のズレを防げます。
デザインカンプの作成に使われる主なツール
Figma
Figmaはクラウド型のデザインツールで、複数人の同時編集に向いています。ブラウザでも使え、リアルタイムでコメントやバージョン管理ができます。プロトタイプ機能やレスポンシブ用のフレーム管理、プラグイン（アイコンやレイアウト補助など）も豊富で、デザイン → 開発の受け渡しがスムーズです。
Adobe XD
Adobe XDはUI設計に特化したツールで、画面遷移やアニメーションのプロトタイプ作成が簡単です。Creative Cloudと連携するのでPhotoshopやIllustratorとの素材共有が便利です。Windows・Macの両方で動作します。
Illustrator／Photoshop
Illustratorはベクターグラフィックに強く、ロゴやアイコンの精密な作成に向きます。Photoshopは写真加工やピクセル単位の調整に適しています。どちらもグラフィック制作で高機能ですが、UI専用ツールに比べるとプロトタイピング機能は限定的です。
その他の選択肢
Sketch（Mac専用）は長年UIデザインで使われてきました。プロトタイプ専用のツールや手書き風のワイヤーツールも状況により有効です。
ツール選びのポイント
- チームで共同作業するならクラウド対応のFigmaが便利です。
- 細かな画像編集が多いならPhotoshop、ベクター作成ならIllustratorを選びます。
- 開発への受け渡し（アセット書き出しやCSS情報）が必要なら、プラグインやエクスポート機能を確認してください。
実際の現場では、目的ごとにツールを使い分けることが多いです。初心者はFigmaから始めると学習コストが低く、共同作業にも慣れやすいでしょう。
デザインカンプ作成時のポイントと注意点
デザインカンプは完成形に近い設計図です。見た目だけでなく、受け手に伝えるための工夫が大切です。以下のポイントを意識してください。
1. コミュニケーションを密にする
クライアントや開発チームと認識を合わせます。イメージのズレを防ぐため、ワイヤー段階で大枠を確認し、カンプでも都度確認を取ります。例えば、ボタンの文言や主要な導線は最初に決めておきます。
2. 実素材に近いテキスト・画像を使う
ダミー文や適当な画像は避けます。見出しやキャッチコピーは実際に使う文言にし、画像も想定される写真を入れるとレイアウト狂いを早期に発見できます。
3. レスポンシブを考慮する
PC・タブレット・スマホの主要画面幅でレイアウトを用意します。優先順位を決め、重要要素が小画面でも目立つようにします。グリッドやブレークポイントを明記してください。
4. コンポーネントと一貫性
ボタン・フォーム・カードなどをコンポーネント化して再利用性を高めます。カラーや余白のルールを統一すると実装が楽になります。
5. アクセシビリティを意識する
コントラストやフォントサイズ、代替テキストを確認します。色だけで意味を伝えないようにします。
6. ファイル管理とバージョン
ファイル名やレイヤーを整理し、バージョン管理を行います。フィードバックはコメント機能で残すと履歴が追いやすくなります。
以上の点を押さえると、実装段階での手戻りを減らせます。
まとめ
デザインカンプはホームページ制作における「見た目の完成見本」です。関係者で見た目と意図を共有し、実装前に問題を洗い出すことで作業効率が上がり、品質のばらつきを減らせます。トラブルの未然防止にも役立ちます。
ポイントを改めて整理します。
- 目的を明確にする：誰に何を伝えるかを最初に決めます。これで無駄な修正を減らせます。
- ワイヤーフレームとの使い分け：ワイヤーは構造、カンプは見た目です。両方を段階的に使うと効果的です。
- ツール選び：チームのスキルやワークフローに合ったツールを選びます。共同編集や書き出し機能を重視すると便利です。
- 作成時の注意：フォントやカラー、余白、レスポンシブの想定を明記し、素材や仕様を一緒に渡します。バージョン管理も忘れずに行いましょう。
最後に、カンプは完成ではなくコミュニケーションのための道具です。確認・フィードバック・修正のサイクルを大切にし、実装段階へスムーズにつなげてください。
