おはようございます！株式会社ファストコーディングの働くおかんです。
先日、子どもが描いた絵を写真に撮ってプリントしたら、「色が違う！」と怒られました。画面で見た色とプリンターから出てくる色は、そもそも仕組みが違うので完全一致は難しいんですが、子どもにその説明は通用しません。
Webのコーディングでも同じことが起きます。Figmaのデザインカンプの通りにCSSを書いたのに、ブラウザで見ると「なんか違う」。クライアントからこの指摘が来ると、正直ドキッとします。間違いなくデザイン通りの数値を入れているのに、実機で見ると微妙にズレている。
この「微妙なズレ」には技術的な原因があります。そして残念ながら、Figmaとブラウザのレンダリングはそもそも仕組みが違うので、ピクセル単位の完全一致は不可能です。ただし、ズレを最小限にするCSS設定はあります。
今回は、デザインカンプと実装のズレが起きる4つの原因と、それぞれの対処法を紹介します。「Figmaの通りに作ったはずなのに」と言われたとき、原因を特定して説明できるようになると、クライアントとの信頼関係にもつながります。
ズレの原因1：フォントレンダリングの違い（Mac / Windows）
最も多い「なんか違う」の原因がこれです。同じフォント、同じサイズ、同じウェイトでも、MacとWindowsではテキストの見え方が違います。
MacはCoreTextというレンダリングエンジンで、文字を滑らかに表示します。Windowsはかつてのid ClearType、現在のDirectWriteで、文字をくっきり表示します。Figmaのデザイナーがmacで作業していて、クライアントがWindowsで確認すると、同じサイトなのに印象が変わります。
具体的には、Windowsの方が文字が細く・くっきり見える傾向があります。Macで綺麗に見える細いウェイト（font-weight: 300）が、Windowsだと「かすれて読みにくい」と言われることがあります。
/* 対策：フォントレンダリングの制御 */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}-webkit-font-smoothing: antialiasedはMacのブラウザで有効なサブピクセルレンダリングを無効にし、文字をやや細く・軽く表示します。これでMacとWindowsの見え方の差が少し縮まります。
ただし、本質的な対策はフォント選びの段階にあります。デザイナーに「Windowsでも確認してください」と一言伝えておくだけで、font-weight: 300のような細いウェイトを避ける判断が入ります。夜、子どもが寝た後にMacとWindows両方で同じページを並べて見比べたことがあるんですが、font-weight: 400以上ならほぼ気にならないレベルでした。
ズレの原因2：line-heightの計算方式が違う
Figmaとブラウザのline-heightの計算方法には根本的な違いがあります。
Figmaの場合： Figmaはline-heightの余白をWebに近い形で分配するようになりましたが、フォントメトリクスの扱いがブラウザとは異なるため、テキスト周りの余白に差が出ます。
ブラウザの場合： line-heightは「行ボックス全体の高さ」です。余白の配分はフォントのメトリクス（ascender/descender）に依存し、フォントによって上の余白が多かったり下が多かったりします。Figmaとブラウザではこのメトリクスの解釈が異なるため、同じ値を指定しても見え方が変わります。
これが原因で、Figma上では要素間の余白が8pxに見えるのに、ブラウザでは6pxに見えたり10pxに見えたりします。
/* 対策：line-height起因のズレを制御する */
/* 1. 見出しはline-heightを詰める */
h1, h2, h3 {
line-height: 1.3;
/* Figmaの値をそのまま使わず、ブラウザで見て調整 */
}
/* 2. テキストブロックの上下余白を予測可能にする */
.text-block {
line-height: 1.8;
/* 行間の余白はline-heightで制御し、
要素間の余白はmargin/gapで制御する */
}
/* 3. text-box-trimが使えれば根本解決（Firefox未対応に注意） */
h1 {
text-box-trim: both;
text-box-edge: cap alphabetic;
/* テキストの上下の余分な空白を削除 */
}text-box-trim（旧名：leading-trim）は、フォントメトリクスによる上下の余白を削除するプロパティです。Chrome 133+、Edge 133+、Safari 18.2+、Opera 125+で対応しており、グローバルで約82%のブラウザが対応しています。これが普及すればFigmaとブラウザのline-heightのズレは根本的に解消します。ただしFirefoxが未対応のため、プログレッシブエンハンスメントとして入れておくのが現実的です。
ズレの原因3：border-radiusの%指定とpx指定の挙動差
Figmaで角丸を設定するとき、デザイナーは「8px」のような固定値を使うことが多いです。ブラウザでもborder-radius: 8pxで同じ見た目になるはずですが、要素のサイズが変わると印象が変わります。
たとえば、Figmaで横幅400pxのカードにborder-radius: 16pxを指定したデザイン。ブラウザで横幅が320pxに縮まると、角丸の比率が変わって「丸すぎる」印象になります。
/* 対策：要素サイズに応じた角丸制御 */
/* 固定値：サイズが変わっても角丸は同じ */
.card {
border-radius: 12px;
}
/* 相対値：要素サイズに比例した角丸 */
.avatar {
border-radius: 50%; /* 正円 */
}
/* clamp：最小値と最大値を制限した角丸 */
.responsive-card {
border-radius: clamp(8px, 2vw, 16px);
/* 最小8px、ビューポート比例、最大16px */
}clamp()を使うと、画面幅に応じて角丸が滑らかに変化します。スマホで「丸すぎる」PCで「角張りすぎ」という問題を防げます。
ただし、すべてのborder-radiusにclampを入れるのは過剰です。ボタンやバッジのように小さな要素は固定値（4px, 8px）で十分。大きなカードやセクションの角丸だけclampにするのが実用的です。
ズレの原因4：色の見え方が環境で異なる
同じ#3B82F6（青）でも、MacとWindowsでは色の見え方が違います。原因はカラーマネジメントです。
Macは広色域（Display P3）ディスプレイを採用しているモデルが多く、sRGBの色をP3に変換して表示します。Windowsの多くのディスプレイはsRGBです。FigmaのデザイナーがiMacの広色域ディスプレイでデザインした色は、WindowsのsRGBディスプレイでは少し違って見えます。
/* 対策：色空間を意識したカラー指定 */
/* 従来のsRGB指定 */
.button {
background-color: #3b82f6;
}
/* Display P3対応ディスプレイ向け */
@supports (color: color(display-p3 0 0 1)) {
.button {
background-color: color(display-p3 0.231 0.510 0.965);
}
}ただし、実務ではここまでやる必要はほとんどありません。色のズレが問題になるのはブランドカラーが厳密に管理されている大企業サイトくらいです。
それより効果的なのは、デザイナーにFigmaのカラープロファイル設定を確認してもらうことです。Figmaはデフォルトで「sRGB」ですが、プロジェクトによっては「Unmanaged」になっていることがあります。これが原因で色がズレるケースは意外と多いです。
クライアントへの説明：「完全一致は無理」をどう伝えるか
デザインカンプと実装のズレを指摘されたとき、最も重要なのは「なぜ完全一致しないのか」を説明できることです。
案件で効果的だった説明の仕方はこうです。
「Figmaは1つの固定された環境でデザインを表示していますが、Webサイトはユーザーのブラウザ・OS・ディスプレイの組み合わせで表示が変わります。スマートフォンだけでもiPhoneとAndroidで見え方が異なります。デザインカンプは”設計図”であって、実際の建物とは素材の質感が異なるのと同じです。ただし、フォントサイズ・余白・色の値はデザイン通りに実装しています。」
この説明に加えて、Mac/Windowsの比較スクリーンショットを並べて見せると、技術的な問題であることが伝わりやすくなります。
まとめ
今回は、デザインカンプとブラウザ実装のズレが起きる原因と対処法を紹介しました。
- フォントレンダリング差はMac/Windowsの仕組みの違いが原因。font-weight: 400以上を基本にし、antialiasedを設定する
- line-heightの計算方式が異なるため、Figmaの値をそのまま使うと余白がズレる。text-box-trimの対応が広がってきているが、Firefox未対応のため手動調整も併用が必要
- border-radiusは要素サイズが変わると印象が変わる。大きな要素にはclamp()で対応
- 色のズレはカラーマネジメントの差。FigmaのカラープロファイルがsRGBか確認する
「Figma通りに作ったのに違う」と言われたとき、原因を技術的に説明できるとクライアントの信頼感が上がります。完全一致は無理ですが、「なぜズレるのか」「どこまで詰められるのか」を明確にすることで、修正依頼の回数も減ります。
株式会社ファストコーディングでは、デザインの再現性にこだわったコーディングをお手伝いしています。「デザイン通りに実装してほしい」「実装のクオリティを上げたい」という方は、お問い合わせフォームからお気軽にご連絡ください。
