フォント選びで困ってしまう原因３つと、上達する 7日トレーニング付き

こんにちは。デザイン事務所ホクサイの市角です。

普段はPanasonicさん、蔦屋書店さん他、様々なクライアントさんのWEB・パッケージ・映像などを作り、大学准教授としてデザイン思考について教えたり、デザインを使ったビジネスや経営の手法を企業、自治体さんに伝えたりしています。

その一環で、デザイナーがどんなふうに考えているのか、
思考プロセスを文章化したほうが良いよなと思いnoteに書いていくことに。

今日はフォント・書体の選び方について。
最後におまけとして書体選びのセンスが向上する訓練法も掲載しています。

1.フォント＝声という感覚がない

「書体」とか「フォント」と聞いて、私たちが思い浮かべるのはきっとこんな感じではないでしょうか？

• ゴシック体

• 明朝体

• 筆記体

デザインに少し詳しい人なら、「有料フォントって高いよね」とか、「あのブランドに使われてるフォント、たしか◯◯だよね」といった知識があるかもしれません。

でも、実はフォントって、読めれば何でも同じってわけではないんです。

デザインに詳しくない人でも、たとえばこんな風に感じることがあると思います。

これは僕の好きなアニメ、葬送のフリーレンのロゴですが、

２つ目の方は企画で存在するコミカルなミニアニメのロゴです。

同じタイトルでもフォントを変えることで全然違う印象を与えていますよね？

この「フォントが持つ印象」は、
映画やアニメにおける「声」と同じ役割を果たしていると、私は考えています。

頭の中で自然に、
最初のフォントは真摯で心のこもった声、次のフォントはお気楽な声で聞こえてくるような感覚、ありませんか？

この原則、フォントを声として捉えてTPOに合わせていくという感覚を持つことが最初のステップ。かっこいいかダサいかは最初は考えなくていいです。

2.フォントの個性を頭の中で分類できていない

デザインの現場では、フォントの印象は細かく整理されています。

たとえば、同じ「セリフ体（明朝系）」であっても、

• カジュアル寄りか、フォーマル寄りか

• 女性的か、男性的か

• 繊細か、重厚か

……といったニュアンスの違いまでを踏まえて選ばれています。

でもこれは、デザイナーだけが感じ取れる特別な感覚というわけではありません。

製品や広告として世の中に出てきたときに、
多くの人が自然とこう思うはずです。

この「なんとなく」が、実はとても大事。
私たちが無意識に受け取る印象は、商品やサービスの売上にしっかりと影響を与えているんです。

「いや、全部同じやん！」

と感じる、よく似たフォント同士で
「どっちがより男性的」「どっちがより繊細」
という印象を感じ取るセンサーを鍛えることが大切になります。

例えば太さとかトメとかハライといったディティールの形にその印象が現れます。神は細部に宿る、ですね。

3.欧米におけるフォントの感覚を日本にいると実感せずに生活できてしまう

欧米人、とりわけ欧米のデザイナーは日本のデザイナー以上にフォントに敏感です。それはもう身体感覚レベルで染み付いています。

「うまく説明できないけど、この媒体にこの書体つかうなんてありえないでしょう？？」　みたいなことをよく言います。

私達は知識としてまずそれを知っておかないとダメで、それを繰り返してインストールすることで身体感覚にしていくしかありません。
大変ですよね。

以下は欧米圏における、どのフォントがどんな印象でどんな媒体に使われているかとまとめたものです。

セリフ体

"格式、伝統、信頼、知的"
新聞、書籍、教育機関、金融、高級ブランド
Times New Roman（NY Times）、Didot（VOGUE、ZARA）Georgia（Harvard大学）

サンセリフ体

"モダン、クリーン、合理的、親しみやすい"
Webサイト、スタートアップ、UIデザイン、広告全般
Helvetica（Apple旧ロゴ）、Futura（Supreme）Arial（Microsoft）

筆記体

"女性的、エレガント、感情的、柔らかい"
結婚式の招待状、化粧品、ハンドメイド雑貨、ラグジュアリー
Lobster（カフェロゴ）、Bickham Script（招待状）Zapfino（香水広告）

スラブセリフ体

"力強い、レトロ、安定感、男性的"
アメリカンダイナー、アウトドア系ブランド、ポスター
Rockwell（Sony）、Clarendon（Levi’s）Roboto Slab（Google Fonts）

