このプレゼンは、 ・イラストレーターだけど、WEBデザインもやることになった ・ディレクターだけど、UIデザインを勉強することになった ・エンジニアだけど、WEBデザイナーと仕事することになった という人たちの、 UI/UXデザインへの一歩を応援するプレゼンです。 見習いデザイナーより

1. もしも素人営業ウーマンが
UI/UXデザイナーになったら
高橋麻衣(@perop)

2. このプレゼンは、
・イラストレーターだけど、WEBデザインもやることになった
・ディレクターだけど、UIデザインを勉強することになった
・エンジニアだけど、WEBデザイナーと仕事することになった
という人たちの、
UI/UXデザインの一歩を応援する
プレゼンです。
見習いデザイナーより

3. • 私について
• UI/UXデザイナーとは
• UI/UXデザイナーの仕事の領域
• デザインプロセス
• 実際のデザイン例
• ツールの紹介
• 情報収集
• Q&A
目次

4. Mai Takahashi
2011 女性向けカメラアプリのスタートアップでインターン
2012 インターネット広告代理店 内定者バイト（見習いディレクター）
2013 インターネット広告代理店 新卒入社（営業採用）
女性向けカメラアプリのスタートアップで営業&ディレクター
2014 アメリカでiOSゲームアプリ開発
2015 アメリカ、カナダ、日本でフリーランスデザイナー
2016 現在
Product Designer
UI/UX Designer

5. デザイナー歴だけで言うと2年の超見習いです。
Graphic、イラストレーター全然出来ません。
Mai Takahashi
2011 女性向けカメラアプリのスタートアップでインターン
2012 インターネット広告代理店 内定者バイト（見習いディレクター）
2013 インターネット広告代理店 新卒入社（営業採用）
女性向けカメラアプリのスタートアップで営業&ディレクター
2014 アメリカでiOSゲームアプリ開発
2015 アメリカ、カナダ、日本でフリーランスデザイナー
2016 現在
Product Designer
UI/UX Designer

6. 「User Interface（ユーザーインターフェイス）」の略。
「User（ユーザー）」→WEBサイトに来る人やアプリを使う人
「Interface（インターフェイス）」→
人の世界と物の世界の接点・コミュニケーション空間
UI デザインとは
ユーザーがサービスをスムーズに使い、
満足出来るように手助けする

7. 「User Experience（ユーザエクスペリエンス、体験）」の略。
UX デザインとは
ユーザが特定のサービスを使ったときに得られる経験や
満足など全体を指す用語。
ポジティブな体験
認知的体験 感性的体験
楽しい！
⾯面⽩白い♩
思考
記憶 推測

8. UI/UXデザイナーの領域

9. http://asinthecity.com/2011/11/10/the-difference-between-a-ux-designer-and-ui-developer/
UI/UX Designerの領域
/ UI Designer

10. http://asinthecity.com/2011/11/10/the-difference-between-a-ux-designer-and-ui-developer/
UI/UX Designerの領域
Web Designer
/ UI Designer

11. UI/UXデザイナーという人たちの仕事

12. UIデザイナーの主な業務内容
・Customer Analysis
・Design Research
・Branding and Graphic Development
・User Guides/Storyline
・UI Prototyping Interactivity and Animation
・Adaptation to All Device Screen Sizes
・Implementation with Developer

13. ・Competitor Analysis
・Customer Analysis
・Product Structure/Strategy
・Content Development
・Wireframing
・Prototyping
・Testing/Iteration
・Development Planning
・Coordination with UI Designer
・Coordination with Developer
・Tracking Goals and Integration
・Analysis and Iteration
UXデザイナーの主な業務内容

14. デザイナーの仕事の内容
正しい人に情報を聞き出す仕事 正しい人に伝える仕事デザイン作業
⼿手を動かす作業 コミュニケーションコミュニケーション
http://blog.btrax.com/jp/2014/08/31/designers/

15. デザイナーの仕事の内容
正しい人に情報を聞き出す仕事 正しい人に伝える仕事デザイン作業
⼿手を動かす作業 コミュニケーションコミュニケーション
成果物
JPEG
PNG
PSD
http://blog.btrax.com/jp/2014/08/31/designers/

16. UI/UXデザイナーの仕事の内容
正しい人に情報を聞き出す仕事 正しい人に伝える仕事デザイン作業
⼿手を動かす作業 コミュニケーションコミュニケーション
成果物
JPEG
PNG
PSD

17. UI/UXデザイナーの仕事の内容
正しい人に情報を聞き出す仕事 正しい人に伝える仕事デザイン作業
⼿手を動かす作業 コミュニケーションコミュニケーション
成果物
＋ データ、数値
デザイナーの評価
CVR
MAU
DAU
JPEG
PNG
PSD

18. デザイナーという人たちの仕事
デザイナーは絵を描く以上の仕事
http://blog.btrax.com/jp/2014/08/31/designers/

19. じゃあ具体的に何をするの？

20. デザインプロセス

21. デザインプロセス

