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

コーディング

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

読者の悩み

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

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

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

目次

本記事の信頼性

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

スポンサードサーチ

Zeplinとは?

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

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

スポンサードサーチ

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」について説明いたしました。
何かご質問がありましたら、気軽にご連絡ください。
以上です。

スポンサードサーチ