Edited at

2019年の全てのウェブ業界が使うべき、最強のデザインコード抽出/共有/履歴/管理ツール『Avocode』

ウェブ業界にいらっしゃる全ての方

こんな悩みを持ったことはないでしょうか?

[プログラマー]



  • 自分が持っていないデザインツールのデザインを渡されて確認できない

  • デザインを実現する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を使う事で、その日から時間短縮/タスク漏れが無くなります。

私はそこそこ実績のあるフリーランスエンジニアです。最先端のツールに敏感でいろいろと触ってきました。

現時点で最高に感動したツールはこのAvocodeで間違いないです。

周囲のエンジニアや会社様に絶賛布教中ですので、みなさんも是非、無料期間を利用して試してみましょう。

もし今回の記事の内容が分かりづらく、ご質問があるという方は、

ここのコメントか、私のTwitter / Facebookでメッセージを頂ければ返答/追記していきますのでお気軽にご連絡ください。


おまけ 次の記事を読む


【71個掲載】Pythonを学ぶなら見るべき参考本/サイト/情報の、学べる分野や金額など徹底網羅

https://qiita.com/ryuta69/items/fdb5e227fa5dcbcc4691

今回は『Python』の参考書とか勉強サイトとか多すぎてよくわからない!という方の為に


  • 参考書

  • 動画学習サイト

  • テキスト学習サイト

  • フォローすべきqiitaアカウント

  • その他、無料で転がってる有益資料

をそれぞれ徹底網羅しました!

Pythonに興味ある人は是非御覧ください!