シンボルフォント — それは、新しい画像形式

11,876 views

Published on

もはや、フォントは「画像形式」のひとつです。アイコンやロゴをWebで表示するならば、シンボルフォント(アイコンフォント)を自作するのが一番。
前半で、シンボルフォントを取り巻く現状を、後半で実際の制作方法を紹介します。

※このスライドは、2014年5月15日のCSS Niteで話した内容です。
http://cssnite.jp/afterdark/cpi/vol10/

Published in: Design
4 Comments
101 Likes
Statistics
Notes
No Downloads
Views
Total views
11,876
On SlideShare
0
From Embeds
0
Number of Embeds
2,684
Actions
Shares
0
Downloads
55
Comments
4
Likes
101
Embeds 0
No embeds

No notes for slide

シンボルフォント — それは、新しい画像形式

  1. 1.  河村 奨 (Tsutomu Kawamura)  facebook.com/cognitom シンボルフォント ̶それは、新しい画像形式̶
  2. 2. + + 色々
  3. 3. 東京で2軒目の コワーキングスペース。 下北沢オープンソースCafe
  4. 4. 毎日、なにかしらイベント 部室いろいろ プログラマの多く集まる場
  5. 5. 毎週日曜には、 小中学生向けの コーダー道場も
  6. 6. オープンソース書籍多数。 気軽に、お立寄りください :-)
  7. 7. 主に、デザイナー のはずです。 執筆・教育 マスター デザイン プログラミング
  8. 8. ボルダーです。
  9. 9. シンボルフォント?
  10. 10. 今日話すのは、コレ。
  11. 11. たとえば、 これ。
  12. 12. これも、
  13. 13. これも フォント。
  14. 14. Webdings !"#$%&' Wingdings !"#$%&' Arial ABCDEFGHI 昔からおなじみ?
  15. 15. Webフォント 使ってますか?
  16. 16. こんなの
  17. 17. こんなの
  18. 18. こんなの
  19. 19. こんなの
  20. 20. これだけ。 <link! rel="stylesheet"! type="text/css"! href="http://fonts.googleapis.com/css?! family=Tangerine" />
  21. 21. TTF EOT WOFF SVG IE 4 ✔ 9~ ✔ ✔ Firefox 3.5 ✔ 3.6~ ✔ ✔ Safari 3.1 ✔ ✔ 5.1~ ✔ ✔ ✔ Chrome 4 ✔ ✔ 6~ ✔ ✔ ✔ iOS 4 ✔ 4.2 ✔ ✔ 5.1~ ✔ ✔ ✔ Android 2.2 ✔ 3.1 ✔ ✔ current ✔ ✔ ✔ ブラウザ 対応状況
  22. 22. シンボルフォント + Webフォント
  23. 23. コレです。
  24. 24.  @font-face { font-family: 'MyIcons'; src: url(‘MyIcons.ttf') format('truetype'); } <span class=”mi mi-good”></span> <i class=”mi mi-good”></i> <i class=”mi”>good</i> 例1. 例2. 例3.
  25. 25. 何が美味しいの? u
  26. 26. なめらか。Retina Ready :-)
  27. 27. CSSで色コントロール
  28. 28. サーバリクエスト減 = 速い WOFF
  29. 29. シンボルフォントな Webサイト
  30. 30. Octicons
  31. 31. ※Symbolsetを利用
  32. 32. Segoe UI Symbol
  33. 33. シンボルフォント いろいろ
  34. 34. Font Awesome • 人気です。どのくらい? • GitHubで ★2.3万 • 参考まで… • Bootstrap ★6.7万 • jQuery ★3万
  35. 35. 369 icons
  36. 36. open source!
  37. 37. GLYPHICONS • Bootstrapに同梱 • 商用ライセンスなら、
 ロイヤリティフリー! • 混ぜても大丈夫
  38. 38. Foundation Icon Fonts 3
  39. 39. http://symbolset.com http://icomoon.iohttp://kudakurage.com/ligature_symbols/
  40. 40. 多色刷りも
  41. 41. GIF 透 過 PNG CSSス プ ラ イ ト SVG? W ebフ ォ ン ト !PUAを 使 うLigature(合 字 )多 色 刷 り ほ か * PUA = Private User Area 未来現在過去 アイコン利用の小歴史
  42. 42. レスポンシブ Web デザイン モバイルファースト / Retina フラットデザイン 2012 2011 2013フォントDIY ここ数年のトレンド + α
  43. 43. と言ってたら ほんとに来た ! ※日本以外…
  44. 44. でも、フォントなんて どうやって作るの? S
  45. 45. そう。それが、 今日のテーマです。 u
  46. 46. シンボルフォント の 作り方
  47. 47. Aコース Bコース Cコース Sketch Grunt Adobe IllustratorGlyphs Mini FontPrep OTF SVG SVG
  48. 48. Aコース Bコース Cコース Sketch 3 gulp Adobe IllustratorGlyphs Mini FontPrep OTF SVG SVG
  49. 49. Glyphs Mini - ¥4,500 FontPrep - ¥0 OTF TTF SVG EOT WOFF出力 変換 Webフォント GUIアプリだけで完結。フォント好き向けA コース
  50. 50. Illustrator - ¥26,160 / 年 (単体) TTF SVG EOT WOFF出力 変換 Webフォント + CSS 使い慣れたIllustratorではじめる、フォントライフB コース SVG CSS IcoMoon - ¥0∼
  51. 51. Sketch 3 - ¥7,800 TTF SVG EOT WOFF出力 変換 Webフォント + CSS イチオシ、完全自動化アイコン制作環境C コース CSS gulp - ¥0
  52. 52. Illustrator による アイコンフォント制作 B コース
  53. 53. Recipe • Mac / Windows • Adobe Illustrator • IcoMoon (Webアプリ) • HTML / CSS の基礎知識 グリッド ベジェ曲線
  54. 54. アイコン作成 ❶ Recipe icons/512x512.ait
  55. 55. アイコン作成 ❷ Recipe フランクフルトを描く マスタードを描く 型抜き 簡単なアイコンの例 ※一色で作図する必要があります。
  56. 56. アイコン作成 ❸ Recipe SVG形式で保存 SVGのオプション
  57. 57. IcoMoon ❶ Recipe アイコンをインポート ファイル選択
  58. 58. IcoMoon ❷ Recipe グリフの一括選択 設定変更・ダウンロード
  59. 59. IcoMoon ❸ Recipe 設定変更 • IcoMoon → anne-library • icon- → ai- • Class Selector → .ai IcoMoonのデフォルトの書き方 <i class= icon-eat ></i> FontAwesome的な書き方 <i class= ai ai-eat ></i>
  60. 60. IcoMoon ❹ Recipe ダウンロード! EOT (Embedded OpenType) TTF (TrueType Font) SVGフォント WOFF (Web Open Font Format) CSS
  61. 61. SVG出力して、変換。 これだけ。 B コース
  62. 62. デモサイト
  63. 63. こんなの 作ってみました。
  64. 64. PCTabletPhone
  65. 65. Anne Frank Micro Library Project http://annelibrary.github.io/ 読み返してみて 考えよう 公立図書館に 借りにいこう 読んで、友達に 贈ろう フランクフルトを 片手に語り合おう! お店に、オフィスに。 自宅の本棚に。 ライブラリーの開き方 アクションをおこす 451 「アンネ・フランク・ライブラリー」は、誰でも参加でき るプロジェクトです。合言葉は「読むこともライブラリー、 借りるのもライブラリー、本を置くのも語り合うのも ライブラリー」。詳しくはこちらまで。 元にしたポスター シンプル。フラット。 テーマ毎のアイコン この辺は、Font Awesome 水平線もアイコン 題字はTypeSquare イラストも 背景も
  66. 66. girl emblem borrow buy diary related books leaned pot grinderstacked eatread Font Awesome
  67. 67. 誤解を恐れずに言うなら、 フォントは、 画像形式のひとつになった。
  68. 68. GIF JPEG PNG SVG フォント 写真 × ◎ △ × × イラスト × △ ○ ◎ × ロゴ △ × ○ ○ ◎ アイコン △ × △ △ ◎ 画像 or フォント?
  69. 69. シンボルフォント の 使い方
  70. 70. ファイル配置 ❶ Recipe フォントを fonts へ。CSSは anne-library.css にリネームして css へ。 IcoMoonから ダウンロードしたファイル
  71. 71. ファイル配置 ❷ Recipe ここでは、 fonts/ → ../fonts/ に置換 (環境に合わせて)
  72. 72. HTMLの編集 ❶ Recipe アイコン追加前の HTMLはこんな感じ。
  73. 73. HTMLの編集 ❷ Recipe <link href="css/anne-library.css" rel="stylesheet"> <i class="ai ai-girl"></i> <i class="fa fa-twitter"></i> 参考 : Font Awesome (上)、Glyphicon (下) <i class="glyphicon glyphicon-cloud"></i>
  74. 74. HTMLの編集 ❸ Recipe <i class="ai ai-girl"></i> <i class="fa fa-twitter"></i> <i class="fa fa-facebook"></i> <i class="ai ai-read"></i> <i class="ai ai-borrow"></i> <i class="ai ai-buy"></i> <i class="ai ai-eat"></i>
  75. 75. <i class="ai ai-girl"></i> <i class="fa fa-twitter"></i> <i> タグ? HTML5的には、セーフ ※気になる人は、<span>タグで アイコンであることを示す モジュール性を確保
  76. 76. CSSのアイデア ❶ Recipe ! .title > i { font-size: 800%; background: #fff; border-radius: .5em; width: 1em; } 800% = 128px r = 0.5em 1em 丸囲み
  77. 77. CSSのアイデア ❷ Recipe .title-hr { border-top: 3px solid #423933; } 600% = 96px -0.5em 水平線 .title-hr > i { font-size: 600%; margin: -.5em 0; }
  78. 78. 色の変更 Recipe 例えば青系に。これを、
  79. 79. 後からの調整に、 マジで強い。 r
  80. 80. 先週、 こんなの作りました。 おまけ
  81. 81. Sketch用 フォントテンプレート
  82. 82. SketchTool gulp-sketch gulp-iconfont gulp-consolidate SVG
  83. 83. さくさく フォントが作れます
  84. 84. $ gulp symbols ↵
  85. 85. https://github.com/cognitom/symbols-for-sketch
  86. 86. シンボルフォント まとめ
  87. 87. 意外と作るのカンタン
  88. 88. 後からの調整に マジで強い
  89. 89. もはや、フォントは、 画像形式のひとつ
  90. 90. 選択肢いろいろ 全部作らなくてもOK!
  91. 91. 使わない手はない。 【結論】 
  92. 92. Thank you.
  93. 93. https://github.com /cognitom/symbol-font-in-web/ 「シンボルフォント in Web (仮)」  facebook.com/cognitom

×