デザインカンプとは
デザインカンプ（Comprehensive Layout）とは、Webサイトの完成イメージをデザインツールで作成したデータです。現在はFigmaが主流で、Adobe XDやSketchも使われています。
コーディング前にカンプから取り出す情報
カラーコード
Figmaでは要素を選択すると右パネルに#から始まるカラーコードが表示されます。必ず正確な値を確認しましょう。
フォント情報
- フォントファミリー（例：Noto Sans JP）
- フォントサイズ（px）
- フォントウェイト（400/700など）
- 行間（line-height）
- 文字間隔（letter-spacing）
余白・サイズ
FigmaではCtrl+クリックで要素間の距離が表示されます。padding・marginの値をここから取得します。
Figmaの便利な機能
- Inspectパネル：右サイドバーのInspectタブでCSS値を確認できる
- 書き出し機能：画像・SVGアイコンを指定フォーマットで書き出せる
- コンポーネント確認：再利用可能な部品（ボタン・カードなど）の仕様を一覧で確認
よくある落とし込みミスと対策
- デザインは1x（1倍）で作られている。Retina対応のため画像は2x書き出しが必要
- テキストの折り返し位置はデザインとコードで異なることがある。実際の文字量で確認する
- 影（box-shadow）の値はFigmaのInspectパネルでCSS形式で取得できる
デザイナーに確認すべき事項
- ホバー時・クリック時のデザイン
- エラー状態のフォームデザイン
- スマホ版のカンプ
- テキスト量が増えた場合のレイアウト
まとめ
カンプを「見た目を真似るもの」ではなく「仕様書として読み解くもの」と捉えることで、精度の高いコーディングができます。不明点は早めにデザイナーに確認しましょう。
