Webサイト制作をしていく上で、エンジニアとデザイナーの連携は避けては通れない道だと思います。エンジニアがPhotoShopやSketchを使って余白や文字サイズを測るのでは、どうしても時間がかかってしまい、開発速度が遅くなってしまいます。そこで、連携するためのツールが各社から出ていますが、その中でもZeplinを今回ご紹介したいと思います。
Zeplinとは
PhotoshopやSketchで作成したデザインを確認できるサービスにです。
公式サイト：https://zeplin.io/
デザイナーがデザインを作成後にZeplinにアップロードすることで、エンジニアがZeplin上からデザインを確認することができるようになります。Zeplinで確認できることとして、各要素ごとの余白や、シャドウ、文字サイズといったcssを見ることができます。
また、画像のダウンロードや、デザイン上にコメントをつけることができます。そのため、エンジニアとデザイナーの連携をスムーズに進めることができます。
Zeplinを使うメリット
エンジニア・デザイナー双方にたくさんのメリットがあります。また、デザイナーとエンジニアの連携だけでなく、ディレクターとの連携にも使うことができます。
PhotoShopやSketchといったデザインツールの使い方を覚える必要がない
デザイナーによって、デザインを作るソフトが違い、それぞれの余白の測り方や画像のサウンロードの仕方が違い覚える必要が出てきますが、Zeplinを使うことでZeplinの使い方を覚えるだけでジソすすることができるようになります。
シャドウや角丸、余白、行間を正確に把握し、プロダクトに反映できる
シャドウや行間など、見落としがちかつ、デザインツールで確認していくのが手間がかかるようなものでもcssでの出力があるので、エンジニアでもすぐに把握することができます。また、cssの技量が少ないエンジニアでもcssを正確に組んでいくことができるようになります。
コメント機能を使うことで、デザイナーとエンジニアのコミュニケーションが正確に取れる
エンジニアが作ったプロダクトに対して、デザイナーからのFBがある場合、口頭だと修正箇所の齟齬が発生し、デザイナーが意図しない場所を修正してしまうことがあります。Zeplinではデザイン上にコメントを残すことができるようになっているので、認識の齟齬を無くし、コミュニケーションロスなく実装することができます。
ディレクタとデザイナーの連携
デザイナーがデザインを作ったあとすぐに実装に入るのではなく、ディレクタがまずは確認するフローが入ることは業務では多いかと思います。
そんな時でも、Zeplinを使うことでディレクタの方からFBを返すことができます。その場でディスカッションをすることができるので、ディレクタの意図をデザインに正確に反映することができます。そして、そのやり取りを実装するエンジニアも確認することができるというのは大きなメリットだと思います。
まとめ
今回はZeplinを使うメリットをご紹介しました！デザイン関連のコミュケーションは避けては通れないですが、そこで時間のロスが発生してしまうととても勿体無い時間になってしまいます。そこのコミュニケーションロスを無くしてスムーズに連携することで本来の業務の時間を最大限作ることができ、より良いプロダクトを作っていけると思います。
ぜひ、みなさんもZeplinを使ってみてはいかがでしょうか。
