【後編】『ノンデザイナーズ・デザインブック』を読んだから、その極意を伝授する

書籍

前回の記事では、『ノンデザイナーズ・デザインブック』からデザインの4つの基本原則(近接・整列・反復・コントラスト)を紹介しました。

今回は、この本のもう一つの柱である「活字(フォント)のデザイン」について解説していきます。

かくいう筆者も、フォント選びには長年苦しめられてきたわけです。

Wordを開いて、フォント一覧をスクロールする。MS ゴシック、メイリオ、游ゴシック、HGP創英角ポップ体……「どれを選べばいいのかわからない」

結局「とりあえずメイリオでいいか」と毎回同じフォントを選んでしまう。

でも、プロが作った資料を見ると、明らかにフォントの使い方が違います。

見出しと本文で違うフォントを使っていたり、強調したい部分だけ書体を変えていたり。

「あの人たちは、どういう基準でフォントを選んでいるんだ?」

その疑問に答えてくれるのが、この本の「活字のデザイン」の章なわけです。

今回は、欧文フォントの6つの分類と、それを日本語フォントに応用するテクニックを紹介していきます。

それでは、いってみましょう!

※この記事には当ブログ筆者の解釈が少なからず含まれています。あらかじめご了承ください。

なぜフォントを知る必要があるのか?

「フォントなんて読めればいいんじゃないの?」

そう思う人もいるかもしれません。でも、フォントは読者に与える印象を大きく左右します。

たとえば、法律事務所のロゴに「HGP創英角ポップ体」が使われていたらどうでしょう。たぶん、その事務所に依頼しようとは思わないはずです。

逆に、子ども向けの遊び場の看板が堅い明朝体だったら、「ここ、本当に楽しいの?」と不安になるかもしれません。

フォントは、言葉以上に「雰囲気」を伝えます

だからこそ、どんな場面でどんなフォントを使うべきかを知っておくことは、デザイナーでなくても重要なわけです。

欧文フォントの6つの分類

『ノンデザイナーズ・デザインブック』では、欧文フォント(英語のフォント)を6つのカテゴリに分類しています。

オールドスタイル(Oldstyle)

モダン(Modern)

スラブセリフ(Slab Serif)

サンセリフ(Sans Serif)

スクリプト(Script)

デコラティブ(Decorative)

それぞれの特徴と「どんな場面で使うべきか」を解説していきます。

1. オールドスタイル(Oldstyle)──伝統と信頼の書体

オールドスタイルは、15〜16世紀のルネサンス期に生まれた、最も古い活字スタイルです。

中高の英語の教科書に載ってるやつ。
【特徴】
・セリフ(文字の端にある小さな飾り)がある
・セリフが斜めに傾いている
・文字の太い部分と細い部分の差が緩やか
・代表的なフォント:Garamond、Palatino、Times New Roman、Goudy Old Style、Minion、Caslon

オールドスタイルの最大の特徴は、「読みやすさ」と「信頼感」

長い文章を読むときに目が疲れにくく、伝統的で落ち着いた印象を与える。だから、書籍の本文や、フォーマルな文書によく使われる。

【オールドスタイルが向いている場面】

・小説や学術書の本文

・契約書や正式な書類

・結婚式の招待状

・歴史ある企業のロゴ

【避けた方がいい場面】

・ポップでカジュアルなデザイン

・テクノロジー系の先進的なイメージを出したいとき

2. モダン(Modern)──洗練とエレガンスの書体

モダンは、18世紀後半に生まれた、より洗練されたスタイルです。

ファッション雑誌とかに載ってそうな文字。

名前は「モダン」ですが、実際には200年以上の歴史があります。

【特徴】
・セリフがある(水平で細い)
・文字の太い部分と細い部分の差が「極端」
・縦線が太く、横線が非常に細い
・代表的なフォント:Bodoni、Didott、Walbaum、Modern No. 20、Onyx

モダンは「エレガント」「高級感」「ファッショナブル」な印象を与えます。

