【Zeplinの使い方】デザインデータ(Adobe XDとPhotoshop)からのコーディングを効率化する方法

コーディング

こんにちはTERUです。
フリーランスでWEB制作(コーディング と ディレクション業務)をしています。

読者の悩み

  • デザインデータ(XDやPSD)からのコーディングをもっと効率的にできないかな?
  • Zeplinの使い方が知りたい

本記事では、こういった疑問に答えます。

僕も普段コーディングで利用している便利ツール、「Zeplin」について導入方法から使い方まで説明いたします。
「Zeplin」を利用することで、Adobe XDやPhotoshopのデザインデータからコーディングに必要な情報を素早く取得することができ、作業効率を上げることができます。

目次

本記事の信頼性

  • Web制作会社にてディレクターを経験
  • WordPressを使ったWeb制作を数多く経験
  • 2019年8月〜フリーランスとして活動開始

スポンサードサーチ

Zeplinとは?

Zeplinとは、デザインデータをチームメンバーに共有するためのツールです。
いろんな使い方ができますが、本記事では、コーディングする観点に絞って説明します。

Zeplinでデザインデータを読み込むことにより、各要素の距離や CSSといったコーディングに必要な情報をすぐに確認することができ、作業効率の改善につながります。

スポンサードサーチ

Zeplinの便利機能4選

ここでは、コーディングする際に便利なZeplin機能を紹介します。

  • CSSの自動生成
  • フォントとカラーコード の表示
  • 画像書き出し
  • テキストデータの簡単コピー

1つずつ説明しますね。

CSSの自動生成

デザインデータからコーディングに必要なCSSを読み取ってCSS形式で表示してくれます。
※コーディングで一番助かる機能です。

1)要素を選択すると画面右に必要なCSSが表示されます。
CSSの自動生成

全てそのまま利用できる分けではないですが、あるだけでかなり効率化できます。

フォントやカラーコードの確認

要素を選択することで、背景色やボーダー、フォントファミリーも表示されます。

背景色とボーダー

背景色とボーダー

フォントファミリー

フォントファミリー

画像書き出し

デザインデーター内の画像も簡単に書き出すことができます。
書き出し形式の選択倍率を指定した書き出しも可能です。

1)画面右のナイフのアイコンを選択します。
画像書き出し
書き出せる画像のリストが表示されます。

2)リストを選択すると書き出し形式が表示されるので、選択します。
※今回はJPG形式を選択します。
画像書き出し2

選択できる書き出し形式

  • PNG
  • JPG
  • WebP

3)画面右下の「Download」ボタンを選択して書き出し完了です。
画像書き出し3

書き出し倍率の設定

Assets右横のマークから、「Bitmap Scales」を選択すると設定できる倍率「1x、2x、3x」が選択できます。
画像書き出し4

チェックがついている倍率の画像が書き出されます。

注意点

画像を書き出すためには、Zeplinに読み込む前にデザインデータで下記の準備が必要になります。

  • Photoshopの場合:対象の画像をアセット化しておく
  • Adobe XDの場合:対象の画像を「書き出し対象」に設定しておく

テキストデータの簡単コピー

要素に入っているテキストデーターをワンクリックでコピーすることができます。
テキストデータの簡単コピー
※「Copied to clipbord」と表示されればコピー完了です。

小さなことですが、コーディング作業の効率化に繋がります!

スポンサードサーチ

Zeplinの使い方(導入編)

Zeplinの使い方(導入編)
Zeplinの導入方法について、画像つきで詳しく説明します。
Zeplinは一部機能は有料ですが、無料版でもコーディングで利用する場合は問題ありません。

Zeplinのアカウント作成

公式サイトにアクセスしてアカウント登録を進めます。

(1)赤枠部分を選択します。

Zeplinのアカウント作成

(2)アカウント登録画面が表示されるので、「メールアドレス」、「ユーザー名」、「パスワード」を入力し、登録ボタンを選択します。

Zeplinのアカウント作成2

(3)アプリのダウンロード画面が表示されるので、WindowsかMacを選択します。
※ここではMacを選択します。

Zeplinのアカウント作成3

(4)ダウンロードしたZeplinアプリをダブルクリックして開始します。

Zeplinのアカウント作成4

(5)ログイン画面が表示されるので、登録した「メールアドレス」、「パスワード」を入力してログインします。

Zeplinのアカウント作成5

Zeplinのプロジェクト作成

デザインデータを取り込むためのプロジェクトを作成します。

(1)「Create Project」を選択します。

Zeplinのプロジェクト作成

(2)プロジェクトの種類は「Web」で「Create」を選択します。

Zeplinのプロジェクト作成2
Zeplinのプロジェクト作成3
※プロジェクトが作成されていることを確認します。

PhotoshopとZeplinの連携

PhotoshopでZeplinを利用するための連携方法になります。簡単です。

(1)Zeplinのメニューから、[Photoshop Integration]-[install Plugin Automatically]を選択してPhotoshopにZeplinのプラグインをインストールします。

PhotoshopとZeplinの連携
これでZeplinを利用するための準備は完了です。

スポンサードサーチ

Zeplinの使い方(実践編)

Zeplinの使い方(実践編)
ここでは、XDやPhotoshopのデザインデータをZeplinに読み込んでコーディングに利用する流れを具体的に説明します。

Photoshopの場合

(1)対象のデザインデータ(psdファイル)をPhotoshopで開きます。

(2)[ウィンドウズ]-[エクステンション]-[Zeplin]を選択します。

Photoshopの場合

(3)photoshopの画面右側に[Zeplin]の拡張画面が表示されるので、「アートボード」を選択した状態で「Export〜」をクリックします。

Photoshopの場合2
※初めからアートボードがない場合は、全てのレイヤーを選択した状態で右クリック-[レイヤーからのアートボード]を選択

(4)先ほど作成したプロジェクトが表示されるので、選択した状態で、[Import]をクリックします。

Photoshopの場合3
※Zeplinへのデータ取り込みは完了です。

(5)Zeplinのアプリを確認するとプロジェクト内にデザインデータが取り込まれています。

Photoshopの場合4

(6)取り込まれたデータを確認すると各要素の距離や コーディングに必要な情報が確認できます。

Photoshopの場合5

XDの場合

(1)対象のデザインデータ(xdファイル)をAdobeXDで開きます。

(2)インポートしたいアートボードを選択し、メニューの[ファイル]-[ 書き出し]-[Zeplin]を選択します。

XDの場合

(3)ポップアップ画面が表示されるのでプロジェクトを選択し[Export]をクリックします。

XDの場合2
※これでZeplinへのデータ取り込みは完了です。後はPhotoshopと同じでZeplinの画面で操作できます。

今回はコーディング速度を上げる便利ツール「Zeplin」について説明いたしました。
何かご質問がありましたら、気軽にご連絡ください。
以上です。

スポンサードサーチ