UIデザイナー必携のPhotoshopエクステンション3つ（PNG EXPRESS / SpecKing / SPECCTR）を使い比べてみる

突然ですが、皆さんはレイアウト指示書、好きですか？

レイアウト指示書とは、デザイナーが開発メンバーにパーツと一緒に渡すドキュメントです。「このパーツとこのパーツの間は10px」とか「このフォントサイズは 34pt でカラーは…」みたいなレイアウトの詳細が記載されています（ぐぐるとそれっぽい画像が見られます）。

開発側にカンプ 1 枚渡して「じゃ、これと同じで」なんてことはできないので、お互いのコミュニケーションに必須なのです。

しかしですねー、この指示書というものを作るのがかなり面倒だったのですよ。 僕の場合、カンプは Photoshop で 指示書は Illustrator だったので、Photoshop でフォントサイズ確認して Illustrator に入力して〜とか、レイヤー効果分ピクセルを測ってオブジェクトサイズに足した数値を〜とか、記載する仕様とオブジェクトを線で繋げたり〜とかとか。全部手作業。1 枚の指示書を作るのに 10 分くらいかかっていました。

僕は入社当時からつい最近まで、レイアウト指示書は大抵↑な感じで Illustrator で手作りしていたのですが、ここ 1 年くらいで自動化できる Photoshop 用のツール（エクステンション）が増えてきました。これがね、感動するくらい手早く作れて、1枚数分で終わるんですよ。

今日は、そんなツールたちを実際に使ってみたうえでの感想を、比較しながら紹介していきます。ちなみに全部自腹です。

今回比較するのは

・PNG EXPRESS 29$

・SpecKing 19$

・SPECCTR 49$（現在30%オフのセール中）

の 3 つです。

サンプルに使うのは

このようなデータです。いやー適当ですね笑

構成は単独のシェイプが 3 つ（緑はストロークのみ、赤は角丸+境界線、青はドロップシャドウ+グラデーションオーバーレイ）、レイヤーグループで作られたボタンが 2 つ、和文と欧文のテキストが 1 つずつです。

評価基準ですが、

・オブジェクト間のマージンをちゃんと測れるか

・オブジェクト（テキスト）が持っている情報をどれだけ表示できるか

・出力された仕様は編集が容易か

・他のツールにはない特徴は何か

あたりを見つつ探っていきたいと思います。

PNG EXPRESS

PNG EXPRESS は今年の 5 月にリリースされたエクステンションです（割と最近だった）。

Webサイトを見ると多機能と言ってよい部類です。29$ というなかなか絶妙な価格ですが、果たして実力はいかに。

 PNG EXPRESSの機能としては

・レイヤーの仕様を記載する

・フォント / シェイプの仕様を記載する

・幅と高さを記載する

・AB間のマージン（水平・垂直）を記載する

であることがわかります。

また上部を見るとわかるように、アセット書き出しの機能があります。副次機能として「（PNG EXPRESSで書き出すために）レイヤー名を変更」「変更後のレイヤーに対してBounds（書き出し領域）を追加する」があります。

設定画面を見てみましょう。

記載する仕様の位置やフォントサイズなどが変えられることがわかります。

ちなみに真ん中あたりにある「Measurement Units」では px の他に pt と dp が選べるのですが、dp 選んだからって自動的に数値を変換してくれるわけでもなく、単に表記が変わるだけです。残念。。

※追記

上部の「Spec Scaling」の数値を変えることでpt換算やdp換算の数値を出力してくれます。RetinaサイズのPSDなら、50%に設定することでエンジニアにも分かりやすく指示書を作成できます。同僚のAさんありがとうございました。

また出力される仕様のフォントサイズも変えられますが、10px〜14pxと少し幅が狭いです。

ではさっそく、適当なレイヤーを選んで仕様を記載してみましょう。

