2016/09/10 Trunk株式会社が主催する学生向けワークショップで行ったSketchの使い方の講義をした時の資料です。

2. 自己紹介

3. はるた まさき
横浜国立大学 3年 / freee
デザイナー
大学2年の初めから、人材系ベンチャーで企画担当。
その後、DeNAでライター兼編集者としてインターン。
今年4月からfreeeでUXデザイナーとしてインターンを開始。

4. 早速ですが、

5. みなさんは、

6. デザイナーって何してるかわかりますか？

7. 私も実際に働き始めるまで、
わかりませんでした。

8. どんなコトをしているか
要件定義
課題整理
ラフ作成 プロトタイプ デザイン

9. 要件定義
課題整理
ラフ作成 プロトタイプ デザイン
プロダクトを作成する時にもっとも重要となる部分です。
誰の何を解決するためにプロダクトを作るのかチームで認識を合わせます。
どんなコトをしているか

10. 要件定義
課題整理
プロトタイプ デザインラフ作成
デザインを作る前に、ラフを作ります。
紙などで、簡単なラフを作る事で、作るもののイメージが間違っていないか認識を合わせます。
どんなコトをしているか

11. 要件定義
課題整理
ラフ作成 デザインプロトタイプ
プロトタイプでは、ラフで作成したものをより具体的に作ります。
配色や細かいレイアウトはプロトタイプでは無視して作ります。
どんなコトをしているか

12. 要件定義
課題整理
ラフ作成 プロトタイプ デザイン
最後に、プロトタイプで作ったものをデザインします。
ここでSketchやPhotoshop、Illustratorを使ってデザインします。
どんなコトをしているか

13. デザインするためには、
たくさんやるコトがある

14. でも、

15. デザイナーが評価されるのは、

16. アウトプット（制作物）

17. 良いアウトプットを出すためには、

18. ツールを使いこなさなければならない
もちろん、ツールを使いこなすだけで良いアウトプットが出せるわけではありませんが、
自分の頭の中のイメージを忠実に再現するためにはツールを使いこなす必要があります。

19. デザインで使うツールって
何使えばいいの？

20. 半年前の集計なので、今やったら変わるかも...

21. Photoshop、めっちゃ多い！

22. 実際にはどんな違いがあるの？

23. 画像やレイアウト調整に強いが
動作が重い。
アイコンに強く、動作も早いが
レイアウト調整が難しい。
動作も早く、レイアウト調整に強
いが、Macしか使えない。
ツールの違いは？
IllustratorPhotoshop Sketch

24. 私が初心者におすすめしたいのは

25. Sketch！

26. なぜなら

27. 安くて、

28. 速くて、

29. 覚えやすい！

30. それが

31. Sketch！

32. freeeでもSketch使ってます

33. 今日はSketchの使い方を教えます
前置き長くてごめん

34. 今日の目標

35. Sketchの基本操作をマスターします

36. 下準備

37. 必要なツールを用意していきます

38. タブで右クリック

39. これを選択

41. ドラッグしてください

42. 他も同じようにできます

45. 次はアートボードを用意します

46. キーボードのAを押してください

47. 簡単な操作説明

48. 本日のお題

50. Googleのサイトをトレースしよう

52. 質問タイム

53. エンジニアのための「Sketch入門！」 1時間コース
復習したい方はこちらがオススメ