Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
デザイナーとエンジニア   連携プレーのコツ世界230カ国で使われているAndroidアプリを例に        森 慶太 / 山本 麻美
もり けいた  mori.keita奇兵隊 社員第一号エンジニア•中学でインターネットとプログラムに出会う•高校でAdobe製品に出会う•大学でFlashアニメーションに出会う•新卒で某パッケージベンダーのエンジニア•スタートアップのビッグウェ...
やまもと あさみ        asamieee7    TaptripのUIデザインを担当    これまでに担当したアプリ例   •Taptrip (Android/iOS)   •Wishscope (iOS)   •Carry (iOS)...
やまもと あさみ  asamieee7田中賢一郎さん著の、この本の中で使われているサンプルアプリ『PaintDrops』のUIデザインをお手伝いしました。2013年2月、インプレスジャパンより発売!
I. Taptrip
世界中に友達を作ろう
海外への好奇心を満たせていない世界中のスマートフォンユーザーに言語を超えた異文化体験を!
230カ国のユーザー層
Android First!!                  99%                  1%
いわゆるハイブリッドアプリNative                   NativeWeb                      Web                         Native
昨年夏ごろにデザイン大幅改善
まずは世界観を一新Ver.1.0   Ver.2.0
起点となる画面のUI/UX改善 Ver.1.0    Ver.2.0
II. デザイナーとエンジニアの連携
新しく画面をデザインするとき...エンジニア:ユーザーが海外に出発するために、エリアを選択する画面を追加します。その画面では、7つのエリアが選択できて、ユーザーはそのエリアを選んで次の画面に行きます。                    デザ...
新しく画面をデザインするとき...エンジニア:ユーザーが海外に出発するために、エリアを選択する画面を追加します。その画面では、7つのエリアが選択できて、国の数とユーザーの数が表示されます。                    デザイナー:  ...
ユーザーの期待値と感情を考えて伝える         (もちろん機能概要も伝える)エンジニア:ユーザーがこの画面に来たときは、海外への欲求が非常に高い状態なはずで、どんな人と出会えるんだろうという期待を持って到達します。そのときに、そのワクワク...
グッと良い画面になる
ユーザーはこの画面に到達する直前、    何を期待をしているか どんな国の人と会えるのかな?  早く外国の人と話したい!
ユーザーがこの画面に到達したとき、    どういう感情になるか   早く外国の人と話したい!このエリアこんなにいっぱい人がいる! ユーザーこの画面に到達したとき、      何ができるか    出発エリアが選べる。  エリアのユーザー数がわかる。
デザイン依頼のタイミングで...   ユーザーはこの画面に到達する直前、何を期待をしているか   ユーザーがこの画面に到達したとき、どういう感情になるか     ユーザーこの画面に到達したとき、何ができるか  ここの整理が最初にできていると、デ...
無事、デザインが終わりました。
デザインデータをそのまま渡すと...                             エンジニア                           げんなりパターンデザイナー:              エンジニア:はい、デザインfix...
Taptripのパーツ切り出し例・その1           (ネイティブ用のパーツ)デザイナー:             エンジニア:はい、これネイティブ用パーツね。   うっ、超パズル。。。
Taptripのパーツ切り出し例・その2              (ウェブ用のパーツ)デザイナー:                  エンジニア:はい、これWeb用パーツね。                  うっっ、マジで超パズル。。。あた...
Taptripのパーツ切り出し例・その3                  (9patch)                                惜しい!                              あともう一手間!デザ...
全画面の画像名やカラーコードなどなどを      書き出してみた                よくできました!
あちこちで耳にする開発の現状スタート                             完成デザイナー  デザイン        ひま          チェックエンジニア   開発    パーツ切出し   レイアウト    開発
あちこちで耳にする開発の現状スタート                        完成デザイナー  デザイン   パーツ切出し   チェックエンジニア   開発    レイアウト     開発    早く完成!
あちこちで耳にする          心が痛くなる話まとめデザイナーは、PSDファイルをまんま      本来、開発に割くべき時間の多くを エンジニアに渡してお仕事終わり。       PSDとの格闘に持って行かれる。             ...
世界中に友達を作ろう
Upcoming SlideShare
Loading in …5
×

ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ

1,129 views

Published on

Published in: Design

