Adobeが作ったHTML作成ツール、Edgeの本気度：D89クリップ（25）

HTML5ベースのアニメーション作成ツール、Adobe Edgeの完成度と、Flashとの使い分けについてプロダクトマネージャーに聞いた

LINE

Hatena

　アドビシステムズは2011年8月1日、HTML5ベースのアニメーション作成ツール「Adobe Edge Preview版」をAdobe Labsサイトで無償公開した。正式な製品化は2012年を予定している。

　これまでWeb用のアニメーション作成といえばAdobe Flash Professionalが独壇場だったアドビのツールラインアップに、新しい手段が加わることになる。Adobe Edgeとは何か、また、Flashとの使い分けはどうすべきなのか、アドビシステムズ Creative Suiteグループプロダクトマネージャーのデヴィン・フェルナンデス氏に話を聞いた。

「ゼロから開発したから動作が軽くてびっくりするでしょう」とフェルナンデス氏。インタビュー中にEdgeで簡単にアニメーションを作成して見せた

矢野　Adobe Edgeとはどんなツールですか？

デヴィン　HTML5によるアニメーションツールです。成果物にプロプライエタリな技術は一切含まない、HTML5、CSS3、JavaScriptをネイティブ活用したツールとなります。プロジェクトの最初からHTMLをそのまま活用できる、HTMLでデザインした絵をアニメ化できるというわけです。デザイナはスクラッチでアニメーションを作ることも、既存のHTMLをインポートして作ることもできます。

　現在は第1弾のリリース段階です。今後はコミュニティの声を拾い反映しつつ高頻度でフィーチャーを加える予定です。

　今回の初リリース版ではアニメーションに照準を当てた機能を搭載しました。インタラクティブ性の付与とか、シェイプの描画に関しては次のリリースで機能追加する予定です。2012年の商品化を目指します。

矢野　Adobe Edgeのツール構成を教えてください。

デヴィン　Adobe Edgeは「edgeファイル」を生成します。ただ、これは単なるストアファイルであり、コードは一切含まれていません。いったん保存したプロジェクトはこのedgeファイルから起動できます。パフォーマンス重視で開発していますから起動が速いでしょう？ユーザビリティの向上はこのツールのキモでもありますから。また、UIの構成はAdobe Flash ProfessionalやAdobe AfterEffectといった既存のツールから借りている箇所があるのでなじみもあるのではないでしょうか。

　HTMLの各要素は「エレメントパネル」というパネルでレイヤーのように表示されます。これはドキュメントオブジェクトモデル（DOM）をレイヤーで表現しています。

　アニメーションを作るデザインステージ（新規ファイル的な編集画面）はWebkitを搭載し、設定の結果が正確にレンダリングされるようになっています。

　UIの中心はタイムラインです。タイムラインにはフェイドイン、フェイドアウトといったアニメーション効果を調整する「フィルタ項目」が付いていて、直感的に効果が付けられます。

　再生ヘッドとマークというタイムライン上のツールを操作して、アニメーションの範囲を決めながら効果を付けます。例えば矩形をアニメーションさせたいときは、divでステージに矩形を描画しておき、タイムラインでアニメーションの効果と継続時間を調整するといった使い方をします。あるいは、SVGをインポートしてアニメーションの素材として活用することもできます。

　エレメントパネルに表示した要素を、このパネルから、例えば「＜div＞タグを＜p＞タグに」といったように変更することは、まだできません。まだアルファなので。ステージ上でアニメートできるのは矩形とテキストのみです。もしそれ以外の要素を使いたい場合は、Dreamweaverなどを使って途中までHTMLをコーディングしてから、そのファイルを開ける方法でお願いします。

　ちなみにアニメーションはJSONファイルとして書き出していて、宣言フォーマットを使ったアニメーションの開発や、モディフィケーションもできます。

Edgeを使うと、今まで半日かかっていた作業がタイムラインの操作であっという間に完結するという

矢野　本当にきれいなHTMLコードが生成されるだけなんですね。CSSまで精密に自動生成できるのには驚きました。

デヴィン　はい。HTML5＋CSS3のセットに対して動作に必要なJavaScript（jQuery）を自動的に付与するだけのシンプルさです。Edgeでゼロから作る場合div要素とテキストのアニメーションに限られますが、HTMLを別途用意すればクリックでポップアップするインターフェイスをイージング付きの動作で実装することも可能です。独自のコードは一切含みません。Webの標準的なコードのみです。

矢野　Adobeのツールで作るWeb用のアニメーション素材といえばやはりFlashを思い出しますが、FlashとEdgeの兼ね合いをどう考えればいいのでしょうか。

