【社内レポ】エンジニアドリブンのための「Sketch.app」講座 Vol.1

自動家計簿マネーフォワードを担当しているディレクターの村里です。
今回の記事は、先日社内イベント『MF Geeks Night #4』のレポートです。

マネーフォワードで定期的に開催される自主的イベント「MF Geeks Night」の#4では、
『エンジニアドリブンのための「Sketch.app」講座 Vol.1』と題して、
エンジニアを中心にデザインツールSketch.appについての勉強会を開催しました。

開催の趣旨は、よくあるエンジニアにデザインのことをもっと深くわかってもらうこと、
ではなく、エンジニアがデザイナーに頼らずとも自力で作業を進ようになることです。
そのきっかけとしてのSketch.appの入門イベントです。

というのも、マネーフォワードのスマホ開発チームでは、
デザイナーとエンジニアの間でのデザインファイルのやりとりの際にスライスした画像ではなく、
Sketch.appのファイルをそのまま渡してエンジニア側で切り出ししてもらっています。
これを社内の文化として根付かせたいという思いもありました。
まさにエンジニアドリブンを目指すマネーフォワード。

勉強会の内容としては以前本ブログの記事に書いたSketch Appを使おう（導入編）の内容を、
もっと具体的な使い方とドラ◯もんの名言を交えながら説明しました（ピザとビールも付いています）

当日のアジェンダ

Sketch.appとはどんなツールなのか？エンジニアと共同作業が可能になる ←なぜなのかデザインのことが理解できるかも？何を読み取ればいいのかこれからのエンジニア-デザイナのやりとりの境界線は？実演します！

ざっと内容を要約すると、

Sketch.appとはどんなツールなのか？

Sketch.appの魅力と、他のツールとの違いや使い分けなどを説明しました。

エンジニアと共同作業が可能になる ←なぜなのか

Sketch.appはPhotoshopやIllustratorなどのデザインソフトと違い、ツールの数も少なく操作が簡単ですデザイナーからエンジニアに作業が移動するときには画像だけでなく、Viewを作るのに必要な背景や文字の色、大きさなどのメタ情報も必要になります。エンジニアにデザインを渡すときにこれらの情報を指示書として作成すると毎回の負担が大きくなってしまいます。

実際Sketch.appを使ってエンジニアが直接デザインファイルを触りながらプログラミングができるようになり、社内のエンジニアからは作業がしやすくなったとのコメントをもらいました。

デザインのことが理解できるかも？何を読み取ればいいのか

前章とかぶる内容でもありますが、デザインファイルを直接触れることによって、
デザイナーが作ったガイドや構造をみる機会も増えますので、デザインの意図を理解することができるようになります。

これらのことは一見エンジニアの負担が増えるように思えますが、
Sketch.appによって作業自体は簡単・効率化されますので、
その分デザイナーとエンジニアがデザインについてコミュニケーションの機会を増やすことができるといいなーと思っています。

これからのエンジニア-デザイナのやりとりの境界線は？

結論からいうと、お互いの作業領域をある程度知ることが必要で、
デザイナーもプログラミングを知る必要があるし、エンジニアもデザインの意図が汲めないと円滑に作業が進みません。

私がいたグラフィックデザインの業界でも、カメラの性能や印刷技術が向上するに伴いそれぞれの職域の境界線がなくなってきていることを実感しましたので、Webやスマホの世界でもそういう流れになってくるのではという思いがあります。

こういった話に加え、実際にSketch.appを使いながら、簡単にデザインができるソフトであることを紹介しました。vol.1では概要的な話メインでしたが、今後はもっとワークショップ的なところも含めてやっていきたいと思っています。

2014年最後のマネーフォワードエンジニアブログになりますが、2015年もマネーフォワードはあたらしことをどんどんやっていきたいと思っています。
みなさん、良いお年をお迎えください。

エンジニアだってデザインがわかりたい！！
マネーフォワードでは、デザインもプログラミングもできるスーパーデザインエンジニアを募集しています。
みなさまのご応募お待ちしております！

マネーフォワード採用サイト
https://recruit.moneyforward.com/

Wantedly
https://www.wantedly.com/companies/moneyforward