7/16/2014

[&] Yahoo! x DeNA - yoshida



Yahoo! x DeNA iOSエンジニア・UI/UXデザイナー
DeNA 吉田さん @mixiappwchr
現場でのデザイナーとエンジニアの連携の実際

皆さんどのように協業していますか?
色、レイアウト、UIコンポーネント
アニメーション、サウンド、写真、動画、

アプリの開発においては、webから比べるとデザインするもの
実装するものが増えてきました。
コミュニケーションがどんどん難しくなってきました。

実際の現場での効率化。

●Rabbit Cam での実例。
効率化:調整用のアプリを別途作成。アプリ本体では無くて。
動画フィルターのデザインの指定。
色味とか、どういったフォントにするのか。
サンプル指定を受けましたコンセプトにあっていると思ったのですが、
作るのは難しい、フィルターを作るのは難しい、コストがかかりそうだと
思いました。そこで、フィルター調整専用アプリを作成。
このアプリで、デザイナー自身に調整してもらうことにしました。
リアルタイムで調整し、パラメーターを頂いてアプリに入れこみました。
30分ぐらいで作ったものです。

数回の調整だけでフィルターの作成が完了
確認のための時間が減らせた。
コミュニケーションコストが削減、
おもいどうりに調整ができた。

●スタンプアプリ
実際のデザイン指定。
可愛い!と思いつつも、これだけの表現だと、ニュアンスが狭まると思いました。
調整アプリを津k裏増した
スタンプを一覧できる、一気に確認できるアプリを作りました。

調整アプリで、短時間で作ったものだけれども
コストパフォーマンスは良かった。

●QuizNow
アウトプットを動画で作成してもらう。
クイズ対戦の作成画面。
動画を作ってもらうのを見て、実装をすすめ、
サウンドも作り込んであり、凄いと思いました。
ただ作ってもらうだけでなく、実装に使い回したりしました。

良かった点は、
いちいち質問しなくても良いので、コミュニケーションコストが下がった。
動画を再利用できるので、実装も早い。

スプラッシュ画面も動画で作成してもらい、
動画のまま組み込んでプロトタイプを見せて、
それから実装しています。

毎回動画を作るのは面倒なので、アニメーションGIFで作ってもらい、
実際の動きがあることで、確認できると全然違う。
実際そのまま活用できる素材もある。
デザイナーの負担になるので、作るものをしぼる。

お互いのバリューを活かす。
アプリエンジニアに対してデザイン勉強会、
デザイナーに実装を。双方の知識を持っていると、
コミュニケーションが円滑になると思って。