エンジニアとデザイナーの相互理解

こんにちは。
iOSエンジニアの廣瀬です。

今日は、“(しら)ずにお金が(たま)る”自動貯金アプリ『しらたま』( https://sirata.ma/ )の開発時に実施した エンジニアとデザイナーの相互理解 についてお話しします

この記事(Atomic Design を導入してみた話) においての活動でもそうなのですが、このような取り組みを行うきっかけは、何か課題を感じた場合です。

この記事では、エンジニアとデザイナーの相互理解 を実現するために起こしたアクション、および何故アクションをとったか、どういう課題を感じていたのかをお話ししていきます。

コミュニケーション

エンジニアとデザイナー間のコミュニケーションについて課題を感じていました。
チームで開発している以上コミュニケーションは欠かせないものです。
コミュニケーション についてどういう風に課題を感じていたか説明します。

iOSアプリ開発の大まかな基本の流れはデザイナーがデザインをしてiOSアプリエンジニアがコーディングすると言った流れになると思います。
時にはデザイナーが考えていた UI について実装者側から代替案を提案することもあるでしょう。
しかし、下記の要因でお互いに考えをうまく伝えられない・伝わらない時もあるでしょう。
まさに下の画像のような感じですね。

  • エンジニアはデザインのどこが重要かが分からない
  • デザイナーはエンジニアがどのくらい大変か分からない

エンジニアはデザインのどこが重要かが分からない

については esa にデザインのコンセプトをまとめて共有してもらったり、このような取り組みのおかげで随分わかりやすくなったと思っています。

デザイナーはエンジニアがどのくらい大変か分からない

今回はこの課題を解決するための取り組みとして行った ペアプログラミングの実施についてお話ししていきます。

なぜペアプログラミングなのか

ペアプログラミングを行なった背景として大きく二つあります。

エンジニアが何を考えてコードを書いているかを把握してもらうために実際にコーディングしてモバイルアプリを作るのが一番手っ取り早いなと思いました。とは言ってもそれを一人で初めから勉強して行うのは大変だし効率も悪いと感じたのでペアプロの選択肢を取りました。

ペアプロ以外の選択肢もありました。例えば勉強会を開いて登壇して発表する等。しかし、おそらく1〜2時間でコミュニケーションが円滑になるほどの効果は見込めないだろう。そして、デザイナーのやってみたい、という気持ちも強かったので対話でのコミュニケーションをとった方が効果が高く満足する結果になるだろうと判断してペアプロを選択しました。

何を作ったのか

ここで取り上げた例で(Atomic Design を導入してみた話)

新しいメンバーが入ってきたとき等にデザインのコンセプトを説明できるものが無い

と言った課題を取り上げました。

このデザインのコンセプトがまとまっているアプリがあったら良いなと思っていました。
同じチーム内のデザイナー同士であればSketch を見てね、でいいかもしれませんが、チームをまたいでの共有だったり、Sketch を普段入れていない人への共有へちょうど良いと考えていたからです。
あと、画面ぽちぽちやって実際の画面サイズで誰でもアプリのUIを簡単に作って提案できるところまでいけたら面白いなと、頭の中での妄想もありちょうど良い粒度だと思ったので、このアプリの完成をゴールにペアプログラミングを実施していきました。

ゴールの確認

もともと感じていた課題が デザイナーはエンジニアがどのくらい大変か分からない でした。しかし、UIKit 等の完全な 理解 は必要ないと考えていたので、理解 をゴールにすることはしませんでした。

何が できそう, できなさそう かを頭の中でイメージしやすいようにすること。
そして、CollectionViewTableView といったものの存在があること、ちょっとした用語を使ってもデザイナーが戸惑わないようにしたい、といったことを目指しました。

あくまで目標がコミュニケーションの円滑化だったのでとりあえず動かしながら書いて大まかな動きをイメージできるように
必要であれば細かい部分も教える、といったスタンスで実施しました。

1.5ヶ月くらい行なってみて

この試みもアプリを完成していないという意味では途中経過ではあるのですがもうほとんど完成しているといっても過言ではないです。
おそらく2月中には完成するでしょう。

そして、実際にコミュニケーションに役立っているかというと役に立っています。
(とデザイナーからもフィードバックをいただいています)

話す側のエンジニアも代替案を提示するときに何が難しいか、こうした方がもっと良いだろう、という理由も説明しやすく感覚値なのですが前よりも説明を理解してもらえる感じがしています。

お互いに言っていることが分かるというのは相互理解において必要なことです。
チーム開発を行う上でコミュニケーションのわだかまりが減ったことは大きな一歩と言えるでしょう。

注意点

この取り組みを行ったことで少し危ない方向に進んでしまったのでその出来事も書かせていただきます。
それは Slack のチャット内でデザイナーがペアプロに対しての感想を述べてくれた時に発言したことなのですが、そのまま貼り付けます。

エンジニアの大変 な部分を把握したうえで気を使ってくれた発言ではあるのですが、良いものを作るためには大いに理想を語りましょうという出来事です。
デザインについては理想を考えてもらった方がエンジニアとしても嬉しいなと思っています。

ペアプロ の取り組みの狙いはコミュニケーションの円滑化を図ることでより良いチーム開発をすることでエンジニアが楽するためではないっていうことを頭に置いてこの記事を読んでもらえると嬉しいです。

成果物のGif

最後にデザイナーが手を動かして作ってくれたアプリのGif を途中経過ではありますが貼ります。

最後に

マネーフォワードでは、課題を改善につなげ、効率化を探求するエンジニアを募集しています。
ご応募お待ちしています。

【採用サイト】
マネーフォワード採用サイト
Wantedly | マネーフォワード

【マネーフォワードのプロダクト】
自動家計簿・資産管理サービス『マネーフォワード』
Web
iPhone,iPad
Android

「しら」ずにお金が「たま」る 人生を楽しむ貯金アプリ『しらたま』
Web
iPhone,iPad

ビジネス向けクラウドサービス『MFクラウドシリーズ』
バックオフィス業務を効率化『MFクラウド』
会計ソフト『MFクラウド会計』
確定申告ソフト『MFクラウド確定申告』
請求書管理ソフト『MFクラウド請求書』
給与計算ソフト『MFクラウド給与』
経費精算ソフト『MFクラウド経費』
入金消込ソフト『MFクラウド消込』
マイナンバー管理ソフト『MFクラウドマイナンバー』
資金調達サービス『MFクラウドファイナンス』

メディア
くらしの経済メディア『MONEY PLUS』

Pocket