デザインカンプ

デザインカンプとは

デザインカンプとは、「Design Comprehensive（デザインコンプリヘンシブ）」の略で、 Webサイトの完成イメージを確認するために作る静的なデザイン見本のことです。
実際にコーディングする前に、色・文字サイズ・レイアウト・画像配置などを視覚的にまとめた“完成予想図”として用いられます。

デザインカンプを作る目的

• 完成イメージの共有：クライアントやチーム内で認識を合わせるため
• レイアウトの確認：どの位置に何を置くか事前に整理できる
• コーディング作業をスムーズに：デザインを基にHTML/CSSを組みやすくなる

デザインカンプに含まれる要素

• 色・タイポグラフィ（フォント・サイズ・行間）
• ボタン・アイコン・画像の配置
• 余白の取り方（マージン・パディング）
• レスポンシブ時の構成（スマホ版/PC版）

よく使われる制作ツール

• Figma
• Adobe XD
• Photoshop

注意点

• 実装できるデザインにすること：複雑すぎる装飾はコーディングが困難な場合がある
• レスポンシブの想定を忘れない：PCだけでなくスマホの見え方もセットで作るのが一般的