2012/02/20のADC OnAir Season2 vol.01 のスライドです。

1. Adobe Edge Reflow

2. RWDのワークフローのおさらい
•早めの段階でのプロトタイプ
設計がキモ
•デザインカンプ、各デバイス
ごとに作ってられない
•デザイナー/実装者の相互理解

3. 従来通りの
ワークフローでは
無理が生じてくる

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

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

6. 何ができる？
コードを記述することなく、
• Break Point (Media Queries) の設定
• 可変グリッドに沿ったボックスの配置
• Fluidな画像の挿入
• box-shadow, text-shadow,border-radius
など、CSS3による装飾

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

8. Edge Inspect との連携による
実機でのリアルタイム確認
直接Previewできる！

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

11. どういったケースで
使える？

12. デザイナー・ディレクターが
クライアントワークで使ってみる
• コードを書く必要がないので、本実装に
入る前のプロトタイプ設計に使える
• 実際に動くデザインカンプの代わり、と
して使える

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

14. こんなケースには向いていない
• コーダーやエンジニアが、本実装の
オーサリングツールとして使う
• コードを直接調整できない
• サイト定義的な、複数ページの制作に
非対応
• まだまだ操作性がいまいち
• だって、プレビュー版ですから

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

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

17. プロトタイピングツール
としての機能向上求む！
• CSSでの装飾機能よりも、レイアウト
機能に柔軟さを
• モジュール(ステンシル)機能
• 複数人でのコラボレーション機能

18. CSSフレームワークの
取り込みできたらなぁ
• 主要なフレームワークの Components
を流用できたら神ツール

19. Edge シリーズは
ユーザーの声を多く拾っていく
コンセプトとのこと
みんなで使って育てましょう

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