[&] Goodpatch x Sansan

#Goodpatch_Sansan
Goodpatch x Sansan 勉強会
開発者とデザイナーのモバイルアプリ開発
http://connpass.com/event/14938/
--------------------------------------------
石井 克尚(株式会社グッドパッチ iOS Developer)
瀧本 優(株式会社グッドパッチ UI Designer )
辰濱 健一 (Sansan株式会社アプリエンジニア)
坂本 和大 (Sansan株式会社 アプリエンジニア)
田邉 泰 (Sansan株式会社 デザイナー)
＊モデレータ　日比谷 尚武 (Sansan株式会社 エバンジェリスト)
--------------------------------------------
日：最初挑戦的なタイトルだったんですが、あんまりあおるなということを言われてカッチリしたタイトルです。
アプリを開発する時に、デザイナーとプログラマとのコラボレーションとで困っている時もあって、
皆さんにもオープンにして意見を呼んだりして、気付きを得たいと思って、今回の勉強会を開催しました。

瀧：よろしくお願いします。UIデザイナーをしています。
今日はタイトルとしてデザイナーとエンジニアのモバイルアプリ開発、
LTで紹介、どういうふうにコミュニケーションをとっているのかにフォーカスして紹介させて頂きます。

瀧本ともうします。Webの制作会社に一番最初にはいって、
カーナビとかデジカメとかのUIの会社にはいって、2013年に Goodpath にジョインしました。
情報設計もやっています。美味しいお酒とお料理が好きです！

石：iOSでベロッパーをやっています。3GS が出た時に、ちょこちょこ作りはじめて、
自社サービスの会社に入って、2014/8 に Goodpatch にジョインして、
息子好きのパパデベロッパーです。

瀧：Goodpatch 知らない人います？　0人？
ミッションとして、人々のハートを揺さぶるデザイン。
MoneyForward というマネーアプリ。ぐっとデザイン賞。
FLAT という DeNAと協同開発。匿名で会社の人と雑談できるアプリ。
パシリー、UI設計とデザインを対等
ソフトバンクのコーポレート情報アプリも。実装は石井が担当
Prott というプロトタイピングツールがあります。
高速なプロトタイピングとコミュニケーションのためのツール。
最近、ワイヤーフレームが簡単に書けるので、おすすめです。
Prott 作っている人！（会場の半分くらい？）

プロダクトを作る時に大切にしていること

ユーザーの体験をより良くするために
エンジニア・デザイナー関係なく
チーム全員でプロダクトを作る。
時によっては、クライアントも。

受託の案件だと、エンジニアがクライアント側の時もあり。
プロジェクトマネージャーと、UIデザイナー
実は Goodpatch はエンジニアの人数が一番多い。

エンジニアもデザイン、
デザイナーもエンジニアリングに興味があるのを前提としている。



今日は、設計／デザインフェースに関して紹介します。
デザイナーが手を動かすフェーズだと思われがちですが、
エンジニアもかなり初期の段階からこのフェーズに関わっています。
iOS のデベロッパーは、この段階で実際に何をしているのか？

石：プロダクトイメージの共有、設計やデザインで、ユーザーに何を届けるのか？

●プロダクトイメージの共有
デザイナーに任せることはなく、一緒にイメージを合わせて最初の段階からやっていきます。
これをやっておくと、実装フェーズの時にデザイナーとのコミュニケーションが楽になります。

●iOSを理解したUI設計
同じモバイルアプリでも iOS, Android ではデザイン思想がそれぞれ違って、
Apple が提供している Human Interface Guideline を参照しながらやっています。

●モックアップ検証
このへんから一緒にやっていきます。

効率的な開発をするために
実装から入ってから認識のずれがあって、作り直すと大きなコストになってしまうので、
UI設計のフェーズから入っていくことで、このリスクを回避している。

瀧：なぜエンジニアとデザイナーがうまくコミュニケーションできているのか？
弊社の場合、共通言語がある。
iOS だと HIG, Android だと Material Design 、共通認識があって、共通言語があって、ずれがない。
毎週木曜日に、HIG の読み合わせ勉強会。
どこに気付いたか？どこが気になる？　と、理解を深めるようにしている。
マテリアルデザインも、お互いに教え合っている。
デザイナーとエンジニアの共通言語が話せる。

