Figma支給のコーディング依頼前に確認したい7つの項目

Figmaのデザインデータを渡してコーディングを外注したのに、「ここが違う」「この場合はどうなりますか」というやり取りが続いて、思ったより時間がかかった経験はないでしょうか。

• デザイン通りに仕上がってこない
• 質問が多くて、答えるだけで時間を取られる

実は、その多くはコーディングが始まる前のデータの状態で決まっています。

筆者は制作会社様からFigma支給でLPや採用サイトのコーディングを受けているフリーランスのコーダー・Webディレクターです。この記事では、受ける側の実体験から「依頼前にここが揃っていると手戻りが減る」という7つの確認項目を紹介します。

そのまま使えるチェックリストの図解も用意しました。次の外注から使ってみてください。

Figma支給のコーディングで手戻りが起きる3つの原因

Figma支給のコーディング外注とは、Figmaで作ったデザインデータを渡し、HTML・CSS・JavaScriptの実装だけを外部に任せる進め方です。デザインと実装を分業できるため、制作会社の外注では定番の形になっています。

ただし、渡すデータの状態によって、仕上がりの精度とやり取りの回数は大きく変わります。

筆者がコーディングを受けていて、手戻りにつながりやすいと感じる原因は次の3つです。

1. デザインに「決まっていない部分」が残っている（スマホ版がない、ホバーが未定義など）
2. データの数値が信用できない状態になっている（手置きレイアウトで余白がバラバラなど）
3. デザイン以外の情報が共有されていない（フォントのライセンス、書き出し設定、権限など）

コーダーは、決まっていない部分に出会うたびに「質問して待つ」か「推測で進める」かの二択になります。質問すれば時間がかかり、推測で進めれば手戻りになります。

つまり、依頼前にこの3つを潰しておくことが、そのまま納期と品質に効いてきます。

依頼前に確認したい7つの項目

結論として、次の7項目が揃っていれば、コーディングはほぼ迷いなく進められます。

1. スマホ用デザインの有無とブレークポイント
2. Auto Layoutで組まれているか
3. ホバー・アニメーションの指定
4. 画像の書き出し設定
5. フォントの種類とライセンス
6. 余白・数値のルール
7. 共有権限とコメントの整理

順番に解説します。

① スマホ用デザインの有無とブレークポイント

まず確認したいのは、スマホ用（SP）デザインがあるかどうかです。

PC版だけを渡して「スマホはいい感じにお願いします」という依頼は、実は一番手戻りが起きやすいパターンです。コーダーの「いい感じ」とデザイナーの「いい感じ」は、ほぼ確実にズレます。

• SPデザインがある場合：そのフレーム幅（375pxなど）を伝える
• SPデザインがない場合：「SP対応はコーダーの判断に任せる」と明示し、確認するタイミングを決めておく

あわせて、何pxでレイアウトを切り替えるか（ブレークポイント）が決まっていれば伝えてください。決まっていなければ「コーダーの標準でよい」と一言あるだけで、質問が1往復減ります。

② Auto Layoutで組まれているか

デザインがAuto Layout（自動レイアウト）で組まれているかどうかで、Dev Modeに表示される数値の信頼度が変わります。

Auto Layoutで組まれたデザインは、余白やギャップが設定値として入っているため、コーダーはその数値をそのまま使えます。一方、要素を手動で置いたデザインは、見た目は揃っていても余白が23px、25px、24pxと微妙にバラつくことがあります。

コーダーはこのとき、「バラつきをそのまま再現するのか、揃えるのか」を判断できません。

• 全ページをAuto Layoutにする必要はありません
• 「余白のバラつきは8の倍数に丸めてOK」のような一言があれば十分です

③ ホバー・アニメーションの指定

ボタンやリンクのホバー時の見た目、スクロール時のアニメーションは、静止画のデザインデータには表れません。

指定がない場合、コーダーは「何も付けない」か「一般的な演出を推測で付ける」ことになります。どちらもデザイナーの意図とズレる可能性があります。

• ホバー時の色・動きをFigmaのバリアント（コンポーネントの状態）やメモで残す
• アニメーションは参考サイトのURLを1つ添えるだけでも精度が上がります
• 「アニメーションは不要」なら、それも明記する

「なし」という指定も立派な指定です。書いてあれば、コーダーは迷わず進められます。

④ 画像の書き出し設定

写真・イラスト・ロゴなどの画像素材は、書き出しの扱いを決めておくとスムーズです。

確認するポイントは次の2つです。

• 誰が書き出すか：コーダーがFigmaから書き出してよいか、支給されるのか
• 形式の希望：ロゴやアイコンはSVG、写真はWebPなど、希望があるか

