ウェブデザインツール「Adobe Edge Reflow」提供--レスポンシブウェブに対応

田中好伸 (編集部)
2013-02-15 15:42:00
  • このエントリーをはてなブックマークに追加
最新特集【一覧】

 Adobe Systemsは米国時間2月14日、ウェブデザインツール「Adobe Edge Reflow」(プレビュー版)の提供開始を発表した。アニメーション作成ツール「Adobe Edge Animate」、オーサリングツール「Adobe Dreamweaver」、コードエディタ「Adobe Edge Code」(プレビュー版)もアップデートされ、新機能が追加されている。すべての製品がSaaS「Adobe Creative Cloud」に加入するメンバーに提供される。

 Edge Reflowは、CSSを使ったレイアウトやビジュアルデザイン作成のための新しい“レスポンシブウェブ”のデザインツールと説明。直感的に使用できるサイズ変更可能なデザインインターフェースを搭載し、レイアウトやビジュアルなどがさまざまな画面サイズでどのように見えるかを確認できる。現行の「Adobe CS5」の機能を活用することで、Edge Reflowを使って、ウェブデザインを忠実にネイティブなデザインインターフェース上で作成できるという。

 現在、スマートフォンやタブレットなどさまざまな端末がウェブにアクセスできるようになっている。アクセスしてくる端末は画面や解像度、向きなどが大きく異なる。そこで画面の大きさに応じて自動で調節して表示できることを目指してレスポンシブウェブが注目されるようになっている。

 アップデートされたEdge Animateでは、グラデーションやCSSフィルタ、フォント対応の強化を含めたCSSをベースにした機能が加わっている。円形や線形のグラデーションを使ってエレメントのスタイルとアニメーションを設定、新しいインターフェース内で「Adobe Edge Web Fonts」をライブでプレビューできるようになっている。

 CSSフィルタがサポートされるEdge Animateでは、ぼかしやグレースケール、セピア、ブライトネス、コントラスト、色相循環、反転、彩度などWebKitブラウザのCSS機能を活用できるようになっている。Edge Web Fontsは、AdobeのオリジナルフォントやGoogle Font APIによるオープンソースのフォントを利用可能にするツールだ。

 Dreamweaverは、Edge Reflowなどを含むツール群「Edge Tools & Services」との互換性を高めるとともにコードオーサリングとワークフローを改善する機能が追加されている。可変グリッドレイアウトでは、IDタグに加えてクラスタタグも利用できる。

 現在プレビュー版のEdge Codeには、コード編集の結果を即座にブラウザで確認できるライブプレビュー機能に加え、ファイル間を行き来することなくコンテキスト内でコードを編集できるクイック編集機能も搭載されている。CSSプロパティとHTMLタグ、属性のコードヒント機能も加わって、ウェブ規格の下で作業するウェブのデザイナーや開発者にとって、さらに生産性の高いコードエディタと説明している。

 Creative Cloudの個人向けプランは年間で月額5000円、1カ月ごとの月々プランは月額8000円となっている。グループ版は年間契約ベースで提供され、1ライセンスあたり月額9000円で利用できる。Edge AnimateやEdge Code、Edge Reflowなどの情報を獲得できるイベント「Adobe MAX」は米ロサンゼルスで5月4日から開催される。

  • 新着記事
  • 特集
  • ブログ