TypeTalks第10回「もっと知りたい!Webフォント」

21,133 views

Published on

2012年5月12日に青山ブックセンター本店で開催された欧文書体セミナーTypeTalks第10回「もっと知りたい!Webフォント」のスライドです。

・・・

【追記1】スライド10の「Arialは何と呼ぶ?」は、日本においてArialは色々な呼び方が流通しているという蛇足話で、正しい読み方を追求する意図はありません。統計データは当ブログのFacebookページで皆さんに行ったアンケート結果です。スライドのペラ1画像がひとり歩きしてしまっているため、この場で補足いたします。

【追記2】スライド62の「OpenTypeフォント機能に対応するブラウザ」は、現在Chromeも対応しています。

・・・

1. Webフォントとは?
  1-1. Webで使えるフォント
  1-2. Webフォントサービス
  1-3. 利用者にとってのメリット
  1-4. 制作者にとってのメリット
2. Webフォントの今
  2-1. Webフォントサービスの今
  2-2. 付帯・補助サービスの紹介
  2-3. OpenTypeフォント機能が実現
3. Webフォントの課題
  3-1. Windows上の表示問題
  3-2. 使いたいフォントが選べない?
4. フォントブログのWebフォント
  4-1. 現在使っているWebフォント
  4-2. ロゴをWebフォント化
5. 本日のまとめ
  5-1. 相性がよいサイトとは?
  5-2. Webタイポグラフィとは?

・・・

ABCでabcを語ろう! TypeTalks 第10回
「もっと知りたい!Webフォント Webフォントの基礎が分かる“これまで”と、海外の最新事情から知る“これから”」
http://www.aoyamabc.co.jp/culture/typetalks10/

Published in: Design
0 Comments
72 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
21,133
On SlideShare
0
From Embeds
0
Number of Embeds
2,397
Actions
Shares
0
Downloads
0
Comments
0
Likes
72
Embeds 0
No embeds

No notes for slide

