本文へ移動

読みやすい行間の決め方|デザインで使える目安と文字組みの手順

第4章 文字とタイポグラフィ 読了目安 8分

INDEX目次

    文字は詰まっているのに、なぜか読む気にならない。バナーの説明文が、なんとなく素人っぽい。その原因、たいてい行間です。

    行間は好みで決めるものではありません。文字サイズの何倍にするかという目安があって、1行の長さで微調整します。数字で決められるので、センスの出番はありません。

    このレッスンでは、行間の目安、1行の長さとの関係、箇条書きの組み方、約物の空き、Q数の読み方まで順に説明します。読み終えたら、読みにくい文章を見て「行間が狭い」と原因を言えるようになりますよ。

    もくじ

    行間・字間・行長はどこの寸法か

    まず言葉の整理からです。文字まわりの3つの寸法は、指している場所が違います。

    行間・字間・行長がそれぞれどこの寸法を指すかを並べた分類図。行間は上下の行のあき、字間は文字と文字のすきま、行長は一行の長さを表す
    文字まわりの3つの寸法
    • 行間:上下の行の間隔。文字の下端から次の行の上端まで、または行の頭から次の行の頭まで(行送り)
    • 字間:横に並ぶ文字と文字のすきま
    • 行長:1行の長さ。1行に何文字入るか

    読みやすさに一番効くのは行間です。字間を1文字ずつ直しても、行間が狭いままなら読みにくさは消えません。順番としては、行間 → 行長 → 字間で見ていきます。

    欧文の資料では行間をリーディングと呼びます。活版印刷で行と行の間に鉛の板を挟んで間隔を作っていた名残です。Illustratorやフォントの解説で出てきたら、行送りのことだと思ってください。

    行間や字間、約物の空きをまとめて整える作業を文字組みと呼びます。文字を置く作業ではなく、文字と余白のバランスを決める作業です。

    本文の行間は文字サイズの1.5〜1.75倍

    日本語の本文なら、行送りを文字サイズの1.5〜1.75倍にします。16pxの文字なら24px〜28px。CSSのline-heightで言えば1.5〜1.75です。

    行間のBefore/After比較。同じ文章を行間1.0倍で組んだ詰まった状態と、1.7倍に広げて読みやすくした状態を並べた図解

    迷ったら1.7倍にしてください。日本語は漢字とかなが混ざって字面(文字の線が占める面積)が詰まって見えるので、欧文より広めが合います。

    用途で少し変わります。目安を表にしました。

    使う場所行送りの目安理由
    Webの本文1.7〜1.8倍画面は紙より読みにくい。広めに取る
    印刷物の本文1.5〜1.7倍紙は文字が締まって見える
    見出し・タイトル1.2〜1.4倍1行が短く、まとまりを見せたい
    キャッチコピー1.1〜1.3倍塊として見せる。空けすぎるとバラける
    注釈・キャプション1.5〜1.6倍文字が小さいぶん、詰まると読めない

    文字が大きいほど行間の倍率は下げます。見出しを本文と同じ1.7倍にすると、行がバラバラに離れて1つの見出しに見えません。大きい文字は狭く、小さい文字は広く。これだけ覚えておけば大きく外しません。

    1行の長さとセットで決める

    同じ行間でも、1行が長いと急に読みにくくなります。行の終わりから次の行の頭へ目を戻すとき、行が長いほど戻る先を見失うからです。

    日本語なら1行30〜40字が読みやすい範囲です。スマホなら20〜25字。それを超えるなら、行間を広げるか、文字を大きくして1行の文字数を減らします。

    1行の長さの確認
    • 1行が40字を超えていないか
    • 超えているなら、行間を1.8倍まで広げたか
    • 本文の幅そのものを狭められないか(左右に余白を作る)
    • PCで見たときだけ極端に長くなっていないか

    Webサイトの本文の幅が600〜700pxくらいに揃っているのは、この文字数に収めるためです。画面が広いからといって端まで文字を流すと、読める人が減ります。

    紙の実例では新聞が分かりやすいです。あれだけ紙が大きいのに、記事は何段にも割ってあります。1行を短く保つためです。文庫本も同じで、1行はだいたい40字前後に収まっています。手元にある本を1行数えてみてください。

    箇条書きの行間は2段構えにする

    箇条書きは行間を1種類にすると読みにくくなります。項目の中の折り返しと、項目と項目の切れ目が同じ間隔だと、どこまでが1つの項目か分からなくなるからです。

    箇条書きの組み方4手順
    1. 項目の中の行間は、本文と同じ1.5〜1.7倍にする
    2. 項目と項目の間は、そこにさらに0.5〜1行分を足す
    3. 行頭の記号と文字の間は0.5字ぶん空ける
    4. 折り返した2行目は、記号の下ではなく文字の頭にそろえる

    4つめは見落としがちです。折り返しが記号の真下から始まると、項目の切れ目が消えます。文字の頭にそろえると、記号が左に飛び出して、1項目のまとまりがはっきりします。

    約物の空きを詰める

    約物は、句読点・かっこ・中黒・疑問符など、文字以外の記号のことです。日本語の約物は全角の枠を持っていて、記号の左右に空白が入ります。

    問題が出るのは約物が続いたときです。「〜です。」「次に〜」のように閉じかっこと開きかっこが並ぶと、そこだけ1文字ぶん以上の穴が空きます。タイトルや見出しでは、この穴が目立ちます。

    約物のあきを整える4点
    • 連続する約物は、半角ぶん詰めて穴をなくす
    • 行頭に句読点や閉じかっこを置かない(禁則処理。行頭や行末に置けない文字を、前後の行へ自動で送るしくみ)
    • 見出しの先頭のかっこは、左端の線から出して文字をそろえる
    • 三点リーダは「…」を2つ続けて使う。中黒の連打で代用しない

    IllustratorやInDesignには文字組みアキ量設定があり、「約物半角」を選ぶとまとめて処理できます。CanvaやPowerPointなら、目で見て気になる穴だけ手で詰めれば十分です。

    Q数・級・ptの読み方

    印刷の現場では文字サイズをQ数(級数)で言います。1Q=0.25mm。13Qなら3.25mmの文字です。行送りは歯(H)で言い、こちらも1H=0.25mmです。

    単位大きさ主に使う場所
    Q(級)1Q=0.25mm日本の印刷物・文字サイズ
    H(歯)1H=0.25mm日本の印刷物・行送りと字送り
    pt(ポイント)1pt=約0.35mm欧文・Officeソフト
    px画面の1ドットWeb

    紙の本文は12〜14Q、キャプションは9〜11Qあたりが標準です。Q数と歯を同じ数字にすると行間ゼロ、13Qの文字に22Hの行送りなら約1.7倍。この計算だけできれば、印刷の指示は読めます◎

    長体・平体は最後の手段

    文字が枠に収まらないとき、文字を縦や横に潰して入れる方法があります。横を縮めて縦長にするのが長体、縦を縮めて横長にするのが平体です。

    長体・平体は5%まで。それ以上つぶすと、書体を作った人が整えた線の太さのバランスが崩れて、読みにくい文字になります。

    入らないときにまず試すのは、文字サイズを1段階下げる、改行の位置を変える、言葉を短く言い換える、の3つです。文字を潰すのはそのあとで考えます。見出しで長体を使うと、本文の書体と印象がずれて、同じ書体に見えなくなります。

    ミニ実践:読みにくい段落を直す

    10分の練習です。道具はGoogleドキュメントでもCanvaでも、手元にあるもので構いません。

    1. ニュース記事などから200字ほどの文章をコピーして貼ります
    2. 文字サイズ16px、行間1.0(行送り=文字サイズ)にします。これが「読みにくい状態」です
    3. 行間を1.3 → 1.5 → 1.7 → 2.0と1段階ずつ上げて、そのつど3秒だけ眺めます
    4. 「すっと目が入る」と感じた値をメモします。多くの人は1.6〜1.8で止まります
    5. 次に本文の幅を半分に縮めて、同じ行間で見比べます。行が短くなると、狭い行間でも読めると分かります

    この5番目まで試すと、行間と行長がセットだと体で分かります。自分の目で見つけた数字は忘れません💡

    よくある質問

    行間の目安を教えてください

    本文は文字サイズの1.5〜1.75倍です。Webなら1.7〜1.8倍、印刷物なら1.5〜1.7倍。見出しは1.2〜1.4倍まで狭めます。1行が40字を超えるなら、上限側に寄せてください。迷ったら1.7倍から始めて、長い文章なら少し広げます。

    字間と行間の違いは何ですか?

    字間は横に並ぶ文字どうしのすきま、行間は上下の行の間隔です。読みやすさに効くのは行間のほうで、字間は主に大きい文字の見た目を整えるために触ります。まず行間を決めて、そのあとタイトルの字間を詰める、という順番が失敗しません。

    InDesignやIllustratorで行間はどこで変えますか?

    文字パネルの行送りの欄です。文字サイズの右隣にあり、初期値は「自動」で文字サイズの175%が入ります。数値を直接入れると固定できます。13Qの文字に22Hと入れれば約1.7倍です。段落全体を選んでから変えないと、1行だけ間隔が変わるので気をつけてください。

    行間を広げたのに読みにくいままです

    1行が長すぎるか、広げすぎたかのどちらかです。2.0倍を超えると行がバラバラに離れて、1つの段落に見えなくなります。まず本文の幅を狭めて1行30〜40字にして、そのうえで1.7倍に戻してみてください。それでも読みにくいなら、文字の色と背景のコントラストを見直します。

    次に学ぶこと

    整理します。本文の行間は文字サイズの1.5〜1.75倍。大きい文字は狭く、小さい文字は広く。1行は30〜40字。箇条書きは項目の間にもう半行。約物の穴は詰める。長体・平体は5%まで。

    次は横方向の話です。文字詰めの基本で、タイトルの字間をそろえる手順を身につけてください。行間とセットで効きます。

    「読みやすい」を3つの基準で分けて考えたい方は視認性・可読性・判読性へ。学ぶ順番はデザインの基本コースにまとめています。

    第4章 文字とタイポグラフィ の他のレッスン

    前後のレッスン

    ← コースの目次へ戻る

    目次

      \ スクールが気になったら、まずはLINEで /

      公式LINE登録で、3大特典をプレゼント

      無料相談(Zoom・30分)の予約もLINEから。勧誘なし・ブロックはいつでもOKです。

      FOR BUSINESS

      法人向け「AI×デザイン」研修

      生成AIを取り入れた制作ワークフローを、半日〜2日のカスタム研修でチームに導入。デザイナー以外の職種の方にも対応します。

      研修について相談する

      オンライン・対面どちらも可 / お見積り無料

      LINE登録で3大特典
      LINE登録で3大特典スクール詳細
      PR バナー
      公式LINEで無料相談 + ロードマップPDFプレゼント中 LINE友だち追加