デザインのレベルを上げる！レイアウトやタイポグラフィに関するまとめ

TwitterFacebookHatena
  • 公開：2014-6-16
  • 更新：2024-11-12
  • 文章量：4599
  • Design

TL;DR

先日名刺の入稿用データを作成していたのですが、印刷物用のデザインは慣れていなかったので結構時間がかかってしまいました。Web 関係の知識だけでは、綺麗な制作物は出来ないと思い、総合的なデザインができるようにデザインの基礎を勉強。今回は Web 関係者も知っておきたい、タイポグラフィやフォントに関する知識をまとめました。また使う機会があるかもしれないので、メモしておきます。

レイアウト

視覚的に明快で上手に配置されたものは読者に好まれます。そういったレイアウトを作るために、余白の使い方や文字や画像配置などの知識をおさらいします。

１．アクティブ・ホワイトスペース

小さなテキストを広い余白に配置すると存在感が増し、視線の滞在時間が長くなります。余白は一見無駄のように見えますが、意図的に配置されていることが多いです。

空白により読者のコンテンツの読み進めを制御することができます。このような視線誘導を目的とした余白のことを「アクティブ・ホワイトスペース」と呼びます。

上記のサイトではダイレクトメールを例にとった余白を使った比較を解説。余白が少ない方は貧相な印象、余白を取った方は高級感をかもしだしています。

２．造形

関連する項目をグループ化する近接、ページ上のものを意図的に配置する整列、特徴を繰り返す反復、２つの要素をはっきりと異ならせるコントラスト。この４つの基本原則について解説してあります。

[amazonjs asin="4839928401" locale="JP" title="ノンデザイナーズ・デザインブック フルカラー新装増補版"]

あらゆるデザイン作品で使えるデザインの基本原則を示してある超有名な書籍。Web サイトだけじゃなく、名刺・チラシ・ニュースレターなどを制作する前にも読んでおきたい。名刺データ作成時に熟読しました。

３．ジャンプ率

ジャンプ率とは本文を基準にし、最も大きな見出しとの時幅・高さで計算した比率。簡単に言うと「大小差」です。ジャンプ率を低くして高級感を出したり、高くして元気さをアピールしたり。以下参考になる記事です。

４．図版率

図版率（写真と文章の面積比）について。図や写真の面積比率がどれくらいあるか。小説は図版率が０％、絵本は図版率が高くなります。ターゲットの年齢層が高いほど図版率が低くなりやすいです。

タイポグラフィの基礎

文字の見た目をよくするために、文字の左右の空間（アキ）を揃えます。文字と文字の間に何も入れずに並べた「ベタ組」の状態を詰めて文字のバランスを調整します。

５．カーニングとトラッキング

カーニングは隣り合う２つの文字間を調整すること、トラッキングは複数文字間（テキストブロック全体）を調整すること。Photoshop／Illustrator ならalt(Opt)+矢印キーで出来ます。

以下はイラストレーターを使った「自動カーニング」の設定方法。文章などをまとめて調整したいときに。手順は、１．OpenTypeの「プロポーショナルメトリクス」にチェックを入れ、２．カーニングを自動、３．約物半角を選択すれば簡単に文字詰めができます。

こちらは Photoshop 文字詰めの手順。

６．文字の高さを揃える

文字にはすべてベースライン（仮想的な線）が存在します。和文のベースラインは縦組（中心）、横組（下のほう）と異なります。

住所や時間で使用するコロン（：）やハイフン、もしくは日付(○ 月 ○ 日)を組み合わせると数字に対して記号(：)や月日などが上下にずれてしまいます。イラストレーターを使ってベースラインを揃えるには、［文字］パレットのパレットメニューから［文字揃え］→［欧文ベースライン］、もしくは「ベースラインの調整」で調整します。

７．文字の行間を揃える

行と行の間隔である行間。2/3 ～全角くらいが読みやすいです。行間を詰めるほど情報あふれる感じになるが読みにくい、広げ過ぎる（全角以上）と上品になるが間延びしてしまいます。

