新人くん、これわかる！？書体の要素が手っ取り早くわかる例え画像

2014.3.12(Wed)

Design こんにちは！新人デザイナーの入社を今か今かと待ち望んでいるデザイナーTです。前回は「定番書体代わりに使えるGoogle Fonts」をご紹介しましたが、今回は「書体の要素」をちょっとした例え話と画像を用いてご紹介します！

フォントにも家族がある

デザイナーが書体を語る上で、まず知っておきたい言葉「フォントファミリー」
書体の太さ・傾き・字幅が異なっても、書風に一貫性のあるフォント群をまとめて「ファミリー」と言います。
そう、書体にも家族があるんです！次の画像はヘルベチカファミリーの一例です。

そんなフォントファミリーの特徴をWebNAUTにちょこちょこ登場しているキャラクター「ウェブノートくん一族」に例えてご紹介します。

「ウェブノートくん一族」で学ぶフォントファミリー

太さ（ウェイト）: 同じ書風で太さに変化をつけた書体を用意することをウェイト展開といいます。いわば体重ですね。
シンくんはガリガリタイプで、レギュラー・ブックくんは標準体型、ブラックくんはメタボ気味...。
傾き（斜体）: 傾いた書体を斜体と呼び、斜体にはObliqueとItalicという2種類の傾き方が存在します。いわば姿勢です。Obliqueは文字の形をそのまま斜めに傾けたもので、Italicは筆記体をベースに右へ傾けた書体です。
そう、イタリックくんは"ただ傾いてるんじゃなくて、ちゃんとバランスをとっている"のです！
おい、オブリークくん、ちょっとだらしないぞ！
字幅: 同じ書風を保ちながら、文字の横幅に変化をつけたフォントがあります。いわば顔の幅。
コンデンスドくんは面長タイプで、エクステンデットくんは平たい顔族。コンプレッスドくんは度を超えた面長ですね...。
装飾: 枠線だけのOutlineや影付きのShadedなど、装飾性に富んだ書体も存在します。
シェイデッドくんにはどこか影があるし、スウォッシュキャピタルくんは威厳があるし、個性豊かな面々が揃っています

「ウェブノートくん一族」のおかげでフォントファミリーのバリエーションがぐっとイメージしやすくなりましたね...！
これで新人くんも「Oblique」と「Italic」の区別は完璧なはず！

さて、次はセリフの種類をご紹介します。

ひげの形で印象は変わる

書体には先端にセリフ（ひげ）の付いたセリフ書体と、セリフのないサンセリフ書体があります。
セリフの存在は、古代ローマ時代に碑文の下書きに使った「平筆の名残」という説が有力です。また、セリフ書体は水平方向の視線移動を助ける働きがあり、長文を組んだときの負担が小さいとも言われています。
セリフには色々な形状があり、デザイナーはセリフの種類による印象の違いを知っておく必要があります。

それではそんなこだわりのある「セリフ」＝「ひげ」の違いを「セリフ爺さんのひげの手入れ」に例えてご紹介します.。

「セリフ爺さんのひげの手入れ」で学ぶセリフの特徴

ブラケットセリフ（Bracketed serif）: 「ゆったりした柔らかい曲線を描くひげ」
伝統的で格式高く見えるひげに手入れして、これから会合に出席予定だそうです。
代表的な書体は「Jenson」「Casron」「Baskerville」など、きちんとした格式高い文章や長文に使えます。
ヘアラインセリフ（Hairline serif）: 「細い線によるひげ」
力強さと洗練さを兼ね備えたモダンなひげに手入れして、ファッションショーにお出かけです。
代表的な書体は「Didot」「Bodoni」「Walbaum」など、ファッション媒体など洒落た雰囲気を出しやすい。
ウェッジセリフ（Wedge serif）: 「三角形で構成されたくさび形のひげ」
男性的でどこかラテンの雰囲気ただようひげに手入れして、仲間と朝まで飲み歩くようです。
代表的な書体は「Wide Latin」「Saracen」「Compressor」など、個性や力強さを出したいときに使えます。
スラブセリフ（Hairline serif）: 「角ばったブロック状のひげ」
視認性が高く、子どもに好かれる太く四角いひげに手入れして、久々に孫と遊ぶ気満々です。
代表的な書体は「Rockwell」「Courier」「Clarendon」など、視線を集めたいポスターや、子どもむけ媒体に向いてます。
サンセリフ（Sans serif）: 「サン」がフランス語で「〜のない」で「セリフのない」という意味。
ひげをとったセリフ爺さん、いつもと雰囲気が大きく違いますが、どこに出かけるんでしょうか...。
代表的な書体は「Helvetica」「Arial」「Futura」など、よりプレーンな印象でどこにでも使いやすいですね。

「セリフ爺さんのひげの手入れ」でセリフの特徴や印象の違いがはっきりわかりましたね...！
これで新人くんも場違いなセリフ選びは簡単に避けられます。

例え話を交えたグラフィックは理解が早い

いかがでしたか、書体の要素を手っ取り早く覚えられましたか！？

人に何か伝える時に、少し別の角度から見た例え話を交えるだけで、相手の理解がぐっと早まることがあります。
例え話に固執すると、本筋から離れてしまい、余計に伝わらなくなる場合もありますが、適度な例え話は物事の本質を見抜くキッカケになったり、楽しいコミュニケーションを生み出したりします。

ぜひ、皆さんも人に伝えたいことを、例え話を交えたグラフィックにしてみてはいかがでしょうか。

過去の新入社員向けコンテンツ

今回の参考書籍