Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
694
Help us understand the problem. What is going on with this article?
@ulwlu

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

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


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

[プログラマー]

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

[デザイナー]

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

[ディレクター]

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

[誰でも全員]

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

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

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

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

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

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

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

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

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

これらの全てのファイルを一元化する事が可能です。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3235373130382f30306433393761382d356630652d353964312d633066302d3330376635356338616138662e706e67.png

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

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

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

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

XDのデザインスペックは、これまでデザイン共有で最もよく用いられていたサービスです。
しかし実際は要素クリックした後に、値が出るだけでCSSコードは自分で書く手間が必要でした。
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 要相談
    • 個別サポート

まとめ

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

周囲のエンジニアや会社様に絶賛布教中ですが、皆からいい反応を沢山頂きました。もし興味をもった方はぜひ無料期間を利用して試してみてください。

694
Help us understand the problem. What is going on with this article?
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
ulwlu
uzabase
企業活動の意思決定を支える情報インフラの提供

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
694
Help us understand the problem. What is going on with this article?