アプリデザインの受け渡しにSympliを導入してみた(Part1)

こんにちは。REASデザイナーのオカザキです。
つい最近新規アプリプロジェクトにアサインされたと思ったら、気付けばローンチ間近で焦ってる今日この頃です。

そしてそろそろデザイナー不足が深刻化してきたのでデザイナー募集中です!

 

さて今回は、新規アプリプロジェクトで導入したデザインレイアウト指示共有ツール「Sympli」についてです(と言っても使い方紹介ではありません)
「Sympli」を採用した経緯とエンジニアの反応などご紹介できればと思います。


実はこのプロジェクトはまだ開発中のため、どれぐらい効果が出たのかビフォーアフターと反省点は来月の記事で報告します!

 

 

 

Sympliって?

 

Sympli
https://sympli.io/


Sketch・Photoshopで作成したデザインのレイアウト指示共有ツールです。
Sympliを使用することで、デザインデータの色・サイズ・余白・画像などの情報をエンジニアさんも簡単に取得できるようになります。


でもそれだけじゃないっ
似たツールで有名な「Zeplin」もありますが、大きく異なる点は、

 

「Xcode/Android Studio用のプラグインがある」

 

これ以外はほぼ同じことができます。
実際の操作動画を見た方が一目瞭然なので公式動画をどうぞっ

 

▼Sketch → Sympli → Xcodeコラボの流れ

 

 

▼Simply → Android Studioコラボの流れ

 

特にXcode用のSympliプラグインが強力なのが見て取れると思います。
デザインデータ通りに簡単にパーツを配置できていますね!
これで「何かデザインしたのと位置と大きさ違うくない?」みたいな現象ともおさらばです!
デザイナーもエンジニアさんもハッピーになれます!

 


 

その他のポイント1

「Sympliはブラウザ上でデザインレイアウトを確認できる」

 

上記を読むとアプリデザイン用のツールかと思われがちですが、Webデザインも共有できます。
Xcodeのようにプラグインがあるわけではないですが、Sympliはブラウザ上でサイズ・余白など確認でき画像の書き出しも行えるので、マークアップする際に便利だと思います。

 

▼ブラウザ上でパーツのサイズを測ってる図

こんな感じでブラウザ上でサイズや色情報が表示されます。

SketchやPhotoshopでスライス(画像)を設定している場合、ブラウザ上から画像(Bitmap/Vector)をダウンロードできます。

 


 

その他のポイント2

「Sympli上のデザインにコメントをつけることができる」

 

Sympli上にアップしたデザインに対してコメントをつけることができます。

今やコラボツールではコメント機能は必須ですねっ

下図が今回のプロジェクトでオフショア先のエンジニアさんと実際に行ったやりとりの一部です。

オカザキがAndroid側のデザインを更新し忘れたのをやさしく突っ込まれてる状況です。

 

▼ブラウザ上でデザインにコメントをつけることができる

 

▼Slackと連携すると、下図のようにコメントがあった場合や、Sympli上のデザインファイルを更新した場合に通知が来ます。

 

英語は伝わったらいいやな感じでやりとりしています。

 

 

 

 

Sympliを採用した経緯


今までのリアズのアプリ制作フローでは、UIデザインのPSDファイルをエンジニアさん(ベトナムオフショア開発)に渡し、彼らがサイズ感を調べたり画像の書き出しを行っていました。

 

先方の要望でもあったため、ずっとそれでやってきたのですが、こちらがデザインしたのとサイズや位置が異なるものが出来上がってる…ということがあり、かといってスピーディーな実装が優先なので細かいデザイン調整は後回しになったり放置することも…

 

「でも、これじゃいかん!」


と思い立ち、新規プロジェクト始動を機に思い切ってSympliやZeplinといったレイアウト共有ツールを提案したのが始まりです。

当初はコラボツールで有名なZeplinを提案予定だったのですが、調べてたらあちこちでSympliの言葉が一緒にヒットするので、まさか良ツール?!と思いこちらも併せて提案することにしました。

 

先方のエンジニアさんにSympliとZeplinを試用してもらった結果、


Xcode/Android StudioプラグインがあるSympliの方が作業工数も今までより削減できそう」


と好感触な理由でSympliの採用が決定しました。

デザインの反映がしやすいというのも利点ですが、それにより作業工数が削減できるというのが嬉しい点ですね。

 

—————–

実はこの提案を先方にした当初、SympliとZeplinの公式ページのリンクと説明文をチャットを介して渡しただけでした。
公式ページ読んでもらったら、先方でどちらが良いか判断してくれるだだろうと思ったんです。
そして帰ってきた回答は「どちらも実績がないので、一旦どちらでも良い」とのことでした。

 

「え、まじで…?」
個人的にSympliはプラグインあるからエンジニアさん楽そうな気がしたんだけど…
いやこれ、もしかして試してないからかもしれん…

ということで、サンプルデザインをアップしたZeplinとSympliのプロジェクトを共有し試用してもらったらSympli採用に即決まりました。
やっぱ試してもらわないとですね…

—————–

 

さてSympli導入で開発が始まった新規アプリプロジェクト。

現在開発真っ只中なのですが、先方のエンジニアさん(ベトナムの方)にSympliどうですか?と聞いてみると、

 
Dùng sympli khá là tiện. Chúng tôi không phải mất công cắt ảnh từ pts như trước đây. Việc apply design cũng dễ dàng hơn nhờ có plugin của sympli hỗ trợ.
sympliの使用は非常に便利です。 以前と同じように画像をカットする必要はありません。 sympliプラグインのサポートにより、デザインを適用するのが簡単です。

 

とのお言葉をいただきましたっ

サンプルで試してもらったけど本番デザインではどうだろうかと心配だったのですが、作業効率アップしているようでホッとしました。

エンジニアさんがデザイン適用しやすい=デザイナーの意図したUIになるので、導入して良かったです。

 

Sympliの話とは別ですが、オフショア開発の場合、先方のやりかたに従うのが普通なのかなと思ってましたが、違いますね。お互いの作業効率が良くなるのであれば、提案していかなきゃですね。せっかく一緒にお仕事しているチームですし!

 

 

ただまだアプリは完成していないので、全てのデザインチェックはできていません。

多分問題ないとは思いますが…

来月の記事でデザインチェックの結果や反省点など続報を書くのでお楽しみに!

 

 


 

REASでは業務効率につながるツールなどは積極的に試していってます!

そんなREASに少しでも興味をお持ちの方は是非お気軽に面談・面接にお越しください!

Skypeなどでの遠隔面談も対応しています。