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

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

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

サイトのキャプチャ

Avocode

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

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

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

Avocodeのキャプチャ

Avocodeの起動画面

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

Avocodeのキャプチャ

Avocodeの起動画面の拡大

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

Avocodeのキャプチャ

Sampleファイルを開いたとこ

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

Avocodeのキャプチャ

Sampleファイルの拡大

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

Avocodeのキャプチャ

ボタンのスタイルシート

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

Avocodeのキャプチャ

Sampleファイルを開いたとこ

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

Avocodeのキャプチャ

Sampleファイルの拡大

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

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

Avocodeのキャプチャ

Weatherファイルを開いたとこ

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

Avocodeのキャプチャ

右のパネルの拡大

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

Avocodeのキャプチャ

Weatherファイルを開いたとこ

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

sponsors

top of page

©2018 coliss