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

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

Embed Size (px)

Citation preview

Typography : A Manual of Design Copyright (C) Akio Yonekura

タイポグラフィ

Typography: A Manual of DesignVol.02

Akio Yonekura

Typography : A Manual of Design Copyright (C) Akio Yonekura

1. 欧文書体の基礎2. サンセリフ体3. 21世紀のサンセリフ体4. UIデザインのタイポグラフィ / Webフォント

Typography : A Manual of Design Copyright (C) Akio Yonekura

欧文書体の基礎

n

Ln

Ce

A

O

i

U

Q

N

欧文書体の基礎

Typography : A Manual of Design Copyright (C) Akio Yonekura

部位の名称

セリフ

ステム バー ドット テール

カウンター アクシス ヘアライン ストローク

83

Univers

73

Univers

53

Univers63

Univers75

Univers

55

Univers

45

Univers

35

Univers

65

Univers76

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 BasicItalic/Oblique Condensed

CondensedOblique

Typography : A Manual of Design Copyright (C) Akio Yonekura

サンセリフ体

Sans Serif

サンセリフ体

Typography : A Manual of Design Copyright (C) Akio Yonekura

サンセリフ体 Sans Serif

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

サンセリフ体

Typography : A Manual of Design Copyright (C) Akio Yonekura

モダニズム

20世紀におこった近代主義としての芸術運動。 小説、演劇、美術、音楽、建築などの分野において展開された。 19世紀までの伝統的な様式を排する理念を持つ。

Le Corbusier Villa SavoyePablo Picasso Les_Demoiselles_d'Avignon

1920's 〜 モダニズム 1980's〜 ポストモダン 2000〜

サンセリフ体

Typography : A Manual of Design Copyright (C) Akio Yonekura

スイス・スタイル

1950年代から1960年代にスイスで発展したデザインスタイルモダニズムを継承し、合理的・機能的な要素配置を取る数理的なグリッドに基づいた非対称な構成 サンセリフ体の使用が特徴

Neue grafik Emil Ruder Armin Hofmann

サンセリフ体

Typography : A Manual of Design Copyright (C) Akio Yonekura

スイスのグラフィックデザイナー「スイス・スタイル」の 代表的なデザイナー。タイポグラフィを素材として活用し、グリッド(格子)を活用するグリッドシステムを確立した。

ヨゼフ・ミューラー = ブロックマン

Josef Muller-Brockmann 1914 - 1996Key Person

サンセリフ体

Typography : A Manual of Design Copyright (C) Akio Yonekura

サンセリフ体 Sans Serif 初期

1896年ドイツのベルトルド活字鋳造所で制作された活字書体サンセリフの中でも力強いストロークが特長で、格調の高さを感じさせるHelveticaの原型とも言われる

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

Akzidenz Grotesk

サンセリフ体

Typography : A Manual of Design Copyright (C) Akio Yonekura

Braun:Dieter Rams Josef Müller-Brockmann

Akzidentz-Grotesk

サンセリフ体

Typography : A Manual of Design Copyright (C) Akio Yonekura

サンセリフ体 Sans Serif 後期

1957年スイスのハース活字鋳造所で、マックス・ミーティンガーを中心に作られたサン・セリフ体。無機質で中立的。世界で最も使われている人気書体。

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

Helvetica

サンセリフ体

Typography : A Manual of Design Copyright (C) Akio Yonekura

American ApparelLufthansa

Helvetica

サンセリフ体

Typography : A Manual of Design Copyright (C) Akio Yonekura

Helvetica film2007年公開されたドキュメンタリー映画。監督は ゲイリー・ハストウィット。Helveticaの誕生秘話、欧米の街並みで使用されている例、著名なデザイナーのHelveticaに対する意見がまとめられている。

http://www.hustwit.com/category/helvetica/

“ 2007年にApple社のデザインチームからの依頼でHelveticaを社内上映したジョナサン・アイブとHelveticaについて議論した

サンセリフ体

Typography : A Manual of Design Copyright (C) Akio Yonekura

サンセリフ体 Sans Serif 後期

1957年にアドリアン・フルティガーがデザインしたサンセリフ体。15世紀のニコラ・ジェンソンがデザインした有機的な書体に影響を受けて多言語での使用を目的とした書体、アセンダーとディセンダーの高さが同じ

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

Univers

サンセリフ体

