これで無料とはすごい!Mac, Win, Linux対応、デザインの指示書やスタイルガイドを簡単に作成・共有できる -Zeplin

デザインの指示書やスタイルガイドを作成するのは、なかなか時間がかかりますよね。
使用している要素のサイズやマージンやカラーやフォントなどの情報を自動で取得したり、コメントを添えたり、指示書やスタイルガイドをプロジェクトのメンバーと共有できる「Zeplin」を紹介します。

1プロジェクトまで完全無料、2つ以上から有料ですが、機能制限などは一切ありません。

サイトのキャプチャ

ZeplinのUI

Zeplin

Zeplinの特徴

Zeplinは、Sketchで作成したデザインリソースから指示書やスタイルガイドなどを自動で生成するソフトウェア(無料)とオンラインサービス(無料と有料)です。
無料と有料の違いはプロジェクト数だけで、機能はまったく一緒。

リードデザイナーとアシスタント、デザイナーとコーダーなど、チーム間でのデザイン情報の共有が非常にスムーズにできます。

ZeplinのUI

Zeplinでできることを簡単にまとめました。

  • Sketchはデザイナー用に1つあればOK、あとのメンバーは不要
  • 各要素のサイズ・ポジションの自動取得
  • 各要素の書き出し (Sketch無しで可、各デバイス用のサイズ、SVG対応)
  • カラーの一元管理
  • カラーの書き出し (CSS, Sass, Less, Objective-C, Swift対応)
  • 指示や注意書き用のコメント

簡単にまとめましたが、一つひとつの機能が非常に高度です。
例えば「カラーの一元管理」だと、まずデザインリソースからカラー情報を自動取得します。その取得したカラーの中から、スタイルガイドで定義するカラーの取捨選択も簡単にできます。そしてそれらはさまざまなコードに書き出すことが可能です。
またそのカラーに名前があれば、それも自動で適用されます。

Zeplinはソフトウェア版とブラウザ版が用意されています。

Zeplin ソフトウェア版
for OS X
主にデザイナー
Zeplin ブラウザ版
for OS X, Win, Linux
主にコーダー

Sketchでの下準備

Sketchで普通に作成したものがあれば、ほとんど作業は必要ありません。
ここでは、無料素材をダウンロードして準備してみました。

Sketchのキャプチャ

Sketchでリソースを開いたキャプチャ
利用したUI素材: Food & Drink UI Kit

そのままでも利用できますが、下準備をしておくとZeplinでもっと便利になります。

Sketchでの下準備のアニメーション

アセットとして利用したい要素をスライスで定義しておくだけです。
右下の「Make Exportable」を使用すれば簡単にできます。

準備が完了したら、Sketchからファイルをエクスポートします。エクスポートはZeplinをインストールすると自動でプラグインとしてSketchに組み込まれます。

Sketchのキャプチャ

Zeplinにエクスポート (Command+E)

Zeplin ソフトウェア版 for OS X

Zeplinのソフトウェア版とブラウザ版で、機能の差はありません。OS Xユーザーが両方使えるというだけです。

メインUIは、こんな感じ。

ZeplinのUIのアニメーション

ZeplinのUI

上部のタブで「Dashboad」と「Guideline」が用意されています。
「Dashboad」ではメインパネルにSketchファイル、サイドパネルにカラーとアセットが表示され、「Guideline」にはカラー情報などが表示されます。

「Dashboad」では、デザインのさまざまな情報が入手できます。

Zeplinの操作のアニメーション

各要素の情報を表示

要素を指定すると、サイズ・マージン・パディング・カラー・フォントなど、さまざまな情報を表示できます。
コメントを見たり、記入することもできます。

サイドパネルを拡大するとこんな感じ。

Zeplinのサイドパネルのアニメーション

「Dashboad」のサイドパネル

「Asset」では情報だけでなく書き出しもできます。
「Colors」では指示書やガイドラインで使用するカラーを指定(太字表示)でき、色の名前は自動で反映されます。

Zeplin ブラウザ版 for OSX, Win, Linux

Zeplinのブラウザ版でもアプリ版と同様のことができます。もちろんSketchは必要ありません。

まずは、プロジェクト一覧からプロジェクトを選択します。

Zeplinブラウザ版のキャプチャ

Zeplin ブラウザ版のポータル

プロジェクトからファイルを選択すると、ブラウザ上でもソフトウェア版とほぼ同じUIです。

Zeplinブラウザ版のキャプチャ

Zepli ブラウザ版のUI

操作性や機能もほぼ同じです。

Zeplinブラウザ版のアニメーション

Sketchファイルを扱えない環境でもブラウザがあれば、デザインの内容や指示書やガイドラインを確認できます。

Zeplinのインストール

Zeplinのソフトウェアは無料でダウンロードして、利用できます。
サイトにアクセスし、「Get Started Free」ボタンをクリックします。

サイトのキャプチャ

Zaplin

メールアドレスとIDとパスワードを登録すると、ダウンロードできます。
登録すると、無料プランが利用できます。

Zeplinには大きく分けて無料と有料プランがあり、異なるのはプロジェクト数のみ。

サイトのキャプチャ

プラン一覧 -Zeplin

無料プランは1プロジェクトのみですが、利用できるサービスや参加メンバー数の制限などはありません。

top of page

©2017 coliss