2015 年5月23日 マイナビクリエイター https://creator.mynavi-agent.jp/seminar/detail/0020

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

2. Typography : A Manual of Design Copyright (C) Akio Yonekura
1. 欧文書体の基礎
2. サンセリフ体
3. 21世紀のサンセリフ体
4. UIデザインのタイポグラフィ/ Webフォント

3. Typography : A Manual of Design Copyright (C) Akio Yonekura
欧文書体の基礎

4. n
Ln
Ce
A
O
i
U
Q
N
欧文書体の基礎
Typography : A Manual of Design Copyright (C) Akio Yonekura
部位の名称
セリフ
ステム バー ドット テール
カウンター アクシス ヘアライン ストローク

5. 83
Univers
73
Univers
53
Univers
63
Univers
75
Univers
55
Univers
45
Univers
35
Univers
65
Univers
76
Univers
56
Univers
46
Univers
36
Univers
66
Univers
57
Univers
47
Univers
37
Univers
67
Univers
58
Univers
48
Univers
38
Univers
68
Univers
欧文書体の基礎
Typography : A Manual of Design Copyright (C) Akio Yonekura
ファミリー
Thin
Light
Roman
(Reguler/Medium)
Bold
Heavy
Black
Extended Basic
Italic/
Oblique Condensed
Condensed
Oblique

6. Typography : A Manual of Design Copyright (C) Akio Yonekura
サンセリフ体

7. Sans Serif
サンセリフ体
Typography : A Manual of Design Copyright (C) Akio Yonekura
サンセリフ体 Sans Serif
セリフ（Serif）のない書体。
1920年代以降、バウハウスやロシア構造主義など伝統的な枠組にとらわれない
芸術運動が広まった（モダニズム）。
タイポグラフィでも伝統的なセリフ体から、中性的なサンセリフ体が使われる様になった。

8. サンセリフ体
Typography : A Manual of Design Copyright (C) Akio Yonekura
モダニズム
20世紀におこった近代主義としての芸術運動。
小説、演劇、美術、音楽、建築などの分野において展開された。
19世紀までの伝統的な様式を排する理念を持つ。
Le Corbusier Villa Savoye
Pablo Picasso Les_Demoiselles_d'Avignon
1920's 〜 モダニズム 1980's〜 ポストモダン 2000〜

9. サンセリフ体
Typography : A Manual of Design Copyright (C) Akio Yonekura
スイス・スタイル
1950年代から1960年代にスイスで発展したデザインスタイル
モダニズムを継承し、合理的・機能的な要素配置を取る
数理的なグリッドに基づいた非対称な構成 サンセリフ体の使用が特徴
Neue grafik Emil Ruder Armin Hofmann

10. サンセリフ体
Typography : A Manual of Design Copyright (C) Akio Yonekura
スイスのグラフィックデザイナー
「スイス・スタイル」の 代表的なデザイナー。
タイポグラフィを素材として活用し、グリッド(格子)を
活用するグリッドシステムを確立した。
ヨゼフ・ミューラー = ブロックマン
Josef Muller-Brockmann 1914 - 1996
KeyPerson

11. サンセリフ体
Typography : A Manual of Design Copyright (C) Akio Yonekura
サンセリフ体 Sans Serif 初期
1896年ドイツのベルトルド活字鋳造所で制作された活字書体
サンセリフの中でも力強いストロークが特長で、格調の高さを感じさせる
Helveticaの原型とも言われる
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Akzidenz Grotesk

12. サンセリフ体
Typography : A Manual of Design Copyright (C) Akio Yonekura
Braun:Dieter Rams Josef Müller-Brockmann
Akzidentz-Grotesk

13. サンセリフ体
Typography : A Manual of Design Copyright (C) Akio Yonekura
サンセリフ体 Sans Serif 後期
1957年スイスのハース活字鋳造所で、マックス・ミーティンガーを中心に作られたサン・セリフ体。
無機質で中立的。世界で最も使われている人気書体。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Helvetica

14. サンセリフ体
Typography : A Manual of Design Copyright (C) Akio Yonekura
American ApparelLufthansa
Helvetica

15. サンセリフ体
Typography : A Manual of Design Copyright (C) Akio Yonekura
Helvetica film
2007年公開されたドキュメンタリー映画。監督は ゲイリー・ハストウィット。
Helveticaの誕生秘話、欧米の街並みで使用されている例、
著名なデザイナーのHelveticaに対する意見がまとめられている。
http://www.hustwit.com/category/helvetica/
“ 2007年にApple社のデザインチームからの依頼で
Helveticaを社内上映したジョナサン・アイブと
Helveticaについて議論した
”

16. サンセリフ体
Typography : A Manual of Design Copyright (C) Akio Yonekura
サンセリフ体 Sans Serif 後期
1957年にアドリアン・フルティガーがデザインしたサンセリフ体。
15世紀のニコラ・ジェンソンがデザインした有機的な書体に影響を受けて
多言語での使用を目的とした書体、アセンダーとディセンダーの高さが同じ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Univers

17. サンセリフ体
Typography : A Manual of Design Copyright (C) Akio Yonekura
Deutsche Bank
Univers

