e-bird社内勉強会のために制作した、Sketch.app布教用スライドです。

1. Start Sketch.app
Sketch.appをわりとガチで布教する会

2. Profile
Shinichi kogiso
@kgsi
始まりはデザイナー（?）今は何でも屋・情報屋。
最近はフロントエンド界隈をウォッチ中。
いろいろ教えてください。

3. About Sketch
http://bohemiancoding.com/sketch/

4. About Sketch
次世代のWeb制作ツール
Fireworksがアップデートしない、と
通達があった前後から脚光を浴びてきたアプリ
現在のVerは3.2
http://bohemiancoding.com/sketch/

5. 採用企業一例

6. What's difference?
で、従来のツールとなにが違うの？

7. ・アートボードの複数作成が可能
・Symbolの作成
・使いやすいグリッド機能
・パーツごとに書き出し可能なスライス機能
・スクリプトによる拡張
・Sketch Mirrorを使ったプレビュー
etc…

8. Sketch Fireworks
Photoshop
スライスレイヤーから
スライススライス
ページ機能
ありありなし
ありなしなし
あり※1 ありあり※２
ありなしなし
なしなしあり
複数
アートボード
シンボル
CSS出力
CMYK対応
※1 Fireworksのように、シンボルごとにサイズを変更するなどはできない
※2 スマートオブジェクトが相当

9. Let’s try!
実際に操作してみます

10. ・アートボードの作成
・アートボードの複製
・Symbolの作成
・グリッド機能
・各種スタイル
・スライス機能
・グループ化
Let’s try!

11. Technic
より使いこなすためのテクニック

12. Technic - Tool
Sketch Mirror
リアルタイムにアートボードを
iPhoneで確認できるツール
https://itunes.apple.com/us/app/sketch-mirror/
id677296955?mt=8
ZEPLIN
アートボード上のオブジェクトの値を
コーディング用にコピペできるツール
https://zeplin.io/

13. Technic - Plugin
・sketch-commands
https://github.com/bomberstudios/sketch-commands
・Content-generator-sketch-plugin
https://github.com/timuric/Content-generator-sketch-
plugin
・gulp-sketch
https://github.com/cognitom/gulp-sketch

14. 他にも便利なツールや
技術が沢山！Sketchは盛り上がってる！
・sketchappsources
http://www.sketchappsources.com/
・Content-generator-sketch-plugin
https://github.com/sketchplugins/plugin-directory
・Installed Sketch Plugins
http://www.mkdown.com/ccfa37b1bf412aca28c8

15. Drawback
Sketchの欠点

16. ・バグが多い（最近は多少よくなってきた）
・日本語のタイポグラフィは弱い
(3でだいぶ改善？)
・大量のコンテンツを配置すると、動作が
重たくなる傾向がある
・ビットマップ処理は不得意。
Illustratorのように、画像処理は
他ソフトに任せる

17. Sketchは、いわゆる
オールインワンソフトではない。
適材適所な使い方をしよう。

18. Summary
Sketchの使いどころまとめ

19. Summary - Web site
・プレンテキストで作ることを前提にした
サイトには最適
・細部にこだわりが必要で、日本語の多用、
ビットマップなデザインには向いていない
・WFや遷移図を作るのにも向いている

20. Summary - APP & SMT
・機能や使い勝手から判断するに、PCサイト
よりもアプリやスマホサイトに向いている
・アートボードの複数編集機能は有用。
特に、Sketch Mirrorと組み合わせた時の
使い勝手は最高
・アプリのアイコンなど、同じデザインで
複数サイズが必要な場合にも力を発揮

21. でも、PhotoshopやFIreworksから
Sketchにする理由って？覚えるの大変だし、
そもそもそんな普及していないでしょ？
使えなきゃ駄目？

22. 従来のようなPCサイトのみをターゲットとした
デザインから、様々なデバイスへの最適化、
対応を求められている。
Sketchはそれに対しての
一つの答え。

23. ご清聴ありがとうございました。