UI の基本としてのタイポグラフィを Fluent 2 から考える

はじめに

UI の基本はタイポグラフィにあると私は感じています。文字のフォント、要素ごとの文字サイズ、太さ、行間を先に決めないと、画面全体の骨格がなかなか定まりません。

タイポグラフィというと見た目の話に見えますが、実際には読みやすさや迷いにくさを決める設計です。文字のルールがそろうと、画面全体にも統一感が出ます。

今回は、Fluent 2 Typography の一次情報をもとに、Fluent 2 がどのようにタイポグラフィを設計しているのかを整理します。そのうえで、業務アプリの一覧画面にどう当てはめるかを具体例で見ていきます。

今回のゴール

• Fluent 2 のタイポグラフィ設計の考え方を理解する
• 文字サイズ、行間、太さを役割ごとに決める考え方をつかむ
• Web の業務アプリの一覧画面で使える設計例を見る
• CSS カスタムプロパティ（再利用しやすい定数）に落とし込むイメージを持つ

なぜタイポグラフィが UI の基本なのか

Fluent 2 Typography の冒頭には、次の考え方があります。

Clear typographical hierarchy organizes and structures content, making it easy for people to find their way through an experience.
— Fluent 2 Typography

要するに、タイポグラフィは文字の見た目を整えるだけのものではありません。情報の優先順位を見える形にして、利用者が画面を読み取りやすくするための仕組みです。

特に業務アプリでは、一覧、詳細、フォーム、確認ダイアログのように情報量の多い画面が増えます。このとき、都度感覚で文字サイズを決めるより、先に文字のルールを決めておくほうが、UI 全体の判断がぶれにくくなります。

Fluent 2 のタイポグラフィ設計で押さえたい点

Segoe UI を中心にしつつ、プラットフォームではネイティブフォントを使う

Fluent 2 では Segoe UI が主要な書体です。一方で、各プラットフォームではネイティブのシステムフォントも使います。ここでいうネイティブのシステムフォントとは、その OS で標準的に使われているフォントのことです。利用者にとって見慣れた文字になるため、自然で読みやすい体験につながります。

Web であれば、まず Segoe UI を軸にしつつ、フォールバックとしてシステムフォントを含める設計が扱いやすいです。以下は、Fluent 2 の原則を踏まえた実装例です。

font-family: "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

type ramp を先に決める

type ramp は、見出しや本文などの役割ごとに、文字サイズ、行間、太さを一覧にした設計ルールです。Fluent 2 の Web 向け type ramp では、役割ごとに文字サイズ、行間、太さが整理されています。代表的なものは次のとおりです。

役割	Weight	Size / Line-height
Caption 2	Regular	10px / 14px
Caption 1	Regular	12px / 16px
Body 1	Regular	14px / 20px
Subtitle 2	Semibold	16px / 22px
Subtitle 1	Semibold	20px / 26px
Title 3	Semibold	24px / 32px
Title 2	Semibold	28px / 36px
Title 1	Semibold	32px / 40px
Large Title	Semibold	40px / 52px
Display	Semibold	68px / 92px

Strong 系は同じサイズのまま、Semibold や Bold にして強調します。Semibold は通常の太さより少し強い太さです。Bold はさらに強い太さです。ここで大事なのは、サイズだけでなく、行間と太さもまとめて役割として決めていることです。

文字サイズ、行間、太さは役割ごとに決める

Fluent 2 を見ていると、文字サイズは単体で選ばれていません。たとえば本文は 14px / 20px、やや強い見出しは 16px / 22px や 20px / 26px、ページタイトルは 24px / 32px 以上というように、意味のある段差で整理されています。

この考え方を使うと、次のように決めやすくなります。

• size（文字サイズ）: 情報の優先度
• line-height（行間）: 読みやすさ
• weight（太さ）: 同じサイズの中での強弱

つまり、「目立たせたいから大きくする」のではなく、その文字が何の役割を持つのかで決めるのが先です。

sentence case を使い、all caps は避ける

Fluent 2 は sentence case を推奨し、all caps は避けるとしています。sentence case は、英文の見出しやラベルで先頭だけを大文字にし、それ以外は通常の大文字小文字で書く方法です。all caps は、すべてを大文字で書く方法です。

日本語 UI では英字 UI ほど影響は大きくありませんが、ボタン名、列名、英語ラベル、ステータス表示が混在する場面では同じ考え方が役立ちます。たとえば CREATE NEW ORDER のような全大文字より、Create new order のほうが読みやすくなりやすいです。

baseline alignment と左揃えを基本にする

Fluent 2 は baseline alignment を重視しています。baseline alignment とは、文字の下側の基準線をそろえる考え方です。これにより、画面の縦方向の並びが整い、一覧やフォームが見やすくなります。

また、LTR（左から右に読む言語）では左揃えが基本です。英語のような言語では、左揃えにすると視線の流れが自然になります。Web の業務アプリでも、タイトル、列見出し、本文、補足テキストは左揃えを中心にしたほうが見やすくなります。右揃えや中央揃えは、数値や短い補足など、役割がはっきりしている箇所に限定するのがよいと思います。

コントラスト比もタイポグラフィ設計の一部

