2013/2/15にリリースされたレスポンシブWebデザイン専用ツールのEdge Reflow preview版の話を含む制作ツールのご紹介。

1. 無償でここまで使える
アドビのWeb制作ツール
- Adobe Edge ツール & サービス -
アドビ システムズ 株式会社
Developers Summit 2013

2. Who?
- 轟 啓介（とどろき けいすけ）
- アドビのデベロッパーマーケティング
- 担当はFlashからHTML5まで多岐
- 前職は開発者
- Java/J2EE（7年）、AS3/Flex/AIR（2年）
- HTML/JS/PHPなどは必要な範囲で
@keisuke322
- USTREAM番組「ADC OnAir」MC
【緩募】都内で流しソー
- http://onair.adobe-adc.jp/ メンを食べられる店情報
を夏までにください。

3. さて、HTML5。
勉強してますか？

4. さて、HTML5。
色んなことができそう。
でも、生産性は？

5. Modern Web Needs
Modern Tools

6. Adobe Edge ツール & サービス
洗練された最先端のWebサイトを構築できる新しいツール&サービス
Edge Animate 1.0 Edge Reflow Edge Code Edge Inspect 1.0
sneak preview preview
Edge Web Fonts Typekit PhoneGap Build
Sep 26, 2012 - Debut

7. Adobe Edge ツール & サービス
洗練された最先端のWebサイトを構築できる新しいツール&サービス
Edge Animate 1.5 Edge Reflow Edge Code Edge Inspect 1.2
preview preview 3
Edge Web Fonts Typekit PhoneGap Build
Feb 15, 2013 - Updated!

8. Adobe Edge Animate
HTMLアニメーションツール

9. Adobe Edge Animate
HTMLアニメーションツール
• HTML5 / CSS3 / JavaScript によるインタラクティブコンテンツの
制作ツール
• Web制作者の作業効率を一気に上げる3つの機能
• タイムライン操作によるアニメーション設定
• プロパティ単位のキーフレーム編集 / イージング機能 / ピン
ツール etc
• JavaScript スニペット
• JSが苦手な人でも基本的なスクリプトを一発挿入
• HTML5非対応ブラウザーのフォールバック設定
• 代替画像設定、hrome Frame プロンプト設定にも対応

10. Adobe Edge Animate
HTMLアニメーションツール
アニメーションバナー 既存サイトへの アニメーション /
（スマホでも動作） アニメーション追加 ゲームコンテンツ
押井守監督「ちまみれマイ・らぶ」
Comic Animation
電子出版コンテンツ

11. !
TED
A
PD
U Adobe Edge Animate
HTMLアニメーションツール
• グラデーションサポート
•CSSの線形/円形グラデーションに対応
• Edge Web Fonts サポート
•Anプロジェクトへのタイポグラフィ
導入を簡単に提供（英文fontのみ）
• CSS Filter サポート
•反転、色相循環、コントラスト、彩
度、セピア、グレースケール、など
* Chrome, Safari, iOS 6, BlackBerry 10
のみ

12. HTML5 アニメーション
DOM Canvas CSS
アニメーション アニメーション アニメーション
+
Edge Animate CreateJS Flash Professional CreateJS Dreamweaver

13. Adobe Edge Code プレビュー版公開中
HTML / CSS / JavaScript コードエディター

14. Adobe Edge Code プレビュー版公開中
HTML / CSS / JavaScript コードエディター
•HTML/CSS/JavaScriptで作られた超軽量コードエディター
•Web制作者の作業効率を一気に上げる2つの機能
•クイック編集
•Cmd + E (Mac) / Ctrl + E (Win)
•カーソルのあるHTMLタグのCSSやJSのプロパティ、メソ
ッドの定義をファイル切り替えせずにダイレクトに表示
•ライブプレビュー
•Chromeブラウザと連携して、CSSの変更を保存する前に
ライブプレビュー

15. !
TED
A
D
U
P
Adobe Edge Code プレビュー版公開中
HTML / CSS / JavaScript コードエディター
preview 3
• エディター機能強化
• エディターコアのCodeMirror ver. 3による
エディター機能の強化
• CSS コード補完強化、定義検索
• ネイティブ メニュー
preview 2 (2012/12/13)
• クイック編集にカラーピッカー追加
• Edge Web Fonts サポート
• プロジェクト設定（WebサーバーURL指定）

16. Brackets
- オープンソースのコードエディター
- Edge Codeはアドビ ディストリビューション
- http://brackets.io
- Feature Backlog : http://bit.ly/BracketsBacklog
Brackets Adobe Edge Code
+ PhoneGap Build
+ Edge Web Fonts

17. !
EW
N
Adobe Edge Reflow プレビュー版本日公開
レスポンシブWebデザイン専用ツール

