作成日

24 October 2012

ADC MEETUP Round 06「CREATE THE WEB TOUR」のセッション5では、アドビ システムズのシニアプロダクトマネージャー・Jacob Surber氏より、レスポンシブWebデザインの制作をサポートする新しいツール「Adobe Edge Reflow」の紹介が行われました。

(01:50)まず最初に、ユーザの閲覧環境の推移について説明が行われました。デスクトップ(水色の線)に比べて、モバイル(黒い線)は急激に伸びており、2015年には、両方合わせて35億台に達すると予想されています。このユーザの閲覧環境の変化に対応していく上で重要となるのが、「レスポンシブWebデザイン」だとSurber氏は語ります。

(02:50)レスポンシブWebデザインとは、Ethan Marcotte氏が提唱したデザイン手法で、次の3つの原則があるとのこと。


 ・可変かつフレキシブルなグリッド
 ・フレキシブルな画像
 ・メディアクエリー


レスポンシブWebデザインの名前には「デザイン」とありますが、デザイナーだけが責任を負うのではなく、それに関わるライター/デザイナー/デベロッパーの全員が責任を負い、次のように協力することで実現できるデザインであるとSurber氏は語ります。



 ・ライター:スクリーンサイズに合わせて、どのようなコンテンツ構成にするかを考える。
 ・デザイナー:そのコンテンツ構成を、異なるスクリーンサイズに対応できるようにする。
 ・デベロッパー:要件の条件(対応ブラウザー)を考慮しながら、組み立てていく。

(06:00)Surber氏によれば、このレスポンシブWebデザインを作成するプロセスは2つのステップに分けることができるそうです。1つ目のステップが「Exploration(探り出す)」。このステップは、各デバイスを利用する際のユーザニーズを考慮して、スクリーンサイズに合わせたコンテンツ構成や、メッセージを出す位置やタイミングを考える作業。その作業に役立つツールとして、Photoshop/Illustrator/Fireworksがあります。

2つ目のステップが「Creation(制作)」。このステップは、スッテプ1での成果物を、HTML5/CSSを使って、さらに様々なブラウザー環境に対応しながら形にする作業。この作業に役立つのが、新しいツール「Adobe Edge Reflow」とのことです。Surber氏は、Edge Reflowの特徴として次の4つを挙げています。


 ・HTMLデザインサーフェス
 ・フレキシブルなグリッドシステム
 ・インテリジェントなWebレイアウト
 ・デザインとタイポグラフィ

(10:20)「HTMLデザインサーフェス」とはキャンバスの特徴のことで、Edge Reflowのそキャンバスの表示はブラウザーと同じようにレンダリングされるほか、キャンバス横のつまみで横幅のリサイズができるようになっています。そして、キャンバスにカラム数などのグリッドシステムを設定し、キャンバスをリサイズしながら素材を配置していきます。

その際に役立つ機能として、Surber氏が強調したのが「ビジュアル・メディアクエリー・ブレークポイント」。キャンバスの上側にあるカラーバーに、キャンバスをリサイズしながら素材を配置してブレークポイントを設定すれば、バックグラウンドで必要なCSSを生成してくれるそうです。

(11:30)続いて、「インテリジェントなWebレイアウト」について。Edge Reflowでは、XY座標での配置ではなく、デフォルトでは%単位でコンテナdivなどの要素を配置していきます。コンテンツのサイズ/マージン/パディングが%単位で設定されていれば、キャンバスをリサイズすると、コンテンツも自動でリサイズされ再表示されるようになっています。

(13:30)「デザインとタイポグラフィ」のデザイン面では、キャンバスに配置した要素に対して、カラーやドロップシャドウといったCSSのスタイルをGUIで設定できるほか、設定したスタイルを個別のインスタンスとして持ち、見比べることができるようになっています。

タイポグラフィ面としては、Edge Reflowには「Edge Web Fonts」の機能が組み込まれています。

(15:50)続いて、Edge Reflowで作成したサンプルのデモと、Edge Reflowの基本操作やサンプルの作成方法について説明が行われました。モバイル向けの画面まで横幅を縮めると、それに合わせてレイアウトが変化し、モバイル画面に適した表示に自動で切り替わります。

(25:30)Edge Reflow上では、ブレークポイントごとに実際の見え方をビジュアル的に確認しながら各コンテンツをレイアウトしていきます。

モバイル向けまで伸縮した状態の画面の設計例です。

(29:20)その時点で適用されているCSSを表示し、コピーすることもできます。

最後に、今後の計画が紹介されました。コピー&ペーストやUndo/Redo、ビジュアルスタイルガイド、要素ライブラリ、スタイル管理、複数ページへの対応などといった機能の実装が予定されているとのこと。

近いうちにEdge Reflowのプレビュー版がリリースされる予定で、実装して欲しい機能などについてフィードバックをいただきたいとのことです。

関連ADC記事(Dreamweaver記事より):
可変グリッドレイアウトで実現するレスポンシブWebデザイン(前編)
可変グリッドレイアウトで実現するレスポンシブWebデザイン(後編)