Web Premium CS4 ここが便利になった!
by 株式会社ワン・トゥー・テン・デザイン

みなさん、もう「Adobe Creative Suite 4 Web Premium」を触っていただけましたでしょうか? Flashを始めとした各アプリケーションにおいて、ユーザのみなさんが新たな表現を追求し、これまで以上に作業を効率化できるように、さまざまな機能追加、機能改善を行いました。このAdobe Creative Suite 4 Web Premiumの魅力を制作現場のリアルな視点から伝えたい。そこで、京都を拠点として活動し、多種多様なサイトを手掛けている株式会社ワン・トゥー・テン・デザインさんにレビューをお願いし、プログラマーの長井健一さんとシニアディレクターの澤井宏和さんに、それぞれ「便利になった」と感じたポイントを5つ挙げていただきました。

ここが便利になった! by 長井健一

1. 何と言っても新しいFlashのアニメーション!!

Flash CS4の最大の魅力はやっぱり、これまでと全く違うほどの進化を遂げたタイムラインアニメーション編集ですね。実案件での使用はまだですが、モーションエディタによる細かいアニメーション制御、簡単な3D操作、そしてボーン。これらを組み合わせるだけで、Flashデザインの表現力が格段に上がるのは間違いないと思います。さらに素敵なのは、これらの機能はActionScript 2.0の案件でも使えるところです(3Dやボーンなど、Flash Player 10のAPIに関連するものは除く)。Flash Playerのバージョンに依存しないところはヤバいです。本当にドキドキしますね。

モーションエディタの画面
モーションエディタの画面。アニメーションを細かく制御することができます

弊社の場合、FlashデザイナーとFlashデベロッパー がチームを組んで案件にのぞむケースが多々あります。これまではActionScript 3.0の記述がどこまでできるか(TweenerやTweenMaxなどのアニメーションライブラリを使えるか)が1つのポイントだったので、デザイナーには敷居が高かったと言えます。そういったワークフローの改善が期待されるので本当に嬉しい限りです。

2. Flashのライブラリの複数設定

地味かもしれませんが、これまで存在していなかった「ライブラリの複数シンボルの一括設定」。CS4からは、念願のこの機能がしれっと実装されています。 これで、複数のビットマップのスムージング設定や、複数のMovieClipへのクラス指定が可能となり、わざわざJSFLに頼る必要がなくなりました。

複数のビットマップのプロパティを編集中
複数のビットマップのプロパティを一括設定できるようになりました

過去に制作しましたサイト「BUILD UP!」には、コラージュを構築するアニメーションがあります。もちろん、Flashデザイナーがトゥイーンでコツコツ作ったものですが、当時複数シンボルの設定ができれば、ビットマップアセットを一括でスムージング設定したりして、作業をより迅速に行えただろうに・・・と非常に悔やまれます。

BUILD UP!のサイト
BUILD UP!のサイト。このコラージュを構築するアニメーション作成も、CS4ならもっと簡単にできそうです

3. Soundbooth CS4で高まり、Flash CS4で広がる可能性

体験版触りました。Soundbooth CS4、スゴいです! CS3のときからSoundboothを触っていますが、音楽に関する知識が少ない私でも簡単に音を編集することができる素晴らしいソフトでした。CS4ではマルチトラックの編集が可能となるだけでなく、ASNDファイルによるプロジェクト管理など、ますます使いやすくなっています。

Soundbooth CS4のスクリーンショット
Soundbooth CS4では、マルチトラックに対応しているので音の編集が便利になりました

最近手掛けた「第五十六回全日本剣道選手権大会」では、サイトBGM・効果音の作成にSoundbooth CS3を使っています。BGMは実際に剣道をしている風景の音をいくつか合成して作ったのですが、CS3はシングルトラックのため合成が難しく、マルチトラックは切望していた機能でした。

第五十六回全日本剣道選手権大会のサイト
第五十六回全日本剣道選手権大会のサイト。サイトのBGMには、音楽ではなく「剣道の音」を使っています

また、CS3では音データをそのまま編集する方式でしたが、ASNDファイルでは素材音源データを管理できるため、さまざまな状態の音を作成することができ、作業効率が上がりそうで楽しみです。

4. DreamweaverでのSVN管理

いろいろなイベントで東京の著名なクリエイターさんとお話をする機会があるのですが、多くの方が「SVNでバージョン管理をしています」とおっしゃるんですよね。それをキッカケに私もSVNによる管理を始めたのですが、少し難しく、特に「社内のデザイナーには敷居が高いのかな」と思っていました。今回Dreamweaver CS4でSVNがサポートされたので、これを機にデザイナーにも浸透していくことを期待しています。実際にSVNはとても便利ですからね。

サイト定義 サブバージョンの設定画面
サブバージョンの設定画面。SVNを使えば、ファイルのバージョン管理が便利になります

5. Flash Player 10向けのActionScriptの新API

これは便利かというと少し違いますが、ActionScriptのAPIが増え、ActionScriptでの表現が増えたことは嬉しい限りです。3D表現や新しい描画システム、音の生成など、勉強しなくてはならないことも多いですが、楽しみの方が強いですね。頑張って寝ずに覚えようと思います!

ここが便利になった! by 澤井宏和

1. Photoshopの3Dデザイン機能

3D表現を取り入れたFlashコンテンツが増えてきています。今までのPhotoshopは3D空間のデザインが苦手で、変形ツールを使用するか、3Dソフトで作成したオブジェクトを貼り付けるなどしてデザインを行っていました。Photoshop CS4では3Dを作成できるようになり、より効率的かつ緻密にデザインやレイアウトを行えるようになりました。