同じ場所でつくる。
当たり前なんですが、
朝会だとか、タスクだとか、すぐ見せてもらって、
インタラクションや、2pix 上げて欲しいとか、
こういう風に動かしたら面白い？　とか、
そういった議論を同じ場所でしていて、同じ目線で作っているので、
Goodpatch としては、自分一人で作るものではなく、チーム全体で作るもの。

仲わるいんじゃないの？
本当にお互いを尊敬しあって、人々の心を揺さぶるプロダクトを作れるといいなと思っています。

現在人材募集中です。様々な職種を募集しています。応募してきてください！

--------------------------------------------
日：仲良くなりたいのに慣れないジレンマ」というタイトルの予定でした。
どうやって工夫しているの？という話しができれば。

田：エイトのデザインを担当している、田邊、広告代理店で、Webを中心としながら、
コーディングも、Flash も、デザインに手を拡げていたら、コピーライティングも気になったり、
コミュケーションに関わることをやっています。
作るものが好きなんだと思います。自分のことをデザイナーというと、どうなのかな？
いろんなことができる、デザイン機能がついた人、制作物を作ったりをしています。
コミュニケーションの視点から、いろいろ話しができれば。

辰：辰濱ともうします。あんなところのオフィスで働いています。Sansan のAndroidアプリを作っています。
前職も、前々職も徳島で働いていました。普段はリモートワークで、Skype でやりとりしています。
デザイナーと顔を合わせていないので、そこが今日のテーマかな....

坂：坂本、エイトの iOS アプリを担当しています。もともとはソーシャルゲームを担当していて、
その後、個人で開発していました。一生遊んで暮らせるかな！と思いましたが、Sansan に入社しました。
4月に入社したばかりなのですが、楽しく働いています。

日：頂いた質問から、どんなことを工夫していますか？というのを聞いてみたいです。

Q1) 仕事をしていて楽しい事

瀧：デザインしている時も楽しいのですが、Prott でプロトタイピングしているのが多いんですが、
実機で組んでもらって、Prott で表現しきれないところが実機で表現できるので、
デザインが鮮やかに動いた時が一番うれしい。
リリースした時に、ユーザーのフィードバックがあるとうれしい、
エンジニアとエキサイティングにやり取りしている時は、かなり楽しい。

日：模範解答ですね

石：模範解答を言われてしまいました。僕は、デベロッパーとしてアプリを作っているのですが、
今現在、実装しているのですが、デザイナーが一番最初のユーザーになるので、
ちょっとこだわりみたいなのた伝わる時が楽しいです。
プロダクトを作っている時に何回もおとづれる時なので。

日：意見が違ったり、解が無い時は？

石：設計の部分はぶつかることがあって、HIGに立ち返ってみるとか、
教科書なので、逸脱したことはやらない。HIGに正解がある。

坂：かぶるところはあるのですが、インタラクションやアニメーションで凝ったところを作って、
0.2秒で、こだわっているところをちゃんと見つけてもらえるとうれしい。
ユーザーの声、エゴサーチしてる。
作った人はユーザーの声を見ている。

日：マーケの仕事も、炎上したり？
坂：全部みています。前職だと 2ch で炎上して悲しかったり。

辰：エイト使っている！と言われるのがうれしい。
現場の話しでいうと、オレオレツールを作って、皆がハッピーになったり、
UIの操作を自動化して、スクリーンショット撮影を自動化したり、
わざわざいろんな端末で操作しなくて良くなったときに
やってやった感があってうれしいです。

田：辰さんは、これってうまくやれませんかね？
「こんなの作りますよ！」と作ってくれて、
デザイナー作業で、パーツを切り出す時に、容量を減らしてくれたり、
世の中に出ているところだけでなく、裏方側のことをやってくれるのが嬉しい。

デザイナーとして楽しいことは、あふれんばかりの要件、
お客さんがこれもやりたい、あれもやりたい、
デザインでうまく要件を整理して解決した時は、やったな。という感じ。

みんなと飲みに行くのが一番楽しいかもしれませんね。

日：ビジネスサイドとか、クライアントの要求とか、そことのコミュニケーションの質問もはさんでいます。

Q2) Webデザイン経験者がスマホアプロのデザインに回ってきて困ったこと

iOSアプリ、ここ数年で始まったことなので、未経験の人は多くて、
まず僕が一番大事だと思っているのは、アプリが好きか？
普段アプリを触っているかが大事で、それがあれば、HIGを読んで理解を深めていけば。
iOSの特殊な部分はサポートしますし、
ミーティングや、業務中で、周りに聞ける人がいっぱいいる環境なのでかまわない。

