レスポンシブウェブを支援するアドビの「Edge Reflow」の注目点 - (page 2)

杉山貴章（オングス）

2012-09-27 14:42

Reflowがレスポンシブなウェブデザインをサポート

　Reflowではデフォルトで可変グリッドレイアウト機能が適用される。これはコンテンツのサイズをグリッドベースで詳細に調整できるようにするためである。

　グリッドの幅などはフレキシブルに設定することが可能。レイアウトの定義は当然CSSで行われる。その他にメディアクエリのブレイクポイントを設定できる「Visual Media Query Breakpoint」を備えるほか、マージンやパディングなどといったCSSスタイルもパネル上から簡単に設定することができる。

可変グリッドによるフレキシブルなレイアウト設計
グリッドのオプションも自由に変更可能

　これらの機能を活用することで、画面の大きさごとのレイアウトの設定が極めて直感的に行えるようになるという。レイアウトの変更はリアルタイムにプレビューされるため、実際の画面でどのような表示になるのかが簡単に確認できる。

　興味深い点としては、同じEdgeの仲間である「Adobe Edge Web Fonts」を利用する機能がすでに組み込まれていることが挙げられる。Web Fontsはフリーなウェブフォントの数々を極めて簡単に利用できるサービスで、これもReflow同様にCreat the Webの場で初めて発表された。

　Reflowには、Web Fontsからフォントを選んで設定するパネルが用意されているという。したがって、通常のエディタでフォントを選ぶのと同様の感覚で、オンラインでアクセス可能なウェブフォントを設定できるのである。

　それぞれが特定のタスクにフォーカスして提供されるEdgeのツール群だが、ニーズがあればお互いに連携するための機能も提供されるということだろう。もちろん、画面サイズごとにフォントを変更することも可能である。

Web Fontsとの連携で豊富なフォントが活用できる

開発はスタートしたばかり

　今回発表されたReflowは、Creative Cloudの無料メンバーシップに登録することで無償で試せる。ただし、現時点ではまだ“スニークピーク版”。これはプレビュー以前の、アイデアを形にしたプロトタイプといった位置付けのバージョンになる。したがって今後どのように変更が加わっていくのかはまだ分からない状態だ。

　Surber氏は、「まだ開発がスタートしたばかりで道のりは長い。やるべきことはたくさんある」と語る。実装すべき機能の一例としては、次のようなものが挙げられた。