Typography : A Manual of Design Copyright (C) Akio Yonekura

Deutsche Bank

Univers

サンセリフ体

Typography : A Manual of Design Copyright (C) Akio Yonekura

サンセリフ体 Sans Serif 後期

Deutsche Industrienorm(German Industrial Standard)、ドイツ工業規格用書体。ドイツの工業製品の型番や高速道路などで使われている。

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

DIN

サンセリフ体

Typography : A Manual of Design Copyright (C) Akio Yonekura

adidas uniqlo

DIN

Typography : A Manual of Design Copyright (C) Akio Yonekura

2000年代のサンセリフ

aenUnivers

Helvetica

Akzidendz-Grotesk

DIN

aen aenaen

サンセリフ体

Typography : A Manual of Design Copyright (C) Akio Yonekura

サンセリフ体の違い

2000年代のサンセリフ

Typography : A Manual of Design Copyright (C) Akio Yonekura

Akkurat - 2004

タイプフェイス・デザイナーはLaurenz Brunner。2004にスイスのタイプファウンドリー Lineto から発売した書体。

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

Akkurat

2000年代のサンセリフ

Typography : A Manual of Design Copyright (C) Akio Yonekura

Akkurat - 2004

nestbankpension

2000年代のサンセリフ

Typography : A Manual of Design Copyright (C) Akio Yonekura

Replica - 2008

スイスのデザインファーム Norm がデザイン。2008年にスイスのタイプファウンドリー Lineto からリリース。

2000年代のサンセリフ

Typography : A Manual of Design Copyright (C) Akio Yonekura

Replica - 2008

アルドノア・ゼロ Mesa de Acción

2000年代のサンセリフ

Typography : A Manual of Design Copyright (C) Akio Yonekura

Maison Neue - 2012

タイプフェイス・デザイナーはTimo Gaessner。2012にドイツのタイプファウンドリー Milieu Grotesque から発売した書体。

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz

Maison Neue

2000年代のサンセリフ

Typography : A Manual of Design Copyright (C) Akio Yonekura

Maison Neue - 2012

Gary Hustwit DAZED MAGAZINE

Typography : A Manual of Design Copyright (C) Akio Yonekura

UIデザインのタイポグラフィ

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

UIデザインのタイポグラフィ

Typography : A Manual of Design Copyright (C) Akio Yonekura

Apple Watch

Apple Watch から Apple社が独自に開発した『San Francisco』を採用。iOSやMacOSもHelveticaからの移行が予想されている。

Apple Watch

Helvetica

Univers Akzidenz-Grotesk

DIN

abceghRG

abceghRG abceghRGabceghRG

UIデザインのタイポグラフィ

Typography : A Manual of Design Copyright (C) Akio Yonekura

San Francisco

UIデザインのタイポグラフィ

Typography : A Manual of Design Copyright (C) Akio Yonekura

Android - Material Design

Google I/O 2014で発表されたGoogleのデザインガイドライン。Androidアプリをはじめ、Webサイトも移行を進めている。

UIデザインのタイポグラフィ

Typography : A Manual of Design Copyright (C) Akio Yonekura

Android - Material Design

ABCDEFGHIJKLMNabcdefghijklmnopq

あいうえおかきくけこ

Noto Sans Japanese

Roboto

美しい日本語

Typography : A Manual of Design Copyright (C) Akio Yonekura

Webフォント

https://www.google.com/fonts/specimen/Roboto

Webフォント

Webフォントの使用例

ABCDEFGHIJKLMNabcdefghijklmnopq

Robot

Nexus 6

https://www.google.com/fonts/specimen/Open+Sans

Webフォント

Webフォントの使用例

ABCDEFGHIJKLMNabcdefghijklmnopq

OpenSans

ALDNOAH.ZERO

https://www.google.com/fonts/specimen/Lato

Webフォント

Webフォントの使用例

ABCDEFGHIJKLMNabcdefghijklmnopq

Lato

Visually

https://www.google.com/fonts/specimen/Quattrocento+Sans

Webフォント

Webフォントの使用例

ABCDEFGHIJKLMNabcdefghijklmnopq

Quattrocento Sans

Peek Calendar

https://typekit.com/fonts/brandon-grotesque

Webフォント

Webフォントの使用例

ABCDEFGHIJKLMNabcdefghijklmnopq

BrandonGrotesque

InVison

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/