クラウド名刺管理のSansan, Inc.




ソーシャル
Sansanのブログ
2015.06.23

「共通言語をつくり、同じ場所でつくる」エンジニアとデザイナーのためのモバイルアプリ開発勉強会

カテゴリ
ヒト:エンジニア・技術職

モバイルアプリ開発のプロジェクトにおいて、エンジニアとデザイナーがどのように連携しているか話しあう『開発者とデザイナーのモバイルアプリ開発』勉強会を6月2日(火)に開催しました。

UIデザインに特化した制作を手掛ける株式会社Goodpatchから、UIデザイナーの瀧本優氏と、iOSエンジニアの石井克尚氏をゲストにお招き。

Sansanからは名刺管理アプリ『Eight』の開発チームからデザイナーとエンジニアの計3名が代表して登壇。モデレータはエヴァンジェリストの日比谷が務めました。


■登壇者

石井 克尚(株式会社グッドパッチ iOS Developer)

瀧本 優(株式会社グッドパッチ UI Designer )

辰濱 健一 (Sansan株式会社アプリエンジニア)

坂本 和大 (Sansan株式会社 アプリエンジニア)

田邉 泰 (Sansan株式会社 デザイナー)

日比谷 尚武 (Sansan株式会社 エバンジェリスト) ※モデレーター


■共通言語をつくり、同じ場所でつくる

SDIM5123.jpg

Goodpatchは「人々のハートを揺さぶるようなデザイン&プロダクトを」ミッションに、Webサービスやアプリの制作を手がけています。最近では自社開発のプロトタイピングツール『Prott』をリリースしました。

Goodpatchがプロダクトを作るときに大切にしていることは、ユーザーの体験をより良くするために、エンジニア・デザイナー関係なくチーム全員で、時によってはクライアントも一緒になってプロダクトを作ることだといいます。そのためには、デザイナーはエンジニアリングに、エンジニアはデザインに興味を持つマインドセットが前提としてなければいけません。

例えば、設計フェーズはデザイナーが中心になって手を動かすと思われがちですが、エンジニアも初期段階からこのフェーズに関わるようにしているそうです。その際に生じるコミュニケーションロスのリスクを減らし、効率の良くUI設計を進めていくため、Goodpatchのエンジニア・デザイナーは以下の3ステップを設計フェーズに取り入れています。


1. プロダクトイメージの共有

デザイナーに任せがちなプロダクトのイメージ設計を、最初の段階からエンジニアも一緒にやります。これをすると、実装フェーズの時にデザイナーとのコミュニケーションが楽になります。

2. iOSを理解したUI設計

同じモバイルアプリでもiOSとAndroidではデザイン思想がそれぞれ違うため、Appleが提供している『Human Interface Guideline』に基づいたUI設計をします。

3. モックアップによる検証

デザインを決めていくのと並行して、モックアップを作るようにしています。


実装フェーズに入った後、生じる認識のズレで作り直しに大きな時間とコストがかかってしまうよりは、設計段階からエンジニアとデザイナー間でコミュニケーションに手間を惜しまないことが重要だそうです。

円滑なコミュニケーションのために必要な環境は、共通言語と共有する場所をつくること。iOSであれば『HIG』 Androidであれば『Material Design』といった共通の正しさをもち、朝会や社内勉強会で議論するように心がけています。

同じ目線で、同じ場所で作ること。エンジニアとデザイナーがお互いを尊敬しあって、人々の心を揺さぶるプロダクトを作れるといいなと思っています。


■パネルディスカッション

勉強会の後半は、現場で実際にあったコミュニケーションの問題や解決策のケーススタディをディスカッション形式で話し合いました。9つあったトークテーマの内、3つをご紹介します。

SDIM5121.jpg

1.デザイン納品時にもめることってある?

Goodpatch 石井氏:デザイナーもエンジニアも同じ場所でやっているので"納品"の概念がありません。ファイルやデータを渡すという意味では、SketchのファイルをそのままDropboxにアップしてパーツを切り出して、アプリに実装していく感じですね。

Sansan 坂本氏:ファイル名のRename(名称変更)はあるあるじゃないですかね。一度、エンジニアさんに渡すファイルを5000枚、1つずつ気合いでRenameしようとしたことがあって、エンジニアさんが「そういうのは一気に自動でやりますよ」と言ってもらったことがありました。モメるというよりは、Renameっていうちょっとしたことでもコミュニケーションとったほうが良いんだなと思いましたね。

2.デザイナーが表現したい細かい動きはどうすれば上手く伝わる?

