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

河村 奨 (Tsutomu Kawamura)

facebook.com/cognitom

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

+ +色々

シンボルフォント?

今日話すのは、コレ。

たとえば、 これ。

これも、

これも フォント。

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~ ✔ ✔ ✔

iOS4 ✔

4.2 ✔ ✔

5.1~ ✔ ✔ ✔

Android2.2 ✔

3.1 ✔ ✔

current ✔ ✔ ✔

ブラウザ 対応状況

シンボルフォント +

Webフォント

コレです。

@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.

何が美味しいの?

u

なめらか。Retina Ready :-)

CSSで色コントロール

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

WOFF

シンボルフォントな

Webサイト

Octicons

※Symbolsetを利用

Segoe UI Symbol

シンボルフォント

いろいろ

Font Awesome

• 人気です。どのくらい?

• GitHubで ★2.3万 • 参考まで…

• Bootstrap ★6.7万

• jQuery ★3万

369 icons

open source!

GLYPHICONS

• Bootstrapに同梱 • 商用ライセンスなら、

ロイヤリティフリー!

• 混ぜても大丈夫

Foundation Icon Fonts 3

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

多色刷りも

GIF

透過PNG

CSSスプライト

SVG?

Webフォント!

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のデフォルトの書き方

<i class=“icon-eat”></i> FontAwesome的な書き方

<i class=“ai ai-eat”></i>

IcoMoon ❹Recipe

ダウンロード!

EOT (Embedded OpenType)

TTF (TrueType Font)SVGフォント

WOFF (Web Open Font Format)

CSS

SVG出力して、変換。 これだけ。

B コース

デモサイト

こんなの

作ってみました。

PCTabletPhone

ࡉࠗࠢࡦࡈࡀࡦࠕ

⺒ ୫ࠆࠅ ߁⾈ 㘩ࠆߴ

Anne Frank Micro Library Project

http://annelibrary.github.io/

読み返してみて考えよう

公立図書館に借りにいこう

読んで、友達に贈ろう

フランクフルトを片手に語り合おう！

ߊ⟎ࠍޠ⸤ᣣޟ

ߚ߈⟎ߦ✜৻

ᧄࠍਗࠆߴ

お店に、オフィスに。自宅の本棚に。

ライブラリーの開き方

アクションをおこす

NjȜǶƤథ֘

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">

<i class="ai ai-girl"></i>

<i class="fa fa-twitter"></i>

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

<i class="glyphicon glyphicon-cloud"></i>

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>

<i class="ai ai-girl"></i>

<i class="fa fa-twitter"></i>

<i> タグ?

HTML5的には、セーフ ※気になる人は、<span>タグで

アイコンであることを示す モジュール性を確保

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

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

$ gulp symbols ↵

https://github.com/cognitom/symbols-for-sketch

シンボルフォント まとめ

意外と作るのカンタン

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

もはや、フォントは、

画像形式のひとつ

選択肢いろいろ全部作らなくてもOK!

使わない手はない。

【結論】

Thank you.