1/23(Wed)

今日の生放送

タイポグラフィ デザイン セリフ体 サンセリフ体

 

本記事では、タイポグラフィついて学んでいきます。文字選びの理論を学んで一段上のデザイン力を手に入れましょう。

この内容は東洋美術学校の丸山 貴明先生・中村 将大の「明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】」を基に作成しています。

 

目次


1. タイポグラフィってなに?

2. 文字の選び方で重視することは3つ

(1) 書体はシチュエーションに合わせよう

(2)サイズ・ウェイトはヒエラルキーを決めてから

(3)デザイン力は字間/行送りの調整で決まる

 

1. タイポグラフィってなに?


“タイポグラフィは、活字(あるいは一定の文字の形状を複製し反復使用して印刷するための媒体)を用い、それを適切に配列することで、印刷物における文字の体裁を整える技芸である。”(wikipedia「タイポグラフィ」より引用)

世界的に知られるデザイン会社、Information Architects Inc.では、

Web Design is 95% Typography  Webデザインは、95パーセントがタイポグラフィだ!

と言われるほどWebデザインにおいてとっても大切なものです。

 

2. 文字の選び方で重視すること3つ


デザインはあくまでも情報を伝達のためにあります。それはタイポグラフィにおいても同じです。自分の伝えたいことに応じて適切なものを選びましょう。いざ文字を選ぶ時、どういった基準で選んだらいいのか分からない人は、書体、サイズ、ウェイト、字間/行送りの4つのポイントに注意してみましょう。

 

(1)書体はシチュエーションに合わせよう


世の中には多くの書体がありますが、今回は和文書体を大きく2つ(セリフ体とサンセリフ体)に分けてみていきます。

タイポグラフィ セリフ体
(引用 明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】)

セリフ体 例;ローマン体、明朝体
タイポグラフィ セリフ体 とは

(引用 明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】)

セリフとは、文字のストロークの端にある飾りのこと。明朝体だったら、習字のようにとめはねが分かる飾りのことです。メッセージカードに使われるような欧文書体もセリフがありますね。ちなみににこの飾りのこと、うろこやひげ、ひげ飾りなど呼び方は色々です。書籍に用いられているので、馴染みがあり、可読性にも優れています。

 

サンセリフ体 例:ゴシック体
タイポグラフィ サン・セリフ体 とは

(引用 明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】)

こちらはセリフ体と対照的でセリフがない文字を指します。フランス語で「サン」は「〜のない」という意味をさすことから、サンセリフ体と言うそうです。文字の太さが一定で、タイトルや見出しなど協調したい文字に使われることが多いです。近代的な印象を受けますね。

 

(2)サイズ・ウェイトはヒエラルキーを決めてから


・サイズ

では名刺を例にサイズについて考えてみましょう。もちろん、作りたいものによって大きさは変わりますが、大切なのは限られたスペースの中で、どの情報に重きをおくのか、ヒエラルキーをはっきりとすることです。

名刺で伝えるべき情報は、①名前>②肩書き>③住所、連絡先の順番ですね。
 

タイポグラフィ 名刺 作り方

(引用 明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】)

しかし、上記のこちらの名刺だと、文字がすべて同じ大きさ。何が重要なのか分かりません。

タイポグラフィ 名刺 作り方
(引用 明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】)

続いて上記のこちらの名刺、本来伝えるべき情報の名前よりも他の情報が目立ってしまっています。

タイポグラフィ 名刺 作り方
(引用 明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】)

上記の名刺はヒエラルキーにそって大きさを決めた名刺です。これこそが、伝えたい情報の重要性を表現できた名刺です。サイズの違いでうまく情報の重要度を表せていますね!


・ウェイト

ウェイトとは、文字の太さのことです。先ほどは、サイズで情報の重要性を表現しましたが、実はウェイトでも情報のヒエラルキーを操作することが出来ます。一般的には、強調したい部分のウェイトを太くしたり、逆に強調したくない部分のウェイトを細くしたりすることで伝える情報のヒエラルキーを操作するそうです。

