ADC OnAir Season2 vol.01 - Adobe Edge Reflow

RWDのワークフローのおさらい

•早めの段階でのプロトタイプ
設計がキモ

•デザインカンプ、各デバイス
ごとに作ってられない

•デザイナー/実装者の相互理解

従来通りの

ワークフローでは

無理が生じてくる

Adobe
Edge
Reflow

レスポンシブWebデザイン
煩雑になるワークフローの救世主？

ほんの少し触ってみましょう

何ができる？
コードを記述することなく、

• Break Point (Media Queries) の設定

• 可変グリッドに沿ったボックスの配置

• Fluidな画像の挿入

• box-shadow, text-shadow,border-radius
など、CSS3による装飾

他製品との連携も

• CSSスニペットの生成 ( → DWなどへ)
• ブラウザでのPreview
• Edge Web Fonts サービスの導入
• Edge Inspect との連携による、実機での
リアルタイム確認

Edge Inspect との連携による
実機でのリアルタイム確認

直接Previewできる！

でも
まだまだ、プレビュー版。
お忘れなく。

どういったケースで

使える？

デザイナー・ディレクターが
クライアントワークで使ってみる

• コードを書く必要がないので、本実装に
入る前のプロトタイプ設計に使える

• 実際に動くデザインカンプの代わり、と
して使える

つまり、ワークフロー上の早い段階で
レスポンシブのイメージを共有する
ためのプロタイプ作りに最適
（と思う）

こんなケースには向いていない

• コーダーやエンジニアが、本実装の
オーサリングツールとして使う

• コードを直接調整できない
• サイト定義的な、複数ページの制作に
非対応

• まだまだ操作性がいまいち
• だって、プレビュー版ですから

あくまで、「デザイン(設計)ツール」
としての位置づけ

こんな感じで
育ってほしい
(個人的には)

プロトタイピングツール
としての機能向上求む！

• CSSでの装飾機能よりも、レイアウト
機能に柔軟さを

• モジュール(ステンシル)機能
• 複数人でのコラボレーション機能

CSSフレームワークの
取り込みできたらなぁ

• 主要なフレームワークの Components
を流用できたら神ツール

Edge シリーズは
ユーザーの声を多く拾っていく
コンセプトとのこと

みんなで使って育てましょう

Adobe Edge Reflow
でよりよいワークフローを

Recommended