18. レスポンシブWebデザイン…
- Webコンテンツを取り巻く環境
- 各キャリアがスマホ販売戦略を拡大
- モバイルデバイスによるWebアクセスがPCを上回る
- 3Gエリアカバー率、LTEサービスの開始など
- Webコンテンツ提供側
- 無視できなくなったモバイルデバイスの対応
- ただし、予算の大幅上乗せは見込めない
- 1ソース / マルチスクリーンのレスポンシブWebデザインに注目
- Webコンテンツ制作側
- レスポンシブWebデザイン制作の壁にぶつかっている ←今ココ
- 決して簡単に制作できるものではない。だが、クライアントは理解して
いない…

19. レスポンシブWebデザインの壁
- 情報デザインの壁
- 閲覧デバイスが異なることで情報の優先度/重要度が変わることがある
- 例えば、外出先（スマホ）、リビング（ タブレット）、オフィス（ PC）という
異なる状況によって、コンテンツの順序を変えたり、非表示にしたりする必要が
ある
- スマホとPCという大きく異なる画面サイズに最適化するコンテンツ量の検討が
難しくなる。スマホで丁度良くても、PCではスカスカになってしまう、など。
- レイアウトデザインの壁
- レスポンシブなレイアウトをデザインする際の想定イメージの乖離
- グラフィックデザインツールなどで各デバイスのレイアウトデザインを作成して
も、実際にCSSでデザインを起こした際にイメージの乖離が発生することがある
- イテレーションの壁
- ウォーターフォール型でなく、情報デザイン / レイアウトデザインをアジ
ャイル的に回そうとしても、レイアウト変更の再実装は容易ではない。
- クライアントやチーム内でのコンセプト共有にも時間がかかる。

20. レスポンシブWebデザインを
もっと自由に、簡単に。

21. !
EW
N
Adobe Edge Reflow プレビュー版本日公開
レスポンシブWebデザイン専用ツール

22. !
EW
N
Adobe Edge Reflow プレビュー版本日公開
レスポンシブWebデザイン専用ツール
• 直感的にレスポンシブなレイアウトをデザインするツール
• Web制作者の作業効率を一気に上げる3つの機能
• ブレークポイント設定
• ブレークポイントを定めて、ブラウザ幅に応じたコンテンツレイアウト
を定義
• 異なるスクリーン幅の「動く」デザインカンプを同時に作成
• CSSスタイル設定
• 様々なCSS3の設定に対応し、メディアクエリーで定義されたCSSも書き
出し
• 強力なプレビュー機能
• PCブラウザだけでなく、Edge Inspect連携でスマホ、タブレット上で、リ
アルタイムにデザインを確認

23. 無償ビルドの機能制限
無償ビルドは Creative Cloud の無償メンバーシップから入手
リリースビルド 機能制限
Edge Animate 1.5 なし
HTML5アニメーションツール
Animate 1.x は完全無償提供
Edge Code preview 3 なし
HTML / CSS / JS コードエディタ
Edge Inspect 同時接続
モバイルサイトのリモート検証
1.2 デバイス1台
Edge Reflow preview なし
レスポンシブWebデザインツール
* 2013年2月15日現在

24. 無償サービスの機能制限
サービス 機能制限
Edge Web Fonts 正式 なし
無償のWebフォントサービス
現在は英文フォントのみ
PhoneGap Build privateアプリ1つ
クラウドでモバイルアプリを作成
正式 publicアプリ無制限
* 2013年2月15日現在

25. Dreamweaver & Edge Tools
統合制作環境 統合制作環境と専用ツールは役割
が異なる。
これらを自由に組み合わせて最適
なワークフローを構築する事を提
案。
Dreamweaver
web workflow
Edge Animate Edge Reflow Edge Code PhoneGap Build Edge Inspect
専用ツール

26. Adobe Edge ツール & サービス
洗練された最先端のWebサイトを構築できる新しいツール&サービス
Edge Animate Edge Reflow Edge Code Edge Inspect
Edge Web Fonts Typekit PhoneGap Build

27. Web情報番組「ADC OnAir」
Vol. 01
レスポンシブWebデザインの
ワークフロー徹底討論！（仮）
http://onair.adobe-adc.jp

28. Adobe & HTML
アドビのWebに対する取り組みや
Edge ツール & サービスの最新情報を掲載。
http://html.adobe.com/jp

29. ADC
Adobe Developer Connection
Web技術ポータルサイト。著名クリエイター/開発
者による技術記事を定期的に掲載。
http://www.adobe.com/jp/devnet/

30. HTML5 特設サイト
HTML5関連のサンプルが入手できるサイト。
http://adobe-html5.jp