ただし、太い部分と細い部分の差が激しいため、小さいサイズだと読みにくくなるという弱点があります。

そのため、見出しやロゴなど、大きく使う場面に向いています。

【モダンが向いている場面】

・ファッション誌の見出し

・高級ブランドのロゴ

・化粧品のパッケージ

・結婚式の招待状(エレガント路線)

【避けた方がいい場面】

・長い本文(読みにくい)

・カジュアルなデザイン

・小さいサイズでの使用

3. スラブセリフ(Slab Serif)──力強さと存在感の書体

スラブセリフは、19世紀に広告用として生まれた書体です。

これはタイプライターみたいなやつ。色んな種類がある。

「スラブ」とは「厚い板」という意味で、その名の通りセリフが太くて目立つのが特徴。

【特徴】
・セリフが水平
・文字全体の太さがほぼ均一
・機械的で力強い印象
・代表的なフォント:Rockwell、Clarendon、Courier、Memphis、Roboto Slab、American Typewriter

スラブセリフは「力強い」「目立つ」「レトロ」な印象を与え、広告のキャッチコピーや、ポスターの見出しなど、「目を引きたい」場面でよく使われます。

ちなみに、一言にスラブセリフと言っても、けっこう見た目に違いがあります。

これは最も代表的なフォントである「Clarendon」。

どうやらいくつかの種類があるようで、

もし魅惑のスラブセリフの世界に興味がある方は、しじみさんのnoteで詳しく紹介されていますので、こちらを参照していただければと。

書体の種類「スラブセリフ」が表すものとは?|しじみ |デザインを語るひと
欧文書体の種類 欧文書体には大きくわけて4種類あります。セリフ体、サンセリフ体、スクリプト体、ディスプレイ書体です。セリフ体は、文字の端っこにうろこみたいなセリフがあるもの。サンセリフ体は、それをなくしたもの。スクリプト体は筆記体。ディスプレイ書体は、文字通り、目立つための書体です。それぞれについてはこちらの記事でちょ...

【スラブセリフが向いている場面】

・広告のキャッチコピー

・ポスターの見出し

・レトロなデザイン

・タイプライター風の演出(Courier)

【避けた方がいい場面】

・エレガントな雰囲気を出したいとき

・長い本文(重たくなる)

4. サンセリフ(Sans Serif)──シンプルとモダンの書体

「サン」はフランス語で「〜なしで」という意味です。つまり「セリフがない」書体です。

【特徴】
・セリフがない
・シンプルで幾何学的
・現代的でクリーンな印象
・代表的なフォント:Helvetica、Arial、Futura、Gill Sans

サンセリフは「現代的」「シンプル」「親しみやすい」印象を与える。

20世紀以降に広く使われるようになり、現在ではWebサイトやアプリのインターフェースで最も多く使われている書体です。

【サンセリフが向いている場面】

・Webサイトやアプリ

・プレゼン資料のスライド

・テクノロジー系のデザイン

・子ども向けのデザイン

【避けた方がいい場面】

・伝統的

・フォーマルな印象を出したいとき

・長い本文(セリフ体の方が読みやすいとされる)

5. スクリプト(Script)──手書きとエレガンスの書体

スクリプトは、手書き文字を模した書体です。

【特徴】
・手書きのような流れるライン
・文字同士がつながっていることが多い
・装飾的で個性的
・代表的なフォント:Zapfino、Brush Script、Edwardian Script、Lucida Handwriting、Snell Roundhand、Pacifico、Great Vibes

手書き風の書体を見かけたら、まずスクリプトだと思って大丈夫です。

スクリプトは「エレガント」「個人的」「温かみ」のある印象を与えます。

ただし、読みやすさは低いので、使いどころを選ぶ必要があります。

【スクリプトが向いている場面】

・招待状やグリーティングカード

・レストランやカフェのメニュー

・署名やサイン

・結婚式関連のデザイン

【避けた方がいい場面】

・長い文章

・大文字だけの表記

・読みやすさが重要な場面