日：アプリのデザイン未経験でもキャッチアップしやすい環境がある。

田：もともと経験が無く、Android の dp など、そのへんの雰囲気の違いが始めてしって、
どうしたんだろう？というのはありました。
Android 側で 9patch があって、それが考えてうえで作って！といわれても、
やったことが無い人は難しい。
困るのは困ったのですが、エンジニアの人が密に教えてくれたので、
アプリのデザイナーに丸投げではなく、一緒に作ろうという感じがあって、
そういう気持ちでやっているので、気持ちとしては楽でした。
わからないところをすぐ聞くこともできました。
Photoshop やイラレが使えるから、デザイナーみたいな感じ。
ガイドラインの読み合わせも、毎週木曜日にやっていて、
同じものをみて、対応ができる、その後のコミュニケーションも取りやすくなるのがいい。

Q3) デザイン納品時にもめることはありますか？

石：納品という概念がありません。隣りにいるので。
日：ファイルを受け渡す時ということで？

坂：リネームしないといけない。5000枚をリネームしないといけない。
気合いで 5000枚をリネームしようとして、そのへん渡した時にモメるのではなく、
コミュニケーションだなと。

石：そうですね、基本的には、Sketch を使っているのですが、
Sketch のファイルをそのまま Dropbox にアップしておきました！
勝手にパーツ切り出して、アプリに突っ込んでいくみたいな。

日：どのように工夫していますか？　という質問の方がいいかも。
ファイル名の工夫は？

坂：困っているというよりも、やり方をコミュニケーション、
こういう問題があれば、影で頑張るのではなく、コミュニケーションが大事。

最近は回線速度が早いのですが、画像のサイズとか、
デザイナーは綺麗な画像を切り出したい。ローディングが遅くなるので、
エンジニアとして小さくしたい。

Q4) もらった素材がそのまま使いづらい時は、そのまま使うべき？微調整してもらうベキ？

田：やり方の問題。Sketch ならいいけど、Photoshop なら、パーツを切り出しています。
エンジニアに渡すと微妙にサイズが違うとか、
微調整が誰がやるのか？

辰：Android でいうと、デザイン関係無いから削ってもいいのか？　削ると困るのかな？
と迷う時がありますが、そういう時は相談しますね（笑）
どっちかがヤル、勝手にやるというのは無いです。
すぐにコミュニケーションできると思います。基本は相談する、話しをするのが手っ取り早いです。
理解が一番。オレオレツールで解決しています。

瀧：受託の案件もけっこうあって、開発が外部の方も結構あって、
その時は、デザイナーと PM がエンジニアの会社に行くことを結構あって、
常駐までか、月水金がっつり行くとか、けっこう頑張ってやっている。
細かいところを伝えきれないところがあって、
そこは現場に行って直接話すというのが一番速い。

Q5) デザイナーが表現したい細かいインタラクションはどう伝えると上手く伝わる？

瀧：三段階くらいあるか？　
第一段階はオノマトベ、グルっとか、ふわっとか、
参考になるアプリをムービーで撮影して、ここのこんな感じというのが第二段階。
アプリがあって、探しても無い場合は、AfterEffect で自分で作って、
そのムービーファイルを作ってわたしています。

田：サンサンも一緒です、Flash でやるか、最終的には伝わらなかったら、
作ってみて、見せて、今度から、これは「シュワッ」ね。というふうに決めておきます。
オノマトベで伝えるのは第一段階ですね。

日：そういう感じが伝わりやすい？
石：シュッと言われたら、なんとなく作って、ちょっとづつ詰めて、近づけていく。
そこで手を動かす時間がとれない時は、参考になるアプリをもってくる。

坂：何が違うのか？話してみるとか、0.1秒短くするとか、試行錯誤しながら、最適な形に近づける。

日：クライアントサイドとかは？

瀧：クライアントワークも一緒。結構現場に行くので、その場でつたえて、組んでもらって、
一番多いですかね？

日：気心しれていれば「シュッ」で伝わるんですけどね（笑

日：ビジネスサイドの話し、完璧！と思ってもクライアントが「うん」と言わない時に工夫している時

石：僕はけっこう戦うことが多くて、自分たちで作っているのですが、ユーザー目線で作っているので、
ビジネス要件的にいれなきゃいけない機能もあるのですが、
ユーザーにとって価値があるものなのか？　で戦って、できれば無くしていく方向で。

