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デザイナーのためのタイポグラフィ入門1

51,481 views

Published on

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

Published in: Design
  • Be the first to comment

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

  1. 1. Typography : A Manual of Design Copyright (C) Akio Yonekura タイポグラフィ講座 Typography: A Manual of Design Vol.01 Akio Yonekura
  2. 2. Typography : A Manual of Design Copyright (C) Akio Yonekura 自己紹介 米倉明男 Webクリエイター/グラフィック・デザイナー http://neuegrafik.jp 印刷会社、Web制作会社などのデザイナー/ディレクターを経て、 2007年からフリーランスとして活動しています。 大学や専門学校、企業などでグラフィックデザインやUIデザインの講師を行っています。
  3. 3. Typography : A Manual of Design Copyright (C) Akio Yonekura クスール ほんきでデザイン http://cshool.jp/course/honkide_design 「Webデザインを学びたい」という方向けに、必要な知識と技術を身に付ける 全8回、40時間の講座です。 主な内容:タイポグラフィ、レイアウト、配色、Webデザイン、スマホUIデザイン
  4. 4. Typography : A Manual of Design Copyright (C) Akio Yonekura 1. タイポグラフィ概論 2. 美しく文字を組む 3. タイポグラフィとレイアウトの関係
  5. 5. Typography : A Manual of Design Copyright (C) Akio Yonekura タイポグラフィ概論
  6. 6. タイポグラフィ概論 フォントの定義 - 文字の形(字形)をセットにしたもの (リュウミン) (ヒラギノ明朝+游築五号仮名) (丸明オールド) (こぶりなゴシック+たおやめ) フォント(FONT)とは?
  7. 7. タイポグラフィ概論 トラヤヌス帝の碑文 ローマ帝国最盛時の皇帝・トラヤヌス帝顕彰碑に刻まれた碑文(114年頃)。 ローマン体大文字の源とされる。 http://reference.findtarget.com/
  8. 8. タイポグラフィ概論 大文字と小文字の起源 トラヤヌス帝の碑文 カロリング文字 大文字は彫刻文字 紀元前2世紀頃のギリシャ時代から、2世 紀ローマ時代にかけて、石碑に文字を彫 るために使われていた。予め平筆で下書 きをしていた。 小文字は筆記文字 8世紀カール大帝によって文字が統一され る。(カロリンガ・ミナキュール)紙にペンで 文字を書くために使われた
  9. 9. タイポグラフィ概論 ドイツの金属加工職人。 1445年頃に活版印刷術を発明。 ルネサンス三大発明の一つにあげられる。 金属活字を組み合わせる印刷技術。 ヨハネス・グーテンベルク Johannes Gutenberg 1398―1468 http://en.wikipedia.org/wiki/Johannes_Gutenberg
  10. 10. タイポグラフィ概論 金属活字 Movable Type それまで1枚の板に掘られていた文字が、1文字ずつバラバラとなった。 鉛の金属を使うことで、再利用が可能になった。 これから同じ字形の文字がセットになるフォントという概念が始まった。 http://en.wikipedia.org/ wiki/Sort_(typesetting)
  11. 11. タイポグラフィ概論 タイポグラフィ Typography とは タイポグラフィの定義 特定の目的にしたがって印刷材料を正しく配置する技であり、 それによって読者が文字を正しく理解できるように、 文字を並べ、余白を配置し、活字を使いこなす技と言える。         スタンリー・モリソン
  12. 12. タイポグラフィ概論 イギリス人の書体研究家。数多くの活字の書体を設計している。 イギリスの新聞ザ・タイムズ用の活字書体Times New Roman(タイムズ・ニュー・ローマン)を 設計したことで知られている。 1930年に「タイポグラフィの基本原理」という論文を発表した。 スタンリー・モリソン Stanley Morison 1889―1967 ABCDEFGHIJKLMN abcdefghijklmn Times New Roman KeyPerson
  13. 13. タイポグラフィ概論 ビジュアル・コミュニケーションとは 企業サービスや 商品などの紹介 コンセプトをヴィジュアルに置き換えて、 メッセージを伝えるコミュニケーション手法 ユーザー アップル http://www.apple.com/ipad Visual Communication
  14. 14. タイポグラフィ概論 グラフィックデザインの要素 文字(タイポグラフィ)は言葉を使った直接的な伝達手段になる ・テキスト ・写真 ・イラスト ・図形 ・レイアウト ・配色 ・タイポグラフィ Contents(内容) Design(表層)
  15. 15. タイポグラフィ概論 タイポグラフィの役割 どんなに美しいグラフィックや写真、 イラストが、レイアウトされいても・・ コンセプトに適した書体を選ばなければ  → メッセージは上手く伝わらない 美しく文字を組まなければ  → デザイン全体が 散漫な印象を与えてしまう
  16. 16. Typography : A Manual of Design Copyright (C) Akio Yonekura 美しく文字を組む
  17. 17. 美しく文字を組む Typography : A Manual of Design Copyright (C) Akio Yonekura ヤン・チヒョルト Jan Tschichold 1902―1974 「書物と活字」朗文堂Treasury of Alphabets and Lettering KeyPerson ドイツ人グラフィックデザイナー。1927年に著書 「ディ・ノイエ・タイポグラフィ」を発表して伝統的な デザインから、新しいタイポグラフィの創生に努めた。 後にナチスの弾圧を避けてスイスへ移住した後は、 伝統的なタイポグラフィを推し薦める。 ABCDEfGHIJKLMN abcdefghijklmnSabon http://en.wikipedia.org/wiki/Jan_Tschichold
  18. 18. 美しく文字を組む Typography : A Manual of Design Copyright (C) Akio Yonekura 欧文活字の文字組 mimi
  19. 19. 美しく文字を組む Typography : A Manual of Design Copyright (C) Akio Yonekura 欧文活字の文字組 mimi
  20. 20. 美しく文字を組む Typography : A Manual of Design Copyright (C) Akio Yonekura 欧文活字の文字組 mimi ステムを均等に揃える
  21. 21. 美しく文字を組む Typography : A Manual of Design Copyright (C) Akio Yonekura 欧文活字の文字組 mountain
  22. 22. 美しく文字を組む Typography : A Manual of Design Copyright (C) Akio Yonekura 欧文活字の文字組 mountain
  23. 23. 美しく文字を組む Typography : A Manual of Design Copyright (C) Akio Yonekura 欧文活字の文字組 mountain ステムを均等に揃える
  24. 24. mountain 美しく文字を組む Typography : A Manual of Design Copyright (C) Akio Yonekura 美しく文字を組む mountain 余白の形状を見て面積が均等になるように配置する
  25. 25. 美しく文字を組む Typography : A Manual of Design Copyright (C) Akio Yonekura 欧文活字の文字組 mountainステムと空間を揃えて組んだスペーシングを基準と考える
  26. 26. 美しく文字を組む Typography : A Manual of Design Copyright (C) Akio Yonekura 欧文活字の文字組 mountain mou ntain 基準をもとにツメた文字組み 空間が詰められると「力強さ」や「緊張感」を生む 基準をもとに広げた文字組み 空間が広がると「余裕」や「癒し・安らぎ」を表現できる
  27. 27. 美しく文字を組む Typography : A Manual of Design Copyright (C) Akio Yonekura 文字組のサンプル 商業デザインでは、目的によって空間を使い分ける必要がある Numero 扶桑社 EFiL 扶桑社 haru_mi 扶桑社
  28. 28. 美しく文字を組む Typography : A Manual of Design Copyright (C) Akio Yonekura タイポグラフィの技術 - 活字書体は1文字では、完成されているが複数で使用するには、 「文字を組む」技術が必要になる。 - 文字を組む際に意識することは「余白(空間)」。 - 文字組で空間コントロールを身につけると、 レイアウトの際にも空間を意識できるようになる。 - デザインの「バランス」とは、レイアウトの中に、 適切な空間が作られているかどうか。
  29. 29. Typography : A Manual of Design Copyright (C) Akio Yonekura タイポグラフィとレイアウトの関係
  30. 30. タイポグラフィとレイアウトの関係 Typography : A Manual of Design Copyright (C) Akio Yonekura 整列と関連性 オブジェクト(要素)を揃えることで、それぞれに関連性が生まれる
  31. 31. タイポグラフィとレイアウトの関係 Typography : A Manual of Design Copyright (C) Akio Yonekura 整列と関連性 オブジェクト(要素)を配置する際に、整列を意識するとバランスが良くレイアウト出来る。
  32. 32. タイポグラフィとレイアウトの関係 Typography : A Manual of Design Copyright (C) Akio Yonekura 近接と関連性 Eraser ¥ 50 Calculator ¥ 50 Scissors ¥ 150 Eraser ¥ 50 Crayon ¥ 50 Scissors ¥ 150 オブジェクト間の距離が曖昧になると、情報がわかりにくくなる
  33. 33. タイポグラフィとレイアウトの関係 Typography : A Manual of Design Copyright (C) Akio Yonekura 近接と関連性 ¥ 50 ¥ 50 ¥ 150 Eraser ¥ 50 Crayon ¥ 50 Scissors ¥ 150 Eraser ¥ 50 Calculator ¥ 50 Scissors ¥ 150 Eraser ¥ 50 Crayon ¥ 50 Scissors ¥ 150 関連性のあるオブジェクト間の距離を縮め、そうでないものを離すと情報がわかりやすくなる
  34. 34. タイポグラフィとレイアウトの関係 Typography : A Manual of Design Copyright (C) Akio Yonekura 要素と空間の関係 規定のスペースの中でバランスの良い配置を施す課題練習 Before After
  35. 35. タイポグラフィとレイアウトの関係 Typography : A Manual of Design Copyright (C) Akio Yonekura 要素と空間の関係 規定のスペースの中でバランスの良い配置を施す課題練習 Before After
  36. 36. タイポグラフィとレイアウトの関係 Typography : A Manual of Design Copyright (C) Akio Yonekura 要素と空間の関係 グレースケールで見ると要素と空間のバランスがわかりやすくなる Before After
  37. 37. タイポグラフィとレイアウトの関係 Typography : A Manual of Design Copyright (C) Akio Yonekura 要素と空間の関係 空間を認識できるようになると、 大胆なレイアウトをしてもバランス良く作れる
  38. 38. タイポグラフィとレイアウトの関係 Typography : A Manual of Design Copyright (C) Akio Yonekura 要素と空間の関係 賃貸検索スマホアプリの検証
  39. 39. タイポグラフィとレイアウトの関係 Typography : A Manual of Design Copyright (C) Akio Yonekura 要素と空間の関係 賃貸検索スマホアプリの検証
  40. 40. タイポグラフィとレイアウトの関係 Typography : A Manual of Design Copyright (C) Akio Yonekura 要素と空間の関係 使用する要素の形状を利用してレイアウトを組む
  41. 41. タイポグラフィとレイアウトの関係 Typography : A Manual of Design Copyright (C) Akio Yonekura 要素と空間の関係 使用する要素の形状を利用してレイアウトを組む
  42. 42. タイポグラフィとレイアウトの関係 Typography : A Manual of Design Copyright (C) Akio Yonekura 要素と空間の関係 使用する要素の形状を利用して レイアウトを組む chevrolet.com
  43. 43. Typography : A Manual of Design Copyright (C) Akio Yonekura 参考文献 - ヤン・チヒョルト「書物と活字」朗文堂 - 組版工学研究会『欧文書体百花事典』朗文堂 - アドリアン・フルティガー『活字の宇宙』朗文堂 - Emil Ruder『Typography : A Manual of Design』Niggli - Josef Muller-Brockmann『Grid Systems in Graphic Design』

×