ウェブ制作のフローが劇的に変わる！『Avocode』ベータ版を使ってみました

PNG Hat, CSS Hatなど、ウェブ制作に役立つツールを数多く開発しているMadeBySourceから、更に強力なツール『Avocode』がリリースされます！
正式版のリリースはまだ先ですが、中の人からプライベートベータ版をいただいたので、さっそくそのレビューをお届けします。

プロダクトキーは複数あるので、レビューを見て興味をもっていただいた方は、明日か明後日に募集するのでお楽しみに。

Avocode

Avocodeは簡単に言うと、PSDのプレビューと書き出しをPhotoshop無しで行うもので、書き出しは.png, .jpgの画像だけでなく、SVGへの書き出し、CSSへの書き出しにも対応しています。
画像のスライスやスタイルシートのコーディング作業を大幅に強化する感じです。

僕もまだ使って間もないのですが、Avocodeの画面を見ながらレビューします。
と、その前に、動画がアップされているので、こちらもどうぞ。

では、Avocode プライベートベータ版のレビューです。
一番印象的だったのは、どの操作をしてもサクサク軽いことでした、大切ですね。

Avocodeの起動画面

スタイリッシュなUIは、シンプルでいい感じ。

Avocodeの起動画面の拡大

右側にプロジェクトの一覧が表示されます。
まずは「Sample」のプロジェクトを選択。

Sampleファイルを開いたとこ

SampleではAvocodeの基本操作が詰まっています。見出しのテキスト、ボタン、画像など、通常のウェブサイトに使用するエレメントが配置されています。

Sampleファイルの拡大

ブルーの角丸ボタンはシェイプで作成されており、選択するとサイズやカラーの情報、そしてスタイルシートが表示されます。

ボタンのスタイルシート

スタイルシートは自動で生成され、CSSとLESSに対応しています。もちろんコードはSublimeTextや秀丸やDreamweaverなど別のアプリに渡せます。

Sampleファイルを開いたとこ

次に、左下の画像を選択。

Sampleファイルの拡大

画像は指定する要素ごとに範囲を自由に設定でき、1クリックで簡単にスライスできます。
サイズやマージンなどの数値も選択するだけで、さまざまな箇所の数字が表示されます。

Sampleを閉じて、別のプロジェクトを開いてみます。

Weatherファイルを開いたとこ

ドキュメントの拡大・縮小は「Option」を押しながらホイール、なんとなくこうだろうなという操作でそれが実行されると嬉しいですね。

右のパネルの拡大

上のタブを切り替えることで、パネルを変更できます。キャプチャは二番目のタブでPSDのレイヤー表示です。

Weatherファイルを開いたとこ

プライベートベータ版なので、使えない機能は「Available Soon」と表示されました。残念。