ユーザの反応性の良いWebサイトを作る: Adobe Creative CloudにEdge Reflowが加わる

adobe-creative-cloud

Adobeの会員制サービスCreative Cloudは、有料会員が32万5000、無料会員が100万となり、大成功だ。今日(米国時間2/14)同社は、そこでデザイナーやデベロッパが使えるプロダクト集合を更新し、新たにAdobe Edge Reflowの初の公開プレビューを加えた。これは、対話的というよりもむしろ、ユーザの‘反応性の良い’(responsiveな)Webサイトを簡単に作れるためのデザインツールだ。

Edge Reflowについて同社が最初に語ったのは昨年の9月だったが、今月初めの記者発表の席でAdobeの製品開発担当VP Paul Gubbayが述べたところによればそれは、反応性の良いレイアウトやデザインについて一般的に理解しているデザイナー向けのツールだ。それは反応性の良いレイアウトを作るための、きわめてビジュアルなツールで、大画面からラップトップ、タブレット、携帯など、どんなデバイス上で見ても見栄えの良いサイトを作れる、という。

Reflowを使う場合デベロッパは、コンテンツの流れを自分の目で確かめて、特定の画面サイズにブレークポイントを設ける。そうすることによって、それをモバイル優先にするのか、デスクトップ優先にするのかを決められる。このツールでは、そういう操作をもっぱらビジュアルに行う。たとえば、右側のバーを左へドラッグすると仮想画面が小さくなり、そういう小さな画面でのコンテンツの流れを確認できる。また、マージン、フォント、シャドウといった基本的なデザイン要素のほかに、CSS成分の取り出しや操作もできる。それに、リアルタイムプレビューツールEdge Inspectを深いレベルで統合しているので、作ったものの結果をすぐにブラウザ上で確認できる。

Reflowは今すでに、無料アカウントも含めて、Creative Cloudの会員全員が利用できる

EdgeReflowPreview_Responsive_021413

またこれと同時に、HTML5の対話的アニメコンテンツを作るAdobe Edge Animateもアップデートされ、ビジュアルなフォントセレクターやCSSの新たな機能がサポートされる。CSSのグラデーションやフィルタもサポートされるので、ぼかし効果などを簡単に作れる。またフォントとしては、同社が無料で提供しているEdge Web Fontsサービスの豊富なフォントも容易に利用できる。

Dreamweaverでもやはり、これらのフォントがサポートされ、またグリッドレイアウトがアップデートされて可変グリッドを作れるようになった。

さらに、コードエディタEdge Code Previewもアップデートされ、今度からは、どこかを書き換えるとその結果がすぐブラウザ上に反映するようになった。コードヒントが提供されるCSS成分とHTMLタグの種類も増えた。このエディタの対応言語はHTML、CSS、そしてJavaScriptだが、エディタ自身がHTML5で書かれている。そしてもっともクールな新機能はQuick Editだろう。これはユーザがファイルをいちいち切り替えなくても、一つのコンテキストの中でコードをエディットできるという、すぐれものだ。

EdgeAnimate_UI_021314

[原文へ]
(翻訳:iwatani(a.k.a. hiwa))