罢测辫别罢补濒办蝉第10回「もっと知りたい！奥别产フォント」
72 likes12,936 views
2012年5月12日に青山ブックセンター本店で開催された欧文書体セミナー罢测辫别罢补濒办蝉第10回「もっと知りたい！奥别产フォント」のスライドです。 ??? 【追記1】スライド10の「础谤颈补濒は何と呼ぶ？」は、日本においてArialは色々な呼び方が流通しているという蛇足話で、正しい読み方を追求する意図はありません。統計データは当ブログのFacebookページで皆さんに行ったアンケート結果です。スライドのペラ1画像がひとり歩きしてしまっているため、この場で補足いたします。 【追記2】スライド62の「翱辫别苍罢测辫别フォント机能に対応するブラウザ」は、現在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/
![マテリアルデザインを用いたデザインリニューアル [フリル編]](https://cdn.slidesharecdn.com/ss_thumbnails/droidkaigi-150425032816-conversion-gate02-thumbnail.jpg?width=560&fit=bounds)
More Related Content
Viewers also liked (15)
Similar to 罢测辫别罢补濒办蝉第10回「もっと知りたい！奥别产フォント」 (20)
罢测辫别罢补濒办蝉第10回「もっと知りたい！奥别产フォント」
- 1. ABCで abc を語ろう ! TypeTalks 第10 回 「もっと知りたい！ Web フォント」 Web フォントの基礎が分かる“これまで” 海外の最新事情から知る と、 “これから” 2012年5月12日時点の内容ですのでご注意ください。
- 2. 自己紹介 ? 1982年生まれ ? Webデザイナー?ライター ? フォントブログ運営 ? TypeTalks第2回?第3回?第8回 ? CSS Nite, LP21? ? 名古屋トライデント専門学校
- 3. 他媒体でも寄稿しています
- 4. 本日のアジェンダ 1. Webフォントとは？ 2. Webフォントの今 3. Webフォントの課題 4. フォントブログのWebフォント 5. 本日のまとめ – 海外サイトのWebフォント考察
- 7. Webセーフフォント Arial Georgia Verdana Comic Sans Impact
- 8. 础谤颈补濒？ Arial
- 9. ArialはHelveticaのコピー書体？ Arial ABCDEFGabcdefg12345 Helvetica ABCDEFGabcdefg12345 Akzidenz Grotesk ABCDEFGabcdefg12345 Univers ABCDEFGabcdefg12345
- 10. 础谤颈补濒は何と呼ぶ？ Arial 4% 2% 5% 9% 46% アライアル アリアル 14% エリアル エイリアル アリエル 20% エアリアル その他 有効回答197名：フォントブログFacebookページ調べ
- 11. 贬别濒惫别迟颈肠补は奥别产セーフフォントではない Helvetica
- 12. 複数フォント名を並べて記述 #sample1 { font-family: Helvetica, Arial, sans-serif; }
- 13. 日本语书体の奥别产セーフフォントは无い Osaka ヒラギノ角ゴ
- 14. 画像文字
- 15. 奥别产フォントの简単な仕组み Helvetica F Webサイト サーバ
- 17. 奥别产フォントサービスの仕组み Helvetica F F F Futura Webサイト 月額?PV課金 Webフォントサービス 専用コードの発行 専用コードの挿入 CSSの設定 Webデザイナー
- 18. 奥别产フォントサービスが存在する3つの理由 1. 面倒なフォーマットの分岐処理 .EOT .OTF .SVG .WOFF .TTF
- 19. 奥别产フォントのフォーマット EOT =Embedded OpenType IE 4–8
- 20. 奥别产フォントのフォーマット WOFF =Web Open Font Format Chrome Firefox Opera Safari 6+ 3.5+ 11+ 5.1+ IE 9+
- 21. 环境に応じた复数のフォーマットを配信している EOTのHelvetica Webサイト Windows+IE F F F WOFFのHelvetica Webサイト Mac+Safari Webフォントサービス 専用コードの発行 専用コードの挿入 CSSの設定 Webデザイナー
- 22. 奥别产フォントサービスが存在する3つの理由 2. データの不正ダウンロード防止 F F F
- 23. 奥别产フォントサービスが存在する3つの理由 3. フォント業界の新たなビジネスモデル Web
- 24. 奥别产フォントサービスが存在する理由のまとめ .EOT .OTF .SVG .WOFF .TTF 1. 面倒なフォーマットの分岐処理 F F Web F 3. フォント業界の 2. データの不正ダウンロード防止 新たなビジネスモデル
- 25. 日本语フォントの容量 F あ Helvetica 新ゴ 60kb 5,000kb
- 26. ページ内で使われている文字だけのフォントファイルを生成 ダイナミック?サブセッティング
- 28. 利用者にとっての3つのメリット 1. 選択してコピー＆ペーストできる
- 29. 利用者にとっての3つのメリット 2. 拡大?縮小してもぼやけない 新ゴ 新ゴ
- 30. 利用者にとっての3つのメリット 3. 検索にひっかかりやすくなる
- 31. 利用者にとっての3つのメリットのまとめ 1. 選択してコピー＆ペーストできる 新ゴ 新ゴ 2. 拡大?縮小してもぼやけない 3. 検索にひっかかりやすくなる
- 33. 制作者にとっての3つのメリット 1. 作業を引き継げる?早く帰宅できる 0 75 150 225 300 画像文字 Webフォント 作業時間(秒)
- 34. 奥别产デザイナーの修正フローを実演 “公司情报”→“コーポレート情报”に変更をしてください
- 36. 奥别产デザイナーの修正フロー【画像文字编】 1. Photoshopなどの画像編集ソフトを立ち上げる 169px
- 37. 奥别产デザイナーの修正フロー【画像文字编】 2. 任意のフォントで編集しスライスの幅を変更 245px
- 38. 奥别产デザイナーの修正フロー【画像文字编】 3. Web用に画像を書き出し
- 39. 奥别产デザイナーの修正フロー【画像文字编】 4. 画像の幅の値を変更する <img src=/slideshow/typetalks10web/13965755/"img/company_title.gif" width="169" ... /> <img src=/slideshow/typetalks10web/13965755/"img/company_title.gif" width="245" ... />
- 40. 奥别产デザイナーの修正フロー【画像文字编】 5. altの値を変更する <img ... width="169" alt= "企業情報" ... /> <img ... width="245" alt= "コーポレート情報" ... />
- 42. 奥别产デザイナーの修正フロー【奥别产フォント编】 <h2>企業情報</h2> <h2>コーポレート情報</h2> h2 { font-family: 新ゴ; }
- 43. 制作者にとっての3つのメリット 2. 画像ファイルが大幅に減る
- 44. 制作者にとっての3つのメリット 3. 様々な環境に対応可能 レスポンシブデザイン
- 48. 昨年は蹿辞苍迟蝉.肠辞尘と罢测辫别办颈迟をメインに取り上げました 有名なフォントを使いたい人向け 個性派フォントを使いたい人向け
- 49. 础诲辞产别が罢测辫别办颈迟を买収
- 51. コスト削减のため买取型も普及
- 52. 贩売するデータのフォーマット EOT?WOFFフォーマットでの販売 .EOT .OTF .SVG .WOFF .TTF
- 54. Web Fonts Preview?FONTDROPPER 1000 どんなサイトでもWebフォントで確認できる
- 55. Typecast 复数の奥别产フォントサービスを一元管理できる
- 56. FontFont Subsetter 购入した奥别产フォントデータをサブセット化できる
- 58. 翱辫别苍罢测辫别フォントって何？
- 59. 翱辫别苍罢测辫别フォントって何？ ? 最大 65,535文字収録 ? 様々なデータを1つに集約 ? 高機能なのに容量が少ない
- 60. OpenTypeフォント機能の代表例 ? ? 246 ffi 合字 246 ライニング数字と 分数 （リガチャ） オールドスタイル数字
- 62. 翱辫别苍罢测辫别フォント机能に対応するブラウザ Firefox 4+ IE 10+
- 63. どんな場面でOpenTypeフォント機能を使うのか ? ? 246 ffi 合字 246 ライニング数字と 分数 （リガチャ） オールドスタイル数字
- 70. 翱厂やブラウザによりレンダリングが异なる MacOS X Windows XP Safari Internet Explorer Hairline Gothic Firmin Didot Proxima Nova Museo
- 71. 翱厂やブラウザによりレンダリングが异なる リュウミンEH-KL 見出しミンMA31 MacOS X Safari 黎ミンY30 M リュウミンEH-KL 見出しミンMA31 Windows XP Internet Explorer 黎ミンY30 M
- 72. フォントサイズが大きければ问题はない？ Windows XP Internet Explorer リュウミンM-KL 75px/100px
- 73. Webフォントで注目を浴びるスラブセリフ体 HHHスラブセリフ ヘアラインセリフ ブラケテッドセリフ
- 74. よく使われるスラブセリフ体 Museo Slab by exljbris Font Foundry Clarendon by Various Foundries
- 75. Webフォントで注目を浴びるスラブセリフ体 Webタイポグラフィでは 文字の読みやすさが重要 ぼやけがちな細いセリフ部分の 骨格がしっかりとしているため 見出し部分に映える Fonts.com Blog – 10 Web Typography Trends to Watch in 2012
- 76. 贰惫别谤苍辞迟别はロゴ?サイトにスラブセリフ体 Evernote
- 78. 例えば顿滨狈 DIN Next? FF DIN PF DIN Text Pro?
- 81. フォントブログで使われている奥别产フォント 筑紫A丸ゴシック Std M Adlle SemiBold Ratio Regular I-OTF新ゴシックPro M ソフトゴシック R Brevia Bold
- 82. 惭测贵辞苍迟蝉のここに注目 MyFontsトップページ MyFonts Webfonts Showcase
- 83. ここにも奥别产フォント PETITBOYS Regular
- 85. 笔贰罢滨罢叠翱驰厂ロゴ
- 86. Glyphs Glyphs ?26,000 Glyphs Mini ?3,900
- 88. 必要な文字だけの翱罢贵を生成
- 90. FontSquirrelの@font-face GeneratorでWebフォントファイルを生成 简単に设置できる奥别产フォントキットが生成される
- 91. そのまま设置する 拡大してもぼやけない
- 92. ここにも奥别产フォント Part2 Adlle SemiBold & Bold
- 94. 奥别产フォントは颁厂厂3と组み合わせて使う #HeaderR_A { text-shadow: -1px -1px 0px #9f896a, 1px -1px 0px #9f896a, 1px 1px 0px #9f896a, -1px 1px 0px #9f896a; }
- 95. 奥别产フォントは颁厂厂3と组み合わせて使う #HeaderR_A { -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); -o-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); }
- 98. 奥别产フォントと相性がよいサイトとは？ 1. スマートフォンやタブレット向けサイト Webフォントを最適に表示できる環境が整っている
- 99. 奥别产フォントと相性がよいサイトとは？ 2. 動的?インタラクティブなサイト 文字を “テキスト” として扱うことができる
- 100. 奥别产フォントと相性がよいサイトとは？ 3. 文字がデザインの中心となっているサイト
- 102. 奥别产デザイン?奥别产タイポグラフィとは？ 環境によって姿やカタチを変える Webデザイン?Webタイポグラフィ 246 ? テキストの装飾や レンダリング レイアウト OpenTypeフォント機能
- 103. プログレッシブ?エンハンスメントとは？ プログレッシブ エンハンスメント ? Progressive Enhancement 古い環境は最低限を維持しつつ、 最新環境にはより豊かな表現を実現
- 104. プログレッシブ?エンハンスメントとは？ Mac+Firefox12 Win+IE7
- 105. 本日のまとめ Webデザイン?Webタイポグラフィは、 決して紙媒体の延長ではない スマートフォン?タブレットの普及や Webフォントの登場から 改めてWeb上の文字について考えたい …でも書体の選択や欧文組版の基礎は十分生かせる
- 106. 本日はどうもありがとうございました Thank You! スライドで使ったフォント：Neo Sans / DIN Next Rounded / ヒラギノ角ゴシック