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

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

読者の悩み

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

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

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

Adobe XDやPhotoshop、Illustratorなど普段から他のAdobe製品も使われる方は、Adobe CCの購入がおすすめです。

Adobe CCを少しでも安く購入したい方は、「デジハリ経由でAdobe CCコンプリートプランを安く購入する方法」の記事をご覧ください。

デジハリ経由でのAdobe CC購入は、社会人の方を対象にしています。
学生の場合、Adobe公式サイトで「Adobe CCコンプリートプラン（学生・教職員向け）」を購入するのが間違いなく最安です！

本記事の信頼性

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

Zeplinとは？

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

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

Zeplinの便利機能４選

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

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

１つずつ説明しますね。

CSSの自動生成

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

１）要素を選択すると画面右に必要なCSSが表示されます。

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

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

背景色とボーダー

フォントファミリー

画像書き出し

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

１）画面右のナイフのアイコンを選択します。

書き出せる画像のリストが表示されます。

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

選択できる書き出し形式

• PNG
• JPG
• WebP

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

書き出し倍率の設定

Assets右横のマークから、「Bitmap Scales」を選択すると設定できる倍率「１x、２x、３x」が選択できます。

注意点

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

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

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

要素に入っているテキストデーターをワンクリックでコピーすることができます。

※「Copied to clipbord」と表示されればコピー完了です。

Zeplinの使い方（導入編）

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

Zeplinのアカウント作成

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

（１）赤枠部分を選択します。

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

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

（４）ダウンロードしたZeplinアプリをダブルクリックして開始します。

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

Zeplinのプロジェクト作成

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

（１）「Create Project」を選択します。

（２）プロジェクトの種類は「Web」で「Create」を選択します。

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

XDとZeplinの連携

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

Adobe社からXDとZeplinを連携するためのプラグイン（Zeplin for Adobe XD）が提供されていますので、プラグインのインストールを行います。（準備はこれだけです！）

参考：Zeplin for Adobe XD プラグインを使ってデザインを共有しよう！

PhotoshopとZeplinの連携

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

（１）Zeplinのメニューから、[Adobe Photoshop Integration]-[install Plugin…]を選択してPhotoshopにZeplinのプラグインをインストールします。

（２）Photoshopの環境設定からプラグインメニューを選択し、「Generatorを有効にする」にチェックがついていることを確認します。

Windowsの方はこちらの公式サイトの手順を参考にして下さい
※英語ですが、内容は簡単です！

FigmaとZeplinの連携

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

（１）Zeplinのメニューから、[Figma Integration]-[install Plugin ・・]を選択します。FigmaにZeplinのプラグインをインストールします。

（２）Figma上で利用するZeplinのプラグインをインストールします。

「install」を選択します。

インスタールが完了すると、下記のメッセージが表示されます。

Zeplinの使い方（実践編）

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

Photoshopの場合

（１）対象のデザインデータ（psdファイル）をPhotoshopで開きます。

（２）[ウィンドウズ]-[エクステンション]-[Zeplin]を選択します。

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

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

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

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

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

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

Adobe XDの場合

（１）対象のデザインデータ（xdファイル）をAdobeXDで開きます。

（２）インポートしたいアートボードを選択し、メニューの[プラグイン]-[ Zeplin for XD]-[Export Selected …]を選択します。

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

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

参考：Publishing designs from Adobe XD

Figmaの場合

（１）Figma上で対象のアートボードを選択します。

（２）メニューから「Plugins」ー「Zeplin」を選択します。

初めてZeplinと連携する際は、Zeplinアカウントの接続を求められます。

接続した後、Figmaとの連携を許可します。

下記の画面が表示されると接続完了です。

※再度Figmaの画面からZeplinのプラグインを選択します。

（３）「Export」を選択して、デザインデータを取り込みます。

（４）Zeplinのプロジェクトを選択し、Exportします。

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

まとめ

今回は、コーディング作業の効率を上げる便利ツール「Zeplin」について解説しました。

他にも作業の効率化につながる便利ツールについて、下記の記事にまとめています。

以上です。お疲れ様でした！