Adobe CS6のパッケージ版やCreative Cloudのサービス開始は明日11日ですが、一足先にFireworks CS6の体験版がダウンロードできるようになったので、さっそく試しに使ってみました!

結論から先に書くと、アプリ・サイトのスマホ案件での効率化に力を発揮しそうです。

しばっちが驚いた!これはすごいランキング

実際に1日試用して、「これは!」というものをランキング形式で紹介していきます。

1位:CSS3プロパティパネルがPhotoshopライブ効果もカバー

今回の目玉機能ですが、実際に触るまではピンときませんでした。しかし、半年ぐらい前にリリースされたものと大きく変わっています。

これまではCSS3のプロパティでは不要なコメントやベンダープレフィックスが必ずコピーの対象になっていましたが、CS6ではコメントの有無ベンダープレフィックスの有無を個別に設定できるようになりました。またエフェクトがCSSプロパティにリアルタイムに反映できるようになってます。

そして。
Photoshop ライブ効果の次の4つのエフェクトがCSSプロパティの対象になってます。

  • ドロップシャドウ
  • シャドウ(内側)
  • 光彩(外側)
  • 光彩(内側)

CSS3プロパティでの出力例

background-color:rgb(170,191,87);
width:141px;
height:141px;
box-shadow:0px 0px 5px 0px rgba(229,255,153,0.5) ,0px 2px 3px 0px rgba(0,0,0,0.3) ,inset 0px 0px 5px 0px rgba(0,140,35,0.75) ,inset 0px -2px 25px 0px rgba(255,210,77,0.75);

背景色にrgb形式使うの?っていう疑問はありますが、シャドウ・光彩系が使えるのは嬉しいですね。ちなみに、Fireworksのライブエフェクトと混同してもCSSプロパティにはしっかりと反映されていました。

2位:ストロークと塗りが別々に透過指定可能に

最初に使ってまず驚いたのは、カラーパレットが刷新されてます!

そしてもっと驚いたのは、ストロークと塗りの透過指定ができるようになっています。
上のスクリーンショットは塗りの設定パネル、下のスクリーンショットはストロークの設定パネルです。

さらにCS5のときでも便利でしたが、カラーコードのコピー形式が16進数とrgba形式と2つ用意されています。

3位:グラデーションの数値指定が可能に

グラデーションの位置はこれまで拡張機能を使うことで細かい指定が可能でした。しかし、今回は拡張機能なしで数値指定できるようになっています。位置はもちろん、グラデーションの角度が指定できました。ただし、どちらも整数でのみの入力になってます。

ほかにもFireworks CS6で驚いたこと

  • CSS Spriteネイティブ対応
  • 拡張子.fw.png→保存する際の拡張子が選べるようになってます。
  • プリセットのパターンや共有ライブラリに色々追加

とくに共有ライブラリはかなり増えてます。スマホアプリ向けのiOSのボタンやワイヤーフレーム系のものが増えてます。よりモック制作に近いものが作りやすくなったのではという感想です。

旧バージョンとの互換性

私は主にWindows 7 64bit版 + Fireworks CS5という環境でCS6の体験版をインストールして検証してみました。

拡張機能

以前ブログで紹介した拡張機能はすべてCS6でも使えました。知らないうちにアップデートしてる拡張機能もあるので、改めて拡張機能をインストールしてみるのもいいのではと思います。

Fireworks CS5で制作したデータの読み込み

CS5で制作していたデータは問題なく開けました。あまり心配はしてませんでしたが、移行を検討している方は一安心といったところだと思います。

まとめ

今回はAdobe Creative Cloudの発表イベントまで行ってきましたが、Fireworksについてのお話は本当に短かったので、どれだけ変貌を遂げているのかすごく気になっていました。

今のところ、購入するなりCreative Cloudを利用するなりして「CS6がほしい!」という頭です。増えつつあるスマホアプリ・スマホサイト案件には必須のツールになるのではと思ってます。