デザインスペックとZeplin連携はここが便利: Adobe XDで開発者との連携がずっと楽になるヒント1

エンジニアに実装を依頼したアプリやWebサイトが、デザインデータと違う！という経験をデザイナーの方なら一度は経験あるのでは無いでしょうか？

エンジニアとデザイナーのコミュニケーションロス

一昔前のWeb制作の現場であれば、デザイナーはPhotoshopでデザインカンプを作り、マークアップエンジニアは直接PSDファイルを開いて、フォント、サイズ、カラー、マージンなどのデザイン情報を調べ、コーディングすることがごく一般的でした。その際、デザイナーからの指示書が無くても、エンジニアがデザイナーの意図を読み取ってコーディングしてくれるほど阿吽の呼吸がとれているチームであれば良いのですが、なかなかそうもいきません。

その結果、実装に必要以上の工数がかかったり、手戻りが起きたりと、作業の非効率化が発生していました。その為、今ではWebデザインやアプリUIデザインの現場では、デザイナーがデザインガイドや指示書を何らかの形で作成することが多くなってきています。

デザイン指示書とは、デザイン情報（フォントやサイズなど）を、デザインの上に矢印や赤文字で書き込んだ書類です。グリッドのカラム数、ボタンの遷移先やインタラクションの情報なども書き込んむことがあります。一方で、エンジニアに渡すデザインファイルの、レイヤー構造やレイヤー名の整理などもあり、丁寧に行うと、とても労力がかかる作業です。

指示書の作成で、全体としてはプロジェクトの工数が減るとしても、大変で退屈な指示書作成にウンザリしているデザイナーは多いと思います。実際、デザイナーはクリエイティブな作業にその時間を使うべきです。もし、デザイン指示書作成を自動生成するツールがあれば、デザイナーはクリエイティブに専念でき、エンジニアにデザインデータをよりスピーディに渡すことが可能になります。面倒な作業から開放され、プロジェクトをより短期間で実行できるのです。

実は、Adobe XDには、デザイン指示書を自動生成する機能が搭載されています。それが「デザインスペック」です。まだベータ版という位置づけですが、Web上で共有可能なデザイン指示書（デザインスペック）が簡単なクリック操作で作成できます。デザイナーはURLをエンジニアに知らせるだけで、生成されたデザイン指示書を共有できます。

また、Adobe XDは、サードパーティのサービスであるZeplinにも対応しています。Zeplinは有料ではありますが、細かくカスタマイズが出来て、かゆいところにまで手が届いたデザイン指示書を作成できます。

そこで、この記事では、XDの機能であるデザインスペックとサードパーティのサービスZeplinの具体的な利点、それと、それぞれの特徴を紹介します。

Adobe XDのデザインスペック

Adobe XDのデザインスペックの一番の特徴はその手軽さです。
XDでデザインし、共有機能から公開リンクを作成すれば、デザイン指示書があっという間に自動生成されます。
エンジニアは、シェアされたURLをブラウザーで開けば、指示書をWeb上から観覧可能で、フォントやサイズ、カラー、マージンなどの情報を簡単に抽出できます。
わざわざXDファイルを開かなくても、Webから簡単にデザイン情報を抽出できるところが良いですね。

デザインスペックの使い方は簡単。「デザインスペックを公開」ボタンからパネルを開き、簡単な情報を入力するだけです（参考：開発者用のデザインスペックを公開する）。公開リンクを作成するとXDのデータがアップロードされ、閲覧用のURLが生成されます。

デザインスペックを使うメリット

デザインスペックを使うと、デザイン指示書が自動生成されます。これにより、デザイナーはデザインガイドラインを作成する作業が省略でき、エンジニアはブラウザを開くだけでデザイン情報を抽出できます。デザインスペックには、具体的に下記のような機能があります。

1. カラー情報の取得

取得したい色のエレメントにマウスカーソルを乗せると画面右のアピアランスにカラーや不透明度が表示されます。色はHex（16進数）、RGBA、HSLA（色相・彩度・明度・透明度）に表示を切り替えることもできます。

2. 文字スタイル情報の取得

取得したい文字にマウスカーソルを乗せると画面右のスタイルにフォント、ウェイト、サイズ、整列、カーニング、行送りが表示されます。ただし、エンジニアの環境にないフォントは正しく表示されません。

3. 要素のレイアウト情報の取得

画面上のエレメントをカーソルでマウスオーバーするかクリックすることで、高さや幅、座標、マージンを計測できます。Android、iOS用に単位の切り替えが可能です。 （px、dp、ptなど）

4. 「UX フロー」ビューで画面間の遷移の確認

「UX フロー」ビューで、全てのページデザインを表示し、XDのプロトタイピングモードで作成したそれぞれ画面間の遷移が矢印で確認できます。

5. 常に最新の状態に保てる

