KumiFont Column
Figmaでフォント比較を効率化する方法
Figmaで複数の日本語フォントを比較するときの進め方と、確認すべきポイントを解説します。
Figmaでフォント比較が難しい理由
Figmaではフォントを簡単に切り替えられますが、実際の画面に近い状態で比較しないと判断を誤ることがあります。見出しだけでなく、本文、ボタン、注釈、フォームまで確認することが大切です。
比較用のテキストを固定する
フォント比較では、毎回同じ文章を使うのがおすすめです。文章が変わると、フォントの違いではなく文章量や改行位置の違いに影響されてしまいます。
4パターンで確認する
実務では、見出し、本文、ボタン、キャプションの4種類で比較すると判断しやすくなります。特にキャプションや注釈は小さい文字になるため、フォントの読みやすさの差が出やすい部分です。
PCとスマホの両方で見る
PCで美しく見えるフォントでも、スマホでは線が細く見えたり、文字が詰まって見えたりすることがあります。Figma上でも幅を変えて確認し、実装後の見え方に近づけましょう。
まとめ
Figmaでのフォント比較は、見た目の好みだけでなく、実際のUIで使えるかを判断する作業です。KumiFontのような比較ツールと併用すると、同じ文章で効率よく検証できます。