読みやすい読み物のデザインと組版の進め方
読みやすい読み物をデザインする、組版するために必要なことをまとめます。説明付きのチェックリストのようなものです。 前提
誰に読んでもらうのかを考える。読んでもらう場面を考える。
対象や場面によって、使うべき文字の大きさや書体が変わる。例えば……
紙で読むための読み物と、スマホの画面上で読むための画像、スクリーンに投影するスライドとで、使うべき文字の大きさは変わる。
プロジェクターでスクリーンに投影するスライドの場合は、細い文字や黒地に白抜きの文字は適さない。
大人向けと子ども向けとで、使うべき文字の大きさは変わる。
すべてのデザインの裏付けになるから、何よりも最初に考える必要がある。
次の内容を決める。
級数（文字の大きさ）
字送りまたは字間
行送りまたは行間
版面の大きさとレイアウト
印刷物の場合
大人向けの場合は8pt〜10pt程度にする。
子ども向けの場合は教科書の文字の大きさを参考にすることが考えられる。
画面の場合
基本的には、画面の幅の20分の1〜30分の1程度にする。
スマホ向けか、PC向けか、スライド向けかによって、適切な文字の大きさは少しずつ異なる。
スライド向けの場合、聴衆との距離によって適切な文字の大きさは異なる。
よほどの意図がない限りは、ベタ組み（字送りを文字の大きさと同じにすること。字間を0にすること）にすることが多いのでは？mgn901.icon 行のラインが見える程度の行間を確保する。
字送りが行送りより大きくなると、行のラインが見えなくなり、読むに堪えない仕上がりになり、望ましくない。Canvaにはそのようなテンプレートがあるが、使うべきではない。 游ゴシック体や游明朝体は、適切な行送りの量がシビア。行送りが満足に確保できないような過酷な組体裁で使うことは難しい。mgn901.icon 基本的には字送りの1.5倍程度にはしておく。
行長が長ければ長いほど、行間を広くする。
1行が40字程度の印刷物の場合は字送りの1.7倍程度にすることが多い。
段組みをしない場合は、版面・画面の幅が広ければ広いほど、行長も長くなるので、行間を広くする。 具体例: 下図では、行間と行長（行の長さ）の違いと文章の見え方の違いを表している。
https://gyazo.com/6c4067faf755438b233b04fc7fc8164f
行送りが字送りと同じになっている場合、行のラインが見えにくい。フトコロがやや広めの書体を使っているので多少は見えるが、書体や書体が持つメタデータによっては、行のラインがほとんど見えなくなる。 行長20字で行送りが字送りの1.7倍の場合と、行長40字で1.7倍の場合を比べると、行長の違いにより、前者のほうが行間が広く見える。
ソフトウェアで設定する方法
版面の大きさとレイアウト
版面の大きさによって適切な行送りの量が異なるので、行送りに先立って、版面の大きさやレイアウトを決めることが望ましい。
イベントでの多数の企画を紹介するためのパンフレットなど、情報の整理が求められる読み物では、レイアウトの工夫によって情報を構造的に整理する。このような場合にはグリッドレイアウトが有効な方法の一つである。 具体例: 下図はサークルのメンバー紹介のページのレイアウトを想定している。ページを30分割したところに12分割グリッドを導入して版面とすると、版面の大きさがちょうど良くなる。12分割グリッドを2〜3分割した範囲を1人分の範囲として、範囲の中にメンバーの写真、名前、自己紹介文を盛り込んでいる。1人分の情報のグループを1ページに4人分〜6人分、整理して掲載している。 https://gyazo.com/0b72b40940c469435f9c6da6a8a3d6c2
グループを作るにあたっては、
グループ内のどの情報をどれくらいの優先度で載せるのかを考える必要がある。
グループ同士の間隔、グループの幅・高さ、グループ内の要素同士の間隔を考える必要がある。
同じ種類の情報を扱うグループは同じ見た目にする。
基本的には、階層が深ければ深いほど、余白や間隔は小さく狭くする。
間隔が広い部分と間隔が狭い部分が混在している場合、
間隔が広い部分は、グループの境界に見える。
間隔が狭い部分は、グループの範囲に含まれているように見える。
具体例: グループはページの子要素であり、ページはグループの親要素であるという親子関係があるので、グループの余白やグループ同士の要素の間隔は、ページの余白と同じか、より小さく狭くする。グループ内の要素同士（例えば画像と文章の間隔）は、さらに小さく狭くする。
https://gyazo.com/3d73a39da4cb008123d0e00a3d281445
それ以外の書体を本文に使うのには勇気が必要である。大抵の場合、読むに堪えない仕上がりになり、望ましくない。
細すぎたり太すぎたりする書体を本文に使うのは望ましくない。
https://gyazo.com/2704868fb85044ed8c724793abbdc2e8
ゴシック体や明朝体のフォントファミリーはたくさん出ていて、それぞれ印象が異なる。
「ふところ」は画と画が構成している内側の空間のことで、ふところが広い書体はおおらかな印象、狭い書体はひきしまった印象を与えます。
「重心」は文字のバランスの中心がどのあたりであるかをいい、一般には高めであれば緊張感や品格を生み、低めなら安定感や親しみやすさを感じさせるといえるでしょう。
https://gyazo.com/1a1000dc6dfbc15e389f89e211e3762c
「ユニバーサルデザインを考えてUDデジタル教科書体を選びました」はあまり説明になっていない感じがある。ゴシック体や明朝体の方が読みやすいと感じる人や場面もあるだろう。mgn901.icon
文字色、背景色、アクセントカラーの合計3色のみを使うことにするとよい。安定感のある仕上がりを得られる。
文字色と背景色は、無彩色か彩度の低いものを選ぶと、安定感のある仕上がりを得られる。彩度の高い色は、アクセントカラーにのみ1色のみ用いられるのが自然である。
無闇に色数を増やすことは、情報構造を読み取る上でのノイズになり、望ましくない。
色だけで情報の種類を区別させてはいけない。
例えば「赤字の項目が昼のみ営業、緑字の項目が夜のみ営業」のようなことをしてはいけない。各項目に文字や記号等を明記することで表現するのが望ましい。
補助的に色を使うのはかまわない。
補助的に色を使う場合でも、背景色と文字色の組み合わせに注意する。
例えば赤い背景に緑色の文字を重ねるようなことをしてはいけない。
薄い背景に濃い文字、または濃い背景に薄い文字を使うのが望ましい。
最初から色を使うことを前提にすると、色に頼ったデザインになり、カラーユニバーサルデザインの観点から望ましくないデザインに繋がりやすくなる。白黒でも成立するようにデザインをして、あとで補助的に色を使うのがよい。mgn901.icon
https://gyazo.com/5b35c1ce7c6f7a84bf9a7f9a43c20815
印刷物の場合で背景が薄めの場合、本文に黒以外の文字を使うことは望ましくない。
CMYKの4原色を用いて印刷する場合、黒は1原色のインクのみで表現できるが、それ以外の色は複数原色のインクを用いる必要がある。複数原色のインクを用いた場合で版ずれが発生した場合、文字がチカチカして読みにくくなる。 参考にした資料
写研・写植ルール委員会「組みNOW: 写植ルールブック」写研（1975年）