日：そうですよね。
そこ、結構、クライアントの方がいて、ディレクションの方もいて、

石：ビジネスの成功、クライアントが喜ぶことを考えていて、
デベロッパーは、エンドユーザーが喜ぶことを考えているので、
そこでバランスを取っている。
自社の PM と戦うこともある。

坂：エイトの場合は、動くものについて駄目だしされることは無くて、
現場の人から、ビジネスの人が考えた仕様が、標準に従って変わること、
リスクや、ダメさを説明して、それでもビジネス的な価値がある時は、
リスクを考えた上でジャッジして選択する。

辰：PMチームが近いので、ぶれることは無いのですが、
開発の後ろの方で修正が入る時、会社のバリュー、ミッションがあって、
そうする意図、意思を聞いて、理にかなっていれば、受け入れるようにしています。

田：給料もらってやっている、発注者、オーナー、株主の要件には答えて行かなければならない。
ユーザーの価値としては、どうなのか？
全部が全部やりたいことをユーザーがやっているわけではないので、
正面切ってた高くわけではなく、同じゴールを目指しているので、仲間、チーム、
そういった人達の意見を取り入れながら、より良い意見を
チーム一丸となって、難しくなっても、飲みに行けば！

Q6)お気に入りの開発／デザインツール、カスタマイズ方法

瀧：結構 Goodpatch は Sketch を使っていて、かなり便利なんですね。
Photoshop に比べると挙動も軽くて、画像の書き出しも、エクスポートする時に、
ベクターソフトなのですぐに書き出せるし、
プラグインが充実していて、ピクセルが 0.5pix ずれる時も、プラグインで直してくれたり、
テンプレもネット上で充実しているとか、
標準コンポーネントのテンプレを使ったり、
アイコンがダイヤモンドみたいで可愛いので気に入ってます。

ただ、iOSの申請や、アプリアイコン、ストア画像とかは、Photoshop で作ったり、
アプリケーションの中で使うアイコンはイラレで作って、Sketch に持っていって、
用途用途で使い分けています。Sketch を愛しています。
Sketch Mirror というソフトがあって、iPhone にミラーリングできて、
それを繋ぐと自動的にミラーリングしてくれて、
1x のデザインを作っている時も 2x の iPhone 6 で観られるので気に入っています。

石：Sketch を使ってくれるのは、書き出してくれるので便利です。
xcode , git の操作には source tree, tower を使っているくらい。
keynote を使って雰囲気を確かめる時とか。
全社でこれ作ろうぜ！というのはありません。

坂：開発という面だと xcode , git は普通に使っていて、
イラストレーター、Adobe のスクリプトが便利で、
まとめて書き出す時とかは、スクリプトで調整したり、
割と Adobe の製品だと、エンジニアに助けてもらえる。

田：もともとアプリをやってきたデザイナーは少ない、他のデザインから来ている人が多いので、
移行しづらい。Photoshop に慣れている、できるならそれでいい？という感じ。
Flint でプロトタイプを作っている。
オレオレツールを使ったり。

日：他のツールを使っていて、他のツールに意向できないというのは？

瀧：もったいない。効率が良くなるツールを使わないのは損。
すぐに使えるようになる。

辰：がんばって習得するようにします。
9patch を説明する時に、いまだに MS Paint を使っています。わざわざVM立ち上げて（笑
自分で便利なツールを作っているのが気に入っています。

日：今日、sansan のデザインの現場を曝すという企画もありました。人柱になれば良かったけれど、痛すぎるという.....
　
Q7) お互いにお願いしたいことは？

田：一般的な話しで、優しくして欲しい
エンジニアは言葉が刺々しい時があるので、心が傷つくので、
性格もあるので、優しくしていただければ、僕も優しくしてくれます（笑

辰：結構、こんな感じのデザイン！、正常系だけしかデザインしてくれない。
正常じゃ無いとき、どうなるのか、絵を考えてもらえると、すごい嬉しい。

日：わからない時はコミュニケーション？

坂：いろんあアプリを触って欲しい、HIG こういうふうに読むといいよ、
ダイジェストで紹介したり、そういうものを読み合わせとか、
始まっているのですが、読んで欲しいということがある。
エンジニアリングで自動化できることがあるので総酸して欲しい。

