Successfully reported this slideshow.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

はじめての欧文書体

  1. 1. 第二回 プログラマ向けデザイン勉強会 March 16, 2013 はじめての欧文書体 伊藤庄平@9d
  2. 2. 伊藤庄平@9d 株式会社シロクロというWeb制作会社でデザイナーを やっています。また、世界中のタイプファウンドリーを 一覧できる「Typecache.com」というサイトのサーバ サイドを担当しています。 http://www.4696.co.jp/ http://typography.cc/ http://typecache.com/
  3. 3. 今日はおおまかに 欧文書体には色んな種類があるよ。 というお話ができればと思います。
  4. 4. はじめに
  5. 5. デザインにおいて書体の役割はとても重要で、 書体の選択を間違えると…
  6. 6. こんな素敵な会社のWebサイトが
  7. 7. こんなことになってしまいます。。
  8. 8. ですので、少しでも多くの書体を知って、 用途に応じた書体を 使っていただければと思います。
  9. 9. 目次 ・欧文書体の種類 ・文字の太さと字幅 ・作られた時代や国 ・書体が持つ雰囲気 ・実践編
  10. 10. 欧文書体の種類
  11. 11. 欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書 体、ディスプレイ書体、スラブセリフ書体などの種類があります。 Aaセリフ書体 Aa Aa サンセリフ書体 スクリプト書体 Aa ブラックレター書体 Ab Aa ディスプレイ書体 スラブセリフ書体
  12. 12. セリフ書体 Aa Aa Didot LT Std Roman Garamond Regular 文字の先端にセリフ(端にある小さな飾り)がついた書 体のことをセリフ書体と言います。ローマン体とも呼ば れます。
  13. 13. 欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書 体、ディスプレイ書体、スラブセリフ書体などの種類があります。 Aaセリフ書体 Aa Aa サンセリフ書体 スクリプト書体 Aa ブラックレター書体 Ab Aa ディスプレイ書体 スラブセリフ書体
  14. 14. サンセリフ書体 Aa Aa Univers Lt Std 55 Roman Futura Std Medium セリフがない書体のことをサンセリフ書体と言います。 国内ではゴシック体とも呼ばれます。
  15. 15. 欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書 体、ディスプレイ書体、スラブセリフ書体などの種類があります。 Aaセリフ書体 Aa Aa サンセリフ書体 スクリプト書体 Aa ブラックレター書体 Ab Aa ディスプレイ書体 スラブセリフ書体
  16. 16. スクリプト書体 Aa Linoscript Std Medium Aa ! 手書きのストロークに基づいた書体をスクリプト書体と 言います。筆記体とも呼ばれます。
  17. 17. 欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書 体、ディスプレイ書体、スラブセリフ書体などの種類があります。 Aaセリフ書体 Aa Aa サンセリフ書体 スクリプト書体 Aa ブラックレター書体 Ab Aa ディスプレイ書体 スラブセリフ書体
  18. 18. ブラックレター書体 Aa Aa Linotext Std Regular Goundy Text MT Std Regular 図のような黒みが強い書体をブラックレター書体と言い ます。海外ではこちらをゴシック体と呼びます。
  19. 19. 欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書 体、ディスプレイ書体、スラブセリフ書体などの種類があります。 Aaセリフ書体 Aa Aa サンセリフ書体 スクリプト書体 Aa ブラックレター書体 Ab Aa ディスプレイ書体 スラブセリフ書体
  20. 20. ディスプレイ書体 Ab AB prism medium rosewood Std Regular サインや看板などに用いるために作られた書体をディス プレイ書体と言います。
  21. 21. 欧文書体には、セリフ書体、サンセリフ書体、スクリプト書体、ブラックレター書 体、ディスプレイ書体、スラブセリフ書体などの種類があります。 Aaセリフ書体 Aa Aa サンセリフ書体 スクリプト書体 Aa ブラックレター書体 Ab Aa ディスプレイ書体 スラブセリフ書体
  22. 22. スラブセリフ書体 Aa Aa Aachen Std Bold Clarendon LT Std Roman 縦線と横線が同じくらいの太さの書体をスラブセリフ書 体と言います。
  23. 23. さらに。 それらの書体は細かく分類されます。
  24. 24. 例えば、セリフ書体は、ベネチアンセリフ、オールド スタイルセリフ、トランジショナルセリフ、モダンセ リフなどに。サンセリフ書体は、グロテスク、ネオ・ グロテスク、ヒューマニスト、ジオメトリックなどに 分類されます。 なお、欧文書体の分類について厳密に知りたい場合はVox-ATypIの分類法か、 FontShopやLinotype社の分類法をご参照ください。
  25. 25. (そんなに覚えられない)
  26. 26. たくさん種類があるなぁ。 くらいでいいと思います。
  27. 27. 文字の太さと字幅
  28. 28. 欧文書体には、 ウェイト(太さ)とセット(字幅)の ファミリーがあります。
  29. 29. Helvetica Neue LT Std 27 Ultra Light Condensed ウェイトが細くて字幅が狭い。 Helvetica Neue LT Std 93 Black Extended ウェイトが太くて字幅が広い。
  30. 30. 細い Ultra Light Condensed Ultra Light Ultra Light Extended Thin Condensed Thin Thin Extended Light Condensed Light Light Extended Roman Condensed Roman Roman Extended 狭い 広い Medium Condensed Medium Medium Extended Bold Condensed Bold Bold Extended Heavy Condensed Heavy Heavy Extended Black Condensed Black Black Extended 太い
  31. 31. ※すべての書体に ウェイト展開がある訳ではありません。
  32. 32. あとイタリック体があります。 Helvetica Neue LT Std 46 Light Italic Didot LT Std Italic
  33. 33. 蛇足
  34. 34. こっちがイタリック体で、 Helvetica Neue LT Std 46 Light Italic こっちがオブリーク体。 Helvetica LT Std Light Oblique
  35. 35. Helvetica Helvetica オブリーク体は文字を斜めにしただけのもの。 イタリック体は斜体用に調整されているもの。
  36. 36. (蛇足いらなかったかも)
  37. 37. ウェイトや字幅にバリエーションの  あることが分かりました。
  38. 38. 余談 箸休め的に流れにそった小話をします。
  39. 39. 作られた時代や国
  40. 40. 当たり前ですが、一つ一つの書体は、 過去にどこかの国の 誰かによって作られています。
  41. 41.
  42. 42. trajan pro regular 古代ローマに建てられた「トラヤヌス帝の碑文」 の文字をもとに作られた書体です。TRAJAN PROは1989年にCarol Twomblyによって制作 されました。
  43. 43. 引用元:http://www.codex99.com/typography/images/ancient/trajan_inscr_lg.jpg
  44. 44. Adobe Garamond Pro Regular 16世紀にフランス人のClaude Garamondに よって製造されました。なお、Garamondは各 社から様々なバリエーション(ギャラモン系、 ジャノン系)がリリースされています。
  45. 45. 引用元:http://www.paper-leaf.com/blog/2009/09/free-friday-design-wallpaper-garamond/
  46. 46. Helvetica Regular 1957年、Neue Haas Groteskとして発売され たものが原型で、Max MiedingerとEduard Hoffmannによって発表されました。 ※Helveticaはラテン語でスイスを意味します。
  47. 47. 引用元:http://www.webdesignerdepot.com/2009/03/40-excellent-logos-created-with-helvetica/
  48. 48. Frutiger LT Std 55 Roman 1976年、シャルル・ド・ゴール国際空港(パ リ)のサインシステム設計を依頼されたAdrian Frutigerが制作しました。国内でもJR東日本や東 京メトロなど多くの場所で目にする書体です。
  49. 49. 蛇足
  50. 50. 「Neue」とか「LT」とか「Std」って何?
  51. 51. 「Neue」は英語で「New」の意味。 つまり 「Neue Helvetica」は「Helvetica」の 改訂版ということ。
  52. 52. 「LT」は「Linotype」のことで、 フォントファンダリー名を示しています。 MT=Monotype FF=FontFont ITC=International Typeface Corporation などがあります。
  53. 53. 「Std」は「Standard」のことで、 他に「Pro=Professional」などがあります。 これは主に収録されている文字数の違いで Proの方が文字数が多く収録されています。
  54. 54. 書体には見た目の特徴以外にも 制作時期や制作理由など 様々な背景があることが分かりました。
  55. 55. 書体が持つ雰囲気
  56. 56. さて、ようやく見た目の話です。 欧文書体は、 高級感や暖かみ、近代的イメージなど、 様々な雰囲気を持ち合わせています。
  57. 57.
  58. 58. 高級感
  59. 59. trajan pro regular Didot LT Std Roman Shelley Script LT Std Regular
  60. 60. インパクト
  61. 61. Bahhaus Std Heavy Giddyup Std Regular Cooper Std Black
  62. 62. スマート
  63. 63. Akko Pro Regular Helvetica Neue LT Std 25 Ultra Light ITC Kabel Std Book
  64. 64. やさしい
  65. 65. Neo Sans Pro Light Avenir Next Pro Thin Myriad Pro Light
  66. 66. ただし、 文字の大きさ、詰め具合などで 雰囲気は変わりますので (あと個人の感覚もありますし) あくまでも一例ということでご参照ください。 そのため、この資料では特に文字詰めをしていません。
  67. 67. 余談 箸休め的に流れにそった小話をします。
  68. 68. 実践編
  69. 69. Webサービスで 使いやすそうな書体を考えてみる。
  70. 70. 最初はHelvetica Neue (Bootstrapデフォルト状態)
  71. 71. その次から DIN Next LT Pro Didot LT Std Clarendon LT Std Prism Medium Avenir Next Pro  の順番で適用してみます。
  72. 72. Helvetica Neue(Bootstrapデフォルト状態)
  73. 73. DIN Next LT Pro
  74. 74. Didot LT Std
  75. 75. Clarendon LT Std
  76. 76. Prism Medium
  77. 77. Avenir Next Pro
  78. 78.  いかがでしょうか。 (見出しならディスプレイ書体ありかも)
  79. 79. 蛇足
  80. 80. 有料Webフォントを  使うのも良いと思います。
  81. 81. メリット ・有名フォントも定番フォントも使える ・他のサイトと被りにくくなる ・お金を出して利用するから愛着もわく
  82. 82. 例えばFF DINなら買取型で ページビューが50万/月以下なら$55。
  83. 83. 購入ガイドはフォントブログに 詳しい記事があります。 http://blog.petitboys.com/archives/ myfonts-webfonts-guide.html
  84. 84. まとめ
  85. 85. 文字中心のページだと 印象は書体に大きく影響されます。 ですので「書体を選ぶ」ことは  重要なデザイン作業だといえます。
  86. 86. 見た目で選ぶのもいいし、 お国柄や時代性を考慮してもいいし、 知名度で選んでもいいと思います。
  87. 87. 選択基準が増えたことで 「書体を選ぶ」ことが  楽しくなればと思います。
  88. 88. 参考文献
  89. 89. 参考文献 ・小林 章『欧文書体―その背景と使い方』株式会社美術出版社 ・小泉 均『タイポグラフィ・ハンドブック』研究社 ・高岡昌生『欧文組版 組版の基礎とマナー』美術出版社 ・組版工学研究会『欧文書体百花事典』朗文堂 引用 ・「欧文書体の種類」で利用した画像は   MyFonts(myfonts.com)と   H&FJ(typography.com)から引用しております。
  90. 90. おわりに
  91. 91. 過不足があったかと思いますが、 以上になります。
  92. 92. もっと詳しく知りたい方は 先の参考文献や 年2回刊行の文字デザイン専門誌『TYPOGRAPHY』、 フォント全般の総合情報サイト『フォントブログ』、 『Typecache』などを見ると楽しめると思います。
  93. 93. ありがとうございました。

×