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

Figmaのデザインを渡してコーディングを外に頼むとき、依頼の前に何を確かめておくと、質問のやり取りや作り直しが減るかをまとめます。受ける側から見た確認項目と、AIで依頼のメッセージを整えるときの頼み方の例をのせます。

Figma（フィグマ）は、Webページのデザインを作って、ほかの人と共有できるツールです。コーディングは、そのデザインをもとにコードを書いて、ブラウザ（ChromeやSafariのような、サイトを見るためのソフト）で見られるページに組み立てる作業を指します。

デザインを渡したのに、仕上がりがデザインどおりにならない。「この場合はどうなりますか」という質問が続いて、答えるだけで時間を取られる。こうしたやり取りの多くは、コーディングが始まる前のデータの状態で決まっています。

筆者は、制作会社からFigmaのデザインを受け取って、LPや採用サイトのコーディングを引き受けているフリーランスのコーダー（デザインをもとにコードを書く人）・Webディレクター（制作の進め方をまとめる役）です。LPは、広告などから来た人に向けた、縦に長い1枚の宣伝ページのことです。

この記事の確認項目は、受ける側の経験から「依頼の前にここがそろっていると手戻り（作業のやり直し）が減る」と感じたものです。そのまま使えるチェックリストの図も用意しました。

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

Figma支給のコーディング外注は、Figmaで作ったデザインのデータを渡して、HTML・CSS・JavaScriptでページを組み立てる作業（実装）だけを外に任せる進め方です。HTMLは、ページの中身と骨組みを書くための言葉です。CSSは色や配置などの見た目を、JavaScriptは動きを書くために使います。

デザインと実装を分けて頼めるので、制作会社の外注では定番の形になっています。ただし、渡すデータの状態によって、仕上がりの正確さと、やり取りの回数は大きく変わります。

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

• デザインに「決まっていない部分」が残っている：スマホ版が無い、ホバー（マウスのカーソルを重ねたときの見た目）が決まっていない、など
• データの数値が信用できない状態になっている：部品を手で置いて並べたせいで、余白がばらばら、など
• デザイン以外の情報が共有されていない：フォントのライセンス（使ってよい条件）、画像の書き出しの設定、権限、など

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

依頼の前にこれらの原因をつぶしておくことが、そのまま納期と仕上がりに効いてきます。

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

次の項目がそろっていれば、コーディングはほとんど迷わずに進められます。

• ① スマホ用デザインの有無とブレークポイント
• ② Auto Layoutで組まれているか
• ③ ホバー・アニメーションの指定
• ④ 画像の書き出し設定
• ⑤ フォントの種類とライセンス
• ⑥ 余白・数値のルール
• ⑦ 共有権限とコメントの整理

ひとつずつ説明します。

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

最初に確かめたいのは、スマホ用（SP）のデザインがあるかどうかです。

パソコン用（PC）のデザインだけを渡して、「スマホはいい感じにお願いします」と頼むのが、いちばん手戻りが起きやすい形です。コーダーの「いい感じ」とデザイナーの「いい感じ」は、ほぼ確実にずれます。

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

フレームは、Figmaの中でページ1枚分を置く枠のことです。pxは、画面の上での長さの単位です。

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

② Auto Layoutで組まれているか

Auto Layout（オートレイアウト）は、Figmaで、中身に合わせて並びや余白を自動でそろえてくれる機能です。デザインがAuto Layoutで組まれているかどうかで、Dev Mode（コーダー向けに、大きさや余白の数値を表示する画面）に出る数値を、どこまで信じてよいかが変わります。

Auto Layoutで組まれたデザインは、余白や、部品どうしの間（ギャップ）が、設定の値として入っています。そのため、コーダーはその数値をそのまま使えます。一方、部品を手で置いたデザインは、見た目はそろっていても、余白が23px、25px、24pxと少しずつばらつくことがあります。

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

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

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

ボタンやリンクにカーソルを重ねたときの見た目（ホバー）や、スクロールしたときの動き（アニメーション）は、止まった絵であるデザインのデータには表れません。

指定が無い場合、コーダーは「何も付けない」か「よくある動きを推測で付ける」ことになります。どちらも、デザイナーの考えとずれるおそれがあります。

• ホバーのときの色や動きを、Figmaのバリアントやメモで残す
• アニメーションは、参考サイトのURLを1つ添えるだけでも、仕上がりが近づきます
• 「アニメーションは不要」なら、それも書いておく

バリアントは、ボタンなどの部品について、「ふだん」「カーソルを重ねたとき」のような状態ごとの見た目を作っておく機能です。

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

④ 画像の書き出し設定

写真、イラスト、ロゴなどの画像は、書き出し（Figmaから画像のファイルとして取り出すこと）の扱いを決めておくとスムーズです。確かめたいのは、次のことです。

• 誰が書き出すか：コーダーがFigmaから書き出してよいか、画像を別に渡すのか
• 形式の希望：ロゴやアイコンはSVG、写真はWebPなど、希望があるか

SVGは、大きくしてもぼやけない画像の形式です。WebPは、写真のファイルを小さくしやすい画像の形式です。

コーダーの側で書き出す場合は、画像のレイヤー（Figmaの中で重なっている1つ1つの部品）に書き出しの設定（Export設定）が入っていると、そのまま使えます。設定が無くても、書き出しはできます。

ただ、「この画像は仮のもの（ダミー）で、本番の素材はあとで渡す」というケースが混ざっていると、取りちがえの事故になります。ダミーの画像があるかどうかだけは、必ず伝えてください。

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

見落とされやすいのが、フォント（文字の書体）です。

