1.
webクリエイターのための
情報交換所スペシャル

2.
「webクリエイターのための情報交換所」
ちょっとユル目の振り返りスペシャル
Illustratorでサクサク作るSVG

3.
F a c e b o o k : t a k a s h i . k i t a m u r a . 9 9
T w i t t e r : @ t a h _ t i m i n g
T I M I N G 北 村 崇
東 京 都 在
ロ ゴ マ ー ク 、 キ ャ ラ ク タ ー 、 グ ッ ズ 、 グ ラ フ ィ ッ ク デ ザ イ ン を
中 心 に 活 動 を 開 始 し 、 現 在 は W e b デ ザ イ ン 、 デ ィ レ ク シ ョ ン
な ど も 行 っ て い る 。
「 W o r d P r e s s 『 テ ー マ カ ス タ マ イ ズ 』 徹 底 攻 略 」
「 W o r d P r e s s デ ザ イ ン の メ ソ ッ ド 」
他

4.
泣き叫ぶ人

5.
万能感のある人

6.
影武者をあやつる人

7.
Webで食ってるわたし

8.
サイズ多すぎ
iPhone 5
1136×640
iPhone 4S
960×640
iPad
2048×1536
HTC/Xperia/GALAXY などの一部
1920×1080
URBANO/AQUOS などの一部
1280×720
iPhone 6
750×1334
iPhone 6 Plus
1242×2208

9.
ピクセルパーフェクト？
・・,@2x,@3x,@？x

10.
@1.5x
@1.33x
@2x
@3x
全部やったら神

11.
なんとかしたい

12.
SVG
神はいる

13.
ベクターといえばコレ

14.
Illustratorでサクサク作るSVG
AI SVG

15.
・XML

16.
・ベクター形式

17.
・フィルターやアニメーション

18.
・テキストも入る
<text>
<textPath xlink:href="#">
Illustratorでサクサク作れる！
SVGでもっと幸せになろう！
</textPath>
</text>

19.
・サイズごとに書き出す必要がない
？

20.
じゃなんで流行んないんだ
img object
iframe CSS background

21.
http://caniuse.com/

22.
Difficult?

23.
Quick and Easy!
Ai
Ai

24.
コピペでOK
+c +v

25.
レスポンシブ

26.
フォントの埋め込み

27.
SVG用フィルターあります

28.
Step1
SVGからフィルター取れます

29.
Step2
SVGからフィルター取れます

30.
これが

31.
こうなる
らくらくパ●れます

32.
2015年はSVGで
脱ビットマップ!

33.
「webクリエイターのための情報交換所」
ちょっとユル目の振り返りスペシャル
ありがとうございました。
良いお年を！