コーダー側で書き出す場合は、画像レイヤーに書き出し設定（Export設定）が入っているとそのまま使えます。設定がなくても書き出しはできますが、「この画像はダミーで、本番素材は後日支給」のようなケースが混ざっていると事故になるため、ダミー画像の有無だけは必ず共有してください。

⑤ フォントの種類とライセンス

意外と見落とされやすいのがフォントです。

Google Fontsなどの無料フォントなら問題になりませんが、有料フォントやAdobe Fontsが使われている場合、Webで表示するためのライセンスやWebフォントの契約が必要になることがあります。

• 使用フォントが無料か有料か
• 有料の場合、Webフォントとして使える契約があるか
• 代替フォントで組んでよいか

ここが曖昧なまま実装が進むと、公開直前に「このフォント、Webでは使えません」が発覚します。デザインの根幹に関わるため、依頼前の確認をおすすめします。

⑥ 余白・数値のルール

デザイン全体に共通するルールがあれば、最初に伝えてください。

• 余白は8pxの倍数で設計している
• 角丸は8px、ボタンだけ100px（ピル型）
• カラーは6色のパレットで完結している

ルールが1行共有されているだけで、コーダーは個々の数値を「拾う」のではなく「理解して」実装できます。結果として、デザインデータに小さなズレがあっても、意図に沿った方に寄せて実装できるようになります。

⑦ 共有権限とコメントの整理

最後は、データそのものではなく共有まわりの確認です。

• 権限：閲覧権限でDev Mode（開発モード）が使える状態になっているか
• コメント：検討中の古いコメントが残っていないか
• ページ整理：使わないアートボードや没案が本番デザインと混ざっていないか

特にコメントは要注意です。「ここ赤にするかも」のような検討中のコメントが残っていると、コーダーはどちらが最終決定か判断できません。デザイン確定のタイミングで、不要なコメントは削除するか解決済みにしておくと親切です。

コーダー側から見た「助かる支給データ」

筆者が実際に受けた案件で、進めやすかった支給データには共通点がありました。

デザインの完成度が高いことよりも、「決まっていること」と「任せること」の境界がはっきりしていることです。

たとえば、Figma支給で受けたあるLP案件では、次の情報が最初のメッセージにまとまっていました。

• SPデザインあり（375px）、ブレークポイントは767px
• ホバーはバリアントで定義済み、スクロールアニメーションは参考URLの通り
• 画像はコーダー側で書き出し、写真はWebP希望
• フォントはGoogle Fontsのみ

この状態だと、質問はほとんど発生しません。コーディングを始めた日から、実装の中身に集中できます。

逆に言えば、7項目のうち決まっていないものがあっても問題はありません。「ここは任せる」と書いてあれば、コーダーは推測ではなく裁量として引き受けられるからです。手戻りが起きるのは、決まっていないことが共有されていないときだけです。

よくある質問

Figmaのデザインが完成していない段階で相談してもいい？

問題ありません。むしろ早い段階での相談をおすすめします。ワイヤーフレームの段階で「この構成だと実装コストが高い」といった相談ができると、デザイン確定後の手戻りを防げます。見積もりの精度も上がります。

デザインをそのままピクセル単位で再現してもらえる？

基本的には再現できます。ただし、ブラウザの仕様上、完全に同じにならない部分（フォントの描画など）もあります。「ピクセル単位で厳密に」か「意図が伝わればOK」か、求める再現度を事前に共有しておくとお互いに安心です。

7項目が全部揃わないと依頼できない？

揃わなくても依頼できます。大事なのは、決まっていない項目を「未定」「任せる」と明示することです。曖昧なまま進むことが手戻りの原因であって、未定であること自体は問題になりません。

Auto Layoutを使っていないデザインだと断られる？

断られることは通常ありません。ただし、数値のバラつきをどう扱うかの確認が増えるため、やり取りの回数は多くなりがちです。「余白は8の倍数に揃えてOK」のような方針を一言添えるのがおすすめです。

Figma支給のコーディング依頼前に確認したい7項目を、受ける側の視点から紹介しました。

1. スマホ用デザインの有無とブレークポイント
2. Auto Layoutで組まれているか
3. ホバー・アニメーションの指定
4. 画像の書き出し設定
5. フォントの種類とライセンス
6. 余白・数値のルール
7. 共有権限とコメントの整理

すべてを完璧に揃える必要はありません。決まっていない項目は「任せる」と書く。それだけで、コーディングのやり取りは驚くほど減ります。

この記事のチェックリストが、次の外注をスムーズにする助けになればうれしいです。