Fluent 2 Typography では、標準テキストは 4.5:1 以上、large text は 3:1 以上のコントラスト比が必要とされています。コントラスト比とは、文字色と背景色の見分けやすさを表す比率です。large text は大きい文字のことで、おおむね 18.5px 以上の太字、または 24px 以上の通常の文字が目安です。

文字サイズや太さを決めても、コントラストが足りないと読みやすさは確保できません。タイポグラフィは色の設計と切り離さずに考える必要があります。

業務アプリの一覧画面に当てはめるとどうなるか

ここでは、Fluent 2 を参考にした Web 向けの「案件一覧」画面を例にします。

画面内の役割と type ramp の対応例

UI 要素	役割	Fluent 2 参照	Size / Line-height	Weight	メモ
画面タイトル	最上位見出し	Title 3	24 / 32	600	一覧画面では十分大きい
セクション見出し	ブロック見出し	Subtitle 1	20 / 26	600	フィルター領域など
テーブル列見出し	構造のラベル	Body 1 Strong	14 / 20	600	少し強く見せる
行の主情報	一覧の本文	Body 1	14 / 20	400	案件名、顧客名
行の補助情報	補足情報	Caption 1	12 / 16	400	更新日時、担当者
ステータス	短い強調情報	Caption 1 Strong	12 / 16	600	色だけに頼らない
フィルターラベル	入力補助	Caption 1 Strong	12 / 16	600	ラベルを見つけやすくする
空状態の説明	補足メッセージ	Body 1	14 / 20	400	長文でも読みやすい

このくらいに絞ると、一覧画面では十分に運用できます。大切なのは、1 画面の中で使う文字スタイルを増やしすぎないことです。

画面イメージの考え方

• 画面タイトルは Title 3
• フィルターやサマリーの見出しは Subtitle 1
• テーブルの列見出しは Body 1 Strong
• 行の主要テキストは Body 1
• 補足情報やメタデータは Caption 1

このように、どこまでが構造で、どこからが本文かを type ramp で分けると、表の密度が高くても読みやすさを保ちやすくなります。

ここまでが設計判断です。次は、この判断をそのまま実装に落とし込みやすいように、CSS トークンとして定義してみます。

CSS トークン例（Web 前提）

以下は、Fluent 2 の考え方を参考にした業務アプリ向けの最小構成です。CSS カスタムプロパティを使うと、文字サイズや色の値をまとめて管理しやすくなります。

:root {
  --font-family-app: "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --font-size-caption-1: 12px;
  --line-height-caption-1: 16px;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;

  --font-size-body-1: 14px;
  --line-height-body-1: 20px;

  --font-size-subtitle-1: 20px;
  --line-height-subtitle-1: 26px;

  --font-size-title-3: 24px;
  --line-height-title-3: 32px;

  --color-text-primary: #242424;
  --color-text-secondary: #616161;
  --color-text-accent: #0f6cbd;
  --color-bg-canvas: #ffffff;
  --color-bg-subtle: #f5f5f5;
}

.page-title {
  font-family: var(--font-family-app);
  font-size: var(--font-size-title-3);
  line-height: var(--line-height-title-3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-align: left;
}

.section-title {
  font-family: var(--font-family-app);
  font-size: var(--font-size-subtitle-1);
  line-height: var(--line-height-subtitle-1);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-align: left;
}

.grid-header {
  font-family: var(--font-family-app);
  font-size: var(--font-size-body-1);
  line-height: var(--line-height-body-1);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-align: left;
}

.grid-cell {
  font-family: var(--font-family-app);
  font-size: var(--font-size-body-1);
  line-height: var(--line-height-body-1);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
}

.grid-meta,
.field-label,
.status-text {
  font-family: var(--font-family-app);
  font-size: var(--font-size-caption-1);
  line-height: var(--line-height-caption-1);
}

.grid-meta {
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
}

.field-label,
.status-text {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

実装時の運用ルール

.data-grid {
  color: var(--color-text-primary);
  background: var(--color-bg-canvas);
}

.data-grid th,
.data-grid td {
  vertical-align: baseline;
}

.data-grid th {
  text-align: left;
}

.data-grid td.is-numeric {
  text-align: right;
}

• 見出しは Title 3 / Subtitle 1 までにとどめる
• テーブル内の基本は Body 1
• 補助情報は Caption 1
• 太字は重要だから使うのではなく、同じ階層の中で見分けやすくするために使う
• 右揃えは数値列など必要な箇所だけに絞る

おわりに

Fluent 2 のタイポグラフィを見ていて参考になるのは、見た目の好みより先に、役割ごとの文字ルールを決めていることです。

• Segoe UI を中心にしつつ、環境に応じてネイティブフォントを使う
• type ramp で情報の階層を作る
• size / line-height / weight を役割で決める
• sentence case を基本にし、all caps は避ける
• baseline alignment と左揃えでリズムを作る
• コントラスト比 4.5:1 / large text 3:1 を守る

業務アプリでは、情報量が増えるほど、感覚だけに頼った文字設計では整理しきれなくなります。だからこそ、まず type ramp を先に決めると、UI 全体の迷いが減ります。特に一覧画面のように情報密度が高い UI では、この効果が大きいです。ここを先に整えるだけで、一覧、詳細、フォームの設計がかなり進めやすくなります。