Help us understand the problem. What is going on with this article?

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

※1年前の記事なので、最新の情報は各自確認して頂ければ幸いです。zeplinの方が使ってる人多そう。


ウェブ業界にいらっしゃる全ての方
こんな悩みを持ったことはないでしょうか?

[プログラマー]

  • 自分が持っていないデザインツールのデザインを渡されて確認できない
  • デザインを実現するCSSを考える時間を無くしたい
  • デザイナーに画像/レイヤー切り出しを依頼する時間を無くしたい

[デザイナー]

  • エンジニアへのデザイン共有時、重たいファイルや画像を一々送りたくない
  • エンジニアへのデザイン指示書を作りたくない(ファイルを見てわかってほしい!)
  • かなり前の修正前デザインを確認/保存したい

[ディレクター]

  • 大量にある重いデザインファイルを一目でプロジェクト別に管理したい
  • デザインへのフィードバックを簡単に明確に伝えたい

[誰でも全員]

  • PhotoshopでもSketchでもXDでもIllustratorでもどんなデザインファイルでも、これらの悩みを解決したい

これらの悩みを、全て解決してくれるツールがあります。
そのツールの名前は『Avocode』です。
avocode-firstview.png

Avocodeは最強のデザインコード抽出/共有/履歴/管理ツール

Avocodeの凄さを体験するために必要な学習コストは、2つだけです。

  • ドラッグ・アンド・ドロップでファイルをアップロード
  • アップロードされたファイルを開く

実際に何ができるのかを、まずはひとつずつ見ていきましょう。

全てのデザインファイルをアップロード可能

Avocodeがデザイン共有する事が可能なファイルを一覧しました。

  • Photoshop
  • Illustrator
  • XD
  • Sketch
  • Figma
  • 画像ファイル全て

これらの全てのファイルを一元化する事が可能です。
avocode-designfile.png
※画像右側のように、「誰が何をアップロードしたか」の履歴も残ります。
もちろん、Avocodeから元デザインファイルをダウンロードする事も可能です。

デザインのCSSスタイルをそのままコピーできる

早速アップロードしたファイルを開いてみましょう。
適当な箇所でクリックすると、下画面のようになります。
avocode-css-copy.png
画像右側にCSSコードが記載されていることがわかりますか?
これまでデザイン共有が難しかったbox-shadowはもちろん、linear-gradientやfont-familyなども当然対応しております。
また、長いテキスト文も、テキスト内文字をそのままコピーできますのでLP案件などで重宝します。

※XDのデザインスペックでは、CSSコードを吐き出してくれる事はできなかった

XDのデザインスペックは、これまでデザイン共有で最もよく用いられていたサービスです。
しかし実際は要素クリックした後に、値が出るだけでCSSコードは自分で書く手間が必要でした。
xd-designspec.png
Avocodeならこの手間は不要になります。コピーするだけでいいのです。

画像の切り出し、複数レイヤーの切り出しが可能

Avocodeなら、デザイナーじゃなくても画像の切り出しが簡単にできます。
画面右側のExportというボタンを押せば、選択した画像/複数レイヤーの切り出しがすぐにできます。
avocode-export1.png
avocode-export2.png
画像の通り、PNG/JPG/SVG/WEBPの形式に切り出せます。
また、スケール倍率も調整可能です。

デザインをURLで共有可能

XDのデザインスペックは、URLでデザインを共有できる事が最大の強みでした。
AvocodeでもデザインのURL共有が可能です。右上のShareボタンを押せばURLが吐き出されます。
XDはデザインの重さによっては1分程かかる作業ですが、Avocodeなら一瞬です。
avocode-share.png

デザイン上のピンポイントに対してコメント機能/コメントに対する完了フラグが可能

「デザインのここのこの部分を直して」というフィードバックを貰って、間違えて違う箇所の修正をしてしまった経験はないでしょうか?
Avocodeならデザイン上にピンを配置して、コメントを残せるのでそのミスがなくなります。
avocode-comment.png
しかも、画像の通り「Unsolved/Solved」ボタンがありますので、修正ができたかどうかが一目でわかります。
またコメントは履歴に残るので、「いつどういう修正を行ったのか」という確認をする事ができます。

デザイン履歴を残せる

これまでデザイン履歴管理ツールにはAbstractというツールがありました。
しかし、「昔のデザインを確認するなんて微妙に痒い程度の事の為に、別料金を払うメリットはあるのか?」という懸念点があったと思います。
Avocodeならデザイン履歴は全プランの中に最初から入っていて、別料金を払う必要はありません。
avocode-history.png

プロジェクト管理ができる

