リーディングとは何か｜行間との違いと読みやすいレイアウトの作り方

公開日：2026-07-30

「リーディングって行間のことですよね？」そう思っていても、いざ数値で説明しようとすると意外と曖昧なまま使っている方は多いのではないでしょうか。リーディングはグラフィックデザインやタイポグラフィにおいて、文章の読みやすさを大きく左右する基本要素のひとつです。この記事では、リーディング（行送り）の意味から行間との違い、適切な数値設定の目安、フォントによる違い、Webデザインでの設定方法まで、初心者にもわかりやすく整理して解説します。最後まで読めば、レイアウトを組む際に「なんとなく」ではなく根拠を持って行間を調整できるようになります。

リーディング（行送り）とは？基本の意味を押さえる

リーディング（leading）とは、タイポグラフィにおいて行と行の間隔を調整することを指す用語です。日本語のデザイン現場では「行送り」と呼ばれることが多く、リーディングと行送りはほぼ同じ意味で使われています。

もともとリーディングという言葉は、活版印刷の時代に活字と活字の間に鉛（lead）でできた薄い板を挟んで行間を調整していたことに由来すると言われています。現在ではDTPソフトやWebのCSSで数値として指定するものになりましたが、「行と行の間隔を調整する」という役割そのものは変わっていません。

タイポグラフィの世界では、文字の見た目を整える要素として、リーディング（行送り）のほかに「トラッキング」と「カーニング」があります。トラッキングは文章全体の文字間隔を均等に調整すること、カーニングは特定の文字同士の間隔を個別に調整することを指します。リーディングが縦方向（行と行の間）の調整であるのに対し、トラッキングとカーニングは横方向（文字と文字の間）の調整である、と整理しておくと混同しにくくなります。

クリエイターのお仕事図鑑でも紹介されているとおり、グラフィックデザイナーやWebデザイナーは日々の制作の中でこうした文字組みの調整を繰り返し行っており、リーディングの理解は職種を問わず欠かせない基礎知識のひとつと言えます。（クリエイターのお仕事図鑑）

「行間」との違いを正しく理解する

リーディングと近い言葉に「行間」があります。日常的な会話では同じ意味で使われることも多いのですが、デザインの現場ではより厳密に使い分けられる場合があります。

一般的な整理では、行間は「文字のベースラインから、次の行の文字の天面（上端）までの距離」を指すのに対し、行送りは「文字の天面から次の行の文字の天面までの距離」を指すという考え方があります。ベースラインとは、文字の下端がそろう基準線のことです。

言い換えると、行間は文字と文字の「隙間」を表す概念であるのに対し、行送りは行の「位置」そのものを表す概念に近いとも考えられます。この違いが混同されやすい理由のひとつは、文字サイズや書体によって文字の見た目の大きさとベースラインの位置関係が変わるため、同じ行送りの数値でも見た目の行間が異なって見えることがあるためです。

実務上は、DTPソフトやCSSで数値指定する項目の名称が「行送り」「line-height」であることが多いため、本記事でも以降は「リーディング＝行送り」として、実務でよく使われる意味合いで解説を進めます。

こうした用語の細かな違いは、デザイナー同士であれば感覚的にすり合わせられることもありますが、ディレクターや編集者がデザイナーに指示を出す場面では、認識のズレがそのまま修正の手戻りにつながることがあります。例えば「行間を広げてほしい」という指示だけでは、行送りの数値をどの程度動かせばよいのか一意に定まりません。「行送りを1.6倍から1.8倍にしてほしい」のように、可能であれば具体的な数値や比率で伝えると、制作チーム内でのコミュニケーションが円滑になりやすいでしょう。

行間・行送り・字間（トラッキング/カーニング）の関係整理

ここまでの内容を整理すると、次のように理解しておくと実務で迷いにくくなります。

• 行送り（リーディング）：行の基準位置同士の縦方向の距離。DTPソフトやCSSで数値指定する対象
• 行間：行送りの結果として見た目に生じる、文字と文字の隙間
• トラッキング：文章全体の文字間隔（横方向）の均等な調整
• カーニング：特定の文字ペアの間隔（横方向）の個別調整

いずれも「読みやすさ」に直結する要素ですが、本記事では特に多くの人が数値設定に迷いやすい「リーディング（行送り）」に焦点を当てて解説していきます。トラッキングやカーニングなど、そのほかのタイポグラフィ用語についてはクリエイティブ用語辞典でもあわせて確認できます。

なぜリーディングが読みやすさを左右するのか

リーディングの数値は、単なる見た目の調整にとどまらず、読者が文章をどれだけスムーズに読み進められるかという可読性に直結します。

行間が狭すぎると、上下の行の文字が視覚的に密着して見え、圧迫感が生まれます。特に文字数の多い本文では、行を読み終えて次の行の頭に視線を移す際に、隣接する行の文字を誤って読んでしまったり、どこまで読んだかを見失ったりしやすくなると考えられます。

反対に、行間が広すぎる場合にも別の問題が生じます。行と行の間が離れすぎていると、視線の移動距離が増え、次の行の頭を探すのに時間がかかるようになり、結果として読むテンポが損なわれてしまいます。つまりリーディングは「狭すぎても広すぎても読みにくくなる」というバランスが重要な要素なのです。

こうした可読性の重要性は、アクセシビリティのガイドラインにも反映されています。国際的なWeb標準を策定するW3Cが公開しているWCAG（Web Content Accessibility Guidelines）2.1では、視覚的な見やすさに関する達成基準のひとつとして、段落内の行間を文字サイズの少なくとも1.5倍程度確保することが望ましいという考え方が示されています。これはWebサイトに限らず、紙媒体を含めた読みやすいレイアウトを考えるうえでも参考になる目安です。また、紙媒体とディスプレイでも読み方の傾向は異なります。紙は反射光で読むのに対し、パソコンやスマートフォンの画面は発光体を直接見るため目が疲れやすいとされ、Webコンテンツでは紙よりもやや広めの行間を確保しておくと読みやすさを保ちやすいと考えられています。

※数値は各ツール・ガイドラインの公表情報にもとづく目安です。

リーディングの適切な数値設定と計算方法

リーディングの数値設定に唯一の正解はありませんが、実務では目安となる数値がいくつか存在します。ここでは代表的な考え方を紹介します。

まず基本の目安として、行送りは「文字サイズの1.5〜2倍程度」、行間（文字と文字の隙間）は「文字サイズの50〜100%程度（目安として70%前後）」に収まると読みやすいとされています。例えば本文の文字サイズが16pxであれば、行送りはおよそ24px〜32px程度が目安になる、という考え方です。

DTPソフトの初期設定を見てみると、Illustratorでは行送りを「自動」に設定した場合、初期値は文字サイズの175%に設定されています。InDesignもテキストフレームにおける自動行送りの初期値は175%であることが公式ヘルプで案内されており、いずれのソフトでも先ほどの「1.5〜2倍程度」という目安の範囲に収まっていることがわかります。つまり16ptの文字であれば、自動設定のままではおよそ28ptの行送りになる計算です。

数値の単位についても整理しておきましょう。紙媒体のDTP制作では、ミリメートル（mm）やポイント（pt）、日本語の組版で伝統的に使われる「歯（は）」（1歯＝0.25mm）といった単位が使われることがあります。一方、Webデザインで使われるCSSのline-heightでは、px（ピクセル）やem、%、そして単位のない数値（倍率）で指定するのが一般的です。単位が異なると同じ「1.5」という数値でも意味が変わってくるため、制作ツールごとにどの単位を使っているかを意識しておくことが大切です。

文字サイズとの比率で考える

行送りの数値を絶対値（例えば「20px」のように固定値）で覚えるのではなく、「文字サイズに対する比率」で考えるくせをつけておくと、見出しや本文などサイズの異なる文字にも応用しやすくなります。一般的には、文字サイズが大きい見出しほど行送りの比率をやや小さめに、文字数の多い本文ほど比率をやや大きめに設定すると、全体としてバランスの取れたレイアウトになりやすいと言われています。ただし、これはあくまで目安であり、実際のデザインでは書体や行の長さ、媒体との兼ね合いを見ながら微調整することが一般的です。

フォント（書体）によるリーディングの違い

リーディングの適切な数値は、使用するフォント（書体）によっても変わってきます。

代表的な例が、明朝体とゴシック体の違いです。明朝体は縦線が太く横線が細い、文字の端に「うろこ」と呼ばれる三角形の装飾を持つ書体で、上品さや落ち着いた印象を与えやすいとされています。一方でゴシック体は縦横の線の太さがほぼ均一で、うろこがなく、視認性の高さや力強さを感じさせやすい書体とされています。書体としての骨格や線の印象が異なるため、同じ文字サイズ・同じ行送りの数値であっても、明朝体とゴシック体では見た目の行間の詰まり方や余白の印象が変わってくることがあります。

また、和文（日本語）と欧文（アルファベット）が混在する文章では、リーディングの設定にさらに注意が必要です。和文フォントと欧文フォントはそれぞれ文字の基準位置（ベースラインや仮想ボディの高さ）が異なる設計になっていることが多く、同じ行送りの値を指定しても、和文と欧文が混ざる行では文字の縦位置がずれて見えることがあります。デザインツールによっては、和文用と欧文用でフォントを個別に指定し、それぞれの行送りバランスを調整できる機能が用意されているため、必要に応じて活用するとよいでしょう。

