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

2022/01/20

コーディング

デザインを作成するツールは、FigmaやAdobe XDなど様々あり、コーダーは各ツールからコーディングに必要な画像やデータを取得して作業を行います。

当たり前ですが、各ツール毎にデータ取得などの方法が違うため、各ツールの特徴・操作方法を知って使いこなさなければならず、地味に手間がかかります。

そこで、筆者はコーディング作業にデザインデータ共有ツールの【Zeplin】を使用しています。本来はデザインデータをデザイナーがコーダーに共有するためのツールですが、コーダー個人で使用しても作業が捗る便利なツールです。

本記事では、デザイン共有ツールであるZeplinについて、簡単に解説します。

Zeplinとは

Zeplinは、デザイナーが作成したデザインデータを共有するツールです。
デザインツールのFigma・Adobe XD・Photoshop・Sketchに対応しており、 WebブラウザおよびMac／Windows用デスクトップアプリケーションで使用できます。
※デザインデータの取り込みは、デスクトップアプリケーションから行います。

Zeplinの利用料金

Zeplinには4つの料金プランがあり、1プロジェクトであれば無料で利用可能です。
https://zeplin.io/pricing/

コーディングに便利な機能

コーダーは各デザインツールの仕様を、最低限知っておく必要があります。しかし、コーディング作業を行うときは「できるだけ手間をかけずに必要なデータを取得したい」というのが本音です。

筆者がZeplinを初めて使用したときに感動したのは、各要素の仕様確認がとても簡単にできることです。対象の要素を選択するだけで必要なデータが表示されるため、コーディング作業が格段にラクになりました。

要素のサイズ、距離の表示

データを取得したい要素を選択するとサイズが表示されます。要素を選択したまま、上下左右にある他の要素にマウスをかざすと、要素間の距離が表示されます。

フォント、カラーの表示

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

テキストデータの一括コピー

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

CSSの自動生成

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

画像の書き出し

デザインツール側でデザインデータ内の画像を書き出し対象にしておけば、Zeplinから画像の書き出しができます。

右パネルのナイフマークをクリックすると、書き出し可能な画像が一覧で表示されます。保存できる画像形式はPNG・JPG・WebPの3種類です。（倍率は1x・2x・3xの選択が可能です。）

Download all assetsから画像を一括でダウンロード、またはDownload individual assetsから画像を選択してダウンロードできます。

ブラウザ上にデザインデータを透過

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

デザイナーと共有する際に便利な機能

ここまでは、コーダーにとって便利な機能をご紹介しました。筆者は一人でZeplinを使用しており、デザイナーと共同で使用した経験はありませんが、共同使用のときに役立ちそうな機能を簡単にご紹介します。

デザインデータの更新履歴が残る

Zeplinは、デザインデータが更新されると履歴の確認ができます。また、履歴にはメッセージを残せるため、「何時・誰が・どのような内容を変更したのか」がわかります。
コーダーにとっては、常に最新のデータをもとにコーディングができるので、古いデータのままコーディングを進めてしまうミスを防げます。

デザインデータに直接コメントを書き込める

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

スタイルガイドの作成

フォントやカラーなどをまとめて、スタイルガイドの作成ができます。コーダーはフォントやカラーが一覧で確認できると、Sassなどでカラーを一括管理するときの設定などもスムーズに行えます。

Slackと連携する

ZeplinはSlackと連携ができます。デザインデータの更新等があった場合、Slackに自動で通知が届くため、連絡忘れなどのミス防止に繋がります。

Slackとの連携は、プロジェクトまたはスタイルガイドを開き、右パネルのIntegrations内の［Add to Slack］を押します。次に、Slackの連携ページが表示されますので、通知を表示するワークスペースおよびチャンネルを選択し、連携を許可すれば完了です。

UI・Webデザインツールの選択とコミュニケーションのお話

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と連携するためのプラグインをインストールします。

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

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

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

まとめ

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

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

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