デザインカンプをコーダーへ渡す実務｜画像書き出し・余白ルール・状態の指定

デザインカンプが完成したら、次はコーディングです。Web制作では、デザイナーが作ったカンプを実装者（コーダー）がHTMLとCSSで組み立てます。

このとき、渡し方が雑だと仕上がりが変わります。「カンプと違う」「余白の意図が伝わっていない」という往復は、ほとんどが受け渡しの準備不足が原因です。
この記事では、カンプをコーダーへ渡すときの実務を解説します。データの整え方・画像の書き出し・指定の書き方まで、順番にいきましょう◎

Figmaを触ったことがない人へ。この記事に出てくるFigmaの言葉は3つだけです。レイヤー＝重なりの1枚、フレーム＝ページの枠、コンポーネント＝使い回す部品。この3つが分かれば読み進められます。

デザインカンプの役割をおさらい

デザインカンプは、完成品と同じ見た目まで作り込んだ完成見本です。Web制作では、クライアントの確認用であると同時に、コーダーへの設計図でもあります。

設計図としてのカンプに求められるのは、きれいさより「迷わせないこと」。コーダーはカンプから色・サイズ・余白の数値を読み取って実装します。読み取れない部分は推測になり、推測はズレの元です。

カンプの前段階にあたるワイヤーフレームとの違いは、ワイヤーフレームとモックアップで解説しています。位置づけがあいまいな方は先にどうぞ。

受け渡しの全体の流れ

カンプがフィックス（確定）してから実装が始まるまでの流れは、この5段階です。

1. カンプのフィックス：確定してから渡す。実装中の差し替えは事故の元
2. データの整理：レイヤーを整えて、使わない案を消す
3. 画像の書き出し：写真・ロゴ・アイコンを実装用の形式で出す
4. 指定を書く：数値と状態を言葉にして添える
5. 実装と表示確認：組み上がったらカンプと並べて見比べる

Figmaで渡す場合、コーダーは画面から数値を直接読み取れます。それでも2〜4の準備は省けません。ツールが数値を見せてくれても、「どれが確定案か」「どこまでがコンポーネント（使い回す部品）か」はデザイナーにしか分からないからです。

渡す前にデータを整える

コーダーが最初に開くのはカンプのデータです。ここが散らかっていると、実装前の解読に時間が消えます。渡す前に次を確認してください。

• 使わなかった案・非表示レイヤーを削除した
• レイヤーとフレームに名前を付けた（「Rectangle 47」のままにしない）
• 名前は半角英数にした（例：btn_entry、img_hero）。日本語名は書き出し時に文字化けすることがある
• 余白を一定のルールでそろえた（8の倍数など）
• 使った色とフォントを一覧にした（色はHEX、フォントは名前と太さ）

余白のルールがそろっていると、コーダーは「ここは24px、ここも24px」と規則で実装できます。20px・23px・25pxが混ざったカンプは、全部を1個ずつ測ることになり、実装もあとの修正も遅くなります。

画像の書き出し

カンプの中の素材は、コードで描くものと画像で渡すものに分かれます。ボタンの背景や単色の図形はCSSで描けるので、画像にするのは写真・ロゴ・複雑なイラストです。

素材	形式	ポイント
写真	JPGまたはWebP	表示サイズの2倍の幅で書き出す
ロゴ・アイコン	SVG	拡大しても粗くならない。単色図形はこれ
透過が要る画像	PNGまたはWebP	背景を透かしたい切り抜き素材など

2倍で書き出すのは、高精細なディスプレイでもぼやけさせないためです。形式ごとの細かい使い分けは画像形式の使い分けで解説しています。

指定の書き方：色・サイズ・余白・状態

指定とは、カンプから読み取りにくい情報を言葉と数値で添えることです。ボタン1個なら、書くのはこの4つです。