辰：担当する OS は普段から使って欲しい。
iPhone の人が Android の普段使いの常識がわからない。
普段からタブレット使うなりして欲しい。

石：同じで、アプリを触って欲しいのと、できれば WWDC をやりますが、
そこでエンジニア向けの動画がでますが、そういうところにも目をとおしてもらえれば、
そいういうところはプロダクトの面白みにもなるので、
新しい機能もキャッチアップしてもらって、デザインに反映できれば、作る方も面白い。

瀧：エンジニアは神様だと思っているのですが、エンジニア視点での設計の提案はしてきて欲しい、
デザインわたして、反映するだけでなく、オカシイところを指摘してもらったり、

辰：Android でプログレスダイアログ「ぐるぐる」「インディケーター」を
正式な名前ではなく「ぐるぐる」で伝わる用語を使うように心がけています。

日：デザイン、コラボ、新しい試してみたいこと、まだ出来ていないことがあれば。

田：Sketch が使ってみたい。便利なツールがあるはず、無いのであれば、作るべき
そういったものをどんどん取り入れていくこと、

石：新しく発表されるプロダクトを常に追いかけていきたい、
今回 Apple Watch が出ましたが、リリースと同時にアプリが出せなかったことが後悔していて、
発売前に触ることができたのですが、個人が作っていたアプリなのですが、
そこにいち早く出せる環境を普段から作っておきたい。

辰：デザイナーの方に、レイアウトの XML , こういう指定ができますとか、
伸ばした時にどこが伸びるとか、開発の現場を体験して欲しいなというのを思いました。

Q: 1pix のこだわりを伝えるのは？

石：ちょっとずらして、その瞬間では？ウムと思う時もあるのですが、
帰って次の日、やって良かったな！と思う体験があって、
細かい気配りがあって、やろうかな！と思っています。

瀧：なるべく、結構ロジカルに伝えることが必要。
1pix だと感覚に近いので、なるべくロジカルに、こうした方がいいです！と
言うことが多い。

田：HIG ガイドラインがあって、開発の共通言語、デザインにガイドライン的なもの、
デザイナーの中にルールがあると思って、しっかり説明するしか無い。
伝わらないのであれば、その程度のデザインしかできない。
理解してもらえるように、こだわる、理解してもらうように、説得する。
提供する価値が、提供できなかった時が一番良くないので、一緒にやるようにしている。

Q. どういった方法で画像ファイルを管理していますか？

田：サンサンの場合は git で管理しているところも、していないところもあり、
バラバラです。今は、プロジェクトごとに Pivotal Tracker でやることをストーリー化しています。
それに必要な仕様書と、画像をそのスレッドに上げていく方法を使っています。
足りない時は密にコミュニケーションして、
管理はエンジニアの方に任せています。

坂：git をデザイナーに学んでもらうコストや、コンフリクトが面倒なので、
ファイルを共有してもらっているだけです。

石：ちょくせつ Sketch ファイルのやり取りで完了しています。

Q; お互いの職種の時間の見積もりは？

田：どれぐらいかかるのか解らない。席にいって、悩んでいたら、
デザインも、ささいなことで、数時間かかることも、数日かかることもあって、
答えが無いこと、今これ、悩んでて。。。。時間がかかりそう。。とか、
近くにいれば、コミュニケーションであるていど解決できる。

辰：画面全部を残して、アニメーションして欲しいのか、上だけ残して移って欲しいのか、
作り方が変わります。見た目なので、ここだけ残して欲しいので、
困ることを行っておいた方がいい。

坂：認識がずれていることが問題なのではなく、それがずれたまま進めるのが問題なので、
すぐにこれはコストがかかる、デザインで解決できる、エンジニアリングで解決できる！と
うまくコミュニケーションで回していけばいい。

石：突発的に修正する時に、時間のかかる修正があると大変なので、
僕の場合は、早めにモックアップを作って、
時間がかかるところはかかる前提で、準備している。

瀧：三分でカップラーメンが作れると思っても、お湯を沸かす時間があったり、
パッケージを剥がす時間があったり。
物ができあがってから、変えたい場合は、どれぐらいかかるのか？確認します。
これぐらいかかる割には、他に変えたいところがあるとか、
そういうことを話しあった上で、優先度をかえた上で決めています。
隣りの席で適宜判断、一番最初で組んだスケジュールは合わないので、
フレキシブルに動けたら。

------
以上。