Avocodeとは、Photoshopなどのデザインソフトを開かずに、クリックするだけでコーディングに必要な情報を抜き出したり、画像を出力したりできるプラットフォームに依存しないツールです。
Avocodeを使えば、コーディングする際に必要となる以下の作業を効率化できます。
- 使用フォントファミリーの確認
- テキスト抜き出し
- 要素間の余白（スペース）の確認
- ボックスシャドウの値の確認
- 色のピックアップ
- 画像の書き出し
Avocodeが対応しているファイル形式
Web制作で使用する主要なアプリケーションのファイル形式に対応しています。
※Illustratorの場合は、保存時に「PDF互換ファイルを作成」にチェックする必要がある点に注意しましょう。
アプリ版と、Web版
Avocodeはスタンドアローン（MacOS上）で動くアプリ版と、Webブラウザ上で動くWeb版があります。
どちらも動作の重さはあまり変わらない印象ですので、お好きな方を使うとよいでしょう。
アプリ版が重くなった場合は、アプリを再起動すると早くなります。（ただし、レイヤー解析中はどちらも動作が重くなることがあります）
不要なレイヤーはデザイナーに削除してもらうとスムーズです。
基本ツールの説明
手のひらツールは、Photoshopなどと同様にキャンバス内を移動するときに使いますが、スペースキーを押したら切り替わるので、ツール自体を選択することは少ないでしょう。
選択ツールは、要素を選択するだけのツールです。他で代用できるのであまり使いません。
計測ツールは、Avocodeを使用する際のメインツールになるでしょう。要素のCSSを確認したり、要素間の余白を確認したりするときに使います。
カラーツールは、表示されている要素の色を確認したいときに使います。色をストックすることもできるので便利です。
スライスツールは、Photoshop同様に画像をスライスして書き出すためのツールです。
デザインで使用しているフォントの確認
デザインで使用されているフォントがリスト表示されるため、使用フォントを一目で確認できます。
ここでは、フォントファミリー、フォントウェイト、フォントサイズを把握できます。
こうして俯瞰してみると、サンプルのデザインはフォントの種類（とサイズ違い）を多用していますね。
使用フォントが一覧表示されるメリットとして、案件によって使用できるフォントに制限がある場合があります。
デザイナーが間違って使用不可のフォントを使っていても、ディレクターやフロントエンドエンジニアが気づくことができます。（もちろん、NGフォントの事前共有は必要です）
オレンジ色のフォントはAvocodeで再現できないフォントになります。
※一部のフォントはAvocodeで対応していません。（※フォントをアップロードすれば表示可能ですが、多くの場合ライセンス違反となるため推奨しません）
※間違ってフォントをアップロードした場合は、サポートに連絡すれば削除してもらえます。（※削除依頼後、反映には時間がかかる場合があるようです）
リストで出てきたフォントに関して、どのレイヤーで使っているかを確認したいときは、フォント名にマウスをホバーさせると、レイヤーを表示させるメニューが出てきます。
「Show layers」をクリックすると左のレイヤーパネルから使用しているフォントのレイヤーが選択されます。
レイヤーが複数ある場合は、複数選択されます。
個別のフォントについて、要素をクリックすることで、サイズなどを確認できます。
フォントのエリアの横幅、縦幅、カラー、フォントファミリー、フォントサイズ、フォントウェイト、line-height、影の設定もあればCSSで設定した場合の値（参考値）も分かります。
※STYLESに表示される項目は、テキストの情報に限らず、CSSで設定可能な項目が表示されます。
使用カラーの確認
デザインで使用しているカラーも一覧で確認できます。
確認できるカラーは、シェイプやフォントのカラーとなります。グラデーションや、ビットマップ（写真など）で使っている色は出てきません。
サンプル（画像左）のように1枚のデザインで似たような色が複数あるのは、色の整理ができていないということなので、あまり良くない状態と言えるでしょう。
テキストの抜き出し
該当テキストをダブルクリックで、テキストをクリップボードにコピーできます。
※クリップボードとは、コピーされたデータを一時的に格納する場所です。
テキストエリア全体を拾えるので、マウスのドラッグで拾うより漏れがなくなり、ミスを減らせます。
Photoshopでもテキストボックスをダブルクリックですべてを選択できますが、その後に「Command + C」（WindowsならCtrl + C）でクリップボードにコピーする必要があります。トリプルクリックで選択解除されてしまうこともあるため、Avocodeを使う方が効率的です。
実際の操作感は、画像よりも動画の方が分かりやすいでしょう。
要素間の余白（スペース）の確認
選択した要素とマウスオーバーした要素の、上下左右の余白を簡単に確認できます。
ボックスシャドウの値取得
レイヤースタイルでドロップシャドウがかかっている要素をクリックすると、ボックスシャドウの値として取得できます。
値については、ビジュアルとソースコードで確認でき、テキスト同様にクリックで値をクリップボードにコピーできます。
クリップボードに入れるスタイルは、「指定のスタイルのみ」か、「表示されている全てのスタイル」かを選択できるので、用途に合わせて欲しい情報のみを取得できます。
デザインから使用色のピックアップ
カラーツールで色をピックアップ（抽出）できます。
ピックアップした色は「COLOR」にストックされるので、いつでも再利用できます。不要になったら削除もできます。
画像の書き出し
デザイナー側でアセット、又はスライスの設定をしておいてもらえれば、書き出しの手間はずいぶん楽になりますが、現状はコーディング時にPSDをフロントエンド側で設定していることも多いでしょう。（現実には、この作業もコーディングタスクに含まれがちです）
Avocodeでもアセットと同じように書き出しの設定ができます。Photoshopに依存しないため、ファイル名を変えたりしない限り、書き出しの設定は維持されます。
要素の書き出し
Photoshopのアセット同様に、要素だけ書き出すことができます。
書き出し設定をすれば複数レイヤーをまとめて書き出しや、通常サイズ、2倍サイズ、1/2サイズなど複数サイズの画像や、png、jpgなど複数形式を同時に書き出せます。
視覚的でPhotoshopで書き出すより分かりやすいかもしれません。
スライスでの書き出し
今はあまり使わないかもしれませんが、スライスでの書き出しにも対応しています。作ったスライスしか書き出されませんので、余計なスライスが書き出される心配はありません。
注意点
PhotoshopやSketchのデザインを完全に再現できるわけではありません。
作り方やフィルタ、レイヤー効果などによっては、見た目が変わることがあります。
元データから出力されたJPEGなどを確認しつつ、作業を簡略化できるところから導入しましょう。
スマートオブジェクトを別ファイルで読み込んでいる場合は、別途読み込んでいるパーツのファイルをAvocodeにアップロードする必要があります。（PSDに埋め込まれている場合は、スマートオブジェクトの元ファイルも開けます）
その他
アップデートにより、プロトタイピングもAvocodeでできる機能も追加されています。
参考サイト：https://avocode.com/prototyping?utm_source=medium&utm_medium=blog&utm_campaign=3-6-update
（inVisionからの移行が進んでいるとも言われる）Sketchとの連携で、ワークフローを最適化できるかもしれません。
参考サイト1：https://blog.avocode.com/cover-your-sketch-xd-and-figma-prototyping-workflow-in-one-place-2c6e5629f930
参考サイト2：https://medium.com/sketch-app-sources/design-tool-choices-2018-a3e6a8ce87c6
Avocodeは日々進化しており、Web制作のワークフローをさらに改善してくれる可能性を秘めています。
よくある質問（FAQ）
Q1. Avocodeを導入する最大のメリットは何ですか？
A1. デザインカンプ（PhotoshopやSketchなど）を開かずに、CSSの値、要素間の余白、フォント情報、画像などを直接確認・抽出できる点です。これにより、コーディングのスピードと正確性が大幅に向上します。
Q2. Avocodeでデザインを読み込む際、デザイナー側で気をつけることはありますか？
A2. Illustratorの場合は「PDF互換ファイルを作成」にチェックして保存する必要があります。また、不要なレイヤーを整理しておくと、Avocodeでの解析が速くなり、コーダーの作業効率も上がります。
Q3. Avocodeで表示されるデザインは、元のデータと完全に同じですか？
A3. 完全に同じとは限りません。特に複雑なレイヤー効果や一部のフィルタは、元のデザインと見た目が異なる場合があります。必ず元データから書き出されたJPEGなどの完成見本と見比べながら作業を進めることをおすすめします。