web制作チームの業務効率に「Zeplin」を全力で推したい話

web制作業務で、「職種間のファイル共有」に困ったこと、ありませんか?。

例えば・・

デザイナー「PSDからjpgに書き出してディレクターへ送信」
ディレクター「jpgに書き込んで返信」
デザイナー「jpgを見ながら、PSDを修正」

なんて、やりとり。
よくある光景ですが、正直メンドクサイ。


そんな悩みを解決するツールが「Zeplin」です!

https://zeplin.io/

ディレクター・エンジニア目線から見た、Zeplinの推しポイント

推しポイントは、photoshopがない環境でも

  • 要素間のマージンを調べられる
  • CSSのコードをコピペできる
  • 文字テキストをコピペできる
  • カラーコードも取得できる

という点!

要素間のマージンを調べられる

f:id:daisuke-kuwabara:20180703154622p:plain

CSSのコードをコピペできる

f:id:daisuke-kuwabara:20180703154634p:plain

文字テキストをコピペできる

f:id:daisuke-kuwabara:20180703154646p:plain

カラーコードも取得できる

f:id:daisuke-kuwabara:20180703154705p:plain

どうでしょうか? コーディング実装するときに知りたい・調べたい・コピペできると嬉しい機能は、網羅していますよね!

また、デザイン決定前のディレクターチェックにも使えます。 ファイル上にコメントはつけられるので、サーバーにいちいちアップする。 なんていう手間を無くすことができます。

修正のやりとりなどをファイル内だけで完結できるのは、デザイナーさんにとっても嬉しい機能じゃないでしょうか。
修正依頼がメール・チャットアプリ・タスク管理ツールに散らばると大変ですからね・・。

Zeplin の料金は?

1プロジェクトなら、無料で使えます。
よほど大きなプロジェクトじゃない限り、無料プランでも十分使えるでしょう

まとめ

ディレクター・エンジニアとデザイナー間のコミュニケーションツールとしては、最高のツールだと思います。 ぜひ、あなたのチームでも使ってみてください!

ではでは。