本文用の書体と見出し用の書体を使い分けるケースも多く見られます。本文には長時間読んでも疲れにくい、行送りをやや広めに取っても間延びしにくい書体を、見出しにはインパクトを重視してやや行送りを詰めた書体を選ぶ、といった使い分けです。いずれの場合も「この書体だからこの数値」という絶対的な正解があるわけではなく、実際に文章量やレイアウトに文字を流し込んで確認しながら調整していくことが一般的です。

また、近年はひとつのフォントファミリーの中に細字（Light）から極太（Black）まで複数のウエイト（太さ）を持つ書体も増えています。同じ書体・同じ文字サイズであっても、ウエイトが太くなるほど文字の黒みが増して圧迫感が出やすいため、太いウエイトを使う場合は行送りをやや広めに取ると読みやすさを保ちやすいと考えられます。反対に細いウエイトでは、行送りを詰めても圧迫感が出にくい傾向があります。書体選定の段階から、想定するウエイトと行送りのバランスをあわせて検討しておくと、後工程での調整が少なくて済みます。

ベースライングリッドと行送りの関係

複数の要素を組み合わせた複雑なレイアウトでは、「ベースライングリッド」という考え方が使われることがあります。

ベースライングリッドとは、ページ全体の本文をあらかじめ決めた間隔の水平線（グリッド）に揃えるための仕組みです。すべての段落の文字のベースラインをこのグリッドに合わせることで、複数のカラム（段組み）をまたいでも文字の位置が揃い、ページ全体に視覚的な一貫性が生まれます。

ベースライングリッドを使うメリットは、単に見た目が整うだけではありません。雑誌や書籍のように複数ページ・複数カラムで構成される媒体では、ページをめくったときに文字の位置がずれていると、読者は無意識のうちに違和感を覚えてしまいます。あらかじめグリッドを設定しておくことで、こうしたずれを防ぎ、効率的にレイアウト調整を進められるという制作上のメリットもあります。

InDesignなどのDTPソフトでは、文書全体に適用するベースライングリッドと、個々のテキストフレームだけに適用するフレーム単位のベースライングリッドの両方を設定できるようになっています。テキストにグリッド揃えを適用すると、もともと段落に設定していた行送りの数値よりも、グリッド側で設定した間隔が優先される点には注意が必要です。複雑なレイアウトを組む際は、本文の行送りとグリッドの間隔をあらかじめ一致させておくと、調整の手間を減らせます。

Webデザインにおけるリーディングの設定（CSS line-height）

紙媒体だけでなく、Webサイトの制作でもリーディングの設定は欠かせません。CSSでは「line-height」というプロパティで行の高さ、つまり行送りに相当する値を指定します。

line-heightの値は、単位のない数値（例：1.5）、px、em、%など複数の指定方法があります。このうち一般的に推奨されるのは、単位のない数値で指定する方法です。単位のない数値で指定した場合、その要素のフォントサイズに対する倍率として計算されるため、親要素から子要素へ値が継承された際にも、子要素それぞれのフォントサイズに応じて適切な行送りが自動的に計算されます。px指定の場合は固定値がそのまま継承されてしまうため、文字サイズが異なる要素では行送りのバランスが崩れやすくなる点に注意が必要です。

デザインカンプ（デザインの完成見本）からline-heightの値を算出する際は、「デザイン上の行送りの数値 ÷ フォントサイズ」で計算するとよいとされています。例えば行送りが36px、フォントサイズが24pxで指定されているデザインであれば、36 ÷ 24 = 1.5となり、CSSではline-height: 1.5;と指定する、という考え方です。

Webデザインにおいても、アクセシビリティの観点からリーディングを見直すことは重要です。前述のとおり、W3CのWCAG 2.1では、段落内の行間を文字サイズの少なくとも1.5倍程度確保することが推奨される考え方として示されています。特に長文のコンテンツを掲載するWebページでは、この目安を意識してline-heightを設定しておくと、幅広い読者にとって読みやすいページになりやすいと考えられます。

Webデザイナー専攻のように、HTML/CSSの基礎からレイアウト設計までを学べるコースでは、こうしたCSSの数値設定の考え方も実践的なカリキュラムの中で扱われています。

読みやすいレイアウトにするための実践ポイント

ここまで解説してきた内容を踏まえて、実務でリーディングを設定する際に意識したい実践的なポイントを整理します。

よくある質問