デザイン学部で学習を開始しよう!

まずは無料会員登録!デザインスキルや知識を得られる授業をオンラインで開講中。最新のWeb制作スキルを身につけましょう。

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

 

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

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

 

目次


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

 


WEBデザイナー学部では毎週Webデザインについての分かりやすい授業をお届けしております♪

初心者でWebデザインを学びたい方、自分のWebデザインの技術を磨きたい方は是非チェックしてみてください。

学部登録(無料)すると、自分のカリキュラムの進捗が一目で分かるようになり、先生がイチオシするツール紹介などの役立つコラムつきメールが受け取れるようになります!


スクー教務課:瀧野

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

デザイン学部の記事一覧