正式版リリース間近！Web制作の作業が驚くほど捗る『Avocode』最速レビュー

PNG Hat, CSS Hatなど、Web制作に役立つツールを数多く開発しているMadeBySourceが新たにリリースする『Avocode』の正式版のリリースがいよいよ間近になりました！

一足先にプレオーダー版が届いたので、さっそくレビューします。
ベータ版の機能が限定されている時でも「こいつはすげえ」と思ってましたが、現在の最新版は更にヤバイです。

Avocode

と、レビューの前にお得な情報を。

Avocodeはリリース前の早期割引として、キャンペーンを行っています。
通常$240が、約70%オフの$69で購入できます。

Avocode: 早期割引ページ

個限定で、現在残り152です。

では、Avocodeのレビューです。

Avocode: 特徴ページ

Avocodeは、Photoshop無しでPSDのプレビューができ、画像の書き出しは.png, .jpgだけでなく、SVGへの書き出しにも対応しています。また、ボタンやエレメントなどのベクターオブジェクトはCSS(Less, Sass対応)で書き出すこともできます。

レイヤー保持されたPSDの確認をし、画像のスライス、スタイルシートのコーディング作業が大幅にスピードアップする感じです。

操作も非常にきびきびしており、動画を見てもらえれば体感できると思います。

Avocode 最新版のUIは、操作性はそのままで、使い勝手がよりよくなってます。
レイヤーパネルが右から左に移動したのが一番大きな変化です。

AvocodeのUI

中央がドキュメント、左にツールとレイヤー、右に情報と書き出しがまとめられています。

PSDのレイヤーは保持されたまま開くことができ、PSD上のオブジェクトとレイヤーの連携操作はPhotoshopより直感的で便利と言ってもいいでしょう。

ドキュメントを拡大して、レイヤーを展開

ベクターで作成されたオブジェクトは、すぐにCSSで書き出されます。

CSSの書き出しは、Less, Sass, SCSS などにも対応

ベータ版はデモのPSDでしか作業ができませんでしたが、当然任意のPSDで作業することができ、Photoshopとの連携もばっちりです！

ローカルのPSDをPhotoshopで開いたとこ
PSD: iOS 7 Style UI Kit

PhotoshopにAvocodeのプラグイン（無料）をインストールすると、Photoshopで開いているPSDをAvocodeにシンクロさせることができます。

AvocodeのPhotoshop用のプラグイン

「Sync」ボタンをクリックすると、AvocodeにPSDが表示されます。

Photoshopで開いていたPSDをAvocodeにシンクロ

画像の書き出し、CSSの書き出しだけでなく、レイヤー操作、プレビュー、カラーパレットの作成など、制作時に必要な作業が快適におこなえます。

上：スクリーンショット、下：カラーパレットの作成

ツール類の操作もかなり優れモノで、例えば定規ツールはオブジェクトを指定するだけで、実装に必要な数値が全て表示されます。

定規ツールの使用、矩形を選択するだけでサイズとマージンを表示