SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

CodeZineニュース

アドビ、改称を発表してから初のリリースとなるWebアニメーション制作ツール「Animate CC」を2月9日に提供開始

  • このエントリーをはてなブックマークに追加

  • このエントリーをはてなブックマークに追加

 アドビ システムズは2月8日、Web制作ツールに関する報道関係者向けの会見を開き、ベクターアニメーション制作ツール「Animate CC」と、ノンコーディングWeb制作ツール「Muse CC」の最新情報を発表した。

 いずれもAdobe Creative Cloudのサービスの一つとして、2月9日の午後2時からアップデート提供される予定。

アドビが提供する3大Web制作ツール:Muse CC、Dreamweaver CC、Animate CC
アドビが提供する3大Web制作ツール:Muse CC、Dreamweaver CC、Animate CC

 Animate CCは、従来「Flash Professional」と呼ばれていたFlashコンテンツの制作ツールで、2015年11月末に改称が発表された。この名前を冠したリリースとしては今回が初となる。

 名称変更の理由について、シニアプロダクトマーケティングマネージャーのリッチ・リー氏は、「Web業界で標準となりつつあるHTML5など、現在は対応する出力フォーマットが多岐にわたっており、制作対象がFlashコンテンツに限定される印象を与えることを避けるため」と説明した。現状でも、Flash Professionalで制作されたコンテンツの約1/3はHTML5だという。

米アドビ システムズ ウェブ&アニメーションツール シニアプロダクトマーケティングマネージャー リッチ・リー(Rich Lee)氏

米アドビ システムズ ウェブ&アニメーションツール 
シニアプロダクトマーケティングマネージャー リッチ・リー(Rich Lee)氏

 一方で、「SWF(Flashコンテンツ)やAdobe AIR(マルチプラットフォーム対応のアプリ実行環境)を切るわけではない」と、既存ユーザーへ対する継続的なサポートも明言した。

 Animate CCは、今回の名称変更にも表されているように、SWFやAdobe AIRの他、HTML5、WebGL、SVG(アドオン対応)など、昨年から既に様々なプラットフォームに対応しており、一度制作したアニメーションを様々なファイル形式で出力することができる。

HTML5 Canvas、WebGL、SVGなど、さまざまな出力フォーマットでコンテンツを書きだせる
HTML5 Canvas、WebGL、SVGなど、さまざまな出力フォーマットでコンテンツを書きだせる

 今回のアップデートでは、ブラシ関係が大きく強化された。

 例えば、従来のペイントブラシツールは、描画した対象が塗りとして扱われ、描画後の修正は輪郭を変更する形だった。新しいペイントブラシでは、ストロークをパスとして扱うことで描画後に線として修正でき、オブジェクトとして描画する指定も行えるようになった。

ペイントブラシで従来のように描画して変型させた線(上段)と、パスとして描画した線(中段)
ペイントブラシで従来のように描画して変型させた線(上段)と、パスとして描画した線(中段)

 ブラシライブラリが追加され、プリセットとして用意されたさまざまな線種により表現の幅が広がった。モバイルアプリのCapture CCを使えば、簡単にカスタムベクターブラシも作れる。

チョークの線のブラシを適用した例(左:適用前、右:適用後)。シンプルな画像の雰囲気を簡単に変えられる

チョークの線のブラシを適用した例(左:適用前、右:適用後)。
シンプルな画像の雰囲気を簡単に変えられる

 アドビのクラウドサービス「Creative Cloud」を介してアセットを共有できる「CCライブラリ」にも対応し、他のアドビツールや、ストックフォトサービスの「Adobe Stock」との連携も行いやすくなっている。Adobe Stockでは、写真、イラスト、ビデオの他、ベクター画像の素材を提供しており、パーツごとの編集が容易でアニメーションに活用しやすい。

 「4Kなどの高解像度のビデオ書き出し」「オニオンスキンのカラー表示」「ステージの回転、リサイズ、基点の変更」「スウォッチのタグ付け」「ボーンツールの復活」といった機能強化も行われた。

オニオンスキンのカラー表示(未来のフレームは緑、過去のフレームは青)、アウトライン表示にも対応
オニオンスキンのカラー表示(未来のフレームは緑、過去のフレームは青)、アウトライン表示にも対応
Shift+スペース+マウス操作でステージを回転し、描画しやすい角度に変更できる。機種によっては2本指での回転操作にも対応

Shift+スペース+マウス操作でステージを回転し、描画しやすい角度に変更できる。
機種によっては2本指での回転操作にも対応

スウォッチのタグ付けで、色を一括変更した様子(ビルの窓をまとめて暗くした)
スウォッチのタグ付けで、色を一括変更した様子(ビルの窓をまとめて暗くした)

 SWFファイルをSVGにエクスポートする際、すべてをベクター画像として吐き出すとパフォーマンスが落ちてしまうことがあったが、今回追加された「HTML5 Canvasスプライトシート」機能を使うと、一部を画像に変換してパフォーマンスを良くしたり、ファイルサイズを削減したりすることができる。

 また、Animate CCで作成したアニメーションを共通フォーマットの「OAMファイル」として書き出し、Dreameweaver CC、Muse CC、InDesign CCで再利用できるようになった。

 一方、Muse CCはノンコーディングでWeb制作を行えるオーサリングツールで、今回レスポンシブWebデザインに対応した。

 裏側のコードを気にせずに素材を自由に配置し、直感的な操作でコンテンツを作れるため、紙のデザインを行うユーザー層を中心に利用されている。こちらもCCライブラリ、Adobe Stockとの連携機能が追加された。

Muse CCでレスポンシブWebデザイン対応を行っている様子
Muse CCでレスポンシブWebデザイン対応を行っている様子

 デモを担当したマーケティングマネージャーの轟啓介氏は、「ノンコーディングで直感的に扱えるWeb制作ツールで、レスポンシブWebデザインに対応したのはMuse CCが初めてだと思う。コーディングが苦手なデザイナーだけではなく、ランディングページやキャンペーンページのように、メンテ不要なWebページを短納期で作る必要がある場合などに、ぜひ使ってみてもらいたい」と述べた。

 機能詳細は、アドビ製品の最新情報を紹介する「Adobe Creative Station」でも後日紹介される予定。

 
【関連リンク】
Adobe Creative Cloud
Adobe Muse CC
Adobe Creative Station

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
この記事の著者

斉木 崇(編集部)(サイキ タカシ)

株式会社翔泳社 ProductZine編集長。1978年生まれ。早稲田大学大学院理工学研究科(建築学専門分野)を卒業後、IT入門書系の出版社を経て、2005年に翔泳社へ入社。ソフトウェア開発専門のオンラインメディア「CodeZine(コードジン)」の企画・運営を2005年6月の正式オープン以来担当し、2011年4月から2020年5月までCodeZine編集長を務めた。教育関係メディアの「EdTechZine(エドテックジン)」...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/9240 2016/02/08 21:20

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング