正式版がリリースしたAvocodeの便利な使い方をご紹介（コリス限定の優待コードもあるよ）
Post on:2015年2月12日
sponsors
制作の効率が劇的にアップする『Avocode』の正式版が、1/29にリリースされました！
Avocodeは簡単に言うと、PSDのプレビューや書き出しをPhotoshop無しで行うもので、書き出しは画像だけでなく、SVGやCSSにも対応しています。画像のスライスやスタイルシートのコーディング作業がググッと楽になるWin/Mac/Linux対応のアプリです。
正式版で、特に大きく変わったのがデザイナー用簡単GitHub。これは無料で単体利用できる機能で、PSDファイルの共有やリビジョン管理が非常に簡単にできます。
ベータ版の時から、そして正式版がリリースされてからみっちりと試したので、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が統合予定で、コーダーがばりばり使えると思います。
- Designer: $0/mo
-
- プロジェクト数：無限
- デザインファイルの管理
- Developer: $20/mo
-
- プロジェクト数：無限
- デザインファイルの管理
- デザインファイルのエクスポート・エディタ
- Startup: $90/mo
- Developerの5ユーザー用のお得プランです。
- Company: $150/mo
- Developerの10ユーザー用のお得プランです。
- 10ユーザー以上の「Enterprise」も用意されています。
- Avocode 優待コード
- coliss
- 有効期間は、一年間。
- 利用回数の制限は、無し。
- 当ブログ（//coliss.com/）からの利用のみ有効
- まずは、Avocodeにサインアップします。
Avocode サインアップページ
※サインアップにはFacebook or Twitter or GitHub or メールアドレスが必要です。 - Avocodeにログインします。
Avocode ログインページ
Avocodeにログインすると、「Avocode Manager」が表示されます。
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月現在）。
有料プランはすべて、コリスのビジター限定の優待コードで30%オフになります！
優待コードの使い方（Avocodeへのユーザー登録）
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を使った一連の流れを見てみましょう。
まずは、デザインファイルが無いと始まらないので無料素材を使用します。
PhotoshopでPSDを開いたとこ
素材：DIFF PSD Template
PhotoshopからAvocodeプラグイン（無料）を使うと、1クリックでAvocode Managerにアップロードできます。
プラグインは、Avocode Managerからダウンロードできます。
Avocodeプラグインでアップロード
アップロードはPhotoshop無しでも、ブラウザでのアップロードにも対応しています。DropBoxにも対応予定です。アップロードしたファイルはAvocode Managerからもアクセス可能ですが、ブラウザ経由の直接アクセスできる短縮URLも生成されます。
アップロードが完了したら「Add to Project」をクリックする（もしくは自動で）と、プロジェクトの選択画面が表示されます。
既存プロジェクトから選択するか、新規プロジェクトを作成し、ファイルを設置します。
Avocode Manager: プロジェクトの選択
ファイルをプロジェクトに登録したら、すぐに反映されます。
Avocode Manager: ファイルのアップロード完了
プロジェクトの数は無制限で、参加メンバーはプロジェクトごとに設定できます。
Avocode Manager: メンバーの招待
アップロードしたファイルはブラウザ上で管理が可能で、ファイルの削除、ファイル名の変更、プレビュー、レビジョンの管理ができます。
Avocode Manager: ファイルの管理
ファイルのプレビューは、Photoshop無しでブラウザ上で見ることができます。
チームのメンバー全員がPhotoshop無しで、PSDを見ることができるのは便利ですね。
Avocode Manager: PSDファイルのプレビュー
では、Avocodeでデザインファイルからエクスポートしてみます。
Avocodeを起動すると、参加しているプロジェクトが一覧で表示されます。
Avocode: プロジェクト一覧
プロジェクトを選択すると、ファイルが表示されるので、使用するファイルを選択します。
Avocode: PSDを開いたとこ
拡大・縮小、メジャー、カラーピッカーなど、デザインファイルを確認するのに必要なツールは全て揃っています。
ファイル内・レイヤー名・フォントなどは、日本語に対応しています。
Avocode: PSDのレイヤー名は日本語でもOK
PSDファイルは、レイヤーの表示・非表示にも対応しているので、ラスタライズしていないと開けないとかはありません。
Avocode: レイヤーの表示・非表示
では、ファイルをエクスポートしてみます。
スライスする画像を選択します。選択方法は画像を直接選択してもいいし、レイヤーを選択してもできます。
Avocode: 画像の選択
選択するだけで、右パネルにエクスポートした時のレビュー、CSSのコードなどが表示されます。
右パネルの「Export now」をクリックします。
Avocode: エクスポートの選択
画像の書き出しは、PNG, JPEG, SVGから選択でき、倍率も選択できます。
エクスポートした際の書き出し時のルールは、そのエレメントごとに自動保存されます。
この画像の書き出し時のファイル名なんだっけ？という人にも安心の機能です。
Avocode: 書き出し時のルールはエレメントごとに自動保存
他にも、かゆいところに手が届くような機能を備えています。
PSD内のテキストデータは1クリックでコピーでき、エレメントのサイズやカラーも1クリックでコピーできます。
Avocode: 日本語フォントでも無問題
書き出すCSSは、Less, Sassにも対応しています。
Avocode: Less, Sassにも対応
最後に近日、実装が予定されているエディタのUIもご紹介。
GitHubのAtom Editorの統合予定は、4月です（先取り情報）。
sponsors
