これで無料とはすごい！Mac, Win, Linux対応、デザインの指示書やスタイルガイドを簡単に作成・共有できる -Zeplin
Post on:2015年8月12日
sponsors
デザインの指示書やスタイルガイドを作成するのは、なかなか時間がかかりますよね。
使用している要素のサイズやマージンやカラーやフォントなどの情報を自動で取得したり、コメントを添えたり、指示書やスタイルガイドをプロジェクトのメンバーと共有できる「Zeplin」を紹介します。
1プロジェクトまで完全無料、2つ以上から有料ですが、機能制限などは一切ありません。
Zeplinの特徴
Zeplinは、Sketchで作成したデザインリソースから指示書やスタイルガイドなどを自動で生成するソフトウェア（無料）とオンラインサービス（無料と有料）です。
無料と有料の違いはプロジェクト数だけで、機能はまったく一緒。
リードデザイナーとアシスタント、デザイナーとコーダーなど、チーム間でのデザイン情報の共有が非常にスムーズにできます。
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でリソースを開いたキャプチャ
利用したUI素材: Food & Drink UI Kit
そのままでも利用できますが、下準備をしておくとZeplinでもっと便利になります。
アセットとして利用したい要素をスライスで定義しておくだけです。
右下の「Make Exportable」を使用すれば簡単にできます。
準備が完了したら、Sketchからファイルをエクスポートします。エクスポートはZeplinをインストールすると自動でプラグインとしてSketchに組み込まれます。
Zeplinにエクスポート (Command+E)
Zeplin ソフトウェア版 for OS X
Zeplinのソフトウェア版とブラウザ版で、機能の差はありません。OS Xユーザーが両方使えるというだけです。
メインUIは、こんな感じ。
ZeplinのUI
上部のタブで「Dashboad」と「Guideline」が用意されています。
「Dashboad」ではメインパネルにSketchファイル、サイドパネルにカラーとアセットが表示され、「Guideline」にはカラー情報などが表示されます。
「Dashboad」では、デザインのさまざまな情報が入手できます。
各要素の情報を表示
要素を指定すると、サイズ・マージン・パディング・カラー・フォントなど、さまざまな情報を表示できます。
コメントを見たり、記入することもできます。
サイドパネルを拡大するとこんな感じ。
「Dashboad」のサイドパネル
「Asset」では情報だけでなく書き出しもできます。
「Colors」では指示書やガイドラインで使用するカラーを指定（太字表示）でき、色の名前は自動で反映されます。
Zeplin ブラウザ版 for OSX, Win, Linux
Zeplinのブラウザ版でもアプリ版と同様のことができます。もちろんSketchは必要ありません。
まずは、プロジェクト一覧からプロジェクトを選択します。
Zeplin ブラウザ版のポータル
プロジェクトからファイルを選択すると、ブラウザ上でもソフトウェア版とほぼ同じUIです。
Zepli ブラウザ版のUI
操作性や機能もほぼ同じです。
Sketchファイルを扱えない環境でもブラウザがあれば、デザインの内容や指示書やガイドラインを確認できます。
Zeplinのインストール
Zeplinのソフトウェアは無料でダウンロードして、利用できます。
サイトにアクセスし、「Get Started Free」ボタンをクリックします。
メールアドレスとIDとパスワードを登録すると、ダウンロードできます。
登録すると、無料プランが利用できます。
Zeplinには大きく分けて無料と有料プランがあり、異なるのはプロジェクト数のみ。
無料プランは1プロジェクトのみですが、利用できるサービスや参加メンバー数の制限などはありません。
sponsors
