作成したデザインデータ、作成されたデザインデータを共有できるZeplin。
デザイナー、コーダー間でデータを共有できるので、効率的にWEB制作を行えます。
コメント機能がついているため、細かい動作の指示や質問などのやり取りが無駄なく出来ます。
Zeplinの機能を紹介している動画がこちら。
英語ですが画面を見るだけでも、どんな機能があるかがわかりますよ。
動画を見てみると、便利な機能がありましたよねー！
簡単にまとめてみると下記のような感じです。
- 無料で利用可
- デザインデータを複数人で共有
- コメント機能がついている
- データ内の文章がコピペ出来る
- CSSがZeplin上で表示
- カラーパレットで使用されている色がわかる
- 画像データのダウンロードが出来る
この記事では、Zeplinを使うために必要なアカウントの作成の方法をお伝えしています。
制作を効率化するためにも入れておくと便利ですよ！
Zeplinのアカウント作成方法
公式ページへ
Zeplinのアカウントを作成するには、下記のURLをクリックします。
https://zeplin.io/
すると下記のページに飛びます。
（すべて英語ですが怪しいサイトではありません！）
『Get started for free』をクリックして次に進みます。
アカウント作成の入力画面
作成に必要な情報は３つだけ。
- メールアドレス
- ユーザー名
- パスワード
英語だとこのような画面です。
日本語に翻訳するとこのような画面。
ユーザー名とパスワードに、使用できる文字と文字数の制限があります。
ユーザー名は全員見ることができるので、見られてもいい名前にしましょう。
パスワードは８文字以上でないとアカウントが作成できません。
ユーザー名について
すでに使用されているユーザー名を入力すると、このような画面になります。
そのような場合は、使われていない名前に変更しましょう。
必要項目を入力して次へ
３つの項目を入力したら『Sign up for free』をクリック。
メールアドレスの確認
『Sign up for free』をクリックすると入力したメールアドレスにメールが届きます。
それがこの画面。
日本語翻訳するとこのような内容が書いてあります。
アプリダウンロード確認画面
メールにあるリンクをクリックすると、アプリのダウンロード画面へ進みます。
（こちらは英語版）
こちらは日本語翻訳版。
ダウンロードしないでWEB上で使うことも可能ですが、デザインをアップロードする場合はアプリが必要になります。
Zeplinのダウンロード
ここでは、WindowsPCへのダウンロードをします。
ダウンロードボタンをクリックすると、即座に始まります。
Zeplinアプリの起動
ダウンロードが終わるとアプリが起動します。
必要な情報を入力してログインしましょう！
プラグインのインストール
ログイン画面の前に、プラグインのインストールをするかどうかを聞かれることがあります。
Photoshopでデザインをアップロードする場合に必要なので、使用する予定ならインストールしておくと良いでしょう。
アカウントの作成・アプリのダウンロードの完了
アプリにログインするとプロジェクトを追加したり、プロジェクトの内容を見ることができるようになります。
アプリのダウンロードが完了すると、デスクトップにZeplinのアイコンが追加されます。
アプリをダウンロードしなかった場合
アプリをダウンロードしなくても、WEB上でZeplinを使用することができます。
それが、この画面。
（日本語翻訳版）
デザインをアップロードしたい場合は、アプリが必要になります。
まとめ
デザインデータを気軽に共有できるZeplin。
WEB制作を行う場合は、入れておきたいアプリです。
主な便利機能は下記の通り。
- 無料で利用可
- デザインデータを複数人で共有
- コメント機能がついている
- データ内の文章がコピペ出来る
- CSSがZeplin上で表示
- カラーパレットで使用されている色がわかる
- 画像データのダウンロードが出来る
これだけ便利なZeplinですが、実はデメリットも存在します。
あえて上げるとすれば、無料の場合『プロジェクトが１つまで』ということ。
複数の案件を掛け持ちする場合は、有料にするか別のアプリを使うのがよさそうです。
とはいえ、入れておいて損はありません。
Zeplinの使い方や、デザインソフトについてはこちらの記事でまとめています。
