Zeplinとは、デザイナーが作成したデザインをコーダーに共有できるアプリケーションです。
Photoshop、Adobe XD、Sketchなど様々なデザインツールに対応しており、各ツールからZeplinにデータを読み込ますことができます。
コーダーとデザイナーが分業してホームページ制作をしている所では、コーダーはデザイナーからPhotoshopやAdobe XDなどのデザインデータを受け取ってコーディングしていくと思います。
その時コーダーは、デザイナーからデザインの指示書がなかったり、口頭などで指示がもらえない場合はデザインデータからデザインのルールを把握し、コーディングを進めていきます。
もしデザイナーとコーダー間でデザインの認識が違うと、出来上がったページは元々のデザインと違う見た目になってしまいます。認識の違いが大きければ大きいほど見た目の違いも大きくなるでしょう
そういった問題を防ぐためには、デザイナーは丁寧にデザインルールの指示をする必要がありますし、コーダーはサイト全体のデザインのトンマナやコンポーネントごとのディティールの違いを知る必要があります。
ただし、デザイナーはデザインデータと別に指示書を作る時間はないことも多々ありますし、コーダーも個々人のスキルや経験によってデザインルールの理解度は変わってきます。
また、デザイナーとコーダーが初めて同じプロジェクトに参加するのか、以前から一緒に仕事をしていてお互いのスキルを知っているのかによっても作業の進めやすさや納品物の仕上がりも変わってくるでしょう。
コーディングする上でコーダーが知りたいことは、大きく２つあると思います。
１つは「デザインのメタ情報」と、もうひとつは「デザインや原稿など、コンテンツの変更内容やその履歴」です。
デザインのメタ情報とは、タイポならフォントの種類（Font-Family）や本文のフォントサイズ（Font-Size）や行間（Line-Height）ですし、色ならプライマリーカラー、アクセントカラー、ベースカラー、テキストカラーで使われている色コードなど、デザインを構成する要素と紐づいた数値や文字です。このメタ情報を整理し、把握できていないとデザイナーの指示と違うスタイルでコーディングしてしまうでしょう。
いわゆるスタイルガイドと言われるもの（先ほどは「デザインの指示書」と書きましたが）は、デザインの構成要素（ボタンや見出し、タイポなどのコンポーネント）を整理しまとめたドキュメントです。
デザインや原稿など、コンテンツの変更内容やその履歴ですが、制作の途中で必ずと言っていいほどデザインの修正が発生します。案件によっては何回も戻りが発生してしまいと思います。もしコーディングのフェーズまで進んでおり、デザインとコーディングが並行して作業されているなら、デザイナーやコーダーはどのページのどのコンテンツが変更されたのかを把握し、どこまで修正済であるかを共有できていないと、修正漏れや先祖返りのようなミスにつながります。
プログラミングであればGitのようなファイルのバージョン管理ツールがありますが、デザインにも変更の履歴や変更箇所に対するコメントなどがあるとチーム間での共有がスムーズになります。
私はコーディングがメインでデザイン制作にはあまり関わらないのでWebデザイナーの本音はわかりませんが、Webデザイナーはデザインデータと別にスタイルガイドのデータなど作らずに済むならその方が言いに決まっていると思います。むしろWeb制作ではスタイルガイドを作るのは珍しく、ほとんどはコーダーがデザインデータからスタイルガイドを自分で把握するようにするのが一般的じゃ無いかなと思います。（またはデザイナーが口頭で重要な部分を伝えたり）
デザインデータそのものを使ってスタイルガイドを作ることができるなら、わざわざスタイルガイドを作成していた時間を省けるし、変更があるたびにスタイルガイドも修正する手間も省けます。
また修正箇所の指示についても、デザインデータを修正し、チャットなどでコーダーに正確に伝わるように修正箇所を伝えるのも地味に大変だと思います。（ややこしい修正内容は結局口頭で伝えたりして、後々さらにややこしいことになったり‥。）
例えばAdobe XDでは、デザインデータをWebに公開し、Webページ上でコメントを残したりしてデザインと近い場所でやりとりをすることがきます。チャットは文字だけのやりとりでどうしても伝えにくい場面が出てくるし、デザイン業務と関係のないやりとりも混じるので、こうした機能を使うのはメリットがあると思います。
余談ですが、XDはこの他にもコンポーネントを管理できたり、ホームページのUXも１つのアプリケーションで完結できるようになっており、Web制作において優秀なツールだと思います。（何より軽い！）
上記のようなコミュニケーションの課題をZeplinで解決することができます。
Zeplinの特徴を紹介したいと思います。
Zeplinはデスクトップとブラウザ両方で利用できるので、OSの問題に左右されることなく利用できます。
Zeplinはメジャーなデザインツールであればすぐに連携することができます。デザインツールにインストールしたZeplinのプラグインを通してデザインをエクスポートするだけです。Zeplinにエクスポートされたデザインはすぐに反映されコーダーはZeplinを起動すると常に最新のデザインデータを確認できます。
Zeplinはデザインをコーダーに共有するためのツールだけあって、画面構成はコーディングをするのに必要な情報を表示するのに特化しています。
デザインデータのレイヤーごとにオブジェクトを選択でき、選択したオブジェクトのサイズや、フォントの情報が表示されます。
またCSSのプロパティも取得できたり、テキストオブジェクトであればテキストもコピーペーストできます。
Zeplin側で指定した画像やベクターアイコンをJPG、PNG、SVGなどの形式で書き出すことができます。もちろん２倍、３倍の書き出しにも対応しています。（Zeplinがアセットで書き出すレイヤーを認識できるように、デザインデータのレイヤー名を変更する必要があります。）
スタイルガイドの画面では「色、テキスト、余白、コンポーネント」を各項目ごとに一覧にして表示することができます。
色やフォント、余白はサイト内でいろいろなバリエーションがありますが、このスタイルガイドにまとめることでより正確に把握することができます。
Zeplinはプロジェクト単位でデータを保存し、１つのプロジェクトに複数のデザインデータを登録することができます。主に１サイトのデザインデータを１つのプロジェクトにまとめて管理します。
Adobe XDのようにZeplinでもデザイン上にコメントを残せる機能があります。コメントは解決済みにすることで表示を隠すこともでき、修正の確認がわかりやすくなります。
Zeplinに読み込み直したデザインデータは新しいバージョンとして登録され、Zeplin上で以前のバージョンに表示を戻すことも可能です。またバージョンはタイムラインで表示され、コメントも書けるので変更箇所をわかりやすく共有することができます。
これだけ素晴らしい機能をもったZeplinですが、無料で利用することもできます。無料と有料版の大きな違いは、作成できるプロジェクトが無料版の場合１つなのと、クローズして使わないプロジェクトをアーカイブすることができない点があります。ちなみに有料版は、サブスクリプションで月額または年額で利用できます。
ここ最近Zeplinを使い始めてみましたが、コーディングの効率がかなり上がったと思います。
特にCSSの作業が早くなったと思います。今まではPhotoshopなどのデザインデータ上で余白やフォントなどを確認していましたが、Zeplinはオブジェクトを選択するだけで欲しい情報がほぼ全て表示してくれるのでストレスが軽減されたと思います。
上記の機能のほかにも、たくさんの機能が標準で備わっているほかに、Sass形式のCSSプロパティを表示するなど拡張機能もあり、自分の使いやすいようにカスタマイズが可能です。
興味があれば是非一度無料版をインストールして使ってみましょう。
