ブログ

SketchでUIデザイナーとエンジニアがコラボレーションするZeplinを使ってみた

某サービスサイトリニューアル案件でSketchを使っています。Sketchを利用して、ちょっとコラボレーションしやすいツールを求めています。SketchでUIデザイナーとエンジニアがコラボレーションするZeplinを使ってみました。

Zeprinとは?

Zeplinとは Sketchを利用したUIデザイナーとエンジニアがコラボレーションする、ガイドライン作成ツールです。
Sketchで作った画像をアップロードして、注釈・スタイルガイドをつけていくツールです。また、余白やフォントサイズなどを自動計算してくれるので、カンプを開いていちいち余白やフォントサイズなどを計測しなくて済むのがメリットです。

Zeplinの使い方

Zeprinは現在はSketchのみに対応しています。
プロジェクトの進め方は以下のような流れで使うといいと思います。

  1. Zeplinのアカウントとプロジェクトを作成します。
    プロジェクトを作成するときに「iOS」「Web」「Android」と選択できます。
  2. プロジェクトを作成したら、関係者を招待します
  3. デザイナーがSketchのアートボードをPNG形式でエクスポートします。
  4. デザイナーが仕様などを注釈として書き込んでいきます
  5. エンジニアは注釈や、Zeplinで自動検出される余白などをチェックしながらコーディングしていきます

ここでのサンプルには「UI Elements .sketch resource」を利用しています。

Zeprinのいいところ

  • 作業指示用のメモが挿入できます
  • 要素をクリックするだけで文字サイズ・色・余白・マージンを計算してくれます(ただし完璧ではない)
作業指示用のメモを挿入
要素をクリックするだけで文字サイズ・色・余白・マージンを計算

Zeplinのイマイチのところ

  • CSS出力はあり、書き出すスタイルの値を出してくれるがCSSとして使うために作られていない
  • 行間(line-height)・字間(letter-spacing)が出力されない
  • プレビュー画像の画質がイマイチ(Retina画質に非対応)

まとめ

ZeplinはiOS/AndroidアプリやWebサービスなどで使うときなど、画像を使わない案件で実力を発揮します。画像の書き出し機能はなく、アプリやサービスのUIを構築するときに必要な情報をコラボレートするという目的に特化しています。

コーディングをするときに色・フォントサイズや余白をチェックする作業は以外と面倒です。まだまだ完璧ではないですが、数値を自動検出してくれるだけでも作業は効率化できます。一度使ってみてはいかがでしょうか?