22. デザインプロセス
新人デザイナーの私、やります！

23. デザイナーのやること、多くないですか・・・・？
一人でやるのは無理・・・・

24. 基本的に全員と協力してやる
デザイナー
ディレクター エンジニア
どう実装する？
解決したいことは？
KPIは？

25. 基本的に全員と協力してやる
デザイナー
ディレクター エンジニア
どう実装する？
KPIは？
解決したいことは？

26. 今のところ、UI/UXデザインには教科書があまりないです。。。
❌ ❌❌

27. 今のところ、UI/UXデザインには教科書があまりないです。。。
リサーチ力
コミュニケーション力が大切
❌ ❌❌

28. ちなみに実際の作業は・・・?

29. メインカラー
フォント
ロゴ決定

31. ワイヤーフレーム作り

32. 各画面の細かいデザイン作業

33. デザインは100%完成させてからでなく、
小出しにディレクターやエンジニアに見せる

34. デザインは100%完成させてからでなく、
小出しにディレクターやエンジニアに見せる
ローンチから改善までのサイクルを意識

35. ツールの紹介

36. Photoshop Fireworks
Sketch
デザインツールの紹介

37. Invision UX Pin
POP
プロトタイピングツール

38. Invision UX Pin
POP
プロトタイピング
カフェのペーパーナプキンに手書きでもOK!

39. 個人的に印象的だったこと
日本のデザイナーがデザインツールについて語る時、
アメリカのデザイナーはParis attacksやSyrian Refugeesについて語る
Sketchって
新しいツール
知ってる？ Photoshopが
基本でしょ！

40. ツールにあまりこだわりすぎない。
個人的に印象的だったこと
日本のデザイナーがデザインツールについて語る時、
アメリカのデザイナーはParis attacksやSyrian Refugeesについて語る
Sketchって
新しいツール
知ってる？ Photoshopが
基本でしょ！

41. どんな風に情報収集するの？

42. • colis
• WEBクリエイターボックス
• NxWorld
• Google Developers Japan
国内

43. 海外
• HackerNews
• ProductHunt
• MaterialUP
• Smashing Magazine
• iOS Human Interface Guidelines (https://developer.apple.com/library/ios/
documentation/UserExperience/Conceptual/MobileHIG/)
• Google Design(https://design.google.com/resources/)
• Android Developer(http://developer.android.com/design/index.html)

44. 神は細部に宿る
デザイナーの基本

45. 神は細部に宿る
プロトタイプを早く仕上げ、早く世に出す
デザイナーの基本
これからのデザイン

46. 神は細部に宿る
プロトタイプを早く仕上げ、早く世に出す
社内でなく
ユーザから
評価をもらう
デザイナーの基本
これからのデザイン

47. 神は細部に宿る
プロトタイプを早く仕上げ、早く世に出す
チームで改善する
社内でなく
ユーザから
評価をもらう
デザイナーの基本
これからのデザイン

48. 神は細部に宿る
プロトタイプを早く仕上げ、早く世に出す
チームで改善する
社内でなく
ユーザから
評価をもらう
デザイナーの基本
これからのデザイン
実際、このアジャイル式デザインのプロセスって・・・

49. とにかく時間がない。（涙）
神は細部に宿る
プロトタイプを早く仕上げ、早く世に出す
改善する
社内でなく
ユーザから
評価をもらう
デザイナーの基本
これからのデザイン
実際、このアジャイル式デザインのプロセスって・・・

50. とにかく時間がない。（涙）
神は細部に宿る
プロトタイプを早く仕上げ、早く世に出す
改善する
社内でなく
ユーザから
評価をもらう
デザイナーの基本
これからのデザイン
おすすめポイント①良いプロダクトを模倣
実際、このアジャイル式デザインのプロセスって・・・

51. どうしてかっこよく見えるんだろう？
「マージンを制するものがスマートフォンデザインを制す！」
http://eure.jp/blog/design-margin/
twitter
app store

52. どうしてかっこよく見えるんだろう？
とにかく見て調べまくる。
http://eure.jp/blog/design-margin/
twitter
app store

53. 神は細部に宿る
プロトタイプを早く仕上げ早く世に出す
改善する
デザイナーの基本
これからのデザイン
社内でなく
ユーザから
評価をもらう
とにかく時間がない。（涙）
おすすめポイント②既存のUIテンプレートを活用
実際、このアジャイル式デザインのプロセスって・・・

54. google先生！

55. Pinterestでフォローしてください

56. 複雑なことばかりになってしまいましたが・・・・

57. デザイナー
複雑なことばかりになってしまいましたが・・・・
誰かを喜ばせたり、驚かせるのが好き

58. デザイナー
誰かを喜ばせたり、驚かせるのが好き
遊び心があって、
見る人がワクワクするものを作れるデザイナーは魅力的
複雑なことばかりになってしまいましたが・・・・

59. Thank you!!
高橋麻衣（クロエ）
@perop
https://dribbble.com/
MaiTakahashi
https://www.pinterest.com/
maitakahashi/