TypeTalks第10回「もっと知りたい!Webフォント」

  1. 1. ABCで abc を語ろう ! TypeTalks 第10 回「もっと知りたい! Web フォント」Web フォントの基礎が分かる“これまで” 海外の最新事情から知る と、 “これから”2012年5月12日時点の内容ですのでご注意ください。
  2. 2. 自己紹介• 1982年生まれ• Webデザイナー・ライター• フォントブログ運営• TypeTalks第2回・第3回・第8回• CSS Nite, LP21 • 名古屋トライデント専門学校
  3. 3. 他媒体でも寄稿しています
  4. 4. 本日のアジェンダ1. Webフォントとは?2. Webフォントの今3. Webフォントの課題4. フォントブログのWebフォント5. 本日のまとめ– 海外サイトのWebフォント考察
  5. 5. 1. Webフォントとは?Webフォントの仕組みとメリット
  6. 6. 1. Webフォントとは?1-1. Webで使えるフォント
  7. 7. Webセーフフォント Arial Georgia Verdana Comic Sans Impact
  8. 8. Arial? Arial
  9. 9. ArialはHelveticaのコピー書体?Arial ABCDEFGabcdefg12345Helvetica ABCDEFGabcdefg12345AkzidenzGrotesk ABCDEFGabcdefg12345Univers ABCDEFGabcdefg12345
  10. 10. Arialは何と呼ぶ? Arial 4% 2% 5% 9% 46% アライアル アリアル 14% エリアル エイリアル アリエル 20% エアリアル その他 有効回答197名:フォントブログFacebookページ調べ
  11. 11. HelveticaはWebセーフフォントではない Helvetica
  12. 12. 複数フォント名を並べて記述 #sample1 { font-family: Helvetica, Arial, sans-serif; }
  13. 13. 日本語書体のWebセーフフォントは無い Osaka ヒラギノ角ゴ
  14. 14. 画像文字
  15. 15. Webフォントの簡単な仕組み Helvetica F Webサイト サーバ
  16. 16. 1. Webフォントとは?1-2. Webフォントサービス
  17. 17. Webフォントサービスの仕組み Helvetica F F F Futura Webサイト 月額・PV課金 Webフォントサービス 専用コードの発行 専用コードの挿入 CSSの設定 Webデザイナー
  18. 18. Webフォントサービスが存在する3つの理由 1. 面倒なフォーマットの分岐処理 .EOT .OTF .SVG .WOFF .TTF
  19. 19. Webフォントのフォーマット EOT =Embedded OpenType IE 4–8
  20. 20. Webフォントのフォーマット WOFF =Web Open Font Format Chrome Firefox Opera Safari 6+ 3.5+ 11+ 5.1+ IE 9+
  21. 21. 環境に応じた複数のフォーマットを配信している EOTのHelvetica Webサイト Windows+IE F F F WOFFのHelvetica Webサイト Mac+Safari Webフォントサービス 専用コードの発行 専用コードの挿入 CSSの設定 Webデザイナー
  22. 22. Webフォントサービスが存在する3つの理由 2. データの不正ダウンロード防止 F F F
  23. 23. Webフォントサービスが存在する3つの理由 3. フォント業界の新たなビジネスモデル Web
  24. 24. Webフォントサービスが存在する理由のまとめ .EOT .OTF .SVG .WOFF .TTF 1. 面倒なフォーマットの分岐処理 F F Web F 3. フォント業界の 2. データの不正ダウンロード防止 新たなビジネスモデル
  25. 25. 日本語フォントの容量 F あ Helvetica 新ゴ 60kb 5,000kb
  26. 26. ページ内で使われている文字だけのフォントファイルを生成 ダイナミック・サブセッティング
  27. 27. 1. Webフォントとは?1-3. 利用者にとってのメリット
  28. 28. 利用者にとっての3つのメリット 1. 選択してコピー&ペーストできる
  29. 29. 利用者にとっての3つのメリット 2. 拡大・縮小してもぼやけない 新ゴ 新ゴ
  30. 30. 利用者にとっての3つのメリット 3. 検索にひっかかりやすくなる
  31. 31. 利用者にとっての3つのメリットのまとめ 1. 選択してコピー&ペーストできる新ゴ 新ゴ 2. 拡大・縮小してもぼやけない 3. 検索にひっかかりやすくなる
  32. 32. 1. Webフォントとは?1-4. 制作者にとってのメリット
  33. 33. 制作者にとっての3つのメリット 1. 作業を引き継げる・早く帰宅できる 0 75 150 225 300 画像文字Webフォント 作業時間(秒)
  34. 34. Webデザイナーの修正フローを実演 “企業情報”→“コーポレート情報”に変更をしてください
  35. 35. Webデザイナーの修正フロー画像文字編
  36. 36. Webデザイナーの修正フロー【画像文字編】 1. Photoshopなどの画像編集ソフトを立ち上げる 169px
  37. 37. Webデザイナーの修正フロー【画像文字編】 2. 任意のフォントで編集しスライスの幅を変更 245px
  38. 38. Webデザイナーの修正フロー【画像文字編】 3. Web用に画像を書き出し
  39. 39. Webデザイナーの修正フロー【画像文字編】 4. 画像の幅の値を変更する <img src="img/company_title.gif" width="169" ... /> <img src="img/company_title.gif" width="245" ... />
  40. 40. Webデザイナーの修正フロー【画像文字編】 5. altの値を変更する <img ... width="169" alt= "企業情報" ... /> <img ... width="245" alt= "コーポレート情報" ... />
  41. 41. Webデザイナーの修正フローWebフォント編
  42. 42. Webデザイナーの修正フロー【Webフォント編】 <h2>企業情報</h2> <h2>コーポレート情報</h2> h2 { font-family: 新ゴ; }
  43. 43. 制作者にとっての3つのメリット 2. 画像ファイルが大幅に減る
  44. 44. 制作者にとっての3つのメリット 3. 様々な環境に対応可能 レスポンシブデザイン
  45. 45. 2. Webフォントの今Webフォント・Webフォントサービスの最新事情
  46. 46. 2. Webフォントの今2-1. Webフォントサービスの今
  47. 47. 日本語Webフォントサービスが続々オープン
  48. 48. 昨年はfonts.comとTypekitをメインに取り上げました 有名なフォントを使いたい人向け 個性派フォントを使いたい人向け
  49. 49. AdobeがTypekitを買収
  50. 50. Adobe Creative Cloudの一部に
  51. 51. コスト削減のため買取型も普及
  52. 52. 販売するデータのフォーマット EOT・WOFFフォーマットでの販売 .EOT .OTF .SVG .WOFF .TTF
  53. 53. 2. Webフォントの今2-2. 付帯・補助サービスの紹介
  54. 54. Web Fonts Preview・FONTDROPPER 1000 どんなサイトでもWebフォントで確認できる
  55. 55. Typecast 複数のWebフォントサービスを一元管理できる
  56. 56. FontFont Subsetter 購入したWebフォントデータをサブセット化できる
  57. 57. 2. Webフォントの今2-3. OpenTypeフォント機能が実現
  58. 58. OpenTypeフォントって何?
  59. 59. OpenTypeフォントって何?• 最大 65,535文字収録• 様々なデータを1つに集約• 高機能なのに容量が少ない
  60. 60. OpenTypeフォント機能の代表例 fl ⅝ 246 ffi 合字 246 ライニング数字と 分数 (リガチャ) オールドスタイル数字
  61. 61. PhotoshopやIllustratorの設定パネル
  62. 62. OpenTypeフォント機能に対応するブラウザ Firefox 4+ IE 10+
  63. 63. どんな場面でOpenTypeフォント機能を使うのかfl ⅝ 246 ffi 合字 246 ライニング数字と 分数 (リガチャ) オールドスタイル数字
  64. 64. どんな場面でOpenTypeフォント機能を使うのかを知る良書
  65. 65. FontShopのOpenType User Guideが便利
  66. 66. FontShopのOpenType User Guideが便利
  67. 67. iPadのiBooksアプリで管理すると便利
  68. 68. 3. Webフォントの課題いいことだけではない?Webフォントの課題
  69. 69. 3. Webフォントの課題3-1. Windows上の表示問題
  70. 70. OSやブラウザによりレンダリングが異なる MacOS X Windows XP Safari Internet Explorer Hairline Gothic Firmin Didot Proxima Nova Museo
  71. 71. OSやブラウザによりレンダリングが異なる リュウミンEH-KL 見出しミンMA31 MacOS X Safari 黎ミンY30 M リュウミンEH-KL 見出しミンMA31 Windows XP Internet Explorer 黎ミンY30 M
  72. 72. フォントサイズが大きければ問題はない? Windows XP Internet Explorer リュウミンM-KL 75px/100px
  73. 73. Webフォントで注目を浴びるスラブセリフ体 HHHスラブセリフ ヘアラインセリフ ブラケテッドセリフ
  74. 74. よく使われるスラブセリフ体 Museo Slab by exljbris Font Foundry Clarendon by Various Foundries
  75. 75. Webフォントで注目を浴びるスラブセリフ体 Webタイポグラフィでは 文字の読みやすさが重要 ぼやけがちな細いセリフ部分の 骨格がしっかりとしているため 見出し部分に映える Fonts.com Blog – 10 Web Typography Trends to Watch in 2012
  76. 76. Evernoteはロゴ・サイトにスラブセリフ体 Evernote
  77. 77. 3. Webフォントの課題3-2. 使いたいフォントが選べない?
  78. 78. 例えばDIN DIN Next™ FF DIN PF DIN Text Pro®
  79. 79. 4. フォントブログのWebフォント散々Webフォントについて語ってるけどどうなの?
  80. 80. 4. フォントブログのWebフォント4-1. 現在使っているWebフォント
  81. 81. フォントブログで使われているWebフォント 筑紫A丸ゴシック Std M Adlle SemiBold Ratio Regular I-OTF新ゴシックPro M ソフトゴシック R Brevia Bold
  82. 82. MyFontsのここに注目 MyFontsトップページ MyFonts Webfonts Showcase
  83. 83. ここにもWebフォント PETITBOYS Regular
  84. 84. 4. フォントブログのWebフォント4-2. ロゴをWebフォント化
  85. 85. PETITBOYSロゴ
  86. 86. Glyphs Glyphs ¥26,000 Glyphs Mini ¥3,900
  87. 87. Glyphs Miniにペーストしてフォントデータを作成
  88. 88. 必要な文字だけのOTFを生成
  89. 89. FontSquirrelの@font-face GeneratorでWebフォントファイルを生成
  90. 90. FontSquirrelの@font-face GeneratorでWebフォントファイルを生成 簡単に設置できるWebフォントキットが生成される
  91. 91. そのまま設置する 拡大してもぼやけない
  92. 92. ここにもWebフォント Part2 Adlle SemiBold & Bold
  93. 93. WebフォントはCSS3と組み合わせて使う
  94. 94. WebフォントはCSS3と組み合わせて使う #HeaderR_A { text-shadow: -1px -1px 0px #9f896a, 1px -1px 0px #9f896a, 1px 1px 0px #9f896a, -1px 1px 0px #9f896a; }
  95. 95. WebフォントはCSS3と組み合わせて使う #HeaderR_A { -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); -o-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); }
  96. 96. 5. 本日のまとめWebフォント・Webタイポグラフィの特性
  97. 97. 5. 本日のまとめ5-1. 相性がよいサイトとは?
  98. 98. Webフォントと相性がよいサイトとは? 1. スマートフォンやタブレット向けサイト Webフォントを最適に表示できる環境が整っている
  99. 99. Webフォントと相性がよいサイトとは? 2. 動的・インタラクティブなサイト 文字を “テキスト” として扱うことができる
  100. 100. Webフォントと相性がよいサイトとは? 3. 文字がデザインの中心となっているサイト
  101. 101. 5. 本日のまとめ5-2. Webタイポグラフィとは?
  102. 102. Webデザイン・Webタイポグラフィとは? 環境によって姿やカタチを変える Webデザイン・Webタイポグラフィ 246 fl テキストの装飾や レンダリング レイアウトOpenTypeフォント機能
  103. 103. プログレッシブ・エンハンスメントとは? プログレッシブ エンハンスメント ・ Progressive Enhancement 古い環境は最低限を維持しつつ、 最新環境にはより豊かな表現を実現
  104. 104. プログレッシブ・エンハンスメントとは? Mac+Firefox12 Win+IE7
  105. 105. 本日のまとめ Webデザイン・Webタイポグラフィは、 決して紙媒体の延長ではない スマートフォン・タブレットの普及や Webフォントの登場から 改めてWeb上の文字について考えたい …でも書体の選択や欧文組版の基礎は十分生かせる
  106. 106. 本日はどうもありがとうございました Thank You! スライドで使ったフォント:Neo Sans / DIN Next Rounded / ヒラギノ角ゴシック

×