【使ってみた】Zeplin
こんにちは。
トリアナではサイト制作時、デザイナーがデザイン、そのデザインを元にコーダーがコーディングという流れで進めることが多いです。
少し前、Photoshopで作ったデザインデータをインターン奥田くんへ渡した時に「マージンとかサクッと調べる方法ありますか？」と聞かれて、「ない。」って言ってしまったのですが、「Zeplinていうのがあるよ。」という噂を聞いたので導入してみたらサクッと調べる事ができました。ごめんよ。
目次
Zeplinとは
デザイナーが制作したデザインデータ（Photoshop／sketch／XD）を、チームメンバーに共有することができるとても便利なツール！
「Connected space for product teams」
https://zeplin.io/
ざっくり導入の流れ
※Photoshopでデザインの場合
① 下記からアカウント作成してアプリをダウンロード（Googleアカウントでも○）
https://app.zeplin.io/signup
② アプリをダウンロードしたらZeplinを立ち上げてログイン
③ ZeplinをPhotoshopにインストール
Zeplinメニュー／Photoshop Integration／install Plugin Automaticallyを選択。
④ Zeplinでプロジェクトを作成
Web／iOS／Androidを選んで「Create」、プロジェクト名をつける。
※無料版で作れるのは1プロジェクトまで。
⑤ PhotoshopからZeplinへデザインデータをアップロード
Photoshop開く→ウィンドウ／エクステンション／Zeplin→Zeplinパネルを表示。
レイヤーを選択→Zeplinパネルでプロジェクトを選択→「import」
※アートボードになっていない場合はアートボードに変更を。
⑥ プロジェクトにメンバーを招待してURLを共有する！
私は右も左もわからずだったので、下記サイト参考にさせていただきました。
キャプチャ付きでとてもわかりやすい…！ありがとうございます。
使ってみた感想
スタイルやテキスト情報を取得できるので色々まとめる時間を軽減できる
デザイナー→コーダーに依頼する時、デザイン上でレイヤーを分けてここのマージンは〜とか記入しておくか、別に指示書をまとめたりするべきなのですが、あれって結構あれですよね。
そのへんZeplinで勝手に出してくれるので、諸々まとめる時間短縮になる！はず。
コーダーも毎度重たいデザインデータを開いてデザイン情報を調べる時間が省けると思います。
テキストもコピーできるし、画像の書き出しもできるらしい。
コメント付けれてSlackと連携できるの便利
デザインについて伝えたいことがあったり、変更が入る度に該当箇所のキャプチャ取ってテキストまとめて…って結構手間だし大変です。
Zeplinは直接デザイン上にメモを書き込めるからまとめるのも簡単だし、見る方もわかりやすい。
あとチームメンバー全員が見れるので、コーダーだけじゃなくディレクターとのやり取りにも使えます。
（Slack連携はやってないけど、できるらしいのでやってみたい。）
常に最新＆更新履歴がわかるところが良い
デザイン確定したはずのに、後から度々変更が入ることがあったりなかったり。
伝達ミスで古いデザインデータでコーディングを進めていた…なんてことになったら大変。空気がピリついてしまいます。
Zeplinを使えばデザインに変更が入ったらそのままアップで最新に置き換えれるし、履歴にコメントも残せてとても助かる。
全体的になんだか可愛い
仕事で使うものが可愛かったり遊びゴコロあるものだと嬉しくないですか？そんなことない？
この右下のサルなんだろって思ったら、ここでコメント表示／非表示の切り替えができるみたいで、コメント非表示の時はサル目隠ししている！可愛い。
まとめ
私は今回デザインをコーダーに渡すという立場だったので、デザイナー目線の感想なのですが、奥田くんにZeplinどうだった？て聞いてみたら
て言ってたので、コーダー的にもきっと良いはず。
※いろんな色に光るキーボードを使う奥田くんイメージ
XDでも同じようにコメントつけたりスタイル確認したりできるみたいなんですが、どうなんですかね？
時と場合によって使い分けるのが良いのですかね？？誰か教えて。
もっと色々使いこなせるように頑張ります。
関連記事
記事を書いた人
好きな漫画はドラえもんです。よろしくお願いします。
好きな漫画はドラえもんです。よろしくお願いします。