アセット書き出し機能に続くもう 1 つの特徴が「何か 1 つアクションを起こすと、別データとして作成される」です。カンプとは別にレイアウト指示書のデータを作ってる人間なので、とても気に入っています。

また枠外に仕様が記載されるような場合は、上図のように自動的にキャンバスを広げてくれます。これも嬉しいですね。

記載できる項目は

・Bounds（領域）

・Position（XY）

・Asset Name（PNG EXPRESS用のレイヤー名のみ有効。日本語は文字化け）

・Size（縦横の大きさ）

・Color and Opacity（色と透明度）

・Layer Effects（レイヤー効果）

です。せっかくなので全部見てみましょう。ただし Asset Name は設定していなかったので表示されません。

こんな感じになりました。緑色で記載した仕様は「フォント / シェイプの仕様を記載する」のアクションです。

いかがでしょうか。青い円にかけたドロップシャドウもサイズに含まれていることや、緑の五角形のストロークもちゃんと認識されていることがわかるかと思います。

ちなみに円にかけたグラデーションはレイヤー効果で白黒グラデをかけていたのでこのような結果となりましたが、シェイプ自体にグラデをかければ、もちろんちゃんと出力されます。

欲を言うと、角丸が取得されたりすると、さらに素敵になりますね。

この調子で下のオブジェクトにもやってみましょう。

書体や文字間もちゃんと出力されました。

他のエクステンションにはない 3 つ目の特徴は「レイヤーグループからもちゃんと仕様が取得できる」です。このサンプルデータで言うと、2 つのボタンがそれに当たるのですが、グループ内にあるオブジェクトにかかっている効果までちゃんと取得して、出力されています。

次に、評価基準にある「出力された仕様の編集が容易かどうか」を見てみたいと思います。

結論から言うと、PNG EXPRESS は使いやすくはありません。レイヤーウィンドウを見てみます。

分かる方には一発で分かるかと思います。具体的に説明しますと

・仕様を記載している構成パーツの線とテキストが、なぜか上下に広がって追加される

・レイヤーから取得した仕様の線とテキストがレイヤーリンクされていない

・ていうかグルーピング全くされてない

あたりでしょうか。特に 1 つ目は奇怪で、要は仕様を追加するごとに、上から

Cのテキスト

Bのテキスト

Aのテキスト

Aのテキストから伸びてる線

Bのテキストから伸びてる線

Cのテキストから伸びてる線

というレイヤー構造になるわけです。うーん ようわからん。。ひょっとしたら解決方法があるのでしょうか？？

【まとめ】

・基本性能はとても良い。

・アセット書き出しはあんま使わないかな。。

・出力結果の編集や整理がとてもめんどくさい。

SpecKing

今回の中では最も最近（SPECCTRはFireworks版とかあるので）に出たエクステンションです。最大の特徴はその価格の安さですが、はたして性能はどのようなものなのでしょうか。

ウィンドウはこんな感じ。

オブジェクトのサイズ・マージン・フォントがタブで分けられているのがいいですね。価格帯のせいか、詳細な項目は見当たりません。

さてこの SpecKing ですが、結論から言いますと残念ながらまだ実用段階ではありません。

オブジェクトのサイズはレイヤー効果が無視され、マージンは、なんと選択したオブジェクト間ではなく、選択範囲との間のマージンしか測れません。

日本語の書体は文字化けしてしまいます。ちなみに出力に使われるフォントサイズは 1 種類。

また、ここまで見て「あ…（察し）」となった方もいるやもしれませんが、出力される仕様の色が背景色と描画色しか使えません。うーん…

ただ、PNG EXPRESS よりもレイヤーの構造はわかりやすくなっています。

【まとめ】

・まだまだ使えたものではありません。

SPECCTR

最後にご紹介するのが SPECCTR です。もとは Fireworks 用のエクステンションとして登場し、かなり有名なエクステンションです。今回 Photoshop 版が出たということで、待ち望んでいた方も多いと思います。

果たして約 50$ 分の価値はあるのでしょうか？

