私はデザイナー兼フロントエンジニアです。
ZeplinとSlackを使って、ディレクターの方とのデザインに関するやりとりのスピードがとても上がったので、
どのようにやり取りをしているか紹介したいと思います。
Zeplinとは
Sketch3やPhotoshopのアートボードから、レイアウト指示書を作成してデザインを確認できるツールです。
公式サイト
https://zeplin.io/
Sketch3やPhotoshopから、プラグインでZeplinにデザインをアップロードして利用できます。
アップロードすると、Zeplinでは次のような画面にSketch3やPhotoshopのデザイン(アートボード)が表示されます。
オブジェクト間の距離やCSSなどが表示されます。テキストをコピペすることもできます。
公式サイトで
''Zeplin is the ultimate collaboration tool between designers and developers''
（Zeplinはデザイナーと開発者の間の究極のコラボレーションツールです）
と書いてあり、デザイナーとエンジニア間のツールとして開発されている感じがありますが、導入してみるとディレクターの方とのコミュニケーションでも、とても恩恵がありました。
- 修正依頼書を作るなどのディレクターの作業を大きく削減できた
- デザイナーがディレクターに確認依頼するときに、jpgやpngを出力してどこかにアップという工数を省けた
- 依頼内容がZeplinからSlackに飛んでくるので、すぐに内容と該当箇所を把握することができるようになった
などです。
今回はデザインの修正対応という場面を例にして、ディレクターとデザイナーがZeplinとslackをどのように使ってやり取りをするのかをご紹介します。
導入するもの
- Zeplin
- Slack
- Sketch3もしくはPhotoshop（ディレクターは必須ではありません）
本記事で行った検証環境
- macOS Sierra ver 10.12.2
- Zeplin Version 1.15.2
- Slack Version 2.5.1
- Sketch3 Version 42
- Photoshop CC（2017）
Zeplinのコメント機能
プロジェクトに関わるメンバーをZeplinに招待して、メンバーがZeplinを利用できる状態にします。
招待メンバーはデザインの好きな場所に、コメントを打つことができます。
このコメント機能を使って、ディレクターが修正依頼を行います。
好きな場所にワンクリックで打てる手軽さがとても良いです。
（以降、私がディレクターとデザイナーを1人2役でやり取りを行っていきます）
コメントはチャット形式で、デザイナーから了解した旨や質問などの返信を打つことができます。
ZeplinとSlackを連携させる
ZeplinにはSlackと連携させる機能があります。
連携させると、コメントをSlackに流すことができます。
ZeplinはアプリとWebのどちらかで起動させることができるのですが、
Slackとの連携を設定するのはWebからでないとできないようです。
Slackへ流れるメッセージには、Zeplinへのリンクが貼られており、すぐにZeplinを起動してデザインとコメントの該当箇所まで遷移できます。
Zeplinで依頼内容を確認後、デザインを修正して、Zeplinにアップロードします。
アップロード作業はとてもシンプルです。
Sketch3だとショートカットキーでアップロード画面を呼び出せます。
Zeplinのアップロード先であるプロジェクトを選択してimportをクリックします。
アップロードするとZeplinで表示されるデザインが上書きされます。
Photoshopだとパネルで常に表示されています。
アップロード後に修正対応したことを通知するコメントを打ちます。
コメントを打つ直前にZeplin上でもデザインが表示されているため、依頼内容に対してデザインの修正漏れがないか確認して依頼漏れを防ぐ効果があります。
コメントには色がつけられます。
Slackに流れるメッセージにコメントの色が反映されます。
私の所属しているチームでは色のルールを下記としています。
黄色 : 未対応（ディレクターからデザイナーに依頼中のもの）
赤色 : 対応済み/確認依頼中（対応後にデザイナーからディレクターに確認を依頼しているもの）
緑色 : 確認済み（ディレクターが依頼内容を確認してタスクを完了させたもの）
Slackにメッセージが流れてきた直後から、未対応タスクなのか、確認依頼のタスクなのか一目で分かります。
以上が、私が行っているZeplinとSlackを利用したやり取りの流れです。
補足
リンク
Linkという項目にそのデザインのURLが発行されています。
そのリンクを使うとZeplinの該当ページまで遷移することができます。
URLをシステム仕様書に貼り付けたり、Zeplinとは別でやり取りするときに使ったり、と使い道は様々です。（デザインを閲覧するにはZeplinのメンバーであることが必要です）
コメント(修正依頼)を確認していく
コメントを検索する機能が欲しいところですが、現状、それは無いようです。
少し面倒ですが、画面右上の表示をコメントに切り替えてからキーボードの右キー、左キーでデザインを順番に切り替えていくと登録されているコメントの確認が早いです。
履歴を見る
「削除お願いします！」というように、何を削除するのか言葉で明示されていない(コメントを打った場所でどこを削除したいのか分かる)依頼に対してデザインを修正してアップロードすると、デザインは削除後のものに上書きされるので、ディレクターが確認するときに何を削除依頼したのだっけ？となることがあります。
Zeplinは過去にアップロードされたデザインを見ることができるので、そちらで確認できます。
おまけ
Command + 0 でデザインを半透明にさせたものを出力させ、ブラウザに被せて、マークアップで組んだものとデザインが合っているか確認することができます。
まとめ
いかがだったでしょうか？
私はデザイナー/フロントエンドエンジニアですが、Zeplinを導入してからディレクターの方々とのやり取りがすごく楽になり、タスクを消化するスピードがすごく上がりました。
ディレクターの方が修正依頼を画像で送りたい、というときに、Zeplinのコメントには画像を添付できる機能がないので、そこをどうするか、という課題があったり、バックログなどタスク管理ツールで管理したほうが良い場面もあったり、全てを解決するわけではないですが、利用できる場面は多く、十分に恩恵を感じています。
ZeplinはSketch3との連携で有名ですが、
Photoshopとの連携の仕方も公式ページで記載されています。
https://zeplin.io/support.html
https://support.zeplin.io/photoshop-integration
修正依頼の他にも、新人デザイナーのデザインをベテランがレビューする、など使い道は色々考えられそうです。
Zeplinをデザイナーとエンジニア間だけでなく、ディレクターや他のデザイナーとやり取りするコミュニケーションツールとして
活用することを視野に入れるのはいかがでしょうか。