ウェブ制作のフローが劇的に変わる!『Avocode』ベータ版を使ってみました
Post on:2014年6月9日
PNG Hat, CSS Hatなど、ウェブ制作に役立つツールを数多く開発しているMadeBySourceから、更に強力なツール『Avocode』がリリースされます!
正式版のリリースはまだ先ですが、中の人からプライベートベータ版をいただいたので、さっそくそのレビューをお届けします。
プロダクトキーは複数あるので、レビューを見て興味をもっていただいた方は、明日か明後日に募集するのでお楽しみに。
![サイトのキャプチャ](/wp-content/uploads-201402/2014061001.png)
Avocodeは簡単に言うと、PSDのプレビューと書き出しをPhotoshop無しで行うもので、書き出しは.png, .jpgの画像だけでなく、SVGへの書き出し、CSSへの書き出しにも対応しています。
画像のスライスやスタイルシートのコーディング作業を大幅に強化する感じです。
僕もまだ使って間もないのですが、Avocodeの画面を見ながらレビューします。
と、その前に、動画がアップされているので、こちらもどうぞ。
では、Avocode プライベートベータ版のレビューです。
一番印象的だったのは、どの操作をしてもサクサク軽いことでした、大切ですね。
![Avocodeのキャプチャ](/wp-content/uploads-201402/2014060901-01.png)
Avocodeの起動画面
スタイリッシュなUIは、シンプルでいい感じ。
![Avocodeのキャプチャ](/wp-content/uploads-201402/2014060902-01.png)
Avocodeの起動画面の拡大
右側にプロジェクトの一覧が表示されます。
まずは「Sample」のプロジェクトを選択。
![Avocodeのキャプチャ](/wp-content/uploads-201402/2014060901-03.png)
Sampleファイルを開いたとこ
SampleではAvocodeの基本操作が詰まっています。見出しのテキスト、ボタン、画像など、通常のウェブサイトに使用するエレメントが配置されています。
![Avocodeのキャプチャ](/wp-content/uploads-201402/2014060902-02.png)
Sampleファイルの拡大
ブルーの角丸ボタンはシェイプで作成されており、選択するとサイズやカラーの情報、そしてスタイルシートが表示されます。
![Avocodeのキャプチャ](/wp-content/uploads-201402/2014060902-03.png)
ボタンのスタイルシート
スタイルシートは自動で生成され、CSSとLESSに対応しています。もちろんコードはSublimeTextや秀丸やDreamweaverなど別のアプリに渡せます。
![Avocodeのキャプチャ](/wp-content/uploads-201402/2014060901-06.png)
Sampleファイルを開いたとこ
次に、左下の画像を選択。
![Avocodeのキャプチャ](/wp-content/uploads-201402/2014060902-04.png)
Sampleファイルの拡大
画像は指定する要素ごとに範囲を自由に設定でき、1クリックで簡単にスライスできます。
サイズやマージンなどの数値も選択するだけで、さまざまな箇所の数字が表示されます。
Sampleを閉じて、別のプロジェクトを開いてみます。
![Avocodeのキャプチャ](/wp-content/uploads-201402/2014060901-09.png)
Weatherファイルを開いたとこ
ドキュメントの拡大・縮小は「Option」を押しながらホイール、なんとなくこうだろうなという操作でそれが実行されると嬉しいですね。
![Avocodeのキャプチャ](/wp-content/uploads-201402/2014060902-05.png)
右のパネルの拡大
上のタブを切り替えることで、パネルを変更できます。キャプチャは二番目のタブでPSDのレイヤー表示です。
![Avocodeのキャプチャ](/wp-content/uploads-201402/2014060901-10.png)
Weatherファイルを開いたとこ
プライベートベータ版なので、使えない機能は「Available Soon」と表示されました。残念。
sponsors