こんにちは。デザイナーの大橋です。
今日は、私が担当している “（しら）ずにお金が（たま）る”自動貯金アプリ『しらたま』 で導入してました、デザインのバージョン管理の話を紹介します。
デザインのバージョン管理といえば、AbstractやKactusがありますが、今回はあえてGit Sketch Pluginを試してみました。
デザインデータをGitHubで管理しようと思ったキッカケ
- 私以外のチームメンバーがみんなエンジニアだから、間違いなくGitHubに寄せたほうが効率いいんじゃないか。
- 新しいツールを導入すると、プロジェクトに関する情報が分散してしまいがちで、エンジニアも招待したり登録してもらったりしなきゃいけないのかなという印象。※あくまで印象です。
- Kactusはプライベートレポジトリが有料。
こんな感じでなんかファイルが増えてく。。。(忙しいと放置しがちでよくない。。
GitHubで管理するのどうかなと相談したら、エンジニアのやっくんがこんな事もできそうだよって教えてくれた。
今まで使ってたツール
invision sync ＋ zeplin
- invisionにあるSketchファイルをマスターデータとして、エンジニアと共有。
- 流れや大枠はSketchで確認してもらい、UIのレイアウトなどはzeplinで。
- レビューや疑問点などをコメント機能を使って運用
メリット
- プロトタイプを触ってもらい、そのまますぐ思った事をコメントしてもらえるのが便利だった
- 細かい場所を指定して、その場所に対してコメントを書けたので議論したい場所が明確
- 何もしなくても、ほぼリアルタイムでSyncされる
デメリット
- invision syncだとデグレったり、syncがうまく行ってない事があった。（私のやり方が悪かったのかもだけど
- ノーティフィケーション機能が上手く機能しなくて、エンジニアがコメントに気付きづらい
という事で、前から少し興味のあったGitHubで、デザインバージョン管理をしてみることにしました。
GitHubでのバージョン管理の仕方
使うツール
GitHub＋SourceTree＋Git Sketch Plugin
手順
デザイナー「何か作業したい」と思ったら...
- SourceTree で ブランチを作る
- 作ったブランチにチェックアウト
- Sketchファイルを編集する
- SourceTreeでステージングにファイルをあげる
- Sketchの
Git Sketch Pluginで Generate XXX にチェックを入れてコミットする
- Sketchの
Git Sketch Pluginで Pushする
- GitHub上でPRを作る
diff（差分）の確認方法
PRのFilles changedのタブを開くと変更のある画面だけでてくる
今回例であげた場合だと、すぐにはどこが変更されたか一見わかりませんよね？
そんな時は、画像の下にあるSwipeやOnion Skinで確認すると、どうでしょうか？
デザインの修正点はテキストデータじゃないので、ここが変わったよって教えてくれないけど、これによってビフォー・アフターが分かるので、一瞬で伝わるように！
コミュニケーションコストが劇的に下がりました
よかった点
- オープンな場で、背景やデザインの意図など、やった作業のログを残せる
- なんでその色にしたのかなど、テキストデータとdiffで残しておけるので、背景を読み取りやすくなったのでは
- エンジニア中心のチームなので、GitHubに何か残しておけば気付いてくれるし、気になる点があればコメントくれる
- どんな意見でもコメントくれたり反応がある事が、さりげなく励ましになっててみんなで作ってる感があって好き
- GitHubにプロダクトのレビューやissueを集約する事で、一箇所で議論できる
- 関連のios issueへリンクを貼っておく事で、実際にエンジニアが手を動かす時にdiffなどをみて思い出してくれる
- これを皮切りに、プロジェクト管理もGitHubのprojectsに寄せて誰が何をやってるか・リポジトリをまたいだプロジェクトの進捗状況を確認できるようテスト運用中
- diffが見える事で、デザイナーもエンジニアも見落としが減るし、おかしいなと思った点について、すぐコメントをくれて、修正してすぐマージでできる
という感じで、様々なメリットがありました。
開発プロジェクトでは、各担当が作業するタイミングにタイムラグが生じてしまいます。 今までブラックボックスになっていたデザイン作業の工程も、GitHub内で見える化できていると、 「ココ修正したから直してって言ったのに直ってない」 のような認識のズレや無駄なコミュニケーションが減り、開発効率が劇的にあがったように感じています。
今回、チームメンバーがエンジニア中心のスモールチームだったこともあり、このやり方が合っていました。
反面、一概にGitHubでのデザインのバージョン管理がよいとは言えない場合もあるかと思います。 たとえば、エンジニア、デザイナー、マーケティング担当が複数人で構成されるチームの場合、GitHubを導入する事自体がハードル高くなる可能性もあります。また、デザイナー同士の共同作業を重視したら、Abstractを試すかもしれません。
みなさんも機会があれば「GitHub ＋ SourceTree ＋ Git Sketch Plugin」を試してみてはいかがでしょうか？
最後に
マネーフォワードでは、デザイナーを募集しています。 また、一緒にしらたまを作るiOSエンジニアも絶賛募集しています。 ご応募お待ちしています。
【採用サイト】 ■マネーフォワード採用サイト ■Wantedly | マネーフォワード
【マネーフォワードのプロダクト】 自動家計簿・資産管理サービス『マネーフォワード』 ■Web ■iPhone,iPad ■Android
「しら」ずにお金が「たま」る 人生を楽しむ貯金アプリ『しらたま』 ■Web ■iPhone,iPad
ビジネス向けクラウドサービス『MFクラウドシリーズ』 ■バックオフィス業務を効率化『MFクラウド』 ■会計ソフト『MFクラウド会計』 ■確定申告ソフト『MFクラウド確定申告』 ■請求書管理ソフト『MFクラウド請求書』 ■給与計算ソフト『MFクラウド給与』 ■経費精算ソフト『MFクラウド経費』 ■入金消込ソフト『MFクラウド消込』 ■マイナンバー管理ソフト『MFクラウドマイナンバー』 ■資金調達サービス『MFクラウドファイナンス』
メディア ■くらしの経済メディア『MONEY PLUS』
