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

Title

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

Date

2019-08-13

今回は、オススメツール紹介ということで、フリーランスになってからすぐ使い始めた『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 円も入りませんが笑)

制作パートナー(外注)をお探しの制作会社様・広告代理店様

お気軽にお問い合わせください。