6. デコラティブ(Decorative)──個性と遊びの書体

デコラティブは、上記のどれにも当てはまらない、装飾的な書体の総称です。

【特徴】
・非常に個性的
・特定のテーマや雰囲気に特化
・読みやすさより「見た目のインパクト」重視
・例:ホラー風、西部劇風、レトロ風など
・代表的なフォント:

デコラティブは「楽しい」「個性的」「テーマ性」を演出するのに向いています。

本書では、デコラティブをチーズケーキに例え、「食べ過ぎ注意(=使いすぎるな)」と警告しています。

使いすぎると読みにくくなるので、見出しやロゴなど限定的に使うのがコツです。

【デコラティブが向いている場面】

・イベントのポスター

・テーマパークの看板

・映画のタイトル

・特定のコンセプトを表現したいとき

【避けた方がいい場面】

・ほぼすべての本文

・読みやすさが求められる場面

・フォーマルな文書

フォントを組み合わせる「コントラスト」のルール

ここまで6つの書体分類を紹介してきましたが、本書で強調されているのは「フォントの組み合わせ方」です。

前回紹介した「コントラスト」の原則は、フォント選びにも適用されます。

【悪い例】似たフォントの組み合わせ

この例では、著者名やタイトル等、すべてにオールドスタイルであるGaramondが使われています。

これでも自然に見えますが、フォントの力で印象を変えることができます。

【良い例】異なるカテゴリのフォントを組み合わせる

こちらは、本文はオールドスタイルのGramondのままですが、それ以外の要素をすべてサンセリフのFuturaに変えています。

これにより、明確な対比が生まれ、デザインにメリハリがついたかと思います。

本書の鉄則は、「組み合わせるなら、明確に違うカテゴリから選べ」ということ。

似たフォントを組み合わせると、「同じにしたかったのか、違うようにしたかったのか」が曖昧になり、デザインが弱くなります。

ちなみに、ここから、前編で紹介した「近接」「整列」「反復」「コントラスト」を意識すると、こんな感じになります。

これで最初のものよりも洗練されたかと思います。

組み合わせのコツ:

・セリフ体(オールドスタイル/モダン)× サンセリフ

・太いフォント × 細いフォント

・大きいサイズ × 小さいサイズ

迷ったら、「1つの資料で使うフォントは2種類まで」にしておくと、失敗しにくいです。

日本語フォントへの応用テクニック

さて、ここからが日本語ユーザーにとって重要な部分になります。

『ノンデザイナーズ・デザインブック』は英語圏の本なので、例として挙げられているのは欧文フォントばかりです。

しかし、この原則は日本語フォントにもそのまま応用できます

日本語フォントの基本分類

日本語フォントも、大きく分けると以下のように分類できます。

【セリフ系】= 明朝体
・文字の端に「うろこ」と呼ばれる飾りがある
・縦線が太く、横線が細い
・フォーマル、伝統的、落ち着いた印象
・例:游明朝、ヒラギノ明朝、MS 明朝

【サンセリフ系】= ゴシック体
・線の太さがほぼ均一
・シンプルで現代的な印象
・視認性が高い
・例:游ゴシック、ヒラギノ角ゴシック、メイリオ

つまり、欧文フォントの知識は以下のように読み替えられます。

オールドスタイル ≒ 明朝体
サンセリフ ≒ ゴシック体
スクリプト ≒ 筆書体・手書き風フォント
デコラティブ ≒ ポップ体・装飾フォント

ちなみにこの中でモダンとスラブセリフが抜けていますが、これは日本語フォントにおいて、モダンのような極端に線の太さの異なるフォントや、スラブセリフのような太い水平のセリフを用いるフォントがほとんどないため。

そのため、日本語フォントの場合は上記の形でなぞらえればよいかと思います。

明朝体とゴシック体の使い分け

さて、これらをふまえた上で、明朝体とゴシック体の向き不向きについてみていきます。

【明朝体が向いている場面】

・小説や長文の本文

・新聞や雑誌の記事

・フォーマルな書類