モダン系ディスプレイ体

"大胆、洗練、非日常、芸術的"
雑誌表紙、ファッションブランド、映画タイトル
Bodoni（Harper’s Bazaar）、Neutraface（Architectural Digest）Avenir Next（Netflix）

モノスペース体

"機械的、テック、冷静、レトロ"
プログラミング、開発者向けUI、ミニマル系デザイン
Courier New（脚本フォーマット）、IBM Plex Mono（IBM）Source Code Pro（Adobe）

具体的に最近のしごと、「脳マネジメント」ではどうした？

Amazon6部門で1位を獲得した話題書『脳マネジメント』（秋間早苗さん）の北米版表紙デザインを担当しました。

この仕事では書体をどう選んだのか？

結論からいうとモダンディスプレイ系と工業系サンセリフの組み合わせを使い、クラシカルさと、現代的な印象をミックスさせています。

本書で語っている脳の機能の２つの要素、機械的な脳と有機的な脳を表現しています。

メインタイトルは近代に生きる普遍性を表現

メインタイトル "Brain Management"と著者名"Sanae Akima"は有機的な書体であるセリフ体のGeorgiaにして、優美でありながら女性的な優しさも感じられるものにしました。これにより著者の語り口や持っている佇まいを書体で表しています。

一見クラシカルにみえるこのGeorgiaですが、実はkindleなどの現代デバイスで読みやすいように改良されたものです。これも現代の中で生きる哲学的な普遍性を表現するのに適していると考えました。

クラシックなのに今の人に向けられている。そのために頭に入ってきやすく人ごとだと感じられない。

そういう印象を持ってほしいという意図が込められています。

サブタイトルで機能と効率性、ビジネス書であることを表現

そしてサブタイトルの文章はDIN Condensedという書体を採用。これはドイツ発の工業系書体として有名で効率や正確性を重視する媒体に使用されるので機械的でシャープ、冷静なイメージを与えます。

本書のもう一つの要素である機械的な脳を表現するのにぴったりです。またビジネス書の読者層にも親和性が高くサブタイトルをすんなり読んでもらいやすいと考えました。

さらに作者の想いが反映されて長くなりがちなサブタイトルを無理なく収めて読みやすくする意図も隠されています。

ほんの少しのスパイスにアニメでおなじみの日本語書体

この２つの書体をメインにすえて、北米の読者にちょっとしたスパイス要素として日本語の"脳マネジメント"を明朝体であるA1明朝で表現。

印刷物につかわれる墨たまりがあることでクラシックな印象を与えつつもこちらも実はデジタル媒体での可読性を意識して設計されているというGeorgiaと対になりうる書体。

これをちょっとしたスパイスに置くことで北米の人に

「いや、なんか読めないけどカタカナ書いてあってオリエンタルだな！」

と少しだけ感じてもらうようにしています。アニメのタイトルにもよく使われているので北米の人に「日本のなにか」という既視感も与えられるかもしれません。

著者が日本を拠点としていることと、西洋的な合理主義から東洋的な全体感、直観主義へのシフトを示唆する本でもありますのでそのメッセージを裏に込めているわけです。

と、まあデザイナーはこんなふうに考えて無数の書体(デザイナーが良う使う欧文と日本語で、2000書体くらい)の中からチョイスし更にアレンジして使っているわけですね。

デザインを誰かに依頼するとき、このようなことが意識されているということを理解してくれると、デザイナーの一人としてもとても嬉しいです。

(有料おまけ)フォント選びのセンスを磨く、7日間トレーニング法

最後にちょっとおまけ、私の経験から書体を選ぶ感覚が鋭くなるおすすめの訓練法を考えてみました。※自分がタイムリープして10代に戻ったらこれを毎日ひたすらやると思います。

効果を実感しやすいように、続けやすいように、一旦７日間だけチャレンジできるようになっています。また有料としたのは「お金払ったからちゃんとやらなきゃ」という気持ちを持ってほしいからでもあります。笑

それではスタート！

「この見出し、なんとなくゴシックで組んだけど…ほんとに合ってる？」

「明朝にするとカッコいい気もするけど、説明できない…」

そんな “フォント迷子” を卒業するための 1週間ワーク を用意しました。
特別なソフトは不要。スマホと無料アプリ、そして 1日30分の好奇心 があれば OK です。

7日間トレーニング

Day 1