皆さんは一つのプロジェクトで、どれだけのデザインを作成するでしょうか?
バナーも含めたら、10数個は存在しますよね?
それを一つのフォルダにいれていたら勿論混乱してしまいます。
Avocodeならフォルダ分けをして管理をする事が可能です。
avocode-project.png

プロトタイプが見れる

これは実際にプロトタイプが動いているところを見て頂いた方がいいですね
下記リンクを開いたら、デザイン内の『Enter』ボタンを押してみてください
公式デモを見る
画面遷移が出来る事を確認できます。

ダークテーマが格好いい(個人的に)

これは好みによると思いますが、私はダークテーマ至上主義の為ここがでかいです。
avocode-darktheme.jpeg
格好いい・・・このUIだけで人におすすめしちゃいます。

機能概要のまとめ

  • CSS/テキストを吐き出せる
  • 画像/複数レイヤーの切り出しができる
  • デザインファイルを丸投げしないで済む
  • 指示書を作らないで済む
  • デザイン履歴が見れる
  • フィードバックが正確になる
  • タスク管理ができる
  • プロジェクト管理ができる
  • あらゆるデザインツールに対応してる
  • プロトタイプも対応可能
  • 学習コストが低い

企業だけではなく、フリーランスにとっても最強のツールといって過言ではないでしょう。

ここまで読んで頂いた方、こうは思いませんか?
これだけ最強でもやっぱり欠点とかあるんでしょ?

Avocodeの欠点、注意点

どんなサービスにも、絶対欠点はあるものです。
今回は考えつくあらゆる欠点/注意点と、それに対する対策を書いてみました。

縦に30000px以上あるとエラーを起こす

大きすぎるファイルが利用不可能という事です。
LP案件などでは少しここが歯がゆいところではないでしょうか?
解決策としては、やはり途中で切るなどするしかないです。

レイヤーを適当に作ったデザインファイルだと、切り出しできなかったりする

例えばスマホデザインを作る際、こんな適当な作り方をするデザイナーがたまにいます。

  • トップバーとフッターを同じレイヤーで作る
  • 丸画像をradiusではなくて、正方形白抜き&中だけ丸枠いれる

こういう破茶滅茶なデザインだと、当然痒いところに手が届く切り出しはできません。

有料フォントなど特別な文字は、文字化けする

テキスト吐き出しはできますが、画面上では『□□□□□□』と表示されてしまいます。
もし該当フォントファイルを持っているなら、インポートして解決する事が可能です。
エラーメッセージをクリックして、画面通りの指示に従いアップロードしましょう。
avocode-missingfont.png
avocode-missingfont2.png

で、おいくらなの? ⇛ 最低月額14ドル(1500円くらい)で追加料金無し

avocodeには4つのプランがあります。
全てのプランで7日間の無料お試し期間があります。

  • Pro 月額14ドル
    • 容量無制限
    • コメント機能は無
    • デザイン履歴は3つまで
  • Team 月額32ドル
    • コメント機能解禁
    • デザイン履歴無制限
  • Company 月額90ドル
    • サブフォルダ機能(プロジェクト内に『バナー』『TOP』などフォルダ作れる)
  • Enterprise 要相談
    • 個別サポート

公式料金表を見る

私見としては、立ち位置によって以下の組み合わせが一番お得だと思います

会社ならCompanyの月額90ドルの5人契約でアカウントを使い回す

1アカウントだけをエンジニアとディレクターで使い回す
あとの4アカウントをデザイナー個別に振り当てる

会社レベルなら確実にサブフォルダ機能は必須だと思います。
というのも、バナー画像とTOPデザインが同じディレクトリにあるのは確実に混乱するからです。
勿論リンク管理していれば問題ないのですが・・・

フリーランスのエンジニアなら一番安いProの月額14ドルで十分

個別で事業をしている方なら、コメント機能などは不要でしょう。
仮に必要だとしたら、別サービスを使えばいいわけです。
私は『aun』というサービスを使っています

フリーランスのデザイナーならTeamの月額32ドルで、コメント機能とデザイン履歴無制限

クライアントからのフィードバックが分かりづらい時、コメント機能をもし使用したい場合があると思います。
また、デザイン履歴無制限になるのもポイントが高いです。

まとめ

冒頭にあった悩みを一つでも持っていた方。
Avocodeを使う事で、その日から時間短縮/タスク漏れが無くなります。

周囲のエンジニアや会社様に絶賛布教中ですが、皆からいい反応を沢山頂きました。もし興味をもった方はぜひ無料期間を利用して試してみてください。
もし今回の記事の内容が分かりづらく、ご質問があるという方は、
ここのコメントでメッセージを頂ければ返答/追記していきますのでお気軽にご連絡ください。

ryuta69
ᓚᘏᗢ zzz...。oO
https://github.com/ryuta69
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした