【Zeplinの使い方】利用するメリット、インストールからプロジェクト作成まで
アプリ等の各種画面デザインをエンジニア、コーダーさんといった開発者にスムーズに伝えることのできるアプリケーションであるZeplin。
その導入メリットから最初のプロジェクト作成までをご紹介します。
Zeplinを上手に使いこなせれば、チーム内でのコミュニケーションが取りやすくなって、みんなの作業効率が上がります。
当サイトには、広告が含まれているページがあります。
豊かに引きこもる。
Webデザインは器。ブログは中身。
「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
おウチで豊かに楽しく暮らす方法をご紹介しています。
Zeplinとは
Zeplinはそれ自体では機能せず、FigmaやAdobe XD等の各種デザインカンプ作成ツールと連携させて利用します。
作成されたデザインカンプを、Zeplinに書き出す（エクスポート）というのが基本的な使い方です。
対応しているアプリケーションには、以下があります。
・Figma
・Adobe XD
・Sketch
・Adobe Photoshop
有名どころはおおよそ対応してますね。
Zeplinにエクスポートすると、こんな事が便利になります。
Zeplinのメリット
更新履歴が残る
デザインカンプ作成時には当然何度も修正・変更が入りますが、Zeplinに書き出す事で、都度その変更履歴を残す事ができます。
Zeplinを使えば、変更前と変更後を比較したり、差分を探す事がカンタンに行えるようになります。
画像が渡しやすい
画面内に使われているアイコン等、各種画像をZeplinからダウンロードする事ができます。
カンプ作成時に画像の名称を決めておけばZeplin上にそのまま反映されますし、画像形式等も選べるのでエンジニアさんの作業効率が上がります。
各種数値が取りやすい
各種余白サイズや画像のレイアウト位置などをZeplin上で計測する事ができます。
Zeplinの利用準備
Zeplinのセットアップは5分でできます。
たった5分で今後の作業効率が上がるなら利用しない手はないですね。さっそく準備してみましょう。
Zeplinアカウントを取得
まずはZeplinの公式サイトでアカウントを作成します。
Zeplinは、一番コンパクトな条件であれば無料で使用する事ができます。条件の詳細は料金プランのページから確認できます。
アカウント取得の最初のステップは、メールアドレスとパスワードの入力です。
サインアップが完了すると、確認メールが届きます。
メール内の[verify acount]で認証手続き完了になりますので、忘れずに。
ユーザー情報の入力
続いて諸情報を入れていきます。気楽にいきましょう。
まずはZeplin内で使用するユーザー名です。
Zeplinをチームで使う場合は、わかりやすいネーミングがいいですね。
職種と、メインで連携するアプリケーションを選択します。
これでZeplinの使用準備自体は整いました。
続いて、プロジェクトを新規作成します。
プロジェクトの作成
Zeplinでは、1つのアカウントで複数のプロジェクトを作成する事ができます。
（フリープランの場合は、作成できるプロジェクトは1つまで）
基本的には1案件につき1つのプロジェクトを使うことになるはずです。
プロジェクト作成は、画面内の［Create first project］から行います。
プロジェクトの形式を選びます。
新規プロジェクトが作成されました。
デフォルトではプロジェクト名は「Untitled」です。
画面右上の「Untitled」をクリックすると、プロジェクト名を変える事ができます。
デスクトップアプリ版のインストール
これで一連の作業は完了ですが、Zeplinにはブラウザ上で使えるWebアプリ版とデスクトップアプリ版があり、現在閲覧しているのはWebアプリ版です。
FigmaやSketch、Adobe XD、Photoshop等からZeplinへ画面の書き出し（エクスポート）を行うには、デスクトップアプリ版を使います。
デスクトップアプリ版は、画面内にある［Download desktop app］ボタンからダウンロード＆インストールして使う事ができます。もちろん無料です。
デスクトップアプリは公式のダウンロードページ経由でインストールすることも可能です。
ダウンロード＆インストール後、最初に設定したアカウントを入力します。
Webアプリ版と同じプロジェクトが表示されていれば完了です。
これでZeplinデスクトップアプリ版の使用準備が整いました！
Zeplinの活躍はここから
Zeplinはそれ単体では機能せず、FigmaやAdobe XD等で作成した画面をZeplinへ書き出す（エクスポートする）ことによって能力を発揮します。
Adobe XDからのエクスポート方法は「【Adobe XDからZeplinへ書き出し】連携できない場合はここをチェック」で紹介していますので、参考にしてみてください。
