レイアウト指示書いらずになるAdobeのProject Parfaitがいい感じ

Adobeがデザイナーとエンジニアのコミュニケーションを円滑にしてくれるサービスのβ版をローンチしていました。

Project Parfait (Beta) - PSD CSS Extraction, Measurements and Image Optimization Service for the Web

プロジェクト名はParfait（パフェ）。PSDをアップロードすると、各オブジェクトの情報を表示してくれたりするので、デザイナーが作ったPSDをエンジニアがParfaitにアップロードするだけでフォントサイズやマージンの確認ができます。これはもう、レイアウト指示書がいらなくなりますな。

軽く使ってみた

PSDのアップロードにはAdobe IDが必要となります。

ログイン後、PSDをアップロードすれば即Parfaitでプレビューが可能です。

レイヤーグループや非表示にしているレイヤーなんかもちゃんと保持されています。レイヤー効果は無くなっちゃってます。

右カラムのStylesでは、選択したオブジェクトの情報が表示されたり、あるいは逆にスタイルからオブジェクトを探せたりもできます。CCで作ったからか、border-radiusもちゃんと取得されています。

フォントカラーを指定して、どのフォントに使われているかを検索。フォントサイズや書体名が書かれているのを見ると、なんだかこれだけでスタイルガイドができたような気持ちになりますね。上図では色がHexになっていますが、デフォルトはRGBです。

フォントサイズを指定。

オブジェクトを2つ選択すれば、マージンを表示してくれます。こいつぁ便利だ！

レイヤー効果をつけていれば、その分のサイズやマージンもちゃんと取得してくれます。これがなかったらちょっと使いやすさ度が減るかなと思っていたのですが、ひと安心。

もう指示書はいらないんじゃね？

予想以上に良いサービスで軽く興奮してます。これまではIllustratorでせこせこ手書きで作っていたり、PNG EXPRESSである程度自動化していましたが、これなら素のPSDをエンジニアに渡すだけでスムーズに実装に移れます。@boundsもちゃんと作っていれば、状況に応じて表示して実装上のマージンもちゃんと確認できます。

とは言え、エンジニア側が逐一確認する必要があったり、書類化できないという意味では別の負担が出てしまいますので、そのあたりはお互いのスタンス次第ですかね。

個人的には、フォントサイズとか色の情報を別個で洗い出してくれるので、自分のデザインにミスがないかどうか客観的に確認することにも使えるな、と感じました。

あとは、セキュリティ的に問題なければ、業務利用にもすぐ使えそうですね。というか使いたい笑

CCのストレージ上にアップロードするので、その辺は問題なくクリアーしているのかなとは思いますが。