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

Title

Date

2019-08-13

デザインコード抽出とは

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

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;