ADC OnAir Season2 vol.01 - Adobe Edge Reflow

Adobe Edge Re!ow

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

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

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

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

従来通りの

ワークフローでは

無理が生じてくる

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

AdobeEdge

Re!ow

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

何ができる？

• 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 Re!owでよりよいワークフローを