デザイナーはデザインスペックを更新すれば、エンジニアはシェアされた1つのURLで常に最新のデザインを確認することができます。更新されるたびに資料が増えるといったことはありません。

サードパーティのデザインファイル共有ツール「Zeplin」

Adobe XDはサードパーティが提供するワークフローとも連携できるようになりました。その1つがZeplinです。Zeplinは、デザインを共有するツールで、デスクトップアプリ、もしくはWeb上でデザイン情報を抽出する事ができます。
2014年から続いているサービスで、2プロジェクト以上は有料になります。段階的に機能が追加され、現時点ではデザインスペックには無い機能が利用できます。特定のワークフローに縛られないのは、Adobe XDのメリットのひとつです。

Adobe XDとZeplinの連携方法

まずは事前準備です。Zeplinのサイトでアカウントを作成しましょう。機能制限がありますが、1プロジェクトなら無料で使用できます。

次に、Zeplinのデスクトップアプリをインストールしましょう。MacとWindowsそれぞれにアプリが用意されています。

インストールしたらアプリを実行し、Zeplinのプロジェクトを作成します。Android、iOS、Webの3つが用意されているので、作成する対象を選び、プロジェクト名を付けたら準備は完了です。

次にXD側の手順です。Zeplinにインポートしたいアートボードを選択したら、「ファイル」メニューの下の「書き出し」からZeplinを選択します。

表示されるダイアログボックスで、インポート先のプロジェクトを選び、デザインした画面の画像密度を選択すればインポートが開始されます。

これでアートボードがZeplinに読み込まれます。上のダイアログで「Replace screens with the same name（同じ名前の画面に置き換える）」が選択されていると、Zeplinでは、既存の画面の新しいバージョンとして追加され、これまでに書いた注釈も失われません。

最後にシェア用のURLをコピーし、エンジニアに渡せばば完了です。

なお、デザインをシェアしたい相手はあらかじめプロジェクトに招待しておく必要があります。

Slackなどのチャットアプリと連動すれば、デザイン更新のタイミングで通知が飛ぶので、非常に便利です。ほかにもデザインの観覧やデザイン情報の抽出が無料アカウントで制限なく利用できるのはにうれしいポイントです。

Zeplinを使うメリット

Zeplinには、まだXDのデザインスペックには無い機能があります。
その中でも特に便利な機能を3つご紹介します。

1. デザイン変更履歴

デザインを更新すると過去のデザインの履歴が残っていきます。過去のデザイン画面と併せてメッセージを残すことができるので、どこが変更されたのかが、ひと目で分かります。

2. 画像書き出し

XD側で書き出しが必要なオブジェクトにバッチ書き出し設定をすると、Zeplin上で画像の書き出しが出来るようになります。例えばAndroidの場合は、mdpi, hdpi, xhdpi, xxhdpi, xxxhdpiと画像密度別で複数サイズの画像を書き出せます。

※ UserVoiceによると、この機能はデザインスペックでも現在開発中です。

3. デザインスペック上へのコメント

Zeplinは画面上にコメントを残すことができます。デザイナーが補足のコメントを付けるために使ったり、エンジニアが不明点を質問としてデザイナーに残す事ができ、チャット形式で簡単なやりとりも出来ます。

細かく何気ない機能ではありますが、Zeplinだけで指示書や連絡が完結させることが出来るので非常に効率的で、円滑にコミュニケーションが出来ます。

※ UserVoiceによると、この機能もデザインスペックに実装中となっています。

その他にも、Zeplinには下記のような機能があります。

Zeplinを使うと、エンジニアは自分で画像を書き出したり、コメントで質問ができます。今までエンジニアは、都度デザイナーにお願いしたり、質問したりする事に気を使っていたそうなのですが、そんな彼らにとっても嬉しい機能と言えそうです。

デザイン仕様書の自動作成でハッピーに

デザイスペックやZeplinを使うと、デザイナーが今まで作っていたデザイン指示書の作成作業を大幅に軽減できます。また、エンジニアもデザインデータを開いてデザイン情報を調べる手間がなくなります。更に、最新の仕様の共有を瞬時に行えるため、実装とデザインのずれが原因で発生する手戻りに悩まされることも少なくなりました。

デザイン仕様書は面倒だからと様子見している方、手作業で作っている方は、まずXDのデザインスペックを試してみてください。XDの共有ボタンをクリックするだけですぐに始められるので、操作が簡単で導入に時間もかかりません。また、既にZeplinを使ったワークフローが確立している環境では、XDを簡単にワークフローに組み込むことができます。

デザイン仕様書の自動書き出しを使えば、今まで資料作成にかかっていた時間をもっとクリエイティブな時間にあて、より良いプロダクト作成に注力できるようになり、デザイナーはもちろんエンジニアもユーザーもとてもハッピーですね。是非みなさんもXDのデザインスペックやZeplinを使ってみて下さい。