アドビシステムズは14日（現地時間）、「Adobe Creative Cloud」加入メンバーに、ほぼすべての画面サイズを対象としたWebサイトやコンテンツを作成できるレスポンシブWebデザインツール「Adobe Edge Reflow」（プレビュー版）の提供を開始した。あわせて、「Adobe Edge Animate」「Adobe Dreamweaver」、および「Adobe Edge Code」（プレビュー版）のアップデートを行っている。
「Adobe Edge Reflow」は、直感的に使えるサイズ変更可能なデザインサーフェスを持ち、レイアウトやビジュアルがさまざまな画面サイズにおいて、どのように見えるかを確認できる。CSSが持つ機能を最大限に活用し、Webデザインを忠実にネイティブなデザインサーフェス上に作れる。
ブラウザでのプレビューや、「Edge Inspect」と連携したリアルタイムでのデザイン検証、「Edge Code」「Dreamweaver」など、他のコードエディタでも利用可能なCSS抽出によって、開発過程を通じてデザインのビジョンを維持できる。
「Adobe Edge Animate」はアップデートによって、グラデーション、CSSフィルタ、フォント対応の強化を含むCSSをベースにした強力な機能が追加された。円形または線形のグラデーションでのエレメントのスタイルとアニメーションの設定や、新しいインターフェース内で「Edge Web Fonts」をライブでプレビュー可能となっている。
さらに、CSSフィルタを新たにサポートし、ぼかし、グレースケール、セピア、ブライトネス、コントラスト、色相循環、反転、彩度など、最新のWebkitブラウザのCSS機能を活用できる。
「Adobe Dreamweaver」のアップデートでは、「Adobe Edge」ツールおよびサービスとの互換性を向上するとともに、コードオーサリングとワークフローを改善する機能を追加した。可変グリッドレイアウトでは、IDタグに加えてクラスタグの利用が可能となり、新しい編集インターフェースを採用している。さらに、「Edge Web Fonts」のプレビューや選択、Dreamweaverプロジェクトへの導入も用意になった（欧文フォントのみ）。
「Adobe Edge Code」（プレビュー版）では、コード編集の結果をただちにブラウザで確認できるライブプレビューを新たに加え、ファイル間を行き来することなくコンテキスト内でコードの編集が可能なクイック編集を搭載する。アップデートによって、CSSプロパティとHTMLタグおよび属性のコードヒント機能を追加し、Web規格の下で作業を行うWebデザイナーやデベロッパーにとっての生産性を高めている。
Edge Animate、Edge Inspect、Edge Reflowは現在、無償メンバーシップでも利用できる。
【関連リンク】
・アドビシステムズ
・「Adobe Creative Cloud」
この記事は参考になりましたか？
- この記事の著者
-
CodeZine編集部（コードジンヘンシュウブ）
CodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
