文字サイズがばらばらな案内を、三つの役割で整理しよう

ページ名も開催日も注意書きも大きくすると、全部が目立つ案内になります。見出しを探すつもりが、強調された言葉を順番に読むだけになっていないでしょうか。まず文字の役割を分け、サイズの候補を減らして比べてみます。

ここでは架空の朗読会「夕暮れの物語」の紹介ページを題材にします。紙やデザインツールで行う練習です。数値は比較を始めるための編集上の提案であり、どのサイトにも使える正解や読みやすさの保証ではありません。

文字の一覧に、役割を先に付ける

原稿から「夕暮れの物語」「会の内容」「参加方法」「作品を持ち寄って読む小さな集まりです」という文を抜き出します。このうち、最初はページ名、次の二つは節の見出し、最後は本文です。

「目立たせたいから大きくする」より前に、それぞれが何を案内する文字かを書いてください。開催日時は大切な情報ですが、それだけでページ名と同じ役割になるわけではありません。日時を含む節に見出しを置き、その中で読めるようにする案もあります。

今回の作業中は、文章の内容と表示順を変えません。順番自体に迷う場合は、ワイヤーフレームで二案を比べる記事を先に使いましょう。比較の途中で原稿まで変えると、どの変更を評価しているか曖昧になります。

三段階の候補を、同じ書体で当てはめる

練習の出発点として、ページ名を32、節の見出しを24、本文を16のサイズにします。使うデザインツールの同じ単位でそろえてください。これは実装用の指定ではなく、差を比較する仮の組み合わせです。

まず同じ書体、同じ文字色で並べます。文字サイズの違いを見る段階で、見出しごとに色や書体まで変える必要はありません。見出しの太さも、同じ役割どうしではそろえます。

本文が読みにくければ、見出しとの差を守るために小さいまま我慢しないでください。本文を大きくした案を作り、その後で見出しとの釣り合いを見直します。三段階は上限の規則ではなく、役割の違いを説明できるか試すための制約です。

この段階の文字ルールは、次の三行です。サイズは同じツール・同じ単位で比較するための仮値です。

役割	原稿と仮のサイズ
ページ名	「夕暮れの物語」：32
節の見出し	「会の内容」「参加方法」：24
本文	「作品を持ち寄って読む小さな集まりです」：16

後で本文を大きくしたら、この表も更新します。画面案と表で異なる値を残さないようにしてください。

大きい文と、話題の入口を一致させる

失敗例として、短い「参加無料」だけをページ名より大きくし、「参加方法」を本文と同じ扱いにした案を考えます。無料という条件は見つかっても、申し込みの説明がどこから始まるか分かりにくい構成です。

修正案では「参加方法」を節の見出しへ戻し、無料という条件をその節の本文に含めます。条件の文を隠したり薄くしたりせず、ほかの本文と同じ読みやすさで置きます。この例の無料という設定は模擬案件用であり、実際の料金条件として流用しません。

案を見直すときは、ページ名と節の見出しだけを指して読んでみてください。「何の案内か」「どの話題が続くか」が原稿と対応していれば、サイズを決めた理由を説明できます。自分だけの点検なら、初見の利用者にも伝わったと断定はしません。

長い見出しを入れ、狭い枠でも比較する

短い見出しだけでは問題に気付けないことがあります。「参加方法」を「初めて参加する方へのご案内」に替えた確認用コピーを作り、広い枠と狭い枠に同じ設定で置きます。

途中で文字が欠けないか、行が重ならないか、本文との境目を追えるかを確認します。狭い枠へ収めるために本文を急に小さくする前に、枠の余白や見出しの行数を見直しましょう。実装後の表示は、この紙やツール上の比較とは別に確認する必要があります。

余白を調整する段階では、情報のまとまりを余白で伝える記事を参照できます。一度に直す項目を決め、文字サイズを変えた版と余白を変えた版を混同しないよう保存します。

長い見出しでも、本文との境目が分かるか

制作中の案内からページ名、節の見出し、本文を一つずつ選び、役割と仮のサイズを一枚に記入します。変更前後を同じ幅で並べ、話題の入口を探して読んだ結果を一文で残しましょう。

完成物は数値の一覧だけでなく、「本文を読める大きさにしてから、節の見出しとの差を付けた」という判断の記録です。画面全体の優先順位を考える練習には、情報設計の無料レッスンも利用できます。