Wantedlyで隔週で行っている社員向けの速習集会で発表しました。毎回若干名外部の人も招待しています。 http://wantedly.connpass.com/

1. Sketch速習会
by @ui_pb

2. Profile
宇佐美 龍
1996年6月19日生まれ、19歳
Wantedlyでデザイナーをしています。
メイン UI設計、フロントエンド
個人 映像制作、写真、DTP

3. UIデザインツール
About Sketch

4. HISTORY of UI Tool
Illustrator CS6
Photoshop CC
Sketch3
長方形ツールとリンクファイル配置に
Psが対応したのを機に乗り換える
WantedlyがSketchだったので

5. SketchのUI
Tool Bar
Layer inspectorArtboard

6. とりあえず作ってみます

7. Demo
何作ろう…

8. Demo
みんなが知ってそうなのがいいな

9. Demo
wantedly.com

10. Demo

11. 1. Sketchの概念について
2. 基本操作
3. ツクル課題
4. ツクル課題の解説
5. ヨミトル課題
6. ヨミトリ課題の解説
Agenda

12. Why Sketch?

14. Sketchの基礎

15. Sketch.appを起動してください
もう起動してますね

16. 新しいファイルを作ります
⌘+N

18. どこで作り始めたらいいんだ…

19. ということで、アートボードを作ります
A

22. それでは

23. パーツの操作

24. まず覚えることは大きく3つ

25. ズームとツールとテキスト

26. 3つのズーム
アートボード全体を見る ⌘+1
選択中の要素を見る ⌘+2
実際の大きさで見る ⌘+0

27. 3つのパーツ
長方形ツール R
円ツール O
線ツール L
ectangle
val
ine

28. テキストの入力
T
入力したいところをクリック

29. レイヤーとグループ

30. グループの作り方と基準

31. そもそもなぜグループを作るのか
グループを作る基準

32. • パーツの移動をしやすくするため
• レイヤーパネルを汚さないため
• 高速な実装を実現するため
グループを作る基準

33. デザインデータはあくまで実装して意味をもつ
グループを作る基準

34. グループ=<div>
グループを作る基準

35. にするところはグループ化

36. 1つのHTMLタグになるところはグループ化

37. グループを作る基準

38. できるだけ細かくグループ化しとく

39. 懸念
深い階層のパーツが選択するのが大変

40. コードと逆
レイヤーの順番

41. つまり、グローバルヘッダーが
レイヤーパネルの一番下にくる
レイヤーの順番

42. レイヤーの操作
ゼン面のパーツ(同じ階層内) tab
下の階層に入る enter
上の階層に出て行く esc

43. レイヤーの操作
めんどくさすぎる…

44. レイヤーの操作
ダイレクト選択
⌘+click

45. 最速そうなレイヤーの操作
ダイレクト選択 ⌘+click
上の階層に出て行く esc

46. 大切なのはパーツ/グループに名前をつけること
⌘+R

47. ルールを決めると分かりやすい
(<div>のclass名っぽく)

48. レイヤー操作まとめ
1. パーツを置く(R/O/L)
2. パーツの名前を変更(⌘+R)
3. グループ化 (⌘+G)
4. グループの名前を変更(⌘+R)

49. ツクりましょう

52. 悩み
デザインを正確に実装してくれない…

53. ヨミましょう

54. いきなり課題
demo_read.sketch

56. Style Check List
•font-size
•color(font)
•opacity
•fill
•border color/px
•radius

57. 時間があったらtipsを話します。