最強のデザインコード抽出・管理ツール『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
が異なるのですが、それぞれちゃんと出力されていますね。 これができるとできないのでは、作業効率が全然違います。
料金について
料金情報については、以下に記載があります。
複数人で使うという場合でなければ「Pro」の$14/月で大丈夫でしょう。(2019/7/30 時点) $14/月 ⇒1,520 円/月の価値は確実にあるでしょう。
まとめ
いかがでしたでしょうか。コーダーの方に本当にオススメしたいです。 『Avocode』はすべて英語ですので、ちょっと英語の苦手意識が強いと使えないかもしれませんが、UI が優れているので、読めなくても何とかなります。
4 カ月で一度だけ、不具合に遭遇(おそらくサーバーエラー)しましたが、サポートに連絡したところすぐにレスポンスがあり、運用もきちんとされているかと思います。
少しでも作業効率を上げたいコーダーの方、ぜひ無料お試しをどうぞ!
本当はオススメ Web サービス 5 選というブログを書こうと思っていたのですが、ついつい Avocode だけで長くなってしまったのでこれだけで 1 記事にしてしまいました(笑) (これだけオススメしても 1 円も入りませんが笑)