calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

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

Basics_of_Typography

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

PR
IT/WEB業界への転職なら
Sponsored Link

もくじ

レイアウト

タイポグラフィの基礎

+約物(やくもの)を調整

印刷と色の知識

レイアウト

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

1.アクティブ・ホワイトスペース

active-white-space_typography

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

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

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

2.造形

modeling_typography

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

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

3.ジャンプ率

jump-rate_typography

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

4.図版率

illustrations-rate_typography

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

タイポグラフィの基礎

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

5.カーニングとトラッキング

tracking-and-kerning_typography

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

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

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

6.文字の高さを揃える

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

height-character_typography

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

7.文字の行間を揃える

spacing-character_typography

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

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

8.Webでの理想的な行間

between-web_typography

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

9.綺麗に見える見出しのサイズ

sizebeautiful_typography

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

10.書体の使い方

using-typeface_typography

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

+約物(やくもの)を調整

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

11.「」(かぎ括弧)を綺麗に見せる

beautiful-bracket_typography

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

12.禁則処理

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

13.CSSで禁則処理をする場合

processing-css_typography

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

14.入手しておきたいフォントセット

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

印刷と色の知識

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

15.印刷用はCMYK

cmyk_typography

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

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

16.スミベタ/リッチブラック/4色ベタの違い

solid-color_typography

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

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

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

17.オーバープリント

overprint_typography

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

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

  1. […] 2. デザイン:デザインのレベルを上げる!レイアウトやタイポグラフィに関するまとめ […]

Leave a Comment

コメントする