デヴィン　われわれは市場動向を見極めながらトレンドを踏まえて製品戦略を考えています。現在HTMLを使ってシンプルなアニメーションを作り、Web上で活用するというやり方が広まってきています。これはHTMLの将来性を示している用途であり、今後深化していく兆しがあります。この分野でWeb制作者がどう成功を収めるか、そこをアドビとしてはぜひお手伝いしたい。この変化は制作者としてはチャンスなんですね。

　ただ、アドビとしてはFlashを捨てようとしているわけでは決してありません。例えば3Dゲームとかビデオといった高度なコンテンツの分野でFlashの活用は今後も続きます。また、高品質なアプリ、データ志向型のアプリといったアプリ分野も同様です。そういった領域で今後もFlashが活用されるであろうということは、HTMLが不得意な分野もある、ということです。制作者もわれわれも両方カバーすることに意味がある。共存する時期は長く続くのです。

矢野　HTMLの可能性についてはいつごろから気になり始めたのでしょうか？

デヴィン　2004年くらいでしょうか。アドビはこの時期からHTML5に言及し始めています。ちょうど私がAdobe GoLive（Webオーサリングツール）のプロマネとしてアドビに入社したころですね。

　本格的な動きは2010年の4月から、Adobe Creative Suite 5が展開された後、HTML5を包含して製品群を展開しました。ここでjQueryとの協業を始めて、jQuery Mobileの展開に大きく貢献して……。

　その流れの中、アドビがツール開発を通して長く培ってきたタイポグラフィやレイアウトに対する経験をWebに生かす方法を考えるようになりました。その機能性をWebkit向けのレイアウト作りに活用できるんじゃないか？と。

　その観点から提供したWeb標準の仕様が「CSSリージョンズ」です（2011年3月にアドビシステムズがW3Cに提案し、「CSS Regions Module」としてCSS Working Groupに採択された新しいCSSのプロパティ群。テキストをシェイプに沿ってワープさせる手法や、段組みレイアウトの実装方法が示されている。プロパティの記述方法の例などは、Adobe LabsからCSS Regions Prototypeを入手して確認できる）。

　この技術は最終的には電子出版の実装技術として展開される予定ですが、その他のツールやフレームワーク、ランタイムにも活用の場が広がっています。こうした技術的な礎があって、EdgeのPublic版が登場したというわけです。

矢野　こうしたツールが登場した今ではコードが書けるというだけでは仕事にならない日が来そうですね。表現上の、何かクリエーティブなアイデアなどがやはり問われるような将来になりそうです。

デヴィン　そうですね。さらに今まで半日かかっていた作業がタイムラインの操作であっという間に完結するという、ワークフローの改善といった側面で見ても革新的です。これからユーザーの声をどんどん取り入れて、いっそうユーザビリティの向上に努めたいですね。

【関連記事】

jQuery＋PhoneGap＋Dreamweaverでスマホ開発？
D89クリップ（21）　jQuery Mobileとの連携機能搭載を宣言したDreamweaver CS5の今後の方向性や便利機能について聞いた。Dreamweaverは「IDE」になってしまうのか？
デザインハック＜リッチクライアント 2011/3/17

Adobe AIR/FlashはHTML5と連携しモバイルにも進出
HTML5が拓く新しいWeb（6.アドビ編）　最近HTML5やiPhoneと対立する論調が多いFlash。WebKit搭載のAIR 2やモバイル対応、Dreamweaverの今後も含めアドビに聞いた
デザインハック＜リッチクライアント 2010/4/12

FlashもHTML5/jQueryもスマホアプリに変えるCS5.5
アドビに聞く、ツールの使い分けポイント　Flash Pro/Flash Builder、Dreamweaver、シミュレータ「Device Central」を使ったスマホアプリ開発のポイントを聞いた
「Smart ＆ Social」フォーラム 2011/6/20

DreamweaverでjQuery Mobileアプリのネイティブ化
PhoneGapで始めるWeb→スマホアプリ制作入門（2）　Dreamweaver環境をセットアップし簡単なWebアプリを作ってAndroidで動くネイティブアプリにする手順を紹介します
「Smart ＆ Social」フォーラム 2011/8/30

著者プロフィール

矢野りん

デザイナ／Android女子部の部長

北海道足寄町生まれ。女子美術大学芸術学部芸術学科卒。講義活動を通してWebサイトなど情報デザインのトレーニングを担当しつつ、執筆活動を行う。adamrockerさんとの開発ユニット「rockrin'」のrinの方。近著に「WEBデザインメソッド−伝わるコンテンツのための理論と実践」（ワークスコーポレーション）がある。身長151cm

「次回」へ

「D89クリップ」バックナンバー

Adobeが作ったHTML作成ツール、Edgeの本気度：D89クリップ（25）

著者プロフィール

HTML5＋UX 記事ランキング