2016.4.14 に開催されたデザイナーイベントUICrunchにて発表した登壇内容。 「デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き」のslideに続く第2弾で、よりデザイナー向きのタスク効果率についてまとめてあります。

2. Profile
iOS / Android
Xcode (swift)
Android
Android studio (xml)
iOS
マンガアプリ
iOS
VRアプリ
iOS/Android
ポイントメディアアプリ
動画投稿アプリ
iOS Xcode(swift)

3. 1. なぜ領域を超えたのか？
きっかけ
領域に入り込む前の葛藤
2. 何をしてきたのか？
開発環境セットアップ
UI実装
なぜ領域を超えられたのか
3. 何が変化したのか？
領域を超える以前と今
スキルを活かす
領域を超えることのススメ

4. きっかけ
なぜ領域を超えたのか？

5. PJT要件
最優先：バグだらけのアプリを正常値へ
エンジニアタスク
サーバーサイドもクライアントも、
修繕ではなく、作り直しの状態
リリースまでに残された時間
約2ヶ月

6. リリース時点でのタスク消化率
System
layout
95%
Graphic
Interaction

7. リリース後の反応
・文章が途中で見切れてて最後まで読めない
・変なマージンが空いてる
・要素が変な位置にずれて表示されてる

8. 反省点
ユーザー体験が損なわれず実装コストも下げられ
るUI変更の判断ができずエンジニアの負担を減ら
せなかった
リリースに最低限必要な期間を見積もれず、ビジ
ネス側へ説明することができなかった

9. デザイナーが変わらなければ
何も変わらない
My answer

10. 領域に入り込む前の葛藤
なぜ領域を超えたのか？

11. 両立の手法が未知
UI / UX / Graphic
Engineering
Xcode
1day
？hour
+ =
Design

12. やってみなきゃわからない
My answer

13. 環境セットアップ
何をしたのか？
xcodeでの開発準備を例に

14. ・Xcodeの導入(AndroidであればAndroid studio)
デザインツールと同じ。ボタンを押して待つだけ。
・Provisioning Fileの作成
エンジニアに依頼。今でも苦手。
・Gitの基礎知識
1.5hほどの基礎知識をレクチャー頂き、その後独学。
・GitのGUI toolの設定
自分の場合はSourceTreeを選定。
・CocoaPodsでライブラリを導入
完全にエンジニア頼み。最近も手順を間違えて助けてもらった…

15. UI実装
xcodeでの開発を例に
何をしたのか？

16. 配色とFontSize変更
難易度：1
storyboard編集箇所

17. User Defined Runtime Attributesで
コードを書いた気になる
難易度：2
storyboard編集箇所

18. storyboard編集箇所
画像の比率を指定
難易度：3

19. viewDidLoad()内にコードを書き始める
難易度：4
.swiftファイル

20. マージンの調整し始める
難易度：5
storyboard編集箇所

21. TableViewのレイアウト実装
難易度：5強
Table View
100%9:40 PM
/ : H H
( a pg bvbg
(
7 HH Fm bl a
a
989 8H sc vbg
(
a r r
vbg
r s p a
a v b g %
r ! vbg%
(1 A A F E H
4
68 H
リストUIを表現するための
UIパーツ

22. CoreAnimationでInteractionとTransition
次にマスターしたい！

23. なぜ領域を超えられたのか
何をしたのか？

24. スキルセットの原点
WEBで身につけた変数の宣言 / 関数 / 条件分岐 / クラスの概念
と継承など、プログラミングの基礎があったからかもしれない
Action script 3.0
web
Javascript Swift
iOS App
+ →
flash
html
web
css xml
Android App
+ →
web

25. 組織のサポート
週1日だけチームに積まれているタスクのうちエンジニアリング
の内容のものを できる範囲で自分の力で消化する開発ルールで、
現場で学ぶ環境となっていた
∼当時のマネージャがGoogleの20%のルールからヒントを得て発案∼

26. 領域を超える以前と今
何が変化したのか？

27. 開発スタイル（以前）
Client Server API
Review
Review Deploy
DeployReview
DesignPlanning
Release
Order
ReviewGuide
DesignerProducer Enginnertimeline

28. 開発スタイル（現在）
Client Server API
DeployReview
Design
Client
Planning
Release
DesignerProducer Enginnertimeline

29. 作業コスト
両立の手法は見出せたのか？
Design
Design
Enginnering
Costs
timeline
100%
120%
100%
Design
Enginnering
1yearago now

30. アウトプット
sketch内の各画面ごとに、
エンジニアがパッと見て実装
イメージをつかめるようなア
ウトプットに変化した。
2
8 a k
74 74a
7 74
m 9
6ha 1
e 44
1
o b tg
1
100%9:40 PM
73
2
8 a k
74 74a
7 74
m 9
6ha 1
e 44
1
o b tg
1
100%9:40 PM
73
i t ch H
462 eh M
p o
43/0 % 462
a E
t s P
ilg d PO 431 25
40 eh s
a E
s P eh
sketchに記載する、
slideしてキャンセルするUIのguide

31. スキルを活かす
何が変化したのか？

32. 高速プロトタイピングの実現
実装ができるデザイナーがいることにより
・安定的な挙動のUIを採用することが可能
・開発コストを下げつつ表現したいUIも実現
企画プレゼンやユーザーテストをより早く実現し、
本開発に向けての明確な課題の洗い出しが可能となる。
プロデューサーやレビュアーにも理解を得やすくなる
見込める効果

33. 領域を超えることのススメ
何が変化したのか？

34. 踏み出してみよう！
デザイナーが実装することは、今となっては当たり前の概念とな
りつつありますが、 デザイナー本人の相当な学習コストがかか
るのは避けられません。
さらに、所属する会社の方針やメンバーの理解が必要なこともあ
るので、簡単には始められないかもしれませんが、
初心者丸出しだったデザイナーがここまで出来ている事実がある
ことは確かです。
領域を踏み越えたいと思えるデザイナーの背中を押せたらいいな
と思っています。

35. 以上、ありがとうございました