18. サンセリフ体
Typography : A Manual of Design Copyright (C) Akio Yonekura
サンセリフ体 Sans Serif 後期
Deutsche Industrienorm（German Industrial Standard）、ドイツ工業規格用書体。
ドイツの工業製品の型番や高速道路などで使われている。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
DIN

19. サンセリフ体
Typography : A Manual of Design Copyright (C) Akio Yonekura
adidas uniqlo
DIN

20. Typography : A Manual of Design Copyright (C) Akio Yonekura
2000年代のサンセリフ

21. aenUnivers
Helvetica
Akzidendz-Grotesk
DIN
aenaen
aen
サンセリフ体
Typography : A Manual of Design Copyright (C) Akio Yonekura
サンセリフ体の違い

22. 2000年代のサンセリフ
Typography : A Manual of Design Copyright (C) Akio Yonekura
Akkurat - 2004
タイプフェイス・デザイナーはLaurenz Brunner。
2004にスイスのタイプファウンドリー Lineto から発売した書体。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Akkurat

23. 2000年代のサンセリフ
Typography : A Manual of Design Copyright (C) Akio Yonekura
Akkurat - 2004
nestbankpension

24. 2000年代のサンセリフ
Typography : A Manual of Design Copyright (C) Akio Yonekura
Replica - 2008
スイスのデザインファーム Norm がデザイン。
2008年にスイスのタイプファウンドリー Lineto からリリース。

25. 2000年代のサンセリフ
Typography : A Manual of Design Copyright (C) Akio Yonekura
Replica - 2008
アルドノア・ゼロ Mesa de Acción

26. 2000年代のサンセリフ
Typography : A Manual of Design Copyright (C) Akio Yonekura
Maison Neue - 2012
タイプフェイス・デザイナーはTimo Gaessner。
2012にドイツのタイプファウンドリー Milieu Grotesque から発売した書体。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Maison Neue

27. 2000年代のサンセリフ
Typography : A Manual of Design Copyright (C) Akio Yonekura
Maison Neue - 2012
Gary Hustwit DAZED MAGAZINE

28. Typography : A Manual of Design Copyright (C) Akio Yonekura
UIデザインのタイポグラフィ

29. UIデザインのタイポグラフィ
Typography : A Manual of Design Copyright (C) Akio Yonekura
iOS / Mac OSX
AppleのiOS7 / MacOS X YosemiteからHelveticaが採用。
Apple iOS7 Apple Mac OS X Yosemite

30. UIデザインのタイポグラフィ
Typography : A Manual of Design Copyright (C) Akio Yonekura
Apple Watch
Apple Watch から Apple社が独自に開発した『San Francisco』を採用。
iOSやMacOSもHelveticaからの移行が予想されている。
Apple Watch

31. Helvetica
Univers Akzidenz-Grotesk
DIN
abceghRG
abceghRGabceghRG
abceghRG
UIデザインのタイポグラフィ
Typography : A Manual of Design Copyright (C) Akio Yonekura
San Francisco

32. UIデザインのタイポグラフィ
Typography : A Manual of Design Copyright (C) Akio Yonekura
Android - Material Design
Google I/O 2014で発表されたGoogleのデザインガイドライン。
Androidアプリをはじめ、Webサイトも移行を進めている。

33. UIデザインのタイポグラフィ
Typography : A Manual of Design Copyright (C) Akio Yonekura
Android - Material Design
ABCDEFGHIJKLMN
abcdefghijklmnopq
あいうえおかきくけこ
Noto Sans Japanese
Roboto
美しい日本語

34. Typography : A Manual of Design Copyright (C) Akio Yonekura
Webフォント

35. https://www.google.com/fonts/specimen/Roboto
Webフォント
Webフォントの使用例
ABCDEFGHIJKLMN
abcdefghijklmnopq
Robot
Nexus 6

36. https://www.google.com/fonts/specimen/Open+Sans
Webフォント
Webフォントの使用例
ABCDEFGHIJKLMN
abcdefghijklmnopq
OpenSans
ALDNOAH.ZERO

37. https://www.google.com/fonts/specimen/Lato
Webフォント
Webフォントの使用例
ABCDEFGHIJKLMN
abcdefghijklmnopq
Lato
Visually

38. https://www.google.com/fonts/specimen/Quattrocento+Sans
Webフォント
Webフォントの使用例
ABCDEFGHIJKLMN
abcdefghijklmnopq
Quattrocento Sans
Peek Calendar

39. https://typekit.com/fonts/brandon-grotesque
Webフォント
Webフォントの使用例
ABCDEFGHIJKLMN
abcdefghijklmnopq
BrandonGrotesque
InVison

40. Typography : A Manual of Design Copyright (C) Akio Yonekura
参考文献
- 組版工学研究会『欧文書体百花事典』朗文堂（発行年：2003）
- ゲイリー・ハストウィット『ヘルベチカ～世界を魅了する書体～』角川エンタテインメント（発行年：2008）
- THINK IT 連載：タイポグラフィを学ぶ 第3回 世界中で愛される書体、ヘルベチカとは http://thinkit.co.jp/article/727/1
- iOSヒューマンインターフェイスガイドライン
https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/BasicsPart/BasicsPart.html
- Material design - Google design guidelines http://www.google.com/design/