正式版がリリースしたAvocodeの便利な使い方をご紹介(コリス限定の優待コードもあるよ)

制作の効率が劇的にアップする『Avocode』の正式版が、1/29にリリースされました!
Avocodeは簡単に言うと、PSDのプレビューや書き出しをPhotoshop無しで行うもので、書き出しは画像だけでなく、SVGやCSSにも対応しています。画像のスライスやスタイルシートのコーディング作業がググッと楽になるWin/Mac/Linux対応のアプリです。

正式版で、特に大きく変わったのがデザイナー用簡単GitHub。これは無料で単体利用できる機能で、PSDファイルの共有やリビジョン管理が非常に簡単にできます。

ベータ版の時から、そして正式版がリリースされてからみっちりと試したので、Avocodeの使い方や登録方法を紹介します。

サイトのキャプチャ

Avocode

Avocodeには無料と有料のプランがあり、有料プランの優待コードがコリスのビジター限定でもれなく使用できます。無料プランだけを使ってもよし、有料プランの無料お試しをして気に入ったら優待コードで購入してもよし、です。
デザイナーやディレクターは無料プラン、コーダーは有料プラン、という感じでしょうか。

開発はMadeBySource、彼らはPNG Hat, CSS Hat, Subtle Patterns PS Pluginなどウェブ制作に役立つツールを数多く開発しているので、知っている人も多いと思います。
関連記事:PNG Hat, CSS Hat, Subtle Patterns PS Plugin

Avocodeの特徴:Web制作のフローが楽になる

Avocodeには、大きく分けて3つの機能があります。

デザインファイルからエクスポート(for コーダー・デザイナー):有料・無料お試し
PSDやSketchファイルをPhotoshopやSketch無しで開き、画像のスライス/SVG/CSSなどページ用のパーツがエクスポートできます。
レイヤーは全て保持された状態で、作業が行えます。
デザインファイルの管理(for デザイナー、プロジェクト関係者全員):無料
ひと言で言うと、デザイナー用簡単GitHub。
メンバーであればどこからでもアクセスでき、ブラウザ上でPSDを表示でき、ファイルのバックアップ・レビジョン管理にも対応しています。
この機能が無料で利用できるのは非常に便利です。この機能だけの利用でもOK!
エディタ(for コーダー):実装予定
デザインファイルからのエクスポートだけでなく、エディタ機能も実装が予定されています。Atom Editorが統合予定で、コーダーがばりばり使えると思います。
サイトのキャプチャ

Avocodeの画面
PSD上のエレメントを指定するだけで、画像やSVGやCSSにエクスポートできます。
インターフェイスも非常に優れており、直感的にさくさく操作できると思います。動作も軽いです!

サイトのキャプチャ

PhotoshopやSketchなどのデザインファイルに100%対応。レイヤーはそのまま扱えるので、書き出し用に統合する必要はありません。
OSもMac, Windows, Linux対応、UIは同じなので操作性に戸惑うこともありません。

サイトのキャプチャ

デザインファイルの管理は「Project Manager」。
デザイナーは作成したデザインファイルをPhotoshopから1クリックでアップロードでき、プロジェクトメンバーと共有できます。ファイルの更新・修正などのアップデートはどこからでもでき、ファイルのバックアップやリビジョン管理もできます。

「Project Manager」にはMac, Windows, LinuxのAvocodeからだけでなく、ブラウザからのアクセスも可能でPhotoshop無しでPSDファイルの表示・チェックができます。DropBoxも対応予定です。

Avocodeは無料版と有料版がある【コリス限定優待コード】

Avocodeのプランは大きく分けて2種類、無料プランと有料プラン。
有料プランは2週間の無料お試しがあります(2015年2月現在)。

サイトのキャプチャ

Avocodeのプラン一覧

Designer: $0/mo
  • プロジェクト数:無限
  • デザインファイルの管理
Developer: $20/mo
  • プロジェクト数:無限
  • デザインファイルの管理
  • デザインファイルのエクスポート・エディタ
Startup: $90/mo
Developerの5ユーザー用のお得プランです。
Company: $150/mo
Developerの10ユーザー用のお得プランです。
10ユーザー以上の「Enterprise」も用意されています。

有料プランはすべて、コリスのビジター限定の優待コードで30%オフになります!

