こんにちは！UIデザイナーのYunyです。
最近、Figmaでプロジェクトの画面を設計していたとき、ふと「なんか野暮ったいな」と感じる瞬間がありました。
レイアウトも配色もルール通りなのに、なぜか画面全体が重く見えるのです。
原因を探っていくと、ほんの1pxの行間の詰まりと、見出しのウェイト（太さ）のミスマッチに行き着きました。
そこを微調整しただけで、画面全体の圧迫感がなくなり、情報がすっきりと整理された感覚がありました。
文字は、画面の大部分を占める要素です。
だからこそ、タイポグラフィはWeb UIにおいて単なる情報伝達の手段ではなく、デザインの骨格そのものになります。
決してUIの「要（すべてを担う中心）」ではないかもしれませんが、全体のクオリティを底上げし、プロの仕事として成立させるための「最後の決め手」になるのです。
- Webデザインにおける文字の扱いに悩んでいるデザイナーの方
- 日常のUIをもっと美しく、かつ使いやすくしたいと考えている方
- タイポグラフィの論理的な設計ルールやトークン管理を知りたい方
Web UIのクオリティを決定づける「最後の決め手」
Webデザインにおいて、私たちはつい写真やレイアウト、派手なアニメーションに気を取られがちです。
しかし、ユーザーがWebサイトやアプリを開く本来の目的は「情報を読むこと」です。
文字のデザインには、パッと見たときの視認性、文章としての読みやすさである可読性、そして誤読を防ぐ判読性の3つの要素があります。
これら3つの視点からタイポグラフィを最適化することは、そのままユーザー体験（UX/UI）の質に直結します。
近年、Webパフォーマンスの文脈ではLCP（最大視覚コンテンツ表示）やINP（インタラクション応答性）といった技術的な指標が重視されています。
もちろんそれらも重要ですが、「認知負荷（Cognitive Load）」を下げることこそが、人間にとって一番のパフォーマンス最適化ではないでしょうか。
パッと見た瞬間に「どこから読めばいいのか」が分かる画面は、ユーザーの脳内処理コストを大きく下げてくれます。
文字のジャンプ率（サイズの比率）やウェイトを適切にコントロールし、自然なビジュアル・ヒエラルキー（情報の優先順位）を構築することが、迷いのない心地よい体験を生み出します。
ジャンプ率と視認性を極める実践アプローチとプラグイン
では、具体的にどのようにして美しいヒエラルキーを作れば良いのでしょうか。
感覚だけで文字サイズを決めてしまうと、画面全体にまとまりがなくなり、実装時にもエンジニアを困らせてしまいます。
タイポグラフィの設計には、数学的なスケール（規則性）を取り入れることが重要です。
私はFigmaで作業する際、「Typescale」というプラグインを積極的に活用しています。
このツールを使うと、ベースとなる本文のサイズ（例：スマホUIのフォントサイズ目安として推奨される16px前後）に対して、1.25倍や1.414倍、あるいはデザインの黄金比である1.618倍といった一定の比率で、見出しから注釈までのサイズ階層を自動的に生成してくれます。
タイプスケールの基礎概念や、Figma上での具体的なタイポグラフィ管理については、私が過去に読んでとても参考になった記事があるので、こちらに貼っておきますね。
論理的なジャンプ率を設定することで、デザインに説得力が生まれ、どの画面でもブレない一貫した視認性を担保できるのです。
また、文字周りの余白である行間（line-height）と、文字間隔（トラッキングやカーニング / letter-spacing）の調整も重要です。
「Noto Sans JP」や「ヒラギノ角ゴシック」など、おすすめの日本語Webフォントであっても、ベタ打ちのままだと少し窮屈に見えることが多いため、用途に合わせた適切な行間を設定しましょう。一般的なWeb UIにおけるline-heightのおすすめの目安は以下の通りです。
- 大見出し（H1, H2等）：1.2〜1.3倍（文字が大きい分、行間を詰めないと間延びして見えるため）
- 小見出し（H3, H4等）：1.3〜1.4倍（本文より少し詰めることで見出しとしての塊感を出す）
- 本文（Body）：1.5〜1.7倍（読者が無理なく視線を移動できる、最も読みやすい余白）
- 注釈・キャプション：1.4〜1.5倍（文字サイズが小さいため、本文よりわずかに詰める）
このように、文字の役割やサイズに合わせて行間の比率を調整し、周囲の余白（マージンやパディング）とのバランスをとるのが、心地よいUX/UIの基本です。
【実務体験】ダークモードにおけるコントラストの課題
タイポグラフィの設計において、私が過去のクライアントワークで実際に直面した課題があります。
それは、「ライトモードとダークモードでのコントラストと視認性の違い」です。
あるSaaSプロダクトの管理画面をデザインした際、ライトモードでは完璧に美しく見えていた文字が、ダークモードに切り替えた途端にギラギラと眩しく、読みにくくなってしまったことがありました。
原因は、背景色と文字色の明度差（コントラスト比）が強すぎたことと、ライトモードと同じウェイト（太さ）を維持してしまったことでした。
色彩心理学において、白や黄色などの明るい色は実際よりも大きく・太く見える「膨張色」、黒やネイビーなどの暗い色は実際よりも小さく・細く見える「収縮色」と呼ばれます。
ダークモードの暗い背景（収縮色）に対して純白の文字（膨張色）を置くと、この膨張効果が極端に強く働き、白い文字が太く滲んで見えるハレーションという現象が起きやすくなります。
これを解決するため、WCAG（Web Content Accessibility Guidelines）のアクセシビリティ（A11y）コントラスト基準（本文で4.5:1以上）を参考にしつつ、純白（#FFFFFF）ではなく少しグレーを帯びた色（#E0E0E0など）を文字色に採用しました。
さらに、バリアブルフォントを活用して、ダークモード時のみ文字のウェイトをほんの少しだけ細く調整するというアプローチをとりました。
この微細な調整によって、長時間の作業でも目が疲れにくい、プロフェッショナルな管理画面のUX/UIを実現することができたのです。
トークン化とMDファイル管理：進化するデザインシステムの運用
最後に、こうしたタイポグラフィのルールをどのようにチームで運用していくかという点に触れておきます。
最近のトレンドとして、Figma内のVariables（変数）機能を使うだけでなく、デザイントークンをJSON形式やMarkdown（MDファイル）で一元管理し、コードと同期させる手法が注目されています。
これまで、デザイナーがFigma上で定義したフォントサイズや行間は、エンジニアが手動でCSSなどに書き写す必要がありました。しかし現在では、W3CのDesign Tokens Community Group (DTCG) が推進するような標準フォーマットを用いることで、デザインの数値をそのままプログラムが読み込めるデータとして扱えるようになっています。
過去執筆した記事でも紹介したように、具体的には以下のような運用を行います。
- フォントファミリー、サイズ、行間、ウェイトといったタイポグラフィの要素を、
typography.heading.h1のようなデザインシステムにおける明確な命名規則（ネーミングコンベンション）で定義し、JSONファイルとして出力・管理する。 - チーム全体での仕様の共有（ドキュメント化）を目的として、このJSONデータを元にMarkdownファイルを自動生成し、GitHub等で誰でも閲覧しやすくする。
このように構築することで、デザイナーが決めた文字のルールがJSONを経由してそのままエンジニアの実装コード（CSSやSass）へと自動変換されるようになります。
このようなDesign Ops（デザイン運用）の視点を持つことで、プロジェクトがスケールしても「文字のサイズが少しずつ違う」といった不整合を防ぐことができます。
タイポグラフィは、デザインとエンジニアリングを繋ぐ共通言語でもあるのです。
終わりに
最後までお読みいただき、ありがとうございます！
Web UIにおけるタイポグラフィは、地味で根気のいる作業かもしれません。
しかし、その1pxの余白やウェイトへの執着が、最終的なプロダクトの「手触り感」やブランドの温度感を決定づけます。
細部まで丁寧に設計された文字は、ユーザーに無意識の安心感を与え、それがプロダクトに対する信頼性へと繋がっていくのです。
明日からのFigmaでの作業で、ぜひ文字のジャンプ率やトークンの管理方法に少しだけ意識を向けてみてください。
きっと、皆さんのデザインする画面がもっと見やすく、もっと心地よいものに変わっていくはずです。
これからも、美しいタイポグラフィの追求を一緒に楽しんでいきましょう。
それでは、良いデザインライフを！
