Zeplin と Adobe XD はデザイナーとエンジニアを幸せにする！？
デザイナーの関川です。
デザインをしながら?釣りをするのが夢です。
先日とある案件を通して、Adobe XDでデザインをして社外のエンジニアさんにZeplin（フリープラン）で共有してみたら、連携が劇的にスムーズになったので、その時の感動と使用感についてまとめてみました。
目次
これまでのデザイン共有について
弊社では、デザイナーがPhotoshopでデザインデータを作成して、エンジニアはそのデザインデータ（psd）を確認しつつコーディングしていきます。要素間の距離や共通パーツについてなどは、レイヤーを分けて説明を記載します。それでも説明が足りない場合は、デザイン実装指示書としてドキュメントを用意する場合もあります。
デザインデータだけをドーン！とエンジニアさんに渡たして、口頭だけで概要を伝えるのはとてもラクチンですが、受け取る側のエンジニアと関係性ができていないと、デザイナーが意図したアウトプットにならず、デザインカンプに合わせた修正のやりとりだけが増えていきます。
これではデザイナーもエンジニアさんも出鼻からフラストレーションが溜まってしまいます。社外のエンジニアさんと連携する場合はなおさらですね。お互いに気持ちよく仕事できるのが一番なので、できるだけデザイン共有は丁寧におこないたいものです。
デザイナー的にはこの作業が結構大変で、用意するのに1人日くらい工数がかかります。
なんとか丁寧かつ効率的にエンジニアさんにデザイン共有できるフローやツールはないものか。
そんな時に出会ったZeplinとAdobe XD
Adobe XDは、Photoshopでデザインした画像を貼り付けてプロトタイピング用として使ったことはあったのですが、Zeplinについては「このツールを利用するとチーム連携が高まり作業効率が上がるらしい」くらいの認識で使ったことはありませんでした。もしかしたら制作フローの改善になるかも！？と思い、実際の案件で試用してみることにしました。ついでにAdobe XDでデザインしたこともなかったので、どんなもんかも合わせて試してみることに。
? Zeplinってなに?
Adobe XD, Sketch, Photoshop CC, Figmaで作成したデザインリソースから、テキストや画像などの情報を抽出できたり、スタイルガイドなどを簡単に作成し、共有できるツール（1プロジェクトまで無料）です。
Zeplin.ioのaboutページを覗いてみると、メンバーたちが楽しんで開発したツールであることがわかります。
[ Zeplinの素敵なところ ]
1.デザインツールから直接デザインをアップロードできる
プラグインを入れることで、Adobe XDやPhotoshopから直接デザインデータをZeplinにアップロードすることができます。容量の重いデザインデータを直接エンジニアさんに渡して怒られることが無くなります。
2.簡単にスタイルガイドを作成できる
デザインに使われているテキストスタイルやカラーコードを自動的に抜き出して並べてくれて、簡単にスタイルガイドがつくれちゃいます。チームメンバーが増えるごとに意思疎通が難しくなるので、最新のデザインデータの共有とスタイルガイドの共有が簡単にZeplinに集約できるのはとても良いです。
3.必要な画像を簡単にダウンロードできる
デザインデータをアップロードする前に、あらかじめAdobe XD上で設定しておけば、他のメンバーがZeplin上から画像（png,svg）データをダウンロードすることができます。
4.要素間の距離や文言などのテキストデータの抽出が簡単
カーソルを合わせるだけで要素間の距離が表示され、デザインに使用されているテキストエリアを選択すると文言もワンクリックでコピーができます。
単純作業（文言のコピペ、画像書き出し、要素間測定）が簡略化できるのでエンジニアさんはコーディングにこれまで以上に集中できるようになります。
5.デザインデータにコメントをつけられる
デザインに直接コメントを書き込むことができます。
コメントが書き込まれると、アップロードしたデザイナーに直接通知がいきます。返信もできるので、デザイナーとエンジニアさん間の変更管理であれば他のツールはいらないかも？
6.デザイン変更の通知をSlackに送ることもできるらしい
ZeplinはSlackとも連携させることができるようです。
前もって設定しておけば、データがアップロードされたり変更されたりしたときにSlackに自動通知されるので、エンジニアさんにもすぐに伝えることができます。
[ Zeplinのちょっと残念なところ ]
1.無料で使えるのは1プロジェクトまで
1アカウントに付き1プロジェクトまでしか無料で作成できません。お試しで使う分には問題ないのですが、実際の業務に導入するには1アカウント=1プロジェクトだと少し取り回しが悪いです。より効率的に使うために、複数プロジェクトが作成できる有料プランと契約するのをおすすめします。
2.hoverアクションが表現できない
Adobe XDもこの点は同様ですが、ツール上でhoverが表現できません。解決策としては下記のキャプチャのようにAdobe XD上でページデザインとは別にアートボードを作成して、Linkリストとして用意したものをZeplinにアップロードするのが良いかと思います。いつかツールメニュー内で:hoverを設定できるようにしてほしい。
? Adobe XDってなに?
皆さんご存知、Adobe XD。UIデザイン機能とプロトタイピングツールが合体したソフトです。無料プランで使用できるので非デザイナーでもワイヤーや企画書などのドキュメント作成ソフトとしても利用できます。
※アドビ公式から2018年中にオープンプラットフォーム化すると、発表もされました。
[ Adobe XDの素敵なところ ]
1.UIデザインとプロトタイピングがひとつのツールで完結する
これまではデザインツールとプロトタイピングツールを個別に利用して、修正などがあるたびに書き出した画像をプロトタイピングツールに張り替えていましたが、その作業がひとつのツールの中で完結します。Adobe XD最大の特徴です。
2.直感的に操作しやすい
他のAdobe製品を使ったことがない人でも直感的に理解できるUIになっています。
3.立ち上がりが早くて軽い
フリーズ知らずのサックサクです。ノートPC主体のディレクターやプロデューサーでもストレスなく使えます。
4.ユーザーの声に応える、まめなアップデート
Adobe XDは、リリース時からユーザーの声に応えたアップデートをまめに繰り返しています。現在、psdファイルをそのまま読み込むための機能を開発中らしいです。
ちなみに、現在Adobe社では「#できるぞAdobeXD」と第してTwitterキャンペーンを開催中だそうです。
[ Adobe XDのちょっと残念なところ ]
1.グラフィカルなデザインには不向き
Adobe XDでは画像のレタッチや切り抜きなどの画像補正は基本的にできません。画像の書き出しが複雑なビジュアルやレイアウトのデザインには不向きです。あくまでUIデザインツールなので。
解決策としてページごとにimgフォルダのようなものを用意して、psdと切り出した画像を格納して管理している方もいたりします。案件によって作業効率の良いやり方を今後も探って行かなければならないですね。
2.やっぱりhoverアクションが設定できない
心底ツールメニュー内で:hoverを設定できるようにしてほしい。
? ZeplinとAdobe XDを組み合わせたらどうなった？
やっと本題です。ZeplinとAdobe XDを組み合わせて使ってみたら、制作フローの各シーンで感動があったので紹介します。
1.UIデザインのクライアント打ち合わせ
使用ツール：Adobe XD
UIデザインの打ち合わせの時に、Adobe XDのプロトタイプをクライアントに共有し、お互いのスマホで確認しながら会話をしてみました。
▽打ち合わせ時の会話の一例
クライアント「このボタンは上に持ってきた方がいいと思うのですがどうですか？」
僕「そのボタンを上げてしまうと、1画面のタッチポイントが多くなるので、現状のUIがいいと思います。ちょっとやってみましょうか？」
クライアントト「え？」
僕「（XDで修正中）。。。修正してみたので、共有したAdobeXDのURLを更新してもらってもいいですか？」
クライアント「。。。あっ！ 確認しました。確かに1画面の情報量が多すぎてみづらいですね。」
僕「では現状のUIでいきましょう！」
✨ 感動POINT
Adobe XDでデザインしたことで、[UIの修正]→[プロトタイプに反映]までをひとつのツール内でスムーズにできるので
打ち合わせ中に出た疑問点や修正点をその場ですぐさま解消していくことが容易でした。
クライアントの方々もその場で修正が確認できるので、打ち合わせ後に改めて行う修正事項のとりまとめ作業が軽減できて、クライアントサイドの工数も減らせたんじゃないかなと思います。
2.社外のエンジニアさん用にデザイン共有の準備
使用ツール：Adobe XD, Zeplin
Adobe XDでデザインしたものを、少し調整してZeplineにアップロードします。
▽共有準備のフロー
※下記フローはZeplinのアプリ版をインストールしていることを前提としたものです。
- 【Adobe XD】ダウンロード可能な画像やSVGを設定。
- 【Adobe XD】該当アートボードを選択し、メニューの[ファイル]→[書き出し]→「Zeplin」を選択。
- 【Zeplin】Zeplinが起動し、アップロードするプロジェクト選択の画面になるので、選択して[import]ボタンをクリック。
- 【Zeplin】用途に合わせてStyleguideのカラー名などを調整する。
✨ 感動POINT
これまで1〜2日間かかっていた作業が、約10〜30分で完了しました。
3.エンジニアさんにデザイン共有
使用ツール：Adobe XD, Zeplin, redmine, chatwork
▽デザイン共有のフロー
※下記フローはZeplinのアプリ版をインストールしていることを前提としたものです。
- Zeplinの該当プロジェクトに社外のエンジニアさんを招待する。
- Adobe XDのプロトタイプとカンプデータと補足や注意事項をRedmineで共有する。
- デザイン共有後のやり取りは、基本Chatworkで。
✨感動POINT✨
Adobe XDがとにかく軽い！修正があった場合でもサクッと対応できて、Zeplinを通して簡単にエンジニアさんに修正共有ができるのでラクチン！Zeplinに共有したデザインステータス（カラー数値、要素間数値 など）が正確なので、プロトタイプとコーディングアップされたものに、ほぼ差異がありませんでした。（実装者の腕にもよりますが）
遷移イメージや操作感については、あらかじめクライアントにプロトタイプで確認してもらっていたので、コーディングアップ後の修正がこれまでより軽微なものになりました。
社外のエンジニアさんからもZeplin連携について、コメントをいただいたので紹介します！
▽社外エンジニアさんからいただいたコメント
- 文言のコピーがクリックで済むのでとてもラクでした。
- （形式は決まっているが）画像倍数書き出しが非常に便利でした。
- 書き出したSVGも結構綺麗なので、手動圧縮も容易でした。
（ただし、決まった要素しか書き出せないので込み入った画像のスライスには適さない） - 要素間ルーラーの精度が高く、XDで測ることががほぼなかったです。
（ただし、決まった要素しか測ることができないので、他ツールとの併用は必須） - 今回StyleGuideは使用しませんでしたが、コンポーネント機能など便利そう。
（コーダー的には楽なのですが、デザイナーさんへの負担が多い気がします） - コメント機能も使用しませんでしたが、変更管理はコメントだけでも良いと思いました。
- ベクター要素メインのサイトほど、Zeplinは威力を発揮すると思います。画像の書き出しが複雑なwebサイトにはあまりマッチしないかと。
- Zeplinで効率化できる部分だけであれば、導入も撤去もしやすい。今後、個人的にどんどん導入したい！！
? まとめ
ZeplinとAdobe XDを組み合わせたことでスムーズな制作進行ができて、デザイナーもエンジニアも、そしてクライアントも幸せになることができました！
案件によっては、今回の組み合わせが合わないこともあると思いますが、ZeplinとAdobe XDの部分的な機能を利用するだけでも、かなり作業効率は上がると思います。
それではみなさんまた次回！
以上、現場からでした。
※本記事の情報は2018年9月現在のものです。