・「伝統」「高級感」「落ち着き」を出したいとき

【ゴシック体が向いている場面】

・Webサイトやアプリ

・プレゼン資料のスライド

・ポスターや広告

・「現代的」「カジュアル」「親しみやすさ」を出したいとき

紙媒体(印刷物)では、長文は明朝体の方が読みやすいとされています。これは、セリフ(うろこ)が視線を横に導いてくれるから。

一方、画面(Web・スマホ)では、ゴシック体の方が読みやすいとされています。これは、画面の解像度では明朝体の細い線がつぶれてしまうことがあるからです。

日本語フォントの組み合わせテクニック

欧文と同じく、日本語でも異なるカテゴリのフォントを組み合わせるのが基本です。

【定番の組み合わせ】

見出し:明朝体(太め)
本文:ゴシック体

→ 見出しでフォーマルな印象を出し、本文は視認性を確保

【やってはいけない組み合わせ】

見出し:イワタ新聞ゴシック
本文:源真ゴシック

→ 両方ともゴシック系で、差が中途半端
  「似ているけど違う」という違和感が生まれる

この例も、世の中で出回っているぶん自然に見えますが、インパクトの面では前者の方が印象に残るかと思います。

ビジネスでよく使われているメイリオも、カテゴリー的にはゴシックに分類されるので、注意が必要です。

同じカテゴリから選ぶなら、完全に同じフォントにするか、太さで差をつけるのがベターと言えます。

日本語特有のテクニック

最後に、日本語だからこそ使えるテクニックをいくつか紹介します。

① 漢字とかなでフォントを変える

引用:『混植の本 フォントのカップリングガイド』ページ見本 https://books.mdn.co.jp/books/3224303001/

プロのデザインでは、「漢字は明朝体、かなはゴシック体」のように、同じ文章の中でフォントを使い分けることがあります。

これは、漢字の画数が多くて重たくなるのを、かなで軽くするテクニック。

ただし、手動でやると大変なので、専用の「混植フォント」を使うか、デザインソフトの機能を使うのが一般的だ。初心者はまず「同じフォントで統一」から始めるとよいかと。

ちなみに、混植については専門書もあるので、気になった方はこちらを参照してもらえればと。

混植の本 フォントのカップリングガイド

② 字間(カーニング)を調整する

日本語フォントは、欧文フォントに比べて字間が詰まっていることが多い。

特に見出しなど大きな文字では、少し字間を広げると読みやすくなることがある。

逆に、本文では字間を詰めすぎると読みにくくなるので、デフォルトのままか、やや広めにするのが無難。

③ 太さのバリエーションを活用する

日本語フォントは、同じフォントファミリーでも太さのバリエーション(ウェイト)が豊富なものがあります。

例:游ゴシックなら「Light」「Regular」「Medium」「Bold」など

同じフォントの中で太さを変えることで、統一感を保ちながらコントラストをつけられます。

見出し:源泉丸ゴシック 極太 or 太字
本文:源泉丸ゴシック 標準

→ フォントは統一、太さでメリハリ

終わりに

いかがだったでしょうか。

今回は『ノンデザイナーズ・デザインブック』から、フォント(活字)のデザインについて紹介しました。

自分自身、フォントの6分類や日本語における活用法を知っただけで、「このフォントはどういう場面で使うべきか」が考えられるようになったのは大きな収穫でした。

今後は、もう「とりあえずメイリオ」とは言わないでしょう。

たぶん。

今回と前回で紹介した「4つの基本原則」「フォントの選び方」のこの2つを押さえておくだけで、素人が作る資料やチラシは確実にレベルアップするはず。

本書にはまだまだ実例やテクニックが載っているので、気になる方は是非一度本書を手に取っていただければと。

ノンデザイナーズ・デザインブック [第4版]

また、当ブログではこういったデザインの本だけでなく、時間管理やモチベーション、様々な考え方の本についても紹介をしているので、よければそちらもご覧ください。

それではー。

タイトルとURLをコピーしました