最強のデザインコード抽出/管理ツール『Avocode』

最強のデザインコード抽出/管理ツール『Avocode』

こんにちは!
今回は、オススメツール紹介ということで、フリーランスになってからすぐ使い始めた『Avocode』をご紹介します。
このツールは、ガチです。ガチでヤバいです。

デザインコード抽出とは

デザインコード抽出とは、簡単にいうと

  • PSDなどをWeb上などに取り込む
  • ワンクリックで、どんなスタイル(CSS)が当たっているのかわかる

というめちゃくちゃ便利なツールです。

何か良いツールがないか探していたところ、Qiitaに投稿されていた以下の記事を見て、試しに使ってみたところ、まさにタイトルに偽りなしでした!
2019年の全てのウェブ業界が使うべき、最強のデザインコード抽出/共有/履歴/管理ツール『Avocode』

最強と言っていいんじゃないでしょうかね。

Avocode公式はこちら
https://avocode.com/

HTML・CSSを書くときにわざわざPSDでフォントサイズを見たり、色を確認したりという作業をすると、非常に時間がかかり非効率です。
PSDも重いですし、スペックが低いPCだとさらに悲惨です。
少しでも作業効率を上げていくことが大事です。

僕のデザインコード抽出ツールの使用遍歴を振り返る

僕はAvocodeを利用する前のコード抽出ツールは以下を利用してました。

  • Adobe CC Extract
    • 以前はWebで利用できていた気がしますが、途中からWeb版を廃止してDreamweaver必須になったようで(間違ってたらすみません。)VS Codeを使っているのにわざわざDreamweaverを立ち上げるのは馬鹿らしいので使うのをやめました。
  • PSDETCH
    • 【Avocode】を使うまでは、もう4年ぐらいずっとお世話になってました。無料で使えて、機能も十分で良かったです。無料ならこれ一択でいいかも。

『Extract』をはじめて使った時は衝撃的だったのを覚えています。

なぜ『PSDETCH』をやめて有料の『Avocode』を使い始めたのか

無料お試しが、2週間あるので、思い切って実務で使ってみました。

正直『PSDETCH』で不満に感じていた点が解消できて、感動しました!!

基本的にできることなどは、以下の記事にいろいろ書いてあるので、参考にしてください。

2019年の全てのウェブ業界が使うべき、最強のデザインコード抽出/共有/履歴/管理ツール『Avocode』

僕は基本的に一人でコードを書くので、共有周りはあまり関係ないのですが、チームでガッツリ使うなら共有機能も便利かと思います。

上記以外でのオススメポイントをまとめていきます。

個人的『Avocode』オススメポイント3選

今回は適当に作りましたが、以下のPSDデータをもとに説明します。

プロジェクト毎にフォルダーを作成可能

プロジェクト毎にフォルダーを作成できるのはめちゃくちゃ便利です。
(高いプランだと、サブフォルダーまで作れるのですが、一番安いプランですとサブフォルダーは作れないです。)

容量制限はないので、いくつでもUPできます。また、地味に上書き機能も便利です。
(高いプランだと、履歴を戻せますが、一番安いプランですと履歴戻せません。)

フォントサイズがptではなくpxで抽出される

これも『PSDETCH』異なる大きなポイントです!

フォントサイズでptは、普通使わないのではないでしょうか?
webだと、「px、rem、em、%」あたりがメインかと思います。

『PSDETCH』では、なぜかptがベースになっているようで、不満でしたが、『Avocode』ならpxで出ます!
かなりマニアックだけど、個人的にはめちゃくちゃうれしいポイント。

1レイヤー内の異なるスタイルもすべて抽出できる

またまたマニアックな内容ですが、これはかなり衝撃的でした。
これが決め手となり、採用しました。

抽出されるCSSは以下になります。

/* Style for "Avocode サイ" */
width: 784px;
height: 107px;
color: #333333;
font-family: "Yu Gothic";
font-size: 45px;
font-weight: 400;
line-height: 80px;
/* Text style for "Avocode" */
font-family: ?????;
font-weight: 400;
letter-spacing: 0.81px;
/* Text style for "サイコー!!" */
color: #fc0000;
font-family: "Yu Gothic - Bold";
font-size: 125px;
font-weight: 700;
letter-spacing: 2.25px;

Avocodeの箇所とサイコー!!の箇所で
– font-size
– letter-spacing
– font-weight
– color

が異なるのですが、それぞれちゃんと出力されていますね。
これができるとできないのでは、作業効率が全然違います。

料金について

料金情報については、以下に記載があります。

https://avocode.com/pricing

複数人で使うという場合でなければ「Pro」の$14/月で大丈夫でしょう。(2019/7/30時点)
$14/月⇒1,520円/月の価値は確実にあるでしょう。

まとめ

いかがでしたでしょうか。コーダーの方に本当にオススメしたいです。
『Avocode』はすべて英語ですので、ちょっと英語の苦手意識が強いと使えないかもしれませんが、UIが優れているので、読めなくても何とかなります。

4カ月で一度だけ、不具合に遭遇(おそらくサーバーエラー)しましたが、サポートに連絡したところすぐにレスポンスがあり、運用もきちんとされているかと思います。

少しでも作業効率を上げたいコーダーの方、ぜひ無料お試しをどうぞ!

https://avocode.com/

本当はオススメWebサービス5選というブログを書こうと思っていたのですが、ついついAvocodeだけで長くなってしまったのでこれだけで1記事にしてしまいました(笑)
(これだけオススメしても1円も入りませんが笑)

今度はちゃんと「オススメWebサービス5選」ブログをまとめていきたいと思います。

ポートフォリオ・お問合せはこちら