iOS 9 週連続 Boot Camp! 9 週目

2. 自己紹介
よこやま ゆうだい
@udaiadu
アプリケーションエンジニア / デザイナー
2013/12 入社
最近はスプラトゥーンにガチハマり
前職は都内もつ鍋屋店長
北海道 釧路市 出身
これまでに建築施工管理等を経験

3. 自己紹介
よこやま
@udaiadu
アプリケーションエンジニア / デザイナー
2013/12 入社
最近はスプラトゥーンにガチハマり
前職は都内もつ鍋屋店長
北海道 釧路市 出身
これまでに建築施工管理等を経験

4. 質問 1
Are you エンジニア ?
唐突に!

5. 質問 2
Are you デザイナー ?
唐突に!!

6. 質問 3
Are you どっちも ?
唐突に!!!

7. モバイルアプリサービス部
10%
10%
10%
70%
クラスメソッド
エンジニア
デザイナー
どっちも
PM・PL

8. おわかりいただけただろうか…

9. デザイナー募集中!!

10. 😕

11. エンジニアかつデザイナーとして

12. エンジニアかつデザイナーとして
自分でデザインして自分で実装
デザイン渡して最後に UI 調整
CustomView 職人
icon 等の素材はリポジトリに Push

13. よりよいアプリを届けるために

14. よりよいアプリを届けるために
あるある事例
なにが問題？
解決案

15. あるある事例
レイアウトのバランスがよくない
エンジニア編

16. 自己紹介
@udaiadu
アプリケーションエンジニア / デザイナー
2013/12 入社
最近はスプラトゥーンにガチハマり
前職は都内もつ鍋屋店長
北海道 釧路市 出身
これまでに建築施工管理等を経験
よこやま ゆうだい

17. 自己紹介
よこやま ゆうだい
@udaiadu
アプリケーションエンジニア / デザイナー
2013/12 入社
最近はスプラトゥーンにガチハマり
前職は都内もつ鍋屋店長
北海道 釧路市 出身
これまでに建築施工管理等を経験
よこやま ゆうだい
@udaiadu
アプリケーションエンジニア / デザイナー
2013/12 入社
最近はスプラトゥーンにガチハマり
前職は都内もつ鍋屋店長
北海道 釧路市 出身
これまでに建築施工管理等を経験

18. なにが問題？
細かいデザイン修正が発生する
修正箇所が多すぎてそのままリリース
プロっぽくない

19. 解決案
レイアウトの基礎を学ぶ

20. 自己紹介
よこやま ゆうだい
@udaiadu
アプリケーションエンジニア / デザイナー
2013/12 入社
最近はスプラトゥーンにガチハマり
前職は都内もつ鍋屋店長
北海道 釧路市 出身
これまでに建築施工管理等を経験
自己紹介
よこやま ゆうだい
@udaiadu
アプリケーションエンジニア / デザイナー
2013/12 入社
最近はスプラトゥーンにガチハマり
前職は都内もつ鍋屋店長
北海道 釧路市 出身
これまでに建築施工管理等を経験

21. 自己紹介
よこやま ゆうだい
@udaiadu
アプリケーションエンジニア / デザイナー
2013/12 入社
最近はスプラトゥーンにガチハマり
前職は都内もつ鍋屋店長
北海道 釧路市 出身
これまでに建築施工管理等を経験

22. 自己紹介
@udaiadu
アプリケーションエンジニア / デザイナー
2013/12 入社
最近はスプラトゥーンにガチハマり
前職は都内もつ鍋屋店長
北海道 釧路市 出身
これまでに建築施工管理等を経験
よこやま ゆうだい

23. 自己紹介
よこやま ゆうだい
@udaiadu
アプリケーションエンジニア / デザイナー
2013/12 入社
最近はスプラトゥーンにガチハマり
前職は都内もつ鍋屋店長
北海道 釧路市 出身
これまでに建築施工管理等を経験
よこやま ゆうだい
@udaiadu
アプリケーションエンジニア / デザイナー
2013/12 入社
最近はスプラトゥーンにガチハマり
前職は都内もつ鍋屋店長
北海道 釧路市 出身
これまでに建築施工管理等を経験

24. ＜書籍紹介＞
なるほどデザイン

25. あるある事例
AutoLayout が苦手
エンジニア編

26. 😱

27. Add Missing Constraints
ダメ、ゼッタイ。

28. なにが問題？
UIの実装にやたらと時間がかかる
端末によってレイアウトが崩壊する
簡単なレイアウトしか作れない

29. 解決案
AutoLayout から逃げない

30. 逃げたくなるわけ

31. おばけ怖い理論
人間だれしも未知のものに恐怖する
正体がわかれば怖くない

32. AutoLayout を知る

33. やる気
140pt 235pt

34. やる気

35. http://www.slideshare.net/kakegawa-atsushi/devio-auto-layout

36. あるある事例
icon のサイズ小さくして
エンジニア編

37. 😶
icon 小さくして
😑
サイズは？
😒
@2x が⃝⃝pxで、
@3x が⃝⃝pxでよろ

38. なにが問題？
自分でできない
特別なソフトが必要だと思っている
デザイナーとのやりとりの方が時間かかる

39. 解決案
簡単な画像編集スキルを身につける

41. Preview でできること
画像を見る

42. だけじゃない！

43. Preview でできること
画像を見る
サイズの調整
カラーの調整
線、文字、図形の書き込み
などなど

44. マークアップツールバー表示

45. マークアップツールバー

46. サイズを調整

48. カラーを調整

51. あるある事例
デザイン提案時に理由を聞かれて詰む
デザイナー編

52. 😨😇

53. なにが問題？
説得力がない
意見を交わすことができない
デザインスキルが鍛えられない

54. 解決案
UI と会話する

55. 😶
なぜそこにいるの？
画面を切り替える
ためだよ
Button

56. あるある事例
WEBデザインっぽい
デザイナー編

57. 💻📱 ≠

58. なにが問題？
UIコンポーネントの特性が考慮されていない
画面遷移が複雑で迷子になる
１つの画面に情報が多すぎる

59. 解決案
アプリにはアプリのデザイン

60. 人の意見を聞いてみる

61. 人の意見を聞いてみる
デザイン中に色々な人に見てもらう
動くものができたら実際に使ってもらう

62. あるある事例
自分で修正してPRちょうだい
（冗談）
デザイナー編

63. なにが問題？
少しの修正でも大きなコミュニケーション
コストがかかる
作業の合間に修正依頼してまた修正依頼
とか気がひける

64. 解決案
IB をマスターする

67. http://www.slideshare.net/kakegawa-atsushi/devio-auto-layout

68. まとめ

69. エンジニア
レイアウトの基礎を学ぶ
AutoLayout から逃げない
簡単な画像編集スキルを身につける

70. デザイナー
デザインに明確な根拠を持つ
アプリデザイン ≠ WEBデザイン
IB をマスターする

71. どっちも
色々なアプリを見る
デザインガイドラインを見る

72. ＜書籍紹介＞
モバイルデザイン
パターン

73. B
C
D
E
F

74. B
C
Designer
E
F

75. B
C
Designer
E
F
ngineer

76. エンジニアとデザイナーのあいだに

77. 邪魔するものは何もない！

78. いいものつくりませんか？