タイポグラフィ 名刺 作り方
(引用 明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】)

 

(3)デザイン力は字間/行送りの調整で決まる



・字間

続いては文字と文字のスペースについてみていきます。細かい調整ですが、ここまでしっかり出来ているとぐっとデザインの質が上がります。

例えば下記の文字。普通にパソコン上で文字を打っただけでは、「仮想ボディ」という正方形ボディに文字が配置され、このように画数の多いの漢字と漢字の間は狭く、ひらがなやカタカナなど画数の少ないものとの間はスペースが広く取られてしまいます。

タイポグラフィ 字間 行間
(引用 明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】)

これらを文字に合わせて字間を調整するとこのようになります。

タイポグラフィ 字間 行間
(引用 明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】)

ただの字間ですが、だいぶ読みやすくなりますね。ただ均等に配置するといっても、字間を広くするか狭くするかで違う印象を見せることが出来るので、是非試行錯誤してみてくださいね。

 

・行送り

タイポグラフィ 行間 字送り 字間
(引用 明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】)

行間とは、行と行の間のことですが、この行間と次の行の文字までを入れたものを行送りと呼びます。一般的にこの行送りのサイズは文字サイズの1.5倍から2倍と言われています。行間だけでみると、文字の半分から同じ大きさの分スペースが空いているということになります。こちらも字間と同じく、大きく印象を変えることが出来ますので、読みやすさと表現をしっかり考えて、理論的に決めましょう。

 

たかが文字されど文字。タイポグラフィの重要性について理解していただけましたでしょうか?

Webデザインにおいてとっても大切なタイポグラフィを極めて、理論を意識しながらデザインして、比べてみてくださいね。

 

タイポグラフィについて学びたい人必見!タイポグラフィを学ぶためのオンライン動画授業3選

今回はタイポグラフィに興味のあるあなたにタイポグラフィを学ぶための授業3選をご紹介します!これらの授業を通じて、具体的にタイポグラフィの基礎知識や、Photoshopを用いた実践方法などについて理解することができます。ぜひこれらの授業を受講し、タイポグラフィに関する知識を身につけましょう!

 

1.ミル文字ヨム文字ミセル文字

本授業では、あらゆる伝達のカナメである「文字」のデザインとその作法 ——、専門用語で言うところの「タイポグラフィ(Typography)」について体系的に学びます。
タイポグラフィとはいったい何かというところから、活字(フォント)の基本、その配置や日本語と欧文(英語)の違い、レイアウトの基礎となるグリッド・システムまで贅沢に学ぶことで、「良いタイポグラフィ」とは何か、考えていきましょう。

 

2.C CHANNEL流 Photoshopを使った写真補正とタイポグラフィ実践

本授業では「C CHANNEL」デザイナーの本末英樹先生をお招きし、Photoshopを使った「写真補正」や「タイポグラフィ」、C CHANNELだから教えられる“カワイイ”トレンドの加工テクニックについても学習していきます。
さらにデザイナーの新卒時代の苦労や体験談もお話してくれるなど、これからデザイナーを目指す方や新米デザイナーの方にオススメの授業です。

 

3.Webのためのグラフィックデザイン

この授業では、Webサイトという平面を構成するグラフィックデザインについて、その言葉の意味、タイポグラフィ、SVGを使ったロゴやフォントの作り方、ポートフォリオサイトの制作方法まで学べます。

 

いかがでしたでしょうか?
これらの授業を受講することで、タイポグラフィに関する基本的な知識を身につけることが出来るでしょう。さらに、これらの授業を通じて、自身がこれからタイポグラフィをどのように活かしていこうかを考えることも出来たのではないでしょうか?
スクーではこれら3つの授業以外にタイポグラフィに関する授業を開講しています。ぜひスクーでさまざまな授業を受講し、タイポグラフィに関する知見を深めていきましょう!

  • このエントリーをはてなブックマークに追加

デザイン学部の記事一覧