Webデザイナーのためのタイポグラフィ入門1

Typography : A Manual of Design Copyright (C) Akio Yonekura
タイポグラフィ講座
Typography:
A Manual of Design
Vol.01
Akio Yonekura

自己紹介
米倉明男
Webクリエイター／グラフィック・デザイナー
http://neuegrafik.jp
印刷会社、Web制作会社などのデザイナー/ディレクターを経て、
2007年からフリーランスとして活動しています。
大学や専門学校、企業などでグラフィックデザインやUIデザインの講師を行っています。

クスール
ほんきでデザイン
http://cshool.jp/course/honkide_design
「Webデザインを学びたい」という方向けに、必要な知識と技術を身に付ける
全８回、40時間の講座です。
主な内容：タイポグラフィ、レイアウト、配色、Webデザイン、スマホUIデザイン

1.　タイポグラフィ概論
2.　美しく文字を組む
3.　タイポグラフィとレイアウトの関係

タイポグラフィ概論

フォントの定義 -　文字の形（字形）をセットにしたもの
（リュウミン）
（ヒラギノ明朝＋游築五号仮名）
（丸明オールド）
（こぶりなゴシック＋たおやめ）
フォント（FONT）とは？

トラヤヌス帝の碑文
ローマ帝国最盛時の皇帝・トラヤヌス帝顕彰碑に刻まれた碑文（114年頃）。
ローマン体大文字の源とされる。
http://reference.findtarget.com/

大文字と小文字の起源
トラヤヌス帝の碑文カロリング文字
大文字は彫刻文字
紀元前2世紀頃のギリシャ時代から、2世
紀ローマ時代にかけて、石碑に文字を彫
るために使われていた。予め平筆で下書
きをしていた。
小文字は筆記文字
8世紀カール大帝によって文字が統一され
る。（カロリンガ・ミナキュール）紙にペンで
文字を書くために使われた

ドイツの金属加工職人。
1445年頃に活版印刷術を発明。
ルネサンス三大発明の一つにあげられる。
金属活字を組み合わせる印刷技術。
ヨハネス・グーテンベルク
Johannes Gutenberg 1398―1468
http://en.wikipedia.org/wiki/Johannes_Gutenberg

金属活字　Movable Type
それまで１枚の板に掘られていた文字が、１文字ずつバラバラとなった。
鉛の金属を使うことで、再利用が可能になった。
これから同じ字形の文字がセットになるフォントという概念が始まった。
http://en.wikipedia.org/
wiki/Sort_(typesetting)

タイポグラフィ　Typography とは
タイポグラフィの定義
特定の目的にしたがって印刷材料を正しく配置する技であり、
それによって読者が文字を正しく理解できるように、
文字を並べ、余白を配置し、活字を使いこなす技と言える。
　　　　　　　スタンリー・モリソン

イギリス人の書体研究家。数多くの活字の書体を設計している。
イギリスの新聞ザ・タイムズ用の活字書体Times New Roman（タイムズ・ニュー・ローマン）を
設計したことで知られている。
1930年に「タイポグラフィの基本原理」という論文を発表した。
スタンリー・モリソン
Stanley Morison 1889―1967
ABCDEFGHIJKLMN
abcdefghijklmn
Times New Roman
KeyPerson

ビジュアル・コミュニケーションとは
企業サービスや
商品などの紹介
コンセプトをヴィジュアルに置き換えて、
メッセージを伝えるコミュニケーション手法
ユーザー
アップル　http://www.apple.com/ipad
Visual Communication

グラフィックデザインの要素
文字（タイポグラフィ）は言葉を使った直接的な伝達手段になる
・テキスト
・写真
・イラスト
・図形
・レイアウト
・配色
・タイポグラフィ
Contents（内容） Design（表層）

タイポグラフィの役割
どんなに美しいグラフィックや写真、
イラストが、レイアウトされいても・・
コンセプトに適した書体を選ばなければ
　→　メッセージは上手く伝わらない
美しく文字を組まなければ
　→　デザイン全体が
散漫な印象を与えてしまう

美しく文字を組む

ヤン・チヒョルト
Jan Tschichold 1902―1974
「書物と活字」朗文堂Treasury of Alphabets
and Lettering
KeyPerson
ドイツ人グラフィックデザイナー。1927年に著書
「ディ・ノイエ・タイポグラフィ」を発表して伝統的な
デザインから、新しいタイポグラフィの創生に努めた。
後にナチスの弾圧を避けてスイスへ移住した後は、
伝統的なタイポグラフィを推し薦める。
ABCDEfGHIJKLMN
abcdefghijklmnSabon
http://en.wikipedia.org/wiki/Jan_Tschichold

欧文活字の文字組
mimi

mimi
ステムを均等に揃える

mountain

mountain
ステムを均等に揃える

mountain
美しく文字を組む　mountain
余白の形状を見て面積が均等になるように配置する

mountainステムと空間を揃えて組んだスペーシングを基準と考える

mountain
mou ntain
基準をもとにツメた文字組み
空間が詰められると「力強さ」や「緊張感」を生む
基準をもとに広げた文字組み
空間が広がると「余裕」や「癒し・安らぎ」を表現できる

文字組のサンプル
商業デザインでは、目的によって空間を使い分ける必要がある
Numero
扶桑社
EFiL
扶桑社
haru_mi
扶桑社

タイポグラフィの技術
- 活字書体は1文字では、完成されているが複数で使用するには、
「文字を組む」技術が必要になる。
- 文字を組む際に意識することは「余白（空間）」。
- 文字組で空間コントロールを身につけると、
レイアウトの際にも空間を意識できるようになる。
- デザインの「バランス」とは、レイアウトの中に、
適切な空間が作られているかどうか。

タイポグラフィとレイアウトの関係

整列と関連性
オブジェクト（要素）を揃えることで、それぞれに関連性が生まれる

整列と関連性
オブジェクト（要素）を配置する際に、整列を意識するとバランスが良くレイアウト出来る。

近接と関連性
Eraser
¥ 50
Calculator
¥ 50
Scissors
¥ 150
Eraser
¥ 50
Crayon
¥ 50
Scissors
¥ 150
オブジェクト間の距離が曖昧になると、情報がわかりにくくなる

近接と関連性
¥ 50 ¥ 50 ¥ 150
Eraser
¥ 50
Crayon
¥ 50
Scissors
¥ 150
Eraser
¥ 50
Calculator
¥ 50
Scissors
¥ 150
Eraser
¥ 50
Crayon
¥ 50
Scissors
¥ 150
関連性のあるオブジェクト間の距離を縮め、そうでないものを離すと情報がわかりやすくなる

要素と空間の関係
規定のスペースの中でバランスの良い配置を施す課題練習
Before After

グレースケールで見ると要素と空間のバランスがわかりやすくなる
Before After

空間を認識できるようになると、
大胆なレイアウトをしてもバランス良く作れる

賃貸検索スマホアプリの検証

使用する要素の形状を利用してレイアウトを組む

使用する要素の形状を利用して
レイアウトを組む
chevrolet.com

参考文献
- ヤン・チヒョルト「書物と活字」朗文堂
- 組版工学研究会『欧文書体百花事典』朗文堂
- アドリアン・フルティガー『活字の宇宙』朗文堂
- Emil Ruder『Typography : A Manual of Design』Niggli
- Josef Muller-Brockmann『Grid Systems in Graphic Design』

Webデザイナーのためのタイポグラフィ入門1

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Webデザイナーのためのタイポグラフィ入門1 (10)

Webデザイナーのためのタイポグラフィ入門1