Tortoise Shell

Webサービスの会社で働くデザイナーが、デザインやライフハックについてゆるく書き連ねるブログです。

デザイン共有で手間がかからない!Zeplinを導入して変わった3つのこと

f:id:tamusan100:20170513145043p:plainこんにちは。デザイナーのtamuです。

突然ですが、あなたの会社ではどうやってデザイン共有を行っていますか?

少し前までは、デザイン共有作業といえば大変面倒なものでした。

PhotoshopやIllustratorからいちいち画像やPDFに書き出して、それをメールやチャットに貼り付けたり…すごく手間がかかりますよね。

しかし、Zeplinというサービスを使えばデザイン共有がすごく楽になるのです。

今回は、そんなZeplinの「ここがすごい!」というところと、「実際に導入してどうなったの?」という2つの点についてご紹介します。

Zeplinとは?

Zeplinは、UIデザイナーとフロントエンドエンジニアの共同作業をサポートしてくれるデザイン共有サービスです。

デザインデータをWeb上で共有したり、スタイルガイドを付けたり、コメントを書き込んだりと、便利な機能がたくさんあります。

Zeplinの便利なところ

では、具体的にZeplinの便利なところをご紹介します。

1.SketchやPhotoshopから直接アップロードできる

あらかじめプラグインをインストールしておけば、画像を書き出さなくてもSketchからZeplinに直接デザインデータをアップすることができます。

これまでのように、非デザイナーのメンバーが「SketchやAdobeを入れていないからファイルが開けない」といった問題が発生することもありません。

2.スタイルガイドを作成できる

Zeplinからデザインデータをアップロードすると、自動的に使われているカラーコードを抜き出して並べてくれます。

あとは、こちらがそれぞれの色に名前を付けていくだけで、あっという間にスタイルガイドを作成することができます。

3.デザインデータにコメントを付けることができる

デザインデータ上に直接コメントを書き込むことができます。

コメントが書き込まれると、アップロードしたデザイナーに直接通知が行くようになっているので、見逃すこともありません。

もちろん、コメントに返信することもできます。

4.デザイン変更の履歴を見ることができる

アップロードするときのアートボード名が一致しれいれば、これまでの変更履歴もZeplin上で確認することができます。

そのため、デザインがブラッシュアップされる過程もひと目で確認することができます。

5.デザイン変更の通知をSlackに送ることができる

ZeplinはSlackとも連携させることができます。

あらかじめ設定しておけば、デザインデータがアップロードされたり変更されたりしたときにSlackに自動投稿されるようになりますので、デザインが修正されたときにエンジニアにもすぐに伝えることができます。

6.必要な画像をダウンロードすることができる

Zeplinにデザインデータをアップロードする前に、あらかじめSketch上でスライスを切っておけば、他のメンバーがZeplin上から画像データをダウンロードすることができます。

これで、いちいち「あの画像ちょうだい」といった面倒なやりとりも全て無くすことができます。

Zeplinを導入して何が変わった?

ここまででZeplinの便利な機能について見てきましたが、「じゃあ具体的にZeplinを導入して何が変わったの?」というところについて紹介します。

1.行き違いが減ってコミュニケーションが楽になった

Zeplinを導入することで、特にエンジニアとの行き違いが減ってコミュニケーションが楽になりました。

これまでは、デザインデータをわざわざ画像に書き出してSlackに投稿し「フィードバックください!」という感じでやり取りしていましたが、フィードバックする側としてはやりづらいですよね。

どうしても「グローバルナビゲーションの○○の部分は…」「アクションバーの○○のアイコンは…」という風にテキストで説明しなければならないので、認識にずれが出ることがあります。

その点、Zeplinはデザインデータ上の好きな場所に直接コメントを書き込めるので、どの場所を指しているのか一瞬で理解できます。

2.スタイルガイドの共有が楽になった

Zeplinを導入することで、スタイルガイドの共有がとても楽になりました。

最近の現場であれば、デザインデータ上で使われている色を変数として定義しておくと思います。

その際に問題になるのは命名規則なのですが、いちいち「この色の名前は…」とチャットでやりとりしたり、あるいはエクセルにまとめたりするのは面倒ですよね。

その点、Zeplinはデザインデータをアップロードすると自動的に色を抽出してくれますので、デザイナーがあらかじめ色に名前を付けておくことができます。(hogehoge-btn-primary…など)

使われている色にきちんと役割に従った色をつけておくことで、エンジニアにデザインを共有する際にも「この色はこういうときに使われるんだな…」と伝わりやすくなるのです。

3.アセットの共有が楽になった

Zeplinを導入することで、アセットの共有が楽になりました。

例えば、従来であればロゴやアイコンはあらかじめ画像やSVGとして書き出しておいて、実装するエンジニアに渡さなければなりませんでした。

しかし、Zeplinを使っていればエンジニアが好きなタイミングで素材を落とすことができるので、いちいちやり取りの手間が発生しなくなるのです。

おわりに

いかがでしたか?

もしあなたが「デザイン共有ってめんどくさいな。何か効率の良いサービスはないのかな?」と思われているのでしたら、ぜひZeplinを試してみてくださいね。

UIデザイナーのための Sketch入門&実践ガイド

UIデザイナーのための Sketch入門&実践ガイド