文字の階層を設計する

この記事で学ぶこと

• 情報の役割に合わせて文字の階層を作ります。
• 実際の文章で一行の長さと行間を調整します。
• 拡大表示でも情報と操作が保たれるか確認します。

文章の役割を先に分類する

文字サイズを触る前に、文章を結論、説明、補足へ分けます。

講座案内なら、何を学ぶかが結論、演習や対象の説明が本文、用語や条件の補足が注記です。

制作側が強調したい単語だけを大きくするのではなく、読者の判断に必要な順番を決めます。

「初心者歓迎」「新企画」「少人数」「開催決定」を同じ強さで並べると、商品内容が見えなくなります。

一番伝えたい一文を選び、残りがその説明になるか確認します。

文章自体の重複を整理しないまま見た目で階層を作ろうとすると、太字が増えていきます。

見出しは名詞だけでなく、本文の要点が分かる言葉へします。

「内容」より「5枚の提案資料を作る演習」と書けば、見出しだけでも読み進める理由が分かります。

長くなりすぎる場合は、主張を一つに絞り、条件を本文へ移します。

重要な条件を補足へ分類しないことも必要です。

追加費用や参加制限は、読者の判断を変える情報です。

小さくして目立たなくするのではなく、該当する説明の近くへ読みやすく置きます。

階層は情報の誠実な優先順位を表すものです。

本文の読みやすさを確認する人は、制作者だけにしないでください。

内容を知っている人は省略や誤字を補って読めるためです。

対象に近い人へ実際の段落を読んでもらい、戻って読んだ箇所や意味を取り違えた箇所を確かめます。

文字設定だけでなく文章の問題も区別します。

本文を基準に大きさを決める

本文は、最も長く読む文字として先に決めます。

Webの試作で16pxを出発点にする方法はありますが、書体、画面、利用者によって読みやすさは変わります。

投影する資料に同じ数値を持ち込まず、最後列など実際の距離で確認してください。

本文が決まったら、見出しを一段大きく、注記を役割が分かる程度に分けます。

16、24、32pxなど少数の段階から試せます。

数値の比率を整えることが目的ではなく、見出しと本文の違いをすぐ見分けられることが条件です。

微妙に違うサイズを多く作らないようにします。

小さくすれば一枚に入るからといって、注記へ情報を押し込めないでください。

読み切れない量なら、重複を削る、ページを分ける、詳細資料へ移す判断が先です。

本文を読めない大きさへ下げて成立したレイアウトは、情報設計の問題を隠しています。

長い見出しが二行になる状態でも確認します。

一行の仮タイトルだけで決めると、本番で見出しが枠からあふれたり本文と接近したりします。

大きさ、行数、余白をまとめて調整し、内容の増減に耐えるルールへしてください。

太さと書体を意味で使い分ける

書体を増やすより、同じ書体の太さを役割で使い分ける方法から始めます。

見出しは太く、本文は通常、重要な語は限定して強調します。

全段落が太字なら差が消えるため、本当に拾ってほしい一文や語へ絞ります。

日本語では書体によって同じサイズでも見え方が異なります。

数字、英字、括弧が混ざる文章も確認してください。

見出しだけ美しくても、本文の記号が見分けにくければ用途に合いません。

複数の端末で表示する場合は、代替書体になったときの折り返しも点検します。

斜体、下線、色を同時に使うと、何の差なのか分からなくなることがあります。

下線はリンクに使うなど、役割を決めると読者が予測できます。

リンクでない重要語をリンクと同じ見た目にする場合は、押せると誤認しないかを確認します。

強調の数を一律に固定する必要はありません。

比較表など、複数の項目を同じ強さで示す場面もあります。

ただし強調した理由を説明できる状態にします。

「目立たせたいから」ではなく「判断に必要な違いだから」と言えるかを点検してください。

行間と一行の長さを整える

行間が詰まると隣の行へ移る位置が分かりにくくなり、広すぎると一つの段落として追いにくくなります。

本文の行間は文字サイズに対する倍率で試し、長い段落を実際に読んで決めます。

特定の倍率が全書体に最適とは言えません。

一行が極端に長い場合は、次の行の始まりを探す負担が生じます。

画面いっぱいへ本文を広げず、最大幅を設ける方法があります。

逆に狭すぎると改行が続き、文のまとまりを追いにくくなります。

スマートフォンと大画面で、同じ文章を読み比べてください。

段落間の余白は行間と区別します。

段落内の行間より段落間を広くすれば、話題の区切りを表現できます。

ただし一文ごとに大きく空けると、理由と例のつながりが切れることがあります。

一段落が一つの論点になるよう、文章の構成も合わせて見直します。

見た目を揃えるための手動改行は慎重に使います。

画面幅が変わると不自然な位置で二重に折り返す場合があります。

タイトルなど意図した改行が必要な場所と、幅に応じて自然に折り返す本文を分け、表示条件ごとに確認します。

拡大と実際の読み方で検証する

本文を200％へ拡大し、文字や操作が欠けないかを確認します。

W3CのWCAGには文字拡大やリフローの基準があります。

ここではすべての適合確認を行うわけではありませんが、標準サイズで収まったことだけを完成条件にしない姿勢が必要です。

架空の案内では、見出しが二行になったときに日時へ重なっていました。

文字を小さく戻すのではなく、見出し領域が内容に応じて伸びるよう直します。

固定の高さに文章を押し込める設計は、翻訳や内容更新でも問題を起こす可能性があります。

確認者には、最初に読んだ文字、要点、探しにくかった条件を聞きます。

最初に補足が目に入るなら、大きさや位置が意味と合っていません。

単に読めたかだけでなく、意図した順で内容を理解できるかも評価します。

完成時には、本文、見出し、補足のサイズ、太さ、行間を一枚の見本へ残します。

例外の条件も一言添えれば、次のページでも再利用できます。

数値だけの表ではなく実際の日本語を組んだ見本にすると、担当者間の認識を揃えやすくなります。

数値を比べる表では、本文と異なる調整が必要なことがあります。

桁が揃う数字、単位の表記、列の整列を確認し、本文の書体をそのまま使う理由を検討します。

役割ごとに読めることが目的なので、すべての文字へ同じ設定を押し付ける必要はありません。

まとめ

文字は、文章の役割を分けてから大きさや太さを決めます。

本文を読める状態にし、見出しと補足へ意味のある差を付けます。

数字の美しさより、実際の文章と拡大表示で読む順番と内容の保持を確かめてください。

• 情報の役割に合わせて文字の階層を作ります。
• 実際の文章で一行の長さと行間を調整します。
• 拡大表示でも情報と操作が保たれるか確認します。