目指せ効率化!Zeplinを使ってコーディングに必要なデータを簡単取得!


デザインを作成するツールは、FigmaやAdobe XDなど様々あり、コーダーは各ツールからコーディングに必要な画像やデータを取得して作業を行います。
当たり前ですが、各ツール毎にデータ取得などの方法が違うため、各ツールの特徴・操作方法を知って使いこなさなければならず、地味に手間がかかります。
そこで、筆者はコーディング作業にデザインデータ共有ツールの【Zeplin】を使用しています。本来はデザインデータをデザイナーがコーダーに共有するためのツールですが、コーダー個人で使用しても作業が捗る便利なツールです。
本記事では、デザイン共有ツールであるZeplinについて、簡単に解説します。
目次
Zeplinとは
Zeplinは、デザイナーが作成したデザインデータを共有するツールです。
デザインツールのFigma・Adobe XD・Photoshop・Sketchに対応しており、 WebブラウザおよびMac/Windows用デスクトップアプリケーションで使用できます。
※デザインデータの取り込みは、デスクトップアプリケーションから行います。
Zeplinの利用料金
Zeplinには4つの料金プランがあり、1プロジェクトであれば無料で利用可能です。
https://zeplin.io/pricing/
Free | 月額:$0 1プロジェクト利用可能。Zeplinを初めて使用する人や、個人での利用向き。 |
---|---|
Team | 月額:$6 12プロジェクト利用可能。小規模チームでの利用向き。 |
Organization | 月額:$12 利用可能プロジェクト数は無制限。中~大規模チームでの利用向き。 |
Enterprise | ※料金要問合せ 利用可能プロジェクト数は無制限。企業での利用向き。 |
コーディングに便利な機能
コーダーは各デザインツールの仕様を、最低限知っておく必要があります。しかし、コーディング作業を行うときは「できるだけ手間をかけずに必要なデータを取得したい」というのが本音です。
筆者がZeplinを初めて使用したときに感動したのは、各要素の仕様確認がとても簡単にできることです。対象の要素を選択するだけで必要なデータが表示されるため、コーディング作業が格段にラクになりました。
コーダーに嬉しい機能
- 要素のサイズ、距離の表示
- フォント、カラーの表示
- テキストデータの一括コピー
- CSSの自動生成
- 画像の書き出し
- ブラウザ上にデザインデータを透過
要素のサイズ、距離の表示
データを取得したい要素を選択するとサイズが表示されます。要素を選択したまま、上下左右にある他の要素にマウスをかざすと、要素間の距離が表示されます。

フォント、カラーの表示
テキストを選択すると、右パネルのTypeface内に、使用しているフォントとカラー情報が表示されます。

テキストデータの一括コピー
テキストデータの一括コピーが、ボタンをクリックするだけでできます。コピーしたいテキストを選択して、右パネルのContent内にあるコピーボタンをクリックします。テキストコピーが完了すると、「Copied to clipboard!」が表示されます。

CSSの自動生成
右パネルのCSS内に、選択した要素のCSSが自動で生成されます。コードを丸ごとコピーして使用するには、少し精度が低いかなと感じます。しかし、一部利用や参考にしてコーディングを行うには、とても便利な機能です。

画像の書き出し
デザインツール側でデザインデータ内の画像を書き出し対象にしておけば、Zeplinから画像の書き出しができます。
右パネルのナイフマークをクリックすると、書き出し可能な画像が一覧で表示されます。保存できる画像形式はPNG・JPG・WebPの3種類です。(倍率は1x・2x・3xの選択が可能です。)
Download all assetsから画像を一括でダウンロード、またはDownload individual assetsから画像を選択してダウンロードできます。

ブラウザ上にデザインデータを透過
デスクトップアプリケーションを使用すると、デザインデータをブラウザ上に透過できます。コーディングデータにデザインデータを重ねて作業を進めると、配置やサイズの違いなどを比較でき、デザインデータとの差分が確認しやすくなります。

デザイナーと共有する際に便利な機能
ここまでは、コーダーにとって便利な機能をご紹介しました。筆者は一人でZeplinを使用しており、デザイナーと共同で使用した経験はありませんが、共同使用のときに役立ちそうな機能を簡単にご紹介します。
共同作業に便利な機能
- デザインデータの更新履歴が残る
- デザインデータに直接コメントを書き込める
- スタイルガイドの作成
- Slackと連携する
デザインデータの更新履歴が残る
Zeplinは、デザインデータが更新されると履歴の確認ができます。また、履歴にはメッセージを残せるため、「何時・誰が・どのような内容を変更したのか」がわかります。
コーダーにとっては、常に最新のデータをもとにコーディングができるので、古いデータのままコーディングを進めてしまうミスを防げます。

デザインデータに直接コメントを書き込める
デザインに補足や確認が必要な場合は、デザインデータに直接コメントを書き込めます。(コメント内でやり取りもできます。)確認が完了したコメントは、[Resolved]ボタンを押せば非表示にできます。
デザイナーは別途デザイン指示書を作成する必要がないため、作業効率が上がります。