Google Fonts（Googleが無料で配っている書体）のような無料のフォントなら、問題になりません。有料のフォントやAdobe Fonts（Adobeの契約で使える書体）が使われている場合は、Webで表示するためのライセンスや、Webフォントの契約が必要になることがあります。Webフォントは、見る人のパソコンに入っていない書体でも、サイトの上で表示できるようにする仕組みです。

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

ここがあいまいなまま実装が進むと、公開の直前に「このフォント、Webでは使えません」と分かることがあります。デザインの土台にかかわるので、依頼の前に確かめておくのがおすすめです。

使っているフォントについて、何を確かめればよいかを、AIに整理してもらう方法もあります。このあと出てくる枠の中の文は、ChatGPTやClaude（ChatGPTと同じように、文章で話しかけて使うAI）の入力欄に貼って使えます。（ ）の部分は、自分の内容に書きかえてください。

Figmaで作ったWebサイトのデザインを、外注先にコーディングしてもらう予定です。
デザインで使っているフォントについて、Webサイトで使う前に確かめることを整理してください。

使っているフォント：（見出しに使っている有料のフォントの名前と、本文に使っているフォントの名前）
契約しているもの：（Adobe Fontsの契約がある、など）

フォントごとに、次のことを書いてください。
・無料で使えるものか、確かめが必要なものか
・Webサイトで表示するときに、確かめること
・使えなかった場合に、代わりにできそうなこと
ライセンスについて分からないことは、推測せずに「配布元で確認」と書いてください。

AIの答えは、確かめる項目のたたき台として使ってください。ライセンスの中身は、フォントの配布元や契約のページで、自分で確かめます。

⑥ 余白・数値のルール

デザイン全体に共通するルールがあれば、最初に伝えてください。たとえば、次のようなものです。

• 余白は8pxの倍数で設計している
• 角丸（四角の角を丸くすること）は8px、ボタンだけ100px（ピル型）
• 色は6色のパレット（使う色の組み合わせ）だけで作っている

ピル型は、両はしが丸い、薬のカプセルのような形です。

ルールが1行共有されているだけで、コーダーは数値の意味を分かったうえで実装できます。そのため、デザインのデータに小さなずれがあっても、デザイナーの考えに近いほうに寄せて作れるようになります。

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

最後は、データの共有のしかたの確認です。

• 権限：見るだけの権限で、Dev Modeが使える状態になっているか
• コメント：検討中の古いコメントが残っていないか
• ページの整理：使わない画面（アートボード）や、使わなかった案が、本番のデザインと混ざっていないか

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

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

筆者が実際に受けた案件で、進めやすかった支給データには共通点がありました。デザインの完成度の高さよりも、「決まっていること」と「任せること」の境目がはっきりしていることです。

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

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

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

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

依頼のメッセージを、AIに7つの項目で整理してもらう

依頼のメッセージを書く前に、どの項目が決まっていて、どれがまだかを、AIに整理してもらう方法もあります。手元のメモを書きこんで、ChatGPTやClaudeの入力欄に貼ってください。

Figmaで作ったデザインのコーディングを、外注先に頼むメッセージを作りたいです。
下のメモを、次の7つの項目に分けて整理してください。
・スマホ用デザインの有無とブレークポイント
・Auto Layoutで組まれているか
・ホバー・アニメーションの指定
・画像の書き出し設定
・フォントの種類とライセンス
・余白・数値のルール
・共有権限とコメントの整理

メモ：（スマホ用のデザインあり。ボタンはカーソルを重ねたら色が変わる。写真はWebPがいい。フォントはGoogle Fontsだけ。余白は8の倍数）

メモに書いていない項目は、推測で埋めずに「未定」と書いてください。
そのうえで、外注先に送る依頼メッセージの下書きを作ってください。
未定の項目は「ここはお任せします」か「あとで決めて連絡します」のどちらにするか、私が選べるように空けておいてください。

AIの下書きは、送る前にFigmaのデータと見くらべて確かめてください。とくにブレークポイントや画像の形式のような数値と指定に、まちがいがないかを見ておきます。

依頼全体の伝え方は、外注パートナーに制作を依頼するときの伝え方で整理しています。

WordPress（管理画面から中身を書きかえられる仕組み）で作る案件を外注する場合は、WordPress構築を外注する前に決めることで、決めておきたいことをまとめています。

よくある質問

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

A. 問題ありません。むしろ、早い段階での相談をおすすめします。ワイヤーフレーム（ページの骨組みを線と箱で描いた設計図）の段階で「この構成だと実装に手間がかかる」といった相談ができると、デザインが決まったあとの手戻りを防げます。見積もりも、より正確になります。

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

A. ピクセル（画面を作っている小さな点）の単位でも、基本的には再現できます。ただし、ブラウザの仕組みのせいで、完全に同じにはならない部分（フォントの表示など）もあります。「ピクセル単位で厳密に」なのか「意図が伝わればOK」なのか、求める再現の度合いを前もって伝えておくと、お互いに安心です。

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

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

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

A. ふつうは断られません。ただ、数値のばらつきをどう扱うかの確認が増えるので、やり取りの回数は多くなりがちです。「余白は8の倍数にそろえてOK」のような方針を、一言そえるのがおすすめです。

まとめ

Figmaのデザインを渡してコーディングを頼む前に確かめたい7つの項目を、受ける側から紹介しました。

• ① スマホ用デザインの有無とブレークポイント
• ② Auto Layoutで組まれているか
• ③ ホバー・アニメーションの指定
• ④ 画像の書き出し設定
• ⑤ フォントの種類とライセンス
• ⑥ 余白・数値のルール
• ⑦ 共有権限とコメントの整理

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