Photoshop CS4の3Dオブジェクト
Photoshop CS4では3Dオブジェクトを作成できるようになりました

弊社が手掛けた「Pokemon World Championships 2008 Archives」では、よりアクティブなバトル感を演出するため、3D空間に写真を配置しました。制作初期段階では、クライアントにデザインとFlashのモックアップの両方を見てもらいながら進めていたのですが、やはりデザインとモックアップの3D表現に違いがあることで誤解が生じたりしてしまいました。このとき、Photoshopの3D機能があれば、より精密なデザインを元に確認作業やオーサリングが進められ、より短期間で制作できたのではないかと思います。

2. Adobe Media Encoderでh.264のエンコードが可能に

Flash CS3まで付属していた「Flash CS3 Video Encoder」ではh.264コーデックでのエンコードができず、Flash Player 9.0.115から搭載された再生能力を十分に生かすことができませんでした。そのため、他社のツールを使用して書き出していたのでワークフローが分断されることがありました。今回のバージョンからh.264コーデックで書き出すことが可能になり、ムービーの迫力や表現力を十分に発揮することができるようになっています。

Adobe Media Encoderの書き出し設定画面
Adobe Media Encoderの書き出し設定画面。h.264コーデックを選べるようになりました

また、on2コーデックでもCBR/VBRの選択に加え、1pass/2passを選択することができ、案件や状況にマッチするクオリティの高い映像を準備することができるようになっているのはうれしいですね。

3. PhotoshopとFireworksの連携で資料作成をスムーズに

Fireworks CS4では、アプリケーションエンジンが根本から見直され、psd形式のファイルをレイヤー構造など維持したままダイレクトに読み込めるようになっています。これまでは、Photoshopで作成したサイトデザインを提案書に落とし込むときは「書き出し」でJPGやPNGなどに変換し、プレゼン用ツール(PowerPointなど )に貼り付ける作業が発生していました。今後はデザインを書き出す必要なく、Fireworksのページ機能でサイトのモックアップを作成しつつPDFなどに書き出しを行うことで、効率よく「デザイン→提案書」への落とし込みができるようになります。

Fireworks CS4の書き出しダイアログ
Fireworks CS4ではPDF形式で書き出しができるようになり、クライアントとのコミュニケーションがはかどりそうです

また、Fireworks CS4には、サイト内でよく使用するアイコンやフォームの部品などもアセットとしてデフォルトで登録されているので、Photoshopで大枠をデザインし、Fireworksで部品を配置するといったそれぞれの役割を生かした効率的なデザインワークが可能になったと思います。

4. Device Centralの自動確認機能で、携帯端末だけではなくPSPなども視野に入れた開発が可能に

Device Central CS3までは、動作確認作業を始める前に対象とする機種ごとにチェックを入れる必要がありましたが、タスクを登録することでさまざまな機種でのチェックを自動化して進めることが可能になっています。おかげで、キャリア間、端末間での見え方調整や確認をよりスムーズに進めることができ、スピーディーな制作が可能になると思います。

また、オンラインライブラリから必要なデバイスを選んでダウンロードができるようになり、モバイル端末だけでなく、PSPやWiiなどの端末もサポートされ、より効率の良いワークフローが期待できそうです。

実際、バスキュールさんと共に手掛けたコンテンツ「AXE CHOCOMAN HUNTER 」ではDevice Centralを利用して動作確認を進めましたが、対応機種が多く、チェックにかなりの時間を費やしました。そうしたケースも、自動化機能を使用することで確認時間を減らし、その分クオリティアップに時間を充てることができるようになると思います。

Device Central CS4

モバイルコンテンツAXE CHOCOMAN HUNTER を作成する際にはDevice Central CS3で動作確認を行いました。CS4では、自動確認機能で動作確認作業が短縮でき、その分クオリティアップに時間を費やすことができそうです

5. FlashとDreamweaverのインターフェイス刷新

それぞれのインターフェイスが他のCreative Suite製品群と統一されています。そのおかげで、ユーザによるツール切り替えなどの煩雑さやマウスコントロールの負荷が軽減され、ストレスのない制作ができるようになったと思います。

さらにFlashにおいては、数値入力部分がホットテキストになり調整が素早くできるようになっていますし、四則演算に対応したので計算のスピードが上がっているなど、かなりの効率化を期待できそうです。

関連リンク



株式会社ワン・トゥー・テン・デザイン
インタラクティブコンテンツ制作を強みとするWebプロダクションです。サイトを訪れる方々の記憶に残り、驚きをもたらすコンテンツの制作に日々励んでおります。Webデザイン、モーションデザイン、インタラクティブデザインの3つの部署に分かれ、それぞれが新しい知識、技術を習得し、独自の知恵を生み出しています。

長井健一氏と澤井宏和氏 写真

長井 健一(写真左)
インタラクティブデザイングループ プログラマー

複数のFlashデザイナーが携わるチーム開発を中心に活躍しています。最近は可能な限りデザインレベルからの連携を目指しています。おもしろくて伝わるWebが作りたいです。

澤井 宏和(写真右)
シニアディレクター

デザイナー、プログラマー、Flashクリエイターを経て現職。29歳。主にFlashによる表現を用いたプロモーションサイトの企画、制作を手がけています。週末は専門学校で講師を勤め、後進の育成にも力を注いでいます。面白くて伝わる何かが作りたいです。