Yenomでのデザイナ - エンジニア間のやりとりについて

はいさ〜い!

株式会社Yenom(旧・株式会社mikan)デザイナーのみぞ(@ 3izorin)です。

デザインを中心に担当してますが、必要とあらばなんでもします。 コードは書けませんが、教えてもらいつつAuto Layoutを触ったりもしています。

先日、こんなTweetを見かけました。

この例ではデータ管理の話ですが、
よくよく考えてみると他社の事例について全然知りません。ので!!

まずはYenomで使っているデザインツール、エンジニアへの渡し方を紹介します。(他社の皆さんも教えてたもれ🙇‍♂️)

概要

  • ツール紹介
  • エンジニアへの渡し方
    • UI 編
    • 画像素材 編
    • Sketch Import Tool、使いたかったけど使わなかった話
  • おまけ

ツール紹介

ツール一覧

Yenomで使っているツールは、こちらです。 ツールの右にあるのが主な用途ですね。

ツール 用途
Sketch UI開発
Zeplin エンジニアへのUI仕様書
invision プロトタイピング
Google Drive 素材共有フォルダ
Adobe illustrator DTP、稀にアイコン
Adobe photoshop AppStore / GooglePlay アート素材
ほぼSketchしか使いません。

UIはほとんどSketchで作ります。

僕の場合、Adobe製品を触るときは、DTPのものを作るときとか、AppleさんやGoogleさんにクリエイティブ素材を渡すときくらいです。

エンジニアへの渡し方

UI 編

デザイナーからエンジニアへUIを渡すときは 主にZeplinを使っています。

プロトタイピングツールは実際に軽く触ってみたい時のみ使います。

単純な挙動を指定する場合は、スピード重視で対面での説明か他の参考アプリを指定する場合が多いです。

f:id:mizonit:20180426122522p:plain

Zeplinを使っている理由としては大きく3つあります。

①簡単に渡せる(ショートカットキー1つ)

まず、一つ目は渡す楽さです。

cmd + ctrl + E で反映先を指定すれば簡単にできますね。 しかも!Slack連携をしていると変更履歴をpngにして流してくれます。

ちなみに、Zeplinではプロジェクトを大きく iOS / Android / Web の3つに分けています。

②定量で渡せる(マージン、フォントなど指定しなくて良い)

この2番が結構重要で、 margin、フォント・ウェイト・サイズ、画面比まで全て定量で表示できます。

これらを定量で渡せることで、デザイナーが定量で渡していないのか、エンジニアがそれを見て実装していないのか、責任の所在の明確化もできます。

(できますが、現状のYenomだと実装後のUI確認のフローが明確になくできていないところです。。。)

f:id:mizonit:20180426121639p:plain

ちなみにですが、デザインを作る前提として簡単なガイドラインをWorkation(Workationって何やねんって方はiOSエンジニアakiのLet's Workation!を参照してください。)で作成して活用しています。

ガッチガチのガイドラインではなく、以下を定義・制限しています。

  • 命名規則

  • タイポ(使用フォント・ウェイト・サイズ)

  • カラー(社内でのカラー名・カラーコード)

  • マテリアル(icon・button作成時の制約)

③コメントできる

f:id:mizonit:20180426122931p:plain

最後はコメントできる点です。 コメントとは言えど、使い方は様々です。

  • このUIに至った過程

  • 参考にしたUI

  • 期待する挙動

  • ローカライズ文言

  • アイコンの保存場所

Slack連携しておくとコメントもしてチャンネルに流してくれるので、自ら伝えずともエンジニアに知ってもらえます。 (念のため自らSlackでもメンション飛ばします。)

画像素材 編

下記の図のようにiOS / Androidそれぞれ形式を指定してGoogleドライブ経由で渡しています。

f:id:mizonit:20180426020832p:plain

ここで命名規則をある程度固められていると、エンジニアはドラッグ&ドロップするだけでいいのでめちゃめちゃ嬉しそうな顔をします。

f:id:mizonit:20180426124626j:plain

エンジニアのカズです。嬉しそうですね。

Sketch-import-tool を使わなかった話

上記した画像データの渡し方ですが、最近は違う方法も検討していました。@konifarさんのSketch-import-toolです。

簡単に説明すると、デザイナーが画像を変更してGitにプッシュすると、自動的にプルリクが走って最新版画像に置き換えてくれるベンリーツールです。 詳しくはGithubか、konifarさんのブログ(書かれているのはiOS版ですが…!)をみてください。

Yenomのメンバーはみんな新しいことに挑戦する(ニュアンスとしては 「遊ぶ」 の方が近い)のが好きなので、デザイナーの僕としても、エンジニア陣もめちゃめちゃやってみたい試みでした。が、

  • デザイナー、エンジニアにそれぞれ一定のコスト(導入・運用)が発生する。

  • 現状の渡し方に大きな課題があるわけではない。

  • まれに起きる人為的ミスはツールの導入で改善されるわけではない。

ツール開発者のkonifarさん含め話し、上記の理由があがって導入は見送りました。 各イメージのサイズや命名規則もバッチリ揃ってたので使ってみたかったのですが・・・!

よくやってる事を書いているブログはあるので、今回はやらなかったことも書いてみました。

Danshari is 大事。

おまけ

Cookpad社の@transitkixさんがSlackでアイコンカスタムボットを作っていた話を見かけたので

Yenomでも作ってみたところ・・・大ヒットしました。

簡単に設定できるので、めちゃめちゃオススメです。

アイコン以外にもフローチャートや、デバッグ用のQR表示など多方面で大活躍しています。

f:id:mizonit:20180426142824p:plain

僕は普段 「絶対」 っていう言葉はあまり使わないのですが、 絶対導入した方がいいです!!!

作ったカスタムボット自体がそこまで有用でなくても、一人使い始めるとみんな「おっ」となって社全体で有効活用の流れになります。

Slackの利便性アップは複利が聞くので、導入はぜひお早めに!

あんしぇ〜、またや〜さい!(それでは、またね!)