パソコンでは読めたのに、スマホで見ると小さいんです。何サイズなら安心ですか？
PORT編集部作っている画面と見る画面が違うと起きやすい悩みです。数字だけで決めず、本文からサイズを選び、実際の表示で確かめる方法を整理します。
文字サイズは、編集画面の数値よりも掲載された大きさで決めます。本文と日付などの必須情報を読めるサイズにしてから、見出しとの差を作りましょう。
文字サイズとは？
文字サイズとは、文字の大きさを指定する値のことです。例えば、見出しを本文より大きくすると、先に読む場所を示せます。
px（ピクセル）とは？
px（ピクセル）とは、画面上の大きさなどを表す単位のことです。例えば、Web本文に16pxと指定して大きさを調整します。画像内の文字は、画像が縮小されると一緒に小さくなります。
初心者向けの体験会
10月5日 開催
必要な情報が同じ強さに見える。
見出しは大きく、本文と日時も読めるまま。
文字サイズは、見る画面と役割で決める
同じサイズ指定でも、書体の字面や線の太さによって大きさの印象が変わります。さらにSNS画像は、元の画像が画面幅に合わせて縮小されます。編集画面で大きく見える文字が、公開後も同じ大きさとは限りません。
Web・SNS・資料で条件が違う
| 作るもの | 確認する場所 |
|---|---|
| Web記事 | スマホの本文・拡大表示・画面幅 |
| SNS投稿の画像 | スマホのフィードで縮小された状態 |
| バナー | 実際に掲載する枠の大きさ |
| スライド | 会議画面や投影したときの見え方 |
Webで使うpxと、画像・資料の制作ツールに表示されるサイズの数値は、そのまま比較できないことがあります。ツールの単位と、書き出した後の表示サイズを分けて考えましょう。
本文からサイズを決める
スマホの投稿・Web本文・投影する資料を区別する。
長い説明と必須情報を読める大きさにする。
本文のサイズが決まってから、見出しを大きくする。
1．読む量と掲載場所を決める
短い告知なのか、説明をしっかり読む記事なのかを決めます。長い本文なら、文字サイズだけでなく行間や1行の長さも確認します。
2．本文を読める大きさにする
Web本文なら、たとえば16px前後から試し、実際の書体と画面で調整する方法があります。これは全ての用途に通用する最低値や正解ではありません。小さな注釈まで無理なく読めるかが判断の中心です。
3．見出しと補足の差を作る
本文を決めたら、見出しを少し大きく、補足は控えめにします。本文16px・小見出し20px・見出し28pxなどは試作の一例。見出しが長ければ、改行も含めて調整します。
役割ごとのサイズをメモし、同じ階層の見出しへ同じ数値を使いましょう。
画像の文字が小さくなる仕組み
幅1080pxの画像が、画面上で幅360pxに縮小されると、全体は約3分の1の大きさになります。画像内の文字の高さが48pxなら、単純な比例では画面上で約16px相当になります。ただし、ツールの「文字サイズ48」が実際の文字の高さ48pxとは限りません。
文字を大きくすると、全部の情報が入りません。小さくするしかないですか？
PORT編集部要点を1枚に残し、説明を次の画像へ分ける方法もあります。必要な内容を読める状態で見せることを優先し、文字を小さくして詰め込むのを避けましょう。
サイズだけで直らないとき
文字の実際の高さが48pxある例。
幅が1/3になるので、文字も約1/3の大きさになる。
- 細い線が弱いなら、太さを変える
- 文字と背景が近い色なら、濃淡を調整する
- 文章が密集しているなら、行間を広げる
- どこを読むか迷うなら、情報の順番と位置を整理する
文字を大きくするだけで解決しようとすると、見出しが何行にも折れて、逆に読みにくくなる場合があります。行間・文字間隔や文字の強弱も一緒に確認しましょう。
公開前に読むチェック
本文・見出し・日付のある短い告知を作り、パソコンとスマホで比べます。文字を追うために毎回拡大が必要なら、サイズや情報量を見直しましょう。Webの記事なら、読者が文字を拡大した場合も、重なりや切れが起きない作りが大切です。
書体そのものの選び方は、フォントの選び方へ。文字サイズと表示倍率の考え方はW3C「Resize Text」も参考になります。