ABC2013 Spring デザインナーとエンジニアの連携プレイのコツ

  1. 1. デザイナーとエンジニア 連携プレーのコツ世界230カ国で使われているAndroidアプリを例に 森 慶太 / 山本 麻美
  2. 2. もり けいた mori.keita奇兵隊 社員第一号エンジニア•中学でインターネットとプログラムに出会う•高校でAdobe製品に出会う•大学でFlashアニメーションに出会う•新卒で某パッケージベンダーのエンジニア•スタートアップのビッグウェーブに乗りたくなって会社を辞める•奇兵隊に参画
  3. 3. やまもと あさみ asamieee7 TaptripのUIデザインを担当 これまでに担当したアプリ例 •Taptrip (Android/iOS) •Wishscope (iOS) •Carry (iOS) •PaintDrops (Win8)miil(FrogApps)、seconds(株式会社シナモン)の制作チームでUIデザイン作り中。
  4. 4. やまもと あさみ asamieee7田中賢一郎さん著の、この本の中で使われているサンプルアプリ『PaintDrops』のUIデザインをお手伝いしました。2013年2月、インプレスジャパンより発売!
  5. 5. I. Taptrip
  6. 6. 世界中に友達を作ろう
  7. 7. 海外への好奇心を満たせていない世界中のスマートフォンユーザーに言語を超えた異文化体験を!
  8. 8. 230カ国のユーザー層
  9. 9. Android First!! 99% 1%
  10. 10. いわゆるハイブリッドアプリNative NativeWeb Web Native
  11. 11. 昨年夏ごろにデザイン大幅改善
  12. 12. まずは世界観を一新Ver.1.0 Ver.2.0
  13. 13. 起点となる画面のUI/UX改善 Ver.1.0 Ver.2.0
  14. 14. II. デザイナーとエンジニアの連携
  15. 15. 新しく画面をデザインするとき...エンジニア:ユーザーが海外に出発するために、エリアを選択する画面を追加します。その画面では、7つのエリアが選択できて、ユーザーはそのエリアを選んで次の画面に行きます。 デザイナー: あ、分かりました。
  16. 16. 新しく画面をデザインするとき...エンジニア:ユーザーが海外に出発するために、エリアを選択する画面を追加します。その画面では、7つのエリアが選択できて、国の数とユーザーの数が表示されます。 デザイナー: あ、分かりました。
  17. 17. ユーザーの期待値と感情を考えて伝える (もちろん機能概要も伝える)エンジニア:ユーザーがこの画面に来たときは、海外への欲求が非常に高い状態なはずで、どんな人と出会えるんだろうという期待を持って到達します。そのときに、そのワクワクした感じを損なわず、その気持ちのままエリアが選択できるようにしたい。そのとき、そのエリアの国の数やユーザーの数が見えていると、ユーザーが向こうに広がっている世界が想像できるんじゃないかな。 デザイナー: 分かりました!!!
  18. 18. グッと良い画面になる
  19. 19. ユーザーはこの画面に到達する直前、 何を期待をしているか どんな国の人と会えるのかな? 早く外国の人と話したい!
  20. 20. ユーザーがこの画面に到達したとき、 どういう感情になるか 早く外国の人と話したい!このエリアこんなにいっぱい人がいる! ユーザーこの画面に到達したとき、 何ができるか 出発エリアが選べる。 エリアのユーザー数がわかる。
  21. 21. デザイン依頼のタイミングで... ユーザーはこの画面に到達する直前、何を期待をしているか ユーザーがこの画面に到達したとき、どういう感情になるか ユーザーこの画面に到達したとき、何ができるか ここの整理が最初にできていると、デザインの議論も短縮でき、 後の開発でもユーザーに提供する価値がブレない!つまり、アプリのクオリティをupできる可能性大!
  22. 22. 無事、デザインが終わりました。
  23. 23. デザインデータをそのまま渡すと... エンジニア げんなりパターンデザイナー: エンジニア:はい、デザインfixしたから送るね。 うう…パーツ切り出しやらなきゃー。あとよろ。 げんなり。。。
  24. 24. Taptripのパーツ切り出し例・その1 (ネイティブ用のパーツ)デザイナー: エンジニア:はい、これネイティブ用パーツね。 うっ、超パズル。。。
  25. 25. Taptripのパーツ切り出し例・その2 (ウェブ用のパーツ)デザイナー: エンジニア:はい、これWeb用パーツね。 うっっ、マジで超パズル。。。あたしってほんと親切よね。
  26. 26. Taptripのパーツ切り出し例・その3 (9patch) 惜しい! あともう一手間!デザイナー: エンジニア:あたし、9patchのパーツも作れちゃう 作ってくれてありがたいけどデキるデザイナーなの♡ どれがどれ用のパーツなんだ。。。じゃ、あとよろ。
  27. 27. 全画面の画像名やカラーコードなどなどを 書き出してみた よくできました!
  28. 28. あちこちで耳にする開発の現状スタート 完成デザイナー デザイン ひま チェックエンジニア 開発 パーツ切出し レイアウト 開発
  29. 29. あちこちで耳にする開発の現状スタート 完成デザイナー デザイン パーツ切出し チェックエンジニア 開発 レイアウト 開発 早く完成!
  30. 30. あちこちで耳にする 心が痛くなる話まとめデザイナーは、PSDファイルをまんま 本来、開発に割くべき時間の多くを エンジニアに渡してお仕事終わり。 PSDとの格闘に持って行かれる。 改善しよう!デザイナーは、パーツの切り出し、簡易(でいいから)デザイン仕様書を作ろう! そうすれば、エンジニアがPhotoshopやFireworksの作業から解放され、 開発に集中できる。 つまり、アプリのクオリティをupできる可能性大!
  31. 31. 世界中に友達を作ろう

×