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