実は Fireworks 版も Illustrator 版もほぼ使ったことがないに等しいのですが、UI は見た感じ大体同じっぽいです。

SpecKing 同様、タブで機能が分けられています。

PNG EXPRESS と同等の情報が出力できるようです。

他にはない SPECCTR の特徴として、拡張性の高さが挙げられます。

・出力フォントのサイズが PNG EXPRESS よりも大きく多く選べる

・シェイプとテキストとマージンに使う色が選べる

・記載されるカラーモードが RGB・CMYK・HSB・HSL から選べる

が大きな違いです。

では実際の使い勝手はどうでしょうか。

ひととおりの仕様を出力してみました。

まずキャンバスサイズですが、PNG EXPRESS では自動で広がったのが、SPECCTR では任意の領域分拡張することができます。

また出力された仕様はナンバリングによって整理されるため、全体的に余裕が出ます。特に画面幅の狭いモバイルアプリなどでは重宝するのではないでしょうか。これ、個人的にとても嬉しいです。

いくつか残念な点も見られます。まず1つ目は、レイヤー効果をちゃんと測ってくれていないこと。青い円を PNG EXPRESS の時と見比べるとわかりますが、ドロップシャドウ分がちゃんと出ていません。2つ目は、緑の五角形のストロークが出力されていないこと。そして3つ目は…

レイヤーグループからは出力ができません（涙）

ストロークに関しては、僕は使わないのでそんなにデメリットを感じないのですが、残り 2 つは…ちょっとつらい。。

なお、レイヤー構造は SPECCTR がダントツで綺麗です。

ちゃんと、出力項目別に親フォルダがあります。スンバらしー！

Bullet（オブジェクト側のナンバリング）と Specs（記載される仕様）にシンプルにまとめられているのも好印象です。これなら、Specs だけ自由に動かして、指示書のレイアウトを整理することができます。

ちなみに 50$ という価格ではありますが、この中で唯一試用版を提供しています。

まだどんな感じかよくわからない、という方は一度実際に使ってみてはいかがでしょうか。

【まとめ】

・拡張性の高さにメリットを感じならおすすめ。

・仕様の記載され方やレイヤー構造が綺麗なので、修正や編集が容易。

・レイヤー効果をちゃんと測ってくれないのは個人的に×。

・気になったらまずは試用版を。

最後のまとめ

多少駆け足でしたが、いかがでしたでしょうか。個人的には PNG EXPRESS が断トツで自分の使い方に合っていました。レイヤーグループから仕様の取得ができるのと、ちゃんとドロップシャドウ分サイズに入れてくれるのが決め手でした。

以下、簡単なまとめです。

■PNG EXPRESS　★★★★☆

・価格と機能のバランスが絶妙。個人的には一番おすすめ。

・レイヤー効果やレイヤーグループを多用する人には◎。

・出力された仕様のレイヤーがぐちゃぐちゃなので、修正がめんどくさい。

■SpecKing　★★☆☆☆

・現時点ではおすすめできない。10$ 乗せて PNG EXPRESS が懸命か。

・とは言え今後のアップデート次第では化けるかも？

■SPECCTR　★★★★☆

・高価格高機能。CMYK や HSB 表記をしたい方はこちらを。

・1 画面にたくさん仕様を記載する人はナンバリングが重宝する。

・レイヤー効果の取得が微妙なので、多用する人は△。

というわけで、モバイルアプリ目的なら、今のところ PNG EXPRESS を購入すれば間違いないでしょう。

もちろん、これからアップデートして不足点を補っていくことも予想されますし、僕自信が実は解決方法を知らないだけのものもあるかもしれません（その時はコメント欄でご教授頂けると助かります……）。

もしこれまで指示書は手作りで自動化なんて考えたことなかったよーという方がいたら、ぜひ一度使ってみてその素晴らしさに触れてみてください。

レッツエンジョイ指示書ライフ！！