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


河村奨 (Tsutomu Kawamura)
 facebook.com/cognitom
シンボルフォント
̶それは、新しい画像形式̶

東京で2軒目の
コワーキングスペース。
下北沢オープンソースCafe

毎日、なにかしらイベント
部室いろいろ
プログラマの多く集まる場

毎週日曜には、
小中学生向けの
コーダー道場も

オープンソース書籍多数。
気軽に、お立寄りください :-)

主に、デザイナー
のはずです。
執筆・教育
マスター
デザイン
プログラミング

今日話すのは、コレ。

Webdings !"#$%&'
Wingdings !"#$%&'
Arial ABCDEFGHI
昔からおなじみ?

Webフォント
使ってますか?

これだけ。
<link!
rel="stylesheet"!
type="text/css"!
href="http://fonts.googleapis.com/css?!
family=Tangerine" />

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 ✔ ✔ ✔
ブラウザ
対応状況

+
Webフォント


@font-face {

font-family: 'MyIcons';

src: url(‘MyIcons.ttf') format('truetype');

}


good
例1.
例2.
例3.

なめらか。Retina Ready :-)

サーバリクエスト減 = 速い
WOFF

シンボルフォントな
Webサイト

いろいろ

Font Awesome
• 人気です。どのくらい?
• GitHubで ★2.3万
• 参考まで…
• Bootstrap ★6.7万
• jQuery ★3万

GLYPHICONS
• Bootstrapに同梱
• 商用ライセンスなら、 
ロイヤリティフリー!
• 混ぜても大丈夫

http://symbolset.com http://icomoon.iohttp://kudakurage.com/ligature_symbols/

GIF
透
過
PNG
CSSス
プ
ラ
イ
ト
SVG?
W
ebフ
ォ
ン
ト
!PUAを
使
うLigature(合
字
)多
色
刷
り
ほ
か
* PUA = Private User Area
未来現在過去
アイコン利用の小歴史

レスポンシブ Web デザイン
モバイルファースト / Retina
フラットデザイン 2012
2011
2013フォントDIY
ここ数年のトレンド + α

と言ってたら
ほんとに来た !
※日本以外…

でも、フォントなんて
どうやって作るの?
S

そう。それが、
今日のテーマです。
u

の作り方

Aコース Bコース Cコース
Sketch
Grunt
Adobe IllustratorGlyphs Mini
FontPrep
OTF SVG SVG

Aコース Bコース Cコース
Sketch 3
gulp
Adobe IllustratorGlyphs Mini
FontPrep
OTF SVG SVG

Glyphs Mini - ¥4,500 FontPrep - ¥0
OTF
TTF
SVG
EOT
WOFF出力変換
Webフォント
GUIアプリだけで完結。フォント好き向けA コース

Illustrator - ¥26,160 / 年 (単体)
TTF
SVG
EOT
WOFF出力変換
Webフォント + CSS
使い慣れたIllustratorではじめる、フォントライフB コース
SVG CSS
IcoMoon - ¥0∼

Sketch 3 - ¥7,800
TTF
SVG
EOT
WOFF出力変換
Webフォント + CSS
イチオシ、完全自動化アイコン制作環境C コース
CSS
gulp - ¥0

Illustrator による
アイコンフォント制作
B コース

Recipe • Mac / Windows
• Adobe Illustrator
• IcoMoon (Webアプリ)
• HTML / CSS の基礎知識
グリッドベジェ曲線

アイコン作成 ❶
Recipe
icons/512x512.ait

アイコン作成 ❷
Recipe
フランクフルトを描くマスタードを描く型抜き
簡単なアイコンの例
※一色で作図する必要があります。

アイコン作成 ❸
Recipe
SVG形式で保存 SVGのオプション

IcoMoon ❶
Recipe
アイコンをインポートファイル選択

IcoMoon ❷
Recipe
グリフの一括選択設定変更・ダウンロード

IcoMoon ❸
Recipe
設定変更
• IcoMoon → anne-library
• icon- → ai-
• Class Selector → .ai
IcoMoonのデフォルトの書き方

FontAwesome的な書き方

IcoMoon ❹
Recipe
ダウンロード!
EOT (Embedded OpenType)
TTF (TrueType Font)
SVGフォント
WOFF (Web Open Font Format)
CSS

SVG出力して、変換。
これだけ。
B コース

こんなの
作ってみました。

Anne Frank Micro Library Project
http://annelibrary.github.io/
読み返してみて
考えよう
公立図書館に
借りにいこう
読んで、友達に
贈ろう
フランクフルトを
片手に語り合おう！
お店に、オフィスに。
自宅の本棚に。
ライブラリーの開き方
アクションをおこす
451
「アンネ・フランク・ライブラリー」は、誰でも参加でき
るプロジェクトです。合言葉は「読むこともライブラリー、
借りるのもライブラリー、本を置くのも語り合うのも
ライブラリー」。詳しくはこちらまで。
元にしたポスター
シンプル。フラット。
テーマ毎のアイコン
この辺は、Font Awesome
水平線もアイコン
題字はTypeSquare
イラストも
背景も

girl emblem
borrow buy
diary related
books leaned pot grinderstacked
eatread
Font Awesome

誤解を恐れずに言うなら、
フォントは、
画像形式のひとつになった。

GIF JPEG PNG SVG フォント
写真 × ◎ △ × ×
イラスト × △ ○ ◎ ×
ロゴ △ × ○ ○ ◎
アイコン △ × △ △ ◎
画像 or フォント?

の使い方

ファイル配置 ❶
Recipe
フォントを fonts へ。CSSは anne-library.css にリネームして css へ。
IcoMoonから
ダウンロードしたファイル

ファイル配置 ❷
Recipe
ここでは、 fonts/ → ../fonts/ に置換 (環境に合わせて)

HTMLの編集 ❶
Recipe
アイコン追加前の
HTMLはこんな感じ。

HTMLの編集 ❷
Recipe <link href="css/anne-library.css" rel="stylesheet">


参考 : Font Awesome (上)、Glyphicon (下)

HTMLの編集 ❸
Recipe

タグ?
HTML5的には、セーフ
※気になる人は、タグで
アイコンであることを示すモジュール性を確保

CSSのアイデア ❶
Recipe !
.title > i {
font-size: 800%;
background: #fff;
border-radius: .5em;
width: 1em;
}
800%
= 128px
r = 0.5em
1em
丸囲み

CSSのアイデア ❷
Recipe
.title-hr {
border-top: 3px solid #423933;
}
600%
= 96px
-0.5em
水平線
.title-hr > i {
font-size: 600%;
margin: -.5em 0;
}

色の変更
Recipe 例えば青系に。これを、

後からの調整に、
マジで強い。
r

先週、
こんなの作りました。
おまけ

Sketch用
フォントテンプレート

SketchTool
gulp-sketch gulp-iconfont
gulp-consolidate
SVG

さくさく
フォントが作れます

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

More Related Content

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