• 色：背景色と文字色をHEXで（例：背景 #3E5C76／文字 #FFFFFF）
• サイズ：幅・高さ・角丸・文字サイズ（例：高さ48px・角丸8px・文字16px）
• 余白：ボタン内側の余白と、周囲の要素との距離
• 状態：マウスを乗せたとき・押したとき・押せないときの見た目

見落としやすいのが最後の「状態」です。カンプに描いてあるのは通常の見た目だけ。でも実装には、マウスを乗せたとき（ホバー）、押した瞬間、入力が足りなくて押せないとき（無効）の見た目も必要です。

状態の指定がないと、コーダーが自分の判断で作ります。「指定がない部分は実装者のセンスで埋まる」と覚えておいてください。デザインを最後まで自分の設計で通したいなら、状態まで描くのが近道です。

ちなみに、ホバーの色替え程度ならCSSの1行で済みます。指定の意味が想像しやすくなるので、形だけ見ておきましょう。

.btn:hover { background: #2C4257; }
/* マウスを乗せたら背景を濃くする */

ミニ実践：ボタン1個の指定書を書く

ボタン1個で受け渡しの型を体験します。FigmaでもCanvaでも、無料プランで大丈夫です。20分ほどでできます。

1. ボタンを1個作る（5分）：「申し込む」など短い文言で。色・サイズ・角丸は自分で決める
2. 指定を書き出す（10分）：色（HEX）・サイズ（幅・高さ・角丸・文字）・余白（内側と外側）・状態（ホバー時と無効時の見た目）の4項目をメモに書く
3. 読み返す（5分）：「この紙だけ渡された人が、同じボタンを作れるか」の目で見直す。数値が抜けている場所が、コーダーが推測で埋める場所です

ボタン1個でこの分量なら、ページ1枚の指定がどれほどの情報量か想像できますよね。だからルール（8の倍数・色は一覧で管理）で渡すのが実務の標準になっています💡

よくある質問

ワイヤーフレームとデザインカンプの違いは何ですか？

ワイヤーフレームは「何をどこに置くか」だけを線と四角で描いた設計図で、色も写真も入れません。カンプはその設計図に色・写真・フォントまで入れた完成見本です。
コーダーに渡すのはカンプのほう。ワイヤーフレームは実装の材料には足りません。

「カンプ」とはどういう意味ですか？

英語のcomprehensive layout（総合的なレイアウト）を縮めた言葉で、完成見本のことです。もともとは印刷の現場の言葉でしたが、Web制作でも同じ意味で使います。「デザインカンプ」「カンプ」「完成イメージ」は同じものを指します。

Figmaのデザインカンプは何が違いますか？

作るものは同じで、渡し方が変わります。リンクを送るだけで共有でき、コーダーは画面上で余白や色の数値を直接読み取れます。コメントも画面に直接書き込めます。
受け渡しの往復が減るので、Web制作の現場ではFigmaが標準になりつつあります。それでもレイヤー整理と状態の指定は、デザイナーの仕事のままです。

デザインカンプはどうやって作りますか？

ラフで決めた配置を、実寸サイズでツールに写していきます。Webサイトの案件ならFigmaが定番です。
手順は、実寸で新規ファイルを作る→配置どおりに枠を置く→本番の文言を入れる→写真とロゴを差し込む→色とフォントを確定する、の順。コーダーへ渡す前提なら、余白のルールと命名も最初から意識しておくと、あとが楽です。

次に学ぶこと

今回のポイントをまとめます。

• カンプはクライアント確認用であり、コーダーへの設計図でもある
• 渡す前に、レイヤー整理・半角英数の命名・余白ルールの統一・色とフォントの一覧化
• 画像は写真＝JPG/WebP（2倍）、ロゴとアイコン＝SVGで書き出す
• 指定は色・サイズ・余白・状態の4点。状態の指定がいちばん抜けやすい

次のレッスンは「WordPressとCMS」。コーディングしたサイトを、コードを触らずに更新し続けられる仕組みの話です。

コースの全体像はデザイン基礎コースの目次から確認できます。