スタイルガイドの作成
フォントやカラーなどをまとめて、スタイルガイドの作成ができます。コーダーはフォントやカラーが一覧で確認できると、Sassなどでカラーを一括管理するときの設定などもスムーズに行えます。
設定可能な項目
- Color palette:使用カラーの一覧表示
- Text style catalog:使用テキストの一覧表示
- Spacing and layout:余白の設定
- Components:コンポーネントの設定・一覧表示

Slackと連携する
ZeplinはSlackと連携ができます。デザインデータの更新等があった場合、Slackに自動で通知が届くため、連絡忘れなどのミス防止に繋がります。
Slackとの連携は、プロジェクトまたはスタイルガイドを開き、右パネルのIntegrations内の[Add to Slack]を押します。次に、Slackの連携ページが表示されますので、通知を表示するワークスペースおよびチャンネルを選択し、連携を許可すれば完了です。


UI・Webデザインツールの選択とコミュニケーションのお話
Zeplinの導入
Zeplinのインストールからデザインデータの取り込みについて、簡単に解説します。
インストール~デザインデータの取り込み手順
- アカウントの作成
- デスクトップアプリケーションのダウンロード
- ログイン
- デザインデータの取り込み【デスクトップアプリケーションでの操作】
- プロジェクトの作成
- デザインデータの取り込み【各デザインツールでの操作】
- Zeplin用プラグインのインストール
- 取り込みたいデザインデータの書き出し
①アカウントの作成
まずは以下のページから、Zeplinのアカウントを作成します。※Zeplinのトップページから、[Get started for free]ボタンをクリックしても、アカウント作成ページへ遷移します。
アカウント作成: https://app.zeplin.io/signup
アカウントは、Figma・Google認証またはメールアドレスで登録できます。
必要事項を送信すると、設定したメールアドレス宛に確認用認証メールが届きますので、クリックすれば登録完了です。
②デスクトップアプリケーションのダウンロード
アカウント作成が完了したら、以下のページからデスクトップアプリケーションをダウンロードします。Mac/Windows用がありますので、ご自身の環境にあわせて選択してください。
Downloading Mac and Windows apps
③ログイン
ダウンロードしたファイルを開き、アプリケーションが起動すると、ログイン画面が表示されます。①で作成したアカウントでログインすれば、アプリケーションの使用が可能になります。
④デザインデータの取り込み【デスクトップアプリケーションでの操作】
プロジェクトの作成
デザインデータを取り込むためのプロジェクトを作成します。[Create first project]から、取り込むデータに該当するプロジェクトタイプ(iOS/Android/Web)を選択し、[CREATE]をクリックします。

プロジェクトには、任意のプロジェクト名が設定できます。※デフォルトのプロジェクト名は「Untitled」です。
⑤デザインデータの取り込み【各デザインツールでの操作】
Zeplin用プラグインのインストール
各デザインツールで、Zeplinと連携するためのプラグインをインストールします。
Figma
Zeplinプラグインのページからインストールします。Figmaの[Plugins]内に[Zeplin]が表示されていれば、Zeplinとの連携は完了です。
※インストールが上手くいかない場合は、サポートページをご確認ください。
Adobe XD
Zeplinプラグインのページからインストールします。Adobe XDのメニューで、[プラグイン]内に[Zeplin for XD]が表示されていれば、Zeplinとの連携は完了です。
※インストールが上手くいかない場合は、サポートページをご確認ください。
Sketch(Macのみ)
パソコンにツールがインストールされていれば、自動的にプラグインがインストールされます。Sketchのメニューで、[Plugins]内に[Zeplin]が表示されていれば、Zeplinとの連携は完了です。
※インストールが上手くいかない場合は、サポートページをご確認ください。
取り込みたいデザインデータの書き出し
プラグインのインストールが完了したら、各デザインツールからZeplinに取り込みたいデザインデータを書き出します。手順は以下の通りです。
- 各デザインツール側で書き出し操作
- Zeplin側で取り込み先のプロジェクトを選択してデータ取り込み
- プロジェクト内にデザインデータが表示されれば完了

まとめ
今回はデザインデータ共有ツールのZeplinについて解説しました。
筆者は、画像の書き出しはデザインツール側から行っているなど、すべての機能は使用していません。しかし、フォントや距離の表示などが瞬時にされるZeplinを使用し始めて、コーディング作業のストレスが軽減しました。
Zeplinを、デザイナーとのデータ共有やコーディング作業を助けるツールとしてなど、Web制作に携わる方の選択肢に加えていただけたら嬉しいです。
Wepotは、ディレクション、デザイン、イラスト、動画編集、コーディングなど、幅広い分野を担えるメンバーで構成されており、お客様の目的に則した制作物のご提供が可能です。
Webサイトの制作等を検討している・相談してみたいなどございましたら、お気軽にお問い合わせください。