はじめに
「ブログの記事をどう書けばいいかわからない」「デザインの完成形をどう伝えればいいかわからない」といった悩みをもっていませんか？本書はWeb制作で使われる“見本”としてのカンプ（デザインカンプ）について、分かりやすく解説します。
目的
カンプの意味や役割、作り方、ワイヤーフレームやモックアップとの違い、実務でのメリット・注意点、さらにSEOや記事作成との関係まで、実務に役立つ情報をまとめています。完成イメージを共有してトラブルを減らすための実践的な知識を提供します。
対象読者
- デザイナーや制作担当者
- 発注者・クライアント
- ブロガーやライター
- Web制作を学び始めた人
本書の構成（全8章）
- 第1章: はじめに
- 第2章: Webデザインの見本「カンプ」とは
- 第3章: カンプを作る目的
- 第4章: カンプ・モックアップ・ワイヤーフレームの違い
- 第5章: カンプの作成手順とおすすめツール
- 第6章: カンプ作成のメリット・注意点
- 第7章: SEOやブログ記事と「見本」の関係
- 第8章: まとめ
この記事を読むことで、デザインの完成像をわかりやすく伝える方法と、実務でよくある誤解を避けるコツがつかめるはずです。
Webデザインの見本「カンプ」とは
定義
カンプ（デザインカンプ）とは、Webサイトやランディングページの完成イメージを視覚化した見本です。英語では「Design Comprehensive Layout（デザイン・コンプ）」とも呼ばれ、最終的な仕上がりを具体的に示します。
カンプに含まれる要素
- レイアウト（ヘッダー・メイン・サイドバー・フッターなど）
- 画像やイラストの配置
- 見出しや本文のテキストの見た目（フォントやサイズ）
- 配色やボタンのデザイン
- スペーシング（余白）や配置のバランス
具体例として、ランディングページのカンプは、ヒーロー画像、キャッチコピー、行動を促すボタン（CTA）、商品写真の配置まで描きます。
誰が使うか・いつ使うか
クライアント、デザイナー、コーダー（開発者）、ディレクターなど関係者全員が使います。主に「実装前の確認」「デザイン合意」「制作の引き渡し」の段階で用います。
カンプの役割
カンプは完成イメージの共通理解を作ります。文章や色、画像の具体的な指示を残せるため、実際に作ってみてからの手戻りを減らせます。レビュー時は、表示サイズやフォント、ボタンの動き（擬似状態）などをチェックポイントにすると便利です。
見方のコツ
- 色やフォントはコード（HEXやフォント名）で確認する
- 画像の解像度や縦横比を確認する
- レスポンシブ時の見え方を想像してメモを残す
- 変更箇所は注釈で明確に伝える
この章を読めば、カンプが何で、どんな場面で役立つかがすぐに分かるはずです。
カンプを作る目的
認識を揃える
カンプは発注者と制作者の「どう見えるか」を一致させます。口頭や文章だけでは色や配置、ボタンの大きさなどで認識差が生まれやすいです。たとえば「目立つボタン」と伝えただけでは、期待する色や位置が違うことがあります。カンプは具体的な画面像を示して、そのズレを減らします。
早期の完成イメージ確認
制作前に完成イメージを視覚で確認できます。色味や文章の長さ、画像の雰囲気を実際に見て調整できます。これにより完成後に「思っていたのと違う」という手戻りを防げます。
制作の効率化とコスト抑制
カンプで仕様を固めると、実装時の手戻りを減らせます。無駄な修正回数が減り、工数と費用の見積もりが正確になります。結果として納期管理もしやすくなります。
フィードバックと合意形成
社内やクライアントからの意見を集めやすくなります。視覚資料があると具体的な指摘が出やすく、意思決定が速くなります。
開発・運用への橋渡し
デザイナーからエンジニアへの引き渡しがスムーズになります。レイアウトや仕様の基準になり、画像や色の書き出しも容易になります。
これらの目的を果たすことで、プロジェクトの進行が安定し、満足度の高い成果を得やすくなります。
カンプ・モックアップ・ワイヤーフレームの違い
定義と役割
- カンプ：完成見本のデザイン案です。色・フォント・画像を反映し、最終的な見た目の合意に使います。クライアント確認用に最適です。
- モックアップ：実物大の模型に相当します。Webではインタラクションや表示の仕方も含め、動作イメージの確認やユーザーテストに使います。
- ワイヤーフレーム：構成図・設計図です。レイアウトや情報の置き方をシンプルな線やボックスで表し、設計の初期段階で用います。
見た目と精度（フィデリティ）
- ワイヤーフレーム：低フィデリティ（骨組み）
- モックアップ：中〜高フィデリティ（見た目＋動作）
- カンプ：高フィデリティ（静的な完成見本）
使い分けの具体例
- 企画段階：ワイヤーフレームで情報設計を固める。
- デザイン合意：カンプで最終の色や素材感を確認する。
- 動作確認・ユーザーテスト：モックアップで操作感を試す。
現場での注意点
用語はチームやクライアントで統一してください。Web制作ではカンプとモックアップをほぼ同じ意味で使うことが多い点も覚えておくと便利です。目的に合わせて適切な「見本」を選ぶと作業がスムーズになります。
カンプの作成手順とおすすめツール
準備
目的とページ構成を確認し、ワイヤーフレームを用意します。画像やテキストの素材、使用するフォント、ブランドカラーを揃えておくと作業が速くなります。レスポンシブ対応が必要なら表示幅（SP/PC）を決めます。
作成手順（基本の流れ）
- ワイヤーフレームをベースにアートボードを作成します。例：トップページ、下層ページ。
- レイアウトに沿って画像や写真を配置します（ヘッダーのロゴ、ファーストビューのバナーなど）。
- フォント種別・サイズ・行間を決め、見出しや本文に反映します。強調は太字や色で表現します。
- カラーリングと背景を設定し、ボタンやリンクの色を統一します。
- ボタンやフォームなどのインタラクション要素を配置し、可視性や余白を調整します。
- コンポーネント化して再利用できるように整理します。レスポンシブ時はブレイクポイントごとに調整します。
おすすめツール
- Figma：共同編集やプロトタイプ作成が得意で無料枠も便利です。
- Adobe XD：Adobe製品との連携が良く、操作が直感的です。
- Photoshop：画像編集や細かなビジュアル調整に強みがあります。
- Sketch：Macユーザー向けに軽快でプラグインが豊富です。
書き出しと共有のコツ
画像やアイコンは適切なフォーマット（PNG/JPEG/SVG）で書き出し、レイヤー名やアセット名を分かりやすく付けます。クライアントや開発者にはプロトタイプリンクやコメント機能を使ってフィードバックを受け取ると効率的です。
注意点
画面の余白やタップ領域を十分に確保し、フォントの可読性を優先してください。色のコントラストも確認し、実機での表示も必ずチェックしましょう。
カンプ作成のメリット・注意点
はじめに
カンプは完成イメージを具体化する「見本」です。ここではカンプを使うメリットと、作る際に注意したい点を分かりやすく説明します。
メリット
- 完成イメージのズレを防ぐ
- 色・配置・文言のイメージを視覚化することで、制作者と依頼主の認識差を小さくできます。たとえばボタンの配置を事前に決めると、実装後の修正が減ります。
- 合意形成が早くなる
- 提案段階でOKをもらえれば、後工程でのやり直しを減らせます。見積もりやスケジュールも正確になります。
- 制作効率とトラブル防止
- 実装前に問題点を洗い出せます。画像サイズやレイアウトの制約を明確にすれば、実装側の無駄を減らせます。
注意点
- 作成の目的と範囲を明確にする
- 全ページ作るのか、主要画面のみかを決めましょう。時間とコストを管理しやすくなります。
- 実装可能性を考慮する
- 見た目だけでなく、レスポンシブ対応やフォント、画像の最適化も意識します。開発者と早めに相談してください。
- 過度な細部指定に注意
- 細かすぎる指示は手戻りを招くことがあります。重要な要素に絞って作ると効果的です。
実務でのコツ
- 初回は簡易カンプで方向性を確認し、最終版で細部を詰める流れがおすすめです。
- 変更履歴を残すと、なぜ修正が発生したかを後で確認できます。
SEOやブログ記事と「見本」の関係
「web 見本」などのキーワードは、ユーザーが具体的なイメージや作例を求める意図を強く表します。ここでは、見本を活用したSEOとブログ運用のポイントを分かりやすく解説します。
ユーザーの検索意図を想像する
- 参考デザインを見たい人: ギャラリーやスクリーンショットを用意します。具体例を並べると満足度が上がります。
- 作り方を知りたい人: 手順やテンプレート、素材の配布が有効です。
記事やページの作り方（具体例）
- 事例ページ: 事前後の比較や制作ポイントを明記します。
- テンプレート配布: ダウンロード可能なPSD/Sketch/Figmaなどを用意します。
- ギャラリー: カテゴリ別に並べ、タグで絞り込めるようにします。
SEOの基本対策（見本向け）
- タイトルとディスクリプションに「見本」「サンプル」を自然に含めます。
- 見本画像は適切なファイル名とalt属性を付けます。
- 長尾キーワード（例: “ECサイト 見本 2025” や “ランディングページ 見本 日本語”）を狙います。
流入を増やす工夫
- 実例を図解で説明し、滞在時間を伸ばします。
- 内部リンクで関連記事やテンプレートへ誘導します。
- 事例の成果（CV増加など）を示すと信頼が上がります。
効果測定
- Search Consoleで流入クエリを確認します。
- クリック率や滞在時間、ダウンロード数を指標に改善します。
見本コンテンツはユーザーの具体的なニーズに応える強力な資産です。丁寧に作り、定期的に更新すると検索評価とアクセスが安定して伸びます。
まとめ
Web制作での「カンプ（見本）」は、完成イメージを関係者で共有し、成果物の品質を高めるために不可欠です。
振り返りポイント
- カンプはデザインの最終確認用の見本です。レイアウトや色、文字の大きさなどを具体的に示します。
- 早めにカンプを用意すると認識のズレを防げます。仕様変更の影響も小さくなります。
実践のコツ
- 事例画像や具体的な文章を入れて作ると伝わりやすくなります。画面ごとの目的を一言添えてください。
- ツールの使い方は簡潔にまとめ、テンプレートやコンポーネントを用意すると手間が減ります。
- フィードバックは段階的に集めます。指摘は箇条書きで返してもらうと対応が速くなります。
ブログ化のヒント
- 各段落に画像や具体的な作成手順を入れると読者の理解が深まります。ツール名と操作のスクリーンショットを加えると実用性が高まります。
カンプ作りは手間に感じるかもしれませんが、計画的に進めれば制作の失敗を大きく減らせます。目的と受け手を意識して、使いやすい見本を作ってみてください。
