Figmaでデザイナーが作ってくれたけど、完璧に再現できない…」
「コーディングしたら微妙にズレる。どこが違うのかよくわからない…」
Web制作の現場で、デザインと実装の差異はよくある問題です。
Figmaは非常に優れたデザインツールですが、「どうコーディングに落とし込むか」は別問題。再現度が低ければ、クライアントやチームからの信頼にも影響します。
この記事では、FigmaからHTML/CSSへコーディングする際に再現度を高めるための注意ポイントを3つに絞って、徹底解説します。
ピクセル単位で確認する癖をつける
Figmaには素晴らしい**検査モード（”Inspect”タブ）**があります。これを使えば、テキストサイズ、余白、色、ボックスサイズなどのすべてを正確に読み取ることができます。
よくあるNG例
figmaでよくあるNG例が、以下の3つです
-
「なんとなくこのくらいでいいか」で
marginやpaddingを適当に決める -
テキストサイズを”14px”に指定すべきところを”16px”にしてしまう
-
デザイン上の
line-heightを無視して詰まりすぎる
解決策
これらの問題に対する具体的な解決策を、以下に一つずつご紹介します。
-
必ずFigma上の数値を正確にCSSに反映する癖をつけましょう
-
余白やフォントサイズだけでなく、line-heightやletter-spacingも反映
-
ブラウザの開発者ツールで表示を拡大し、Figmaと並べて比較するとズレに気付きやすい
ツール補足
正確に値を保持するための、ツールなども活用していきましょう。
-
Figmaのグリッド表示機能を活用し、ガイドに沿ったブロック単位のレイアウト確認
-
**「寸法メモ用のプラグイン（Measure、Design Lintなど）」**を使うのも有効です
レスポンシブ時の「意図」を読み取る
Figma上では1つのアートボード（例：1440px）でしかデザインされていない場合も多いです。
このとき、「モバイルではどうなるべきか？」を自分で読み取る力が必要になります。
よくあるNG例
-
PCのままの横並びをスマホでも無理やり表示しようとする
-
要素が小さくなりすぎて読みづらいUIになってしまう
-
パディングやフォントが固定のままでスマホ対応できていない
解決策
-
デザイナーにスマホ版がなければ「推測し、提案できる力」を持つ
-
flex-wrapやGridの活用で自然な改行・再配置を意識する
-
文字サイズやマージンは
clamp()やvwを使ってスケーラブルに設計することも検討
ポイント
-
ブレイクポイントごとの「構造の切り替え」を想像できるかが重要
-
Figma側でレスポンシブ設定されている場合は、制約（Constraints）を確認
フォント・色・アイコンなどの「デザインルール」を読み取る
Figmaではコンポーネントやスタイルガイドが用意されていることが多く、これを見落とすと全体のトンマナ（トーン&マナー）が崩れてしまいます。
よくあるNG例
-
デザインガイドに「見出しは#333」とあるのに、#000を使ってしまう
-
フォントが指定されているのに別フォントを使ってしまう（特に日本語フォント）
-
アイコンがSVGで提供されているのに画像にしてしまう
解決策
-
Figmaの「Assetsパネル」や「Styles設定」を必ず確認する
-
色やタイポグラフィが定義されている場合は、共通CSS変数やSCSS変数にまとめて再利用
-
アイコンはSVG化して使う、可能ならinlineで使えばスタイルも効く
Tips
-
似たようなボタンでも、パディング・影・角丸のルールが統一されているかを確認
-
再現度が高いコーディングは「一貫性の再現」が命です
補足：デザイナーとの連携も再現度を左右する
以下のような一言をデザイナーに伝えるだけで、Figma側でも調整が入り、再現しやすくなることがあります。
-
「スマホ版の構造の意図があれば共有してもらえますか？」
-
「このアイコンはSVG素材としてもらえますか？」
-
「ボタンのホバー時のスタイルも決まってますか？」
良い実装は、良いコミュニケーションとペアで生まれるのです。
まとめ
| ポイント | 内容 |
|---|---|
| ピクセル単位で正確に | Figmaの数値をそのまま写す意識でコーディングする |
| レスポンシブの意図を読む | デザインがない場合でも柔軟に構造を考える |
| デザインルールを統一再現 | 色・フォント・アイコンなどをすべてガイド通りに守る |
おわりに
Figma→HTMLの再現度を高めるには、ただ「見た目を真似る」だけでは足りません。
デザイン意図の理解と、細部へのこだわり、そして実装者としての想像力が大切です。
再現度の高いコーディングは、信頼されるコーダー・フロントエンドエンジニアへの第一歩です。
ぜひ、明日からの実装にこの3つのポイントを取り入れてみてください！
コメント