1. デザイナーとエンジニア
連携プレーのコツ
世界230カ国で使われているAndroidアプリを例に
森 慶太 / 山本 麻美

2. もり けいた
mori.keita
奇兵隊 社員第一号エンジニア
•中学でインターネットとプログラムに出会う
•高校でAdobe製品に出会う
•大学でFlashアニメーションに出会う
•新卒で某パッケージベンダーのエンジニア
•スタートアップのビッグウェーブに乗りたく
なって会社を辞める
•奇兵隊に参画

3. やまもと あさみ
asamieee7
TaptripのUIデザインを担当
これまでに担当したアプリ例
•Taptrip (Android/iOS)
•Wishscope (iOS)
•Carry (iOS)
•PaintDrops (Win8)
miil(FrogApps)、seconds(株式会社シナモン)
の制作チームでUIデザイン作り中。

4. やまもと あさみ
asamieee7
田中賢一郎さん著の、
この本の中で使われているサンプル
アプリ『PaintDrops』のUIデザイ
ンをお手伝いしました。
2013年2月、
インプレスジャパンより発売！

5. I. Taptrip

6. 世界中に友達を作ろう

7. 海外への好奇心を満たせていない
世界中のスマートフォンユーザーに
言語を超えた異文化体験を！

8. 230カ国のユーザー層

9. Android First!!
99%
1%

10. いわゆるハイブリッドアプリ
Native Native
Web Web
Native

11. 昨年夏ごろにデザイン大幅改善

12. まずは世界観を一新
Ver.1.0 Ver.2.0

13. 起点となる画面のUI/UX改善
Ver.1.0 Ver.2.0

14. II. デザイナーとエンジニアの連携

15. 新しく画面をデザインするとき...
エンジニア：
ユーザーが海外に出発するために、エ
リアを選択する画面を追加します。
その画面では、７つのエリアが選択で
きて、ユーザーはそのエリアを選んで
次の画面に行きます。
デザイナー：
あ、分かりました。

16. 新しく画面をデザインするとき...
エンジニア：
ユーザーが海外に出発するために、エ
リアを選択する画面を追加します。
その画面では、７つのエリアが選択で
きて、国の数とユーザーの数が表示さ
れます。
デザイナー：
あ、分かりました。

17. ユーザーの期待値と感情を考えて伝える
(もちろん機能概要も伝える)
エンジニア：
ユーザーがこの画面に来たときは、海外への欲求が非常に高い状態なはずで、どん
な人と出会えるんだろうという期待を持って到達します。
そのときに、そのワクワクした感じを損なわず、その気持ちのままエリアが選択で
きるようにしたい。そのとき、そのエリアの国の数やユーザーの数が見えている
と、ユーザーが向こうに広がっている世界が想像できるんじゃないかな。
デザイナー：
分かりました!!!

18. グッと良い画面になる

19. ユーザーはこの画面に到達する直前、
何を期待をしているか
どんな国の人と会えるのかな？
早く外国の人と話したい！

20. ユーザーがこの画面に到達したとき、
どういう感情になるか
早く外国の人と話したい！
このエリアこんなにいっぱい人がいる！
ユーザーこの画面に到達したとき、
何ができるか
出発エリアが選べる。
エリアのユーザー数がわかる。

21. デザイン依頼のタイミングで...
ユーザーはこの画面に到達する直前、何を期待をしているか
ユーザーがこの画面に到達したとき、どういう感情になるか
ユーザーこの画面に到達したとき、何ができるか
ここの整理が最初にできていると、デザインの議論も短縮でき、
後の開発でもユーザーに提供する価値がブレない！
つまり、アプリのクオリティをupできる可能性大！

22. 無事、デザインが終わりました。

23. デザインデータをそのまま渡すと...
エンジニア
げんなりパターン
デザイナー： エンジニア：
はい、デザインfixしたから送るね。 うう…パーツ切り出しやらなきゃー。
あとよろ。 げんなり。。。

24. Taptripのパーツ切り出し例・その１
（ネイティブ用のパーツ）
デザイナー： エンジニア：
はい、これネイティブ用パーツね。 うっ、超パズル。。。

25. Taptripのパーツ切り出し例・その２
（ウェブ用のパーツ）
デザイナー：
エンジニア：
はい、これWeb用パーツね。
うっっ、マジで超パズル。。。
あたしってほんと親切よね。

26. Taptripのパーツ切り出し例・その３
（9patch）
惜しい！
あともう一手間！
デザイナー：
エンジニア：
あたし、9patchのパーツも作れちゃう
作ってくれてありがたいけど
デキるデザイナーなの♡
どれがどれ用のパーツなんだ。。。
じゃ、あとよろ。

27. 全画面の画像名やカラーコードなどなどを
書き出してみた
よくできました！

28. あちこちで耳にする開発の現状
スタート 完成
デザイナー
デザイン ひま チェック
エンジニア
開発 パーツ切出し レイアウト 開発

29. あちこちで耳にする開発の現状
スタート 完成
デザイナー
デザイン パーツ切出し チェック
エンジニア
開発 レイアウト 開発 早く完成！

30. あちこちで耳にする
心が痛くなる話まとめ
デザイナーは、PSDファイルをまんま 本来、開発に割くべき時間の多くを
エンジニアに渡してお仕事終わり。 PSDとの格闘に持って行かれる。
改善しよう！
デザイナーは、パーツの切り出し、簡易（でいいから）デザイン仕様書を作ろう！
そうすれば、エンジニアがPhotoshopやFireworksの作業から解放され、
開発に集中できる。
つまり、アプリのクオリティをupできる可能性大！

31. 世界中に友達を作ろう