2017年5月28日に開催されたABC2017Springでの講演資料

1. SketchがAndroidアプリのUIデザインに向いているワケ
山本麻美

2. 山本麻美
1997年 フリーランスのWeb制作者に
1999年 i‑modeのケータイサイト作ったり
2010年 日本Androidの会に参加したら、 エンジニアさんたちにそそのかされて モバイルアプリのUIデザイナーに。 Wishscope、トレタ、ビズリーチ、 レシピブログとか 色々

3. 今日のおはなし
・Symbol ‑ UIコンポーネントのシンボル化で作業効率アップ
・Export ‑ Android用画像assetsの書き出し
・Real Time Preview ‑ “Crystal”でミラーリング
・Plugin ‑ Design for Androidを助けてくれるプラグイン
・他ツール連携 ‑ デザイナーとエンジニアのコミュニケーション

4. アプリデザインの工程
どんなの 作りましょか デザイン 研ぎ澄ませ！ エンジニアに 伝えよう

6. SymbolUIコンポーネントのシンボル化で作業効率アップ

7. こんなアプリを作るとする。

8. それぞれをSymbolとして作成しておく
ToolbarStatus bar
Card

9. Toolbar

10. Card

11. Toolbar Icons
ToolbarのアイコンもSymbolとして
作成しておくことがポイントです。

12. Toolbar
アイコン違う！ 表示数も違う…

13. SymbolのOverrides
Screenごとに表示アイコンを変えることができます。 非表示にもできます。

14. SymbolのResizing

15. SymbolのResizing
位置固定 サイズ固定

16. SymbolのResizing

17. ExportAndroid用画像assetsの書き出し

18. Android用に画像書き出し

19. Android用に画像書き出し
フォルダ分けもされているのでそのままASに入れられる！

20. もちろんSVGも
Exportできます。

21. SVGに変更する

22. 9patchとか Launcher iconは、、、
Android Assets Studio
https://romannurik.github.io/AndroidAssetStudio/

23. Real Time Preview“Crystal”でAndroidデバイスにミラーリング

24. 実機で確認しながらデザインできる！

25. WifiかUSBで使えるよ
Crystal

26. 実機で確認しながらデザインする！
PC画面で見ている のとでは、やっぱり 全然違うよね

27. PluginとかDesign for Androidを助けてくれるプラグイン

28. Material Design Color Palette
Primary Color, Accent Color等を作ってくれるプラグイン

29. CRAFT
ダミーの写真やテキスト、人名

30. ○○○ゴコロをくすぐってもくれるわけで
フフフフ。こんなプラグイン 見つけちゃったもんね～(^O^)

31. 他ツール連携デザイナーとエンジニアのコミュニケーション

32. UI実装するときエンジニアが知りたいこと
・各要素の位置関係 ・サイズ ・画像名 ・カラーコード ・スクロールする箇所と固定箇所 ・アニメーションのタイミング etc.

33. デザイナーの言い分
・Spec表を作るのすごく大変 ・大変なのにその予算がない ・デザイン通りに実装されない etc.

34. SpecはZeplinで伝える
SketchからImportするだけ Androidプロジェクトは 単位がdpで表示されるよ

35. InVision Inspect modeもあるよ

36. まとめ
Sketchは、UIコンポーネントのデザインに 向いている。 最近、Android向けのExportができるようになりました。 プラグインで自分仕様にできるのです。 ワークフローの中で必要な、いろんなツールと連携しやすいです。

37. Sketchの初心者Q&Aブログ
http://sketchegg.blogspot.jp/