イラストレーターの文字パレットの行送りアイコンをダブルクリックで行間（100%）を詰めることができます。Illustrator で行間を調整するときは、alt(Opt)+↑↓で調整できます。

８．Web での理想的な行間

Web は高速で文章を読んで行く場合が多いので、紙よりも読みやすくしたいところです。こちらのサイトでは、Web の理想的な行間や行長は、なぜレイアウトによって変化すべきなのか書かれてあります。

９．綺麗に見える見出しのサイズ

見出しのサイズは本文の黄金比の(×1.61)倍で設定すると綺麗に見えます。Web では 16px の本文なら、見出しは 25px くらい。

１０．書体の使い方

日本語と英語が混ざった資料、データを作成する場合に注意すること。英文には等幅フォント・和文フォントを使わない、和欧混植で注意することなど勉強になる知識をわかりやすく解説してあります。

＋約物（やくもの）を調整

約物（やくもの）とは、文章に使用する記号類(。、「」・…)の総称。他の文字と同じく全角に収められているので、普通に使うと文字間が空いたように見えます。タイトルなどのキャッチコピーなど目立つ箇所で使う場合は、アキをつめて調整。

１１．「」（かぎ括弧）を綺麗に見せる

括弧を見栄え良く見せるには、縦棒と横棒の長さが揃うように、正方形を分割して配置します。以下はタイトルなどで使う括弧を軽く見えるように作成する方法。

１２．禁則処理

「」、。？！などの約物(やくもの)を行頭に並ばないように処理すること。追い込みは行頭に句読点が並ばないように前行に入れ、追い出しは行頭に句読点が並ばないように、次行の先頭に送ります。ぶら下がりは句読点を本文フレームの外に出すこと。

１３．CSS で禁則処理をする場合

自動改行の設定を行う word-break プロパティと、禁則処理の設定を行う line-break プロパティについて。通常はword-break: normal;を使うといいですね。

１４．入手しておきたいフォントセット

Web 制作会社でも使っているところは多いですが、DTP で標準的に使われているフォントはモリサワかと思います。その他持っておきたいフォントは、和文と欧文のバランスがいい AXIS フォントなど。AXIS のタイプテスターはこちら。

印刷と色の知識

実際に印刷をせず、データ作成までしかやらないとしても印刷の知識は必要だと感じたので最低限知っておきたいことを書いておきます。

１５．印刷用は CMYK

Web 上や写真データではRGB カラー（光の色）で作成されていて、そのまま印刷物に使用できません。Web 上とは違って、カラー印刷物は、シアン・マゼンタ・イエロー・ブラックの４色で刷られることが多いので、カラーモードは「CMYK（光が紙などに反射し、目に届く色）」で制作します。印刷でくっきりした黒を出すため K（ブラック）の存在があります。Photoshop によるカラーモードの変換はこちら。

CMYK で作れない色（蛍光色やゴールドやシルバーなど）を表現するときに、通常の４色以外を使った特色インキを使います。有名なところでは PANTONE や DIC 等だと思いますが、印刷会社によっては受け付けてくれないところもあります。その場合は CMYK で入稿します。

１６．スミベタ／リッチブラック／4 色ベタの違い

スミベタ（K100%）はブラックインキのみで黒を表現。文字や細い線に適しています。

スミベタより深みのある黒を表現したいときは 4 色をかけあわせて作成したリッチブラック（例：C40% M40% Y40% K100%）。小さな文字や細線には適しません。合計値を 300%を超えると、裏写りの原因になります。

4 色ベタ（C100% M100% Y100% K100%）は大量のインキを使うので乾きが遅く裏写りの原因となることがあるので、あまり使いません。

１７．オーバープリント

K100%に対し、版ズレがおきないように処理を行うことをオーバープリントといいます。他の版に対して色を乗せる指定です。白のオブジェクトにオーバープリントを使用すると印刷されないことがあるので、自動でオーバープリント処理になっていないか確認します。オーバープリントを無効にする方法はこちら。

Jamstack での制作を依頼する

デザインのレベルを上げる！レイアウトやタイポグラフィに関するまとめ