Goodpatch 瀧本氏:第一段階は、オノマトペで伝える。シュワッ!くるっ!ふわっ!とか想像力を駆使します。第二段階は、他のムービーやアニメーションで似たもの探してきて見せながら説明。それでも伝わらなかったら、第三段階ではイメージ動画をAftereffectやFlashを使って自分で作っちゃいます。

Sansan 田邉氏:Sansanも同じやり方です。オノマトベで伝えるのはやっぱり第一段階ですね。それで伝わらなかったらFlashで作って見せる。それで「今度からこれは「シュワッ」ね」と、その動作にオノマトペで名前をつけています。なにがイメージと違うのかは、0.1秒短くするとかで試行錯誤しながら、最適な形に近づけていく。

SDIM5140.jpg

3.お気に入りの開発/デザインツールやカスタマイズは?

Goodpatch 瀧本氏:Goodpatchデザイナーは全員、Sketchを愛用しています。ベクターソフトなので画像の書き出しがすごく楽だし、プラグインも充実しています。なかでも特に良いのは、ピクセルを0.05単位で直してくれるやつ。

Sketch Mirrorというソフトがあるんですが、iPhoneにミラーリングできて、それを繋ぐと自動的にミラーリングしてくれるので気に入っています。

Goodpatch 石井氏:エンジニアからしても、Sketchは書き出しをしてくれるのが便利で良いです。あとは基本ですが、Appleが提供しているXcode。全社でこれ使おうぜ!っていうのはあまりないです。

Sansan 坂本氏:Eightnの開発ではXcodeとgitは基本ですね。あと意外に便利なのは、Adobeのスクリプト。ファイルをまとめて書き出さないといけないときは、サイズを調整して複数書き出しができます。デザイナさんがAdobe使ってる会社は、エンジニアさんに聞いてみると自動化できる部分がたくさんあると思うのでオススメです。

Sansan 辰濱氏:完全に個人の好みなのですが、MS Paintを使っています。MacなのでわざわざVM立ち上げて、1ピクセルずつポチポチするのがなんか好きで。でも今日Goodpatchさんのお話で改めて、効率が良くなるツールを使わないのは損だなと身にしみたので、頑張って習得するようにします。(笑)


■まとめ

SDIM5151.jpg
エンジニアとデザイナー間のコミュニケーションの差がなくなり、お互いが共通認識を持って開発を進めていく歩み寄りの姿勢が、開発のスピードアップにも良いものづくりにも繋がることがわかりました。

Sansanのエンジニアが主催する勉強会は月に2~3回ほど。

Rubyや.NET、iOS / Androidアプリ関連が多めですがSansanとコラボしたい!という勉強会のご提案も大歓迎です。


Sansanはエンジニアを大募集しています

「ヒト:エンジニア・技術職」に関する記事
2015.07.08
表参道.rb が生まれた日を祝った12人のLTまとめ

表参道近辺で働くRubyエンジニアのコミュニティ「表参道.rb」の立ち上げを記念して『表参道.rb #1』勉強会を6月2日(火)に開催しました。今回は、13名分のLTまとめをスライドとともにお送りしま...

2015.07.20
SIer出身エンジニアのキャリア戦略を考える「事業会社への転職に成功する人、失敗する人」を開催しました

技術が好きなエンジニアのための転職・求人サイト「Forkwell Jobs」を運営する株式会社groovesと、SIer出身エンジニアのキャリア戦略を考えるイベントを7月15日(水)に開催しました。 ...

2015.07.22
アプリ開発を成功に導くプロセス改善とUI/UX 一気読み!

■アプリ開発プロジェクト成功への道〜アプリ開発者勉強会 Sansanの名刺管理アプリの開発メンバーには悩みがありました。 「どうすればもっとユーザー目線のアプリを効率よく、かつイケてるUIで作...

2015.06.04
iOS & Androidアプリもくもく勉強会を開催しました

クラウド名刺管理サービス『Sansan』『Eight』を開発するSansanでは、 スキルアップを目指すエンジニアのための勉強会を月に 2、3回ほどオフィス内フリースペースで開催しています。 今...

2015.06.01
「開発合宿は餃子パーティが盛り上がります」Ruby勉強会を開催しました

クラウド名刺管理サービス『Sansan』『Eight』を開発するSansanでは、スキルアップを目指すエンジニアのための勉強会を、月に2、3回ほどオフィス内フリースペースで開催しています。今回は、永和...

2015.05.12
第2回Sansan社内ハッカソン、東京と神山で開催

2015年4月、第2回Sansan社内ハッカソンを開催しました。 Sansanでは社内のエンジニアリング強化を目的に、エンジニアを中心に今年から様々な取り組みを進めていて、社内ハッカソンもその一環。...