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

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

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

19b47a769c95482

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

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

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

10805625_10205554796610140_6512884982577333388_n

当日のアジェンダ

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

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

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

0eec6cad469fdeb

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

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

e460a17f4a7f0ae

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

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

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

eb24a7f413bb403

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

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

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

959d5e763e029f4

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

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

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

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


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

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

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

Pocket