Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

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

  • Be the first to comment

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

  1. 1. Typography : A Manual of Design Copyright (C) Akio Yonekura タイポグラフィ Typography: A Manual of Design Vol.02 Akio Yonekura
  2. 2. Typography : A Manual of Design Copyright (C) Akio Yonekura 1. 欧文書体の基礎 2. サンセリフ体 3. 21世紀のサンセリフ体 4. UIデザインのタイポグラフィ/ Webフォント
  3. 3. Typography : A Manual of Design Copyright (C) Akio Yonekura 欧文書体の基礎
  4. 4. n Ln Ce A O i U Q N 欧文書体の基礎 Typography : A Manual of Design Copyright (C) Akio Yonekura 部位の名称 セリフ ステム バー ドット テール カウンター アクシス ヘアライン ストローク
  5. 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. 6. Typography : A Manual of Design Copyright (C) Akio Yonekura サンセリフ体
  7. 7. Sans Serif サンセリフ体 Typography : A Manual of Design Copyright (C) Akio Yonekura サンセリフ体 Sans Serif セリフ(Serif)のない書体。 1920年代以降、バウハウスやロシア構造主義など伝統的な枠組にとらわれない 芸術運動が広まった(モダニズム)。 タイポグラフィでも伝統的なセリフ体から、中性的なサンセリフ体が使われる様になった。
  8. 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. 9. サンセリフ体 Typography : A Manual of Design Copyright (C) Akio Yonekura スイス・スタイル 1950年代から1960年代にスイスで発展したデザインスタイル モダニズムを継承し、合理的・機能的な要素配置を取る 数理的なグリッドに基づいた非対称な構成 サンセリフ体の使用が特徴 Neue grafik Emil Ruder Armin Hofmann
  10. 10. サンセリフ体 Typography : A Manual of Design Copyright (C) Akio Yonekura スイスのグラフィックデザイナー 「スイス・スタイル」の 代表的なデザイナー。 タイポグラフィを素材として活用し、グリッド(格子)を 活用するグリッドシステムを確立した。 ヨゼフ・ミューラー = ブロックマン Josef Muller-Brockmann 1914 - 1996 KeyPerson
  11. 11. サンセリフ体 Typography : A Manual of Design Copyright (C) Akio Yonekura サンセリフ体 Sans Serif 初期 1896年ドイツのベルトルド活字鋳造所で制作された活字書体 サンセリフの中でも力強いストロークが特長で、格調の高さを感じさせる Helveticaの原型とも言われる ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Akzidenz Grotesk
  12. 12. サンセリフ体 Typography : A Manual of Design Copyright (C) Akio Yonekura Braun:Dieter Rams Josef Müller-Brockmann Akzidentz-Grotesk
  13. 13. サンセリフ体 Typography : A Manual of Design Copyright (C) Akio Yonekura サンセリフ体 Sans Serif 後期 1957年スイスのハース活字鋳造所で、マックス・ミーティンガーを中心に作られたサン・セリフ体。 無機質で中立的。世界で最も使われている人気書体。 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Helvetica
  14. 14. サンセリフ体 Typography : A Manual of Design Copyright (C) Akio Yonekura American ApparelLufthansa Helvetica
  15. 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. 16. サンセリフ体 Typography : A Manual of Design Copyright (C) Akio Yonekura サンセリフ体 Sans Serif 後期 1957年にアドリアン・フルティガーがデザインしたサンセリフ体。 15世紀のニコラ・ジェンソンがデザインした有機的な書体に影響を受けて 多言語での使用を目的とした書体、アセンダーとディセンダーの高さが同じ ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Univers
  17. 17. サンセリフ体 Typography : A Manual of Design Copyright (C) Akio Yonekura Deutsche Bank Univers
  18. 18. サンセリフ体 Typography : A Manual of Design Copyright (C) Akio Yonekura サンセリフ体 Sans Serif 後期 Deutsche Industrienorm(German Industrial Standard)、ドイツ工業規格用書体。 ドイツの工業製品の型番や高速道路などで使われている。 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz DIN
  19. 19. サンセリフ体 Typography : A Manual of Design Copyright (C) Akio Yonekura adidas uniqlo DIN
  20. 20. Typography : A Manual of Design Copyright (C) Akio Yonekura 2000年代のサンセリフ
  21. 21. aenUnivers Helvetica Akzidendz-Grotesk DIN aenaen aen サンセリフ体 Typography : A Manual of Design Copyright (C) Akio Yonekura サンセリフ体の違い
  22. 22. 2000年代のサンセリフ Typography : A Manual of Design Copyright (C) Akio Yonekura Akkurat - 2004 タイプフェイス・デザイナーはLaurenz Brunner。 2004にスイスのタイプファウンドリー Lineto から発売した書体。 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Akkurat
  23. 23. 2000年代のサンセリフ Typography : A Manual of Design Copyright (C) Akio Yonekura Akkurat - 2004 nestbankpension
  24. 24. 2000年代のサンセリフ Typography : A Manual of Design Copyright (C) Akio Yonekura Replica - 2008 スイスのデザインファーム Norm がデザイン。 2008年にスイスのタイプファウンドリー Lineto からリリース。
  25. 25. 2000年代のサンセリフ Typography : A Manual of Design Copyright (C) Akio Yonekura Replica - 2008 アルドノア・ゼロ Mesa de Acción
  26. 26. 2000年代のサンセリフ Typography : A Manual of Design Copyright (C) Akio Yonekura Maison Neue - 2012 タイプフェイス・デザイナーはTimo Gaessner。 2012にドイツのタイプファウンドリー Milieu Grotesque から発売した書体。 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz Maison Neue
  27. 27. 2000年代のサンセリフ Typography : A Manual of Design Copyright (C) Akio Yonekura Maison Neue - 2012 Gary Hustwit DAZED MAGAZINE
  28. 28. Typography : A Manual of Design Copyright (C) Akio Yonekura UIデザインのタイポグラフィ
  29. 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. 30. UIデザインのタイポグラフィ Typography : A Manual of Design Copyright (C) Akio Yonekura Apple Watch Apple Watch から Apple社が独自に開発した『San Francisco』を採用。 iOSやMacOSもHelveticaからの移行が予想されている。 Apple Watch
  31. 31. Helvetica Univers Akzidenz-Grotesk DIN abceghRG abceghRGabceghRG abceghRG UIデザインのタイポグラフィ Typography : A Manual of Design Copyright (C) Akio Yonekura San Francisco
  32. 32. UIデザインのタイポグラフィ Typography : A Manual of Design Copyright (C) Akio Yonekura Android - Material Design Google I/O 2014で発表されたGoogleのデザインガイドライン。 Androidアプリをはじめ、Webサイトも移行を進めている。
  33. 33. UIデザインのタイポグラフィ Typography : A Manual of Design Copyright (C) Akio Yonekura Android - Material Design ABCDEFGHIJKLMN abcdefghijklmnopq あいうえおかきくけこ Noto Sans Japanese Roboto 美しい日本語
  34. 34. Typography : A Manual of Design Copyright (C) Akio Yonekura Webフォント
  35. 35. https://www.google.com/fonts/specimen/Roboto Webフォント Webフォントの使用例 ABCDEFGHIJKLMN abcdefghijklmnopq Robot Nexus 6
  36. 36. https://www.google.com/fonts/specimen/Open+Sans Webフォント Webフォントの使用例 ABCDEFGHIJKLMN abcdefghijklmnopq OpenSans ALDNOAH.ZERO
  37. 37. https://www.google.com/fonts/specimen/Lato Webフォント Webフォントの使用例 ABCDEFGHIJKLMN abcdefghijklmnopq Lato Visually
  38. 38. https://www.google.com/fonts/specimen/Quattrocento+Sans Webフォント Webフォントの使用例 ABCDEFGHIJKLMN abcdefghijklmnopq Quattrocento Sans Peek Calendar
  39. 39. https://typekit.com/fonts/brandon-grotesque Webフォント Webフォントの使用例 ABCDEFGHIJKLMN abcdefghijklmnopq BrandonGrotesque InVison
  40. 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/

×