組版の基礎

組版の基礎

レイアウトを構成する要素で必ず必要なものが「文書（コピー）」。
書体などのタイポグラフィに関する基礎知識も重要ですが、
文書を「読ませる」ためには組版の基礎知識も必要不可欠。

今回は文書を「読みやすく」「キレイに」するためのお話です。

文書の役割

文書はそれぞれの役割によって以下のように呼ばれます。

１）キャッチ（アイキャッチコピー／大見出し）：短い文書で、読者の目を引くもの《目を止める》

２）リード（リードコピー）：本文内容を数行の文書で説明したもの《興味を持たせる》

３）本文（ボディコピー）：伝えたい内容《伝える》

その他

  • キャプション：写真なの説明文。本文よりも小さな文字で。
  • 小見出し（サブキャッチ）：本文の段落間などにつける見出し。
    キャッチのわきに補助的に加えた文を示すこともある。
  • コラム：本文と関連する別の事を枠などをつけて書いた場所。
  • エンドコピー：場合によるが、最後にもう一度、ダメ押したいことを書いたもの。

※文字サイズは本文から決めていくと良い。
本文を基準に配置する場所やデザインのイメージに合わせ、ジャンプ率を考慮しながら他要素のサイズを決める。

組み方向（縦組み／横組み）

【横組み（ヨコ書き）】

美しい日本語
日本語は、諸外国のような横書きだけではなく、
縦書きの文化が古くから現代でも引き継がれている。
デザインを横書きか縦書きかにすることで雰囲気や目線の流れも変わり、
雑誌や書籍などでは組方向によって開き方も異なっている。

【縦組み（タテ書き）】

美しい日本語
日本語は、諸外国のような横書きだけではなく、
縦書きの文化が古くから現代でも引き継がれている。
デザインを横書きか縦書きかにすることで雰囲気や目線の流れも変わり、
雑誌や書籍などでは組方向によって開き方も異なっている。

  • ヨコ書き（ヨコ組み）：左開き／左肩始り
  • タテ書き（縦組み）：右開き／右肩始り

●参考記事「【CSS】縦書き（writing-mode）」

段組（カラム分割）

特に本文の文書量が多く、１行が長すぎる（１行の文字数が多すぎる）と読みづらく、次の行を飛ばして読み進んだりすることもあります。
その際に文書を分割してレイアウトすることを段組みと言います。

印刷物（A4）の場合

横書きなら横方向を2〜3分割（ヨコ 2段組・3段組）に。縦書きなら縦方向に3〜5分割（タテ 3〜5段組）するのが一般的です。

Webの場合はカラム分割やマルチカラムデザイン等と呼ばれます。
Webデザインでは、文を分割せず、PC・TVなどの大画面表示の際に左右にナビゲーションや広告のブロックが表示さたり、ページ全体の左右にマージンや余白を設定したりして、本文が長くなり過ぎないようにするのが一般的。

※CSS「column-count」や「column-width」プロパティを使って文書を段組にすることもできます。

●参考コード：【CSS】段組（column-count）
・ブラウザの対応状況はこちら
●参考サイト：MDN Web Docs」

※段間にも注意。１文字分は間隔を空けましょう。

行揃え（text-align）

Adobe Illustratorの場合【段落パネル】

  • 左揃え（デフォルト）
  • 中央揃え
  • 右揃え
  • 均等配置 最終行左揃え（ジャスティファイ）※エリア内文字入力の要素のみ有効

Webの場合 CSS「text-align」プロパティ

  • text-align: left（左揃え・デフォルト）
  • text-align: center（中央揃え）
  • text-align: right（右揃え）
  • text-align: justify（ジャスティファイ）※折り返し長文に有効

※＜th＞などのように、デフォルトで中央揃えになるタグもある

字間の調整（詰め）

（カーニング／トラッキング／カーニング・letter-spacing）

Adobe Illustratorの場合【文字パネル】

  • カーニング：１箇所ずつ、または全体を自動（メトリクス／オプティカル）で詰める場合に設定
  • トラッキング：全体または複数の文字を詰めたい時に設定。
    ※ドラッグ選択した文字の後ろ（右or下）が調整される

Webの場合 CSS「letter-spacing」プロパティ

値は「em（相対比率）」で指定。
※必要な場合、0.1em以下（0.05em程度）で調整すると良い。

行間（行送り）の調整（line-height）

行間は狭すぎると、読みづらく、窮屈に感じるて読む気にならない読者もいます。
逆に広すぎると話が続いていない感じにみえたり、狭すぎても広すぎても次の行を飛ばして読み進んだりすることもあります。

Adobe Illustratorの場合【文字パネル】

行送り設定の目安

文字サイズの1.5倍程度〜2倍程度で調整。※Adobe Illustrator の場合は「行送り」の設定

Webの場合 CSS「line-height」プロパティ

値は「em（相対比率）」で指定、同じく文字サイズの1.5倍程度〜2倍程度で調整したほうが良いでしょう。

ベースラインシフトとは？（Adobe Illustrator）

まとめ

『タイポグラフィ』に加え『組版』も意識して、より文書を読みやすく、美しく見せるように心がけましょう。
しっかり調整されたレイアウトは、ただWordなどで書かれた書類とは見た目や読みやすさが大きく違ってきます。

★デザインでよく使われいる書体の種類を知る
★デザインのイメージに合わせた書体を選ぶ
★書体はたくさん使い過ぎないように
★組版も考えて文書を読みやすく
★字体のちがいにも注意