エンジニアとデザイナーが協働について本気出して考えてみた #Zaim

はじめに

こんにちは。Zaim で iOS エンジニアをしている @akatsuki174 です。

前回の Zaim ブログが私の「iOS エンジニア以外にも知ってほしい iOS アプリ用語 - UI 部品編 -」だったのでその続編が来ると思いましたか？甘いです。オトナの事情で今回は 8 月に社内で実施した「エンジニアとデザイナーがお互い仕事をしやすくするためのディスカッション」についての話をしようと思います。

※この記事の内容は DXEL.2 エンジニアとデザイナーが「いい関係」を築くためにの登壇内容を文章化したものです。スライド資料はこちらになります。

開催の経緯

Zaim の場合、エンジニアとデザイナー間のコミュニケーションは、以下のように実施していました。

このフローの中で、ぼんやりと

エンジニア：
・画像の出力方法を変えてほしいけどそれが手間なのかどうかわからない
・どのような意図でそのデザインになったのかよくわからない
デザイナー：
・出したデザインが、工数のかかるものなのかわからない
・動きのあるデザインを伝えづらい

という課題を感じていたので「一度話し合ってみよう」という声が上がり、社内のエンジニア、デザイナーが集まってディスカッションしました。

お互いの要望を共有

まず会の最初に、エンジニアはデザイナーに対して、デザイナーはエンジニアに対して思っていることや要望を付箋に書いていきました。その一部をご紹介します。

エンジニア → デザイナー
・デザイン、仕様に変更があった時に差分がわかる状態にしたい
・端末サイズが異なる時にどこが可変でどこが不変なのか教えてほしい
・フォント、色、マージンのパターンを把握したい
・なぜそのデザインになったのか教えてほしい
・T さん（デザイナー）がもう一人ほしい…

デザイナー → エンジニア
・デザイナーに知っておいてほしいことがあれば知りたい
・デザインレビューの工程がほしい
・ブランディングからエンジニアと一緒に考えたい
・iOS/Android/Web 間の情報共有をスムーズにしたい

解決策の決定

課題が見えてきたところで、どうすれば解決できるのかについて話し合いました。出てきた解決策は六つで、以下のようなものです。

1. 仕様書の GitHub 管理

それまで仕様書は Qiita::team やスプレッドシートに書いており、「見づらい」「変更履歴を追いにくい」などの問題を抱えていたので、GitHub で管理しようという話になりました。弊社の場合デザイナーも Git を使えるので、エンジニアもデザイナーも、仕様の変更があったら Pull Request を出して変更履歴や変更意図を残していこうということになりました。

2. 仕様すり合わせミーティング（MTG）の実施

Zaim は文字ベースでの会話が多く、仕様すり合わせも Slack やドキュメントを通じて実施することが多い状態でした。しかし文字だけだと認識齟齬が発生することが度々あったので、対面での MTG を実施することに決めました。

3. デザインレビューの実施

リニューアルなど大きめの開発ではリリース前に最終デザインレビューを実施していたのですが、小さいレベルの開発だとデザインの最終確認の工程がありませんでした。それによってちょっとした違和感が生じていたりしたので、小さな開発でもレビューをすることになりました。

4. 状況確認 MTG の実施

エンジニア側は「いつ仕様が上がってくるのか、わからない」という問題を、デザイナー側は「開発がどれくらい進んでいるのか、わからない」という問題を抱えていたので、進捗状況を共有する MTG を毎週実施することにしました。

5. UI アセットの整理

フォント、カラーなど、アプリ内でよく使うものは把握しておきたい、という思いから、そのような情報をまとめた資料を作ろうということになりました。

6. 仕様書作成の分担

これまではデザイナーが、UI デザインから細かい仕様決めの部分まですべて担当しており、かなり負担がかかっている状態でした。そこで、エンジニアの方が詳しい部分（エラー周りとか）に関してはエンジニア側で仕様を作り、全体感の調整など最終的な統括はデザイナー側が実施するのが良いのではないかという話になりました。

ディスカッション後

まだ実現に至っていないものもありますが、例えば新しく実装する部分に関しては仕様を GitHub に書いたり、情報共有のための MTG を開催したりしています。

また、工数見積もりミスや仕様再検討を防ぐため、デザイン、仕様が上がってきてから実際に実装するまでの期間を少し長めに取り、開発側でコーナーケースがないか、技術的に可能かなどをじっくり検証するようになりました。

最後に

エンジニアとデザイナーは仕事上、非常に近い関係にある存在ですが、専門分野、思考傾向の違いでなかなかコミュニケーションが取りづらいこともあります。何が問題なのかを話し合ってお互いが歩み寄ればより良いプロダクトが作れると感じているので、これからも改善を続けていこうと思います。

P.S.

まずはランチから、どうでしょう？

株式会社 Zaim の会社情報 - Wantedly