今日の問い
文字は読めますか。それとも、読み続けられますか。
30秒でつかむ
Type scaleは、文字サイズを役割ごとにそろえた体系です。 見出し、本文、補足の関係を保ちながら、 行長と行間を実際の日本語で調整します。
サイズだけを決めても足りません。 長文、混植、拡大表示で崩れないかまで確かめます。
30秒図解 · LESSON 21
階層図
文字の役割を、少数の規則へまとめる
サイズだけでなく行長、行間、太さ、改行を一緒に設計します。
- 01画面タイトル
- 02見出し
- 03本文
- 04補足
- 05操作ラベル
CLUE · 見抜く手掛かり
実際の日本語で読み続けられるか
TRAP · ありがちな罠
短いダミー文だけで決める
原則
最初に、文字の役割を減らします。 画面タイトル、セクション見出し、本文、補足など、 意味の違いがある役割だけを残します。 同じ役割には同じスタイルを使います。
階層はサイズだけで作りません。 太さ、行間、前後の余白も組み合わせます。 Apple HIGのTypographyは、 文字拡大後も相対階層を保つよう案内しています。
本文は、実際の日本語を入れて行長を見ます。 WCAG 2.2達成基準1.4.8では、 CJKの行幅を40字以内へ調整できることが、 AAAの一条件として示されています。 これは全画面の固定正解ではありません。 この講座では、40字を長文を試す初期上限として採用します。これはWCAGの要求そのものではなく、AAAの調整可能性を実務へ移すAMPLの初期判断です。実機と実文で最終判断します。
行間も、数字だけで決めません。 長文では次の行を追えるか、 二行のラベルでは部品が間延びしないかを見ます。 三行以上では詰めすぎを避けます。
日本語では句読点、括弧、和欧文混植、 禁則処理も読み心地を左右します。 JLReqは、日本語組版の基本版面、行組版、 約物や和欧文混植の要件を整理したW3Cノートです。 ブラウザ任せにせず、実文で不自然な改行を確認します。
日本語の基本版面、行組版、約物、和欧文混植を扱うW3C Working Group Note。
良い例と惜しい例
本文スタイルの決め方
スライダーを動かし、短いダミー文だけで決めた組版と、実文・拡大表示を確認した組版の差を比べてください。
スライダーを動かし、短いダミー文だけで決めた組版と、実文・拡大表示を確認した組版の差を比べてください。
Before
短文だけで決めたため、長文では一行が長く、行間が詰まり、括弧の前後で読みにくい改行が起きています。
After
実際の日本語で行長と行間を調整し、見出し・本文・補足の役割を保ったまま、200%拡大でも内容が欠けません。
AIへの指示例
目的: 日本語の予約変更画面に使う文字スタイルを定義する
制約: 書体は一系統から始める。固定高さで本文を切らない。文字拡大時に重要情報を省略しない
参照: visual-system.md、実際に使う日本語ラベルと説明文
受入条件: 役割、font-size、font-weight、line-height、最大行長を表にし、通常幅と200%拡大で主要3画面を確認する
確認問題
セルフチェック
1. 短いダミー文では読みやすかった本文が、実際の日本語では追いにくくなりました。次に何を確かめますか。
最終制作へ反映する
visual-system.mdの文字体系
視覚階層とレイアウト規則へ、文字の役割、サイズ、重み、行間、最大行長、日本語改行の確認項目を追記する。
Acceptance criteria
- 主要な文字役割が少数のスタイルへ対応し、同じ役割で値が揺れていない
- 実際の日本語と200%拡大で、欠落、重なり、不自然な改行を確認した記録がある
今日のまとめ
- Type scaleは、文字の役割と相対階層をそろえる
- 行長と行間は、実際の日本語と拡大表示で確かめる
- 次は、色を意味、コントラスト、状態へ結び付ける