Avocode 優待コード
coliss
  • 有効期間は、一年間。
  • 利用回数の制限は、無し。
  • 当ブログ(//coliss.com/)からの利用のみ有効

優待コードの使い方(Avocodeへのユーザー登録)

  1. まずは、Avocodeにサインアップします。
    Avocode サインアップページ
    ※サインアップにはFacebook or Twitter or GitHub or メールアドレスが必要です。
  2. Avocodeにログインします。
    Avocode ログインページ
    Avocodeにログインすると、「Avocode Manager」が表示されます。
Avocode Managerのキャプチャ

Avocode Manager
※サインアップしてからでないと、表示されません。

右上のアイコンをクリックし「Setting」をクリックすると、Settingページが表示されるので、左メニューから「Payment」を選択します。
そこでプランを選択し、お支払の「Enter Cregit Card」をクリックします。

サイトのキャプチャ

「Do you have a promo code?」をクリックすると、上記のコード入力が表示されるので、Promo Codeに「coliss」を入力し「Apply Code」をクリックすると、30%オフが適用された額になります。
上記では「$27.00」が、「$18.90」になっています。
あとは、クレジットカードの情報などを入力してご購入ください。

Avocodeの使い方

Avocodeのインターフェイスは、3ペイン。
左:レイヤーパネル、左下:ツール
中央:ドキュメント
右:エクスポートパネル

Avocodeのキャプチャ

Avocodeのインターフェイス

Avocodeを使った一連の流れを見てみましょう。
まずは、デザインファイルが無いと始まらないので無料素材を使用します。

Photoshopのキャプチャ

PhotoshopでPSDを開いたとこ
素材:DIFF PSD Template

PhotoshopからAvocodeプラグイン(無料)を使うと、1クリックでAvocode Managerにアップロードできます。
プラグインは、Avocode Managerからダウンロードできます。

Photoshopのキャプチャ

Avocodeプラグインでアップロード

アップロードはPhotoshop無しでも、ブラウザでのアップロードにも対応しています。DropBoxにも対応予定です。アップロードしたファイルはAvocode Managerからもアクセス可能ですが、ブラウザ経由の直接アクセスできる短縮URLも生成されます。

アップロードが完了したら「Add to Project」をクリックする(もしくは自動で)と、プロジェクトの選択画面が表示されます。
既存プロジェクトから選択するか、新規プロジェクトを作成し、ファイルを設置します。

Avocode Managerのキャプチャ

Avocode Manager: プロジェクトの選択

ファイルをプロジェクトに登録したら、すぐに反映されます。

Avocode Managerのキャプチャ

Avocode Manager: ファイルのアップロード完了

プロジェクトの数は無制限で、参加メンバーはプロジェクトごとに設定できます。

Avocode Managerのキャプチャ

Avocode Manager: メンバーの招待

アップロードしたファイルはブラウザ上で管理が可能で、ファイルの削除、ファイル名の変更、プレビュー、レビジョンの管理ができます。

Avocode Managerのキャプチャ

Avocode Manager: ファイルの管理

ファイルのプレビューは、Photoshop無しでブラウザ上で見ることができます。
チームのメンバー全員がPhotoshop無しで、PSDを見ることができるのは便利ですね。

Avocode Managerのキャプチャ

Avocode Manager: PSDファイルのプレビュー

では、Avocodeでデザインファイルからエクスポートしてみます。
Avocodeを起動すると、参加しているプロジェクトが一覧で表示されます。

Avocodeのキャプチャ

Avocode: プロジェクト一覧

プロジェクトを選択すると、ファイルが表示されるので、使用するファイルを選択します。

Avocodeのキャプチャ

Avocode: PSDを開いたとこ

拡大・縮小、メジャー、カラーピッカーなど、デザインファイルを確認するのに必要なツールは全て揃っています。

ファイル内・レイヤー名・フォントなどは、日本語に対応しています。

Avocodeのキャプチャ

Avocode: PSDのレイヤー名は日本語でもOK

PSDファイルは、レイヤーの表示・非表示にも対応しているので、ラスタライズしていないと開けないとかはありません。

Avocodeのキャプチャ

Avocode: レイヤーの表示・非表示

では、ファイルをエクスポートしてみます。
スライスする画像を選択します。選択方法は画像を直接選択してもいいし、レイヤーを選択してもできます。

Avocodeのキャプチャ

Avocode: 画像の選択

選択するだけで、右パネルにエクスポートした時のレビュー、CSSのコードなどが表示されます。

右パネルの「Export now」をクリックします。

Avocodeのキャプチャ

Avocode: エクスポートの選択

画像の書き出しは、PNG, JPEG, SVGから選択でき、倍率も選択できます。

エクスポートした際の書き出し時のルールは、そのエレメントごとに自動保存されます。
この画像の書き出し時のファイル名なんだっけ?という人にも安心の機能です。

Avocodeのキャプチャ

Avocode: 書き出し時のルールはエレメントごとに自動保存

他にも、かゆいところに手が届くような機能を備えています。
PSD内のテキストデータは1クリックでコピーでき、エレメントのサイズやカラーも1クリックでコピーできます。

Avocodeのキャプチャ

Avocode: 日本語フォントでも無問題

書き出すCSSは、Less, Sassにも対応しています。

Avocodeのキャプチャ

Avocode: Less, Sassにも対応

最後に近日、実装が予定されているエディタのUIもご紹介。

サイトのキャプチャ

GitHubのAtom Editorの統合予定は、4月です(先取り情報)。

sponsors

top of page

©2018 coliss