デザインカンプからコード化を加速する！デザイン仕様計測ツール４選

この数年でHTML/CSS/JavaScriptコーディングの効率化を図る便利なツールが増えてきました。CSSプリプロセッサ、Emmetやタスクランナー、各種IDE、ブラウザ開発ツールやプラグインなど。今回は、デザインカンプからオブジェクトの情報やマージンを抽出、アセットの書き出しなどコーディングする際に便利なツールを比較してみたいと思います。コーディングを進める上では、カラーコードやオブジェクトの幅や高さ、マージンなどの情報を抽出して反映することが不可欠です。デザインデータを開いて、対象のオブジェクトを選択して、必要な情報を取ってソースコードに反映することを繰り返す作業が続くため非常に手間がかかります。今回はそれらの手間を軽減してくれる、４つのツールを紹介・比較したいと思います。

– Adobe CC Extract
– Zeplin
– Avocode
– Sympli

Adobe CC Extract

Adobe社製のツールで、Creative Cloudアセット経由またはDreamweaverから扱えるツールです。CreativeCloudのクラウドストレージ「Assets」にPSDファイルをアップしてブラウザからアクセスするだけで利用できます。Extractタブを選択するとアップロードしたPSDファイルが表示されます。一度機能がなくなりましたが、人気があり復活した経緯があるツールです。
https://blogs.adobe.com/creativecloud/update-for-extract-in-creative-cloud-assets-and-brackets/

レイヤーを選択すると要素の幅や高さ情報に加えて、CSSに変換したコードをコピーすることができます。テキストをコピーすることもできるので非常に便利です。

青いボックスが選択したレイヤーの情報と、スタイル、テキストのコピーリンク。シフトかコマンドキーで複数のレイヤーを選択した場合はレイヤー間のマージンを取得して黒いボックスで表示してくれます。「アセット」タブから画像の書き出しにも対応しているのですが、残念ながら私の環境ではバグがあるのか書き出した画像をダウンロードできないようでスクリプトエラーが出てしまいます(・ω・)なぜ

PSDデータのみ対応していて、アートボード機能を含んだファイルや大きなサイズのPSDファイルを読み込んだ時には表示できないこともあります。ブラウザがあれば使える軽快さがありますが、プロジェクトやファイルの内容によって利用するかどうかを判断する必要がありそうです。

Zeplin

Zeplinは無料から使えるデザインドキュメント計測／共有ツールで、スタイルやテキストのコピーに加えて関係者のコラボレーションを促進する共有機能やコミュニケーション部分もサポートしています。読み方はいつも困りますが「ツェプリン」で良いのかな。。ちなみに「ツェプリン」でググると「ツェッペリン」の検索結果が表示されてしまいます(・ω・)

SketchとPhotoshop、Windows/Macにも対応している点が素晴らしいです。Sketch、Photoshopの連携にはプラグインが必要なので事前にインストールします。インストールについては下記に詳しいです。
https://zeplin.io/support.html
Photoshopを例に解説しますが、プラグインをインストール後Zeplinウィンドウが表示されるようになります。任意のアートボードを作成し選択した状態でウィンドウを見ると「Export selected artboads to Zeplin」ボタンが表示されるので押すとZeplinにインポートされます。

Zeplin上ではインポートされたデータが表示されます。レイヤーを選択すると要素の幅、高さの表示に加えて、右側の列にCSSやカラーコードが表示されます。レイヤー間の幅、高さは選択したレイヤーと対象となる他のレイヤーにマウスオーバーすると取得できます。

画像などのデザインアセットはSketchからのインポートであれば対応可能です。また、コメント機能があり関係者を招待して細かい部分についてのコミュニケーションが可能です。

無料であることを考えると素晴らしいツールですね。

AVOCODE

AVOCODEはZeplinに似た機能を持つツールで、デザインカンプからCSS、カラーコードやデザインアセットを書き出すことができます。こちらもWindows、Macの対応に加えてLinuxまでサポートしています。デザインモチーフはアボカドですね。
デザインファイルもPhotohop、Sketchに対応。ただし、有料ツールとなっていて月6.75ドルからの価格になっています。２週間の体験ライセンスで試用することが可能です。

AVOCODEはプラグインなしでデザインを読み込むことができます。アプリケーションの「Upload Design」ボタンからデザインソースを選択するだけなので簡単に始められる点は良いですね。

UIはZeplin/Sympliに似ていて、レイヤーを選択すると幅、高さが表示され画面右の列に表示されます。カラーコードやスタイルが個別にコピーできる点はExtract、Zeplinよりも操作しやすく今回紹介するツールの中でも最も使いやすいと感じました。

また、画像などのデザインアセットの書き出し機能も優れておりSketch、Photoshopの画像を簡単に書き出すことができます。

コメント機能もあり、デザイナーエンジニア間のコミュニケーションができるようになっています。

Sympli

SympliはPhotoshop、Sketchのデザインアセットをインポートして幅、高さの計測やカラーコードの取得が行えるデザインドキュメント共有ツールです。こちらもWindows/Macに対応。XcodeやAndroid Studio用のプラグインがあるのが特長になっていて無料から使うことができます。

Zeplinもそうですが、機能的な制限がなく有料プランとの違いはプロジェクトの個数が1つに制限されているだけというのはユーザーからするとありがたいですね。Sympli自体はWebアプリケーションになっているので、ブラウザベースで作業できる点がZeplin、Avocodeと異なっていますが使い方はほぼ同様のUIとなっています。
事前にPhotoshop/Sketchプラグインをインストールする必要があります。
https://sympli.io/downloads/web

Photoshopを例にすると、インストール後はパネルが表示されるのでログイン後「 Sync」ボタンを押すとファイルがSympli上にインポートされます。

ブラウザからSympliの管理画面にログインしファイルを表示すると下記のようになります。Zeplinと操作感は同じですが、ブラウザ上でも操作感はとても良いです。

カラーコードやテキスト、CSSスタイルのコピーについてはストレスなく行えます。こちらもシェア機能があり、コメントを残すことが可能なのでコラボレーションに使うことができます。CSSのソースが全部表示され、テキストコピーの位置が下に下がってしまうので、画面の高さがない環境ではやや使いにくくなる可能性がある点はマイナスと感じました。また画像の書き出しにはレイヤーごとに「AST:」というプリフィックスをつける必要があり使いにくいです。 Sketchファイルの場合は事前にExport設定をしておく必要があります。

全体的にシンプルですっきりとしたデザインと使い心地がいいアプリケーションです。

まとめ

どのツールも基本機能では問題なく使えるため、好みで選択してもよいと思いますが、Adobe CC Extractは2GB超のファイルやアートボード機能に対応していないなどAdobe製にしては連携ができておらず開発が進んでいないようです。DreamweaverやCreativeCloudとは相性が良いので、それらのツールを使う場合は効率化が見込めると思います。

Zeplin、Sympliは無料で使えて、どのデータでも正しく読み込んでくれるのでどのプロジェクトでも利用可能だと思います。Avocodeは有料ですが画像アセットの書き出し機能が優れているので、Avocdeの段階で画像を書き出したほうが効率がよいワークフローにおいて採用を検討する価値があると思います。Sketch/Photoshopとの相性やコラボレーション機能をどの程度利用するかによっても検討する必要がありそうです。

これらのツールを活用して、より効率的に品質の良いアウトプットが出せるようにしていきたいですね。