目指せ効率化!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が自動で生成されます。コードを丸ごとコピーして使用するには、少し精度が低いかなと感じます。しかし、一部利用や参考にしてコーディングを行うには、とても便利な機能です。

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の連携ページが表示されますので、通知を表示するワークスペースおよびチャンネルを選択し、連携を許可すれば完了です。

Slack連携画面

Zeplinの導入

Zeplinのインストールからデザインデータの取り込みについて、簡単に解説します。

インストール~デザインデータの取り込み手順

  1. アカウントの作成
  2. デスクトップアプリケーションのダウンロード
  3. ログイン
  4. デザインデータの取り込み【デスクトップアプリケーションでの操作】
    1. プロジェクトの作成
  5. デザインデータの取り込み【各デザインツールでの操作】
    1. Zeplin用プラグインのインストール
    2. 取り込みたいデザインデータの書き出し

①アカウントの作成

まずは以下のページから、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との連携は完了です。
※インストールが上手くいかない場合は、サポートページをご確認ください。

Photoshop

パソコンにツールがインストールされていれば、自動的にプラグインがインストールされます。Photoshopのメニューで、[ウィンドウ]→[エクステンション]内の[Zeplin]にチェックを入れれば、Zeplinとの連携は完了です。
※インストールが上手くいかない場合は、下記サポートページをご確認ください。
Mac
Windows

Sketch(Macのみ)

パソコンにツールがインストールされていれば、自動的にプラグインがインストールされます。Sketchのメニューで、[Plugins]内に[Zeplin]が表示されていれば、Zeplinとの連携は完了です。
※インストールが上手くいかない場合は、サポートページをご確認ください。

取り込みたいデザインデータの書き出し

プラグインのインストールが完了したら、各デザインツールからZeplinに取り込みたいデザインデータを書き出します。手順は以下の通りです。

  1. 各デザインツール側で書き出し操作
  2. Zeplin側で取り込み先のプロジェクトを選択してデータ取り込み
  3. プロジェクト内にデザインデータが表示されれば完了
取り込まれたデザインデータ

まとめ

今回はデザインデータ共有ツールのZeplinについて解説しました。
筆者は、画像の書き出しはデザインツール側から行っているなど、すべての機能は使用していません。しかし、フォントや距離の表示などが瞬時にされるZeplinを使用し始めて、コーディング作業のストレスが軽減しました。

Zeplinを、デザイナーとのデータ共有やコーディング作業を助けるツールとしてなど、Web制作に携わる方の選択肢に加えていただけたら嬉しいです。

Wepotは、ディレクション、デザイン、イラスト、動画編集、コーディングなど、幅広い分野を担えるメンバーで構成されており、お客様の目的に則した制作物のご提供が可能です。
Webサイトの制作等を検討している・相談してみたいなどございましたら、お気軽にお問い合わせください。

ご依頼・ご相談はこちら

お客様の課題解決に最適なメンバーアサインでスムーズなプロジェクト進行をいたします。制作して終わりではなく、お客様が求める成果に結びつくご提案をさせていただきます。

この記事がシェアできます

この記事を書いた人
まるこ

まるこ
コーダー

まるこ
コーダー

想いの詰まったWebデザインを“カタチ”にするコーダーとして、Webサイト制作の一端を担っています。「誰が見てもわかるコード」を念頭に置き、品質・保守性を重視して制作しています。趣味はサッカー観戦。好きな色はトリコロール!

  • Wepotについて

    アイコン

    Wepotはデジタルクリエイティブで課題を抱えるすべての人への解決策を提示できます。

  • 実績一覧

    アイコン

    Wepotには多種多様な実績があります。メンバーの強みが生きた実績をご覧ください。

  • 制作のご相談

    アイコン

    現在の課題やお悩みをお聞かせください。あなただけのクリエイティブチームを編成し解決へと導きます。