無償でここまで使えるアドビのWeb制作ツール

- Adobe Edge ツール & サービス -アドビ システムズ 株式会社

Developers Summit 2013

Who?- 轟 啓介（とどろき けいすけ）- アドビのデベロッパーマーケティング

- 担当はFlashからHTML5まで多岐

- 前職は開発者

- Java/J2EE（7年）、AS3/Flex/AIR（2年）

- HTML/JS/PHPなどは必要な範囲で

- USTREAM番組「ADC OnAir」MC

- http://onair.adobe-adc.jp/

@keisuke322

【緩募】都内で流しソーメンを食べられる店情報を夏までにください。

さて、HTML5。

勉強してますか？

さて、HTML5。

色んなことができそう。

でも、生産性は？

Modern Web NeedsModern Tools

Adobe Edge ツール & サービス

Edge Animate 1.0 Edge Reflowsneak preview

Edge Codepreview

Edge Inspect 1.0

PhoneGap BuildTypekitEdge Web Fonts

洗練された最先端のWebサイトを構築できる新しいツール&サービス

Sep 26, 2012 - Debut

Adobe Edge ツール & サービス

Edge Animate 1.5 Edge Reflowpreview

Edge Codepreview 3

Edge Inspect 1.2

PhoneGap BuildTypekitEdge Web Fonts

洗練された最先端のWebサイトを構築できる新しいツール&サービス

Feb 15, 2013 - Updated!

Adobe Edge AnimateHTMLアニメーションツール

•HTML5 / CSS3 / JavaScript によるインタラクティブコンテンツの制作ツール

•Web制作者の作業効率を一気に上げる3つの機能

•タイムライン操作によるアニメーション設定•プロパティ単位のキーフレーム編集 / イージング機能 / ピンツール etc

•JavaScript スニペット•JSが苦手な人でも基本的なスクリプトを一発挿入

•HTML5非対応ブラウザーのフォールバック設定•代替画像設定、hrome Frame プロンプト設定にも対応

Adobe Edge AnimateHTMLアニメーションツール

アニメーションバナー（スマホでも動作）

既存サイトへのアニメーション追加

アニメーション /ゲームコンテンツ

押井守監督「ちまみれマイ・らぶ」Comic Animation電子出版コンテンツ

Adobe Edge AnimateHTMLアニメーションツール

•グラデーションサポート

•CSSの線形/円形グラデーションに対応

• Edge Web Fonts サポート

•Anプロジェクトへのタイポグラフィ導入を簡単に提供（英文fontのみ）

• CSS Filter サポート

•反転、色相循環、コントラスト、彩度、セピア、グレースケール、など* Chrome, Safari, iOS 6, BlackBerry 10のみ

Adobe Edge AnimateHTMLアニメーションツール

UPDATED!

HTML5 アニメーション

DOMアニメーション

Canvasアニメーション

+Flash Professional CreateJS

CSSアニメーション

DreamweaverCreateJSEdge Animate

Adobe Edge CodeHTML / CSS / JavaScript コードエディター

プレビュー版公開中

•HTML/CSS/JavaScriptで作られた超軽量コードエディター

•Web制作者の作業効率を一気に上げる2つの機能

•クイック編集•Cmd + E (Mac) / Ctrl + E (Win)

•カーソルのあるHTMLタグのCSSやJSのプロパティ、メソッドの定義をファイル切り替えせずにダイレクトに表示

•ライブプレビュー•Chromeブラウザと連携して、CSSの変更を保存する前にライブプレビュー

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

preview 3

•エディター機能強化

•エディターコアのCodeMirror ver. 3によるエディター機能の強化

• CSS コード補完強化、定義検索

•ネイティブ メニュー

preview 2 (2012/12/13)

•クイック編集にカラーピッカー追加

• Edge Web Fonts サポート

•プロジェクト設定（WebサーバーURL指定）

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

UPDATED!

Brackets- オープンソースのコードエディター

- Edge Codeはアドビ ディストリビューション

- http://brackets.io- Feature Backlog : http://bit.ly/BracketsBacklog

Brackets Adobe Edge Code

+ PhoneGap Build+ Edge Web Fonts

Adobe Edge ReflowレスポンシブWebデザイン専用ツール

プレビュー版本日公開NEW!

レスポンシブWebデザイン…- Webコンテンツを取り巻く環境- 各キャリアがスマホ販売戦略を拡大

- モバイルデバイスによるWebアクセスがPCを上回る

- 3Gエリアカバー率、LTEサービスの開始など

- Webコンテンツ提供側- 無視できなくなったモバイルデバイスの対応

- ただし、予算の大幅上乗せは見込めない

- 1ソース / マルチスクリーンのレスポンシブWebデザインに注目

- Webコンテンツ制作側- レスポンシブWebデザイン制作の壁にぶつかっている ←今ココ

- 決して簡単に制作できるものではない。だが、クライアントは理解していない…

レスポンシブWebデザインの壁- 情報デザインの壁- 閲覧デバイスが異なることで情報の優先度/重要度が変わることがある

- 例えば、外出先（スマホ）、リビング（ タブレット）、オフィス（ PC）という異なる状況によって、コンテンツの順序を変えたり、非表示にしたりする必要がある

- スマホとPCという大きく異なる画面サイズに最適化するコンテンツ量の検討が難しくなる。スマホで丁度良くても、PCではスカスカになってしまう、など。

- レイアウトデザインの壁- レスポンシブなレイアウトをデザインする際の想定イメージの乖離

- グラフィックデザインツールなどで各デバイスのレイアウトデザインを作成しても、実際にCSSでデザインを起こした際にイメージの乖離が発生することがある

- イテレーションの壁- ウォーターフォール型でなく、情報デザイン / レイアウトデザインをアジ

ャイル的に回そうとしても、レイアウト変更の再実装は容易ではない。

- クライアントやチーム内でのコンセプト共有にも時間がかかる。

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

Adobe Edge ReflowレスポンシブWebデザイン専用ツール

プレビュー版本日公開NEW!

レスポンシブWebデザイン専用ツール

•直感的にレスポンシブなレイアウトをデザインするツール

•Web制作者の作業効率を一気に上げる3つの機能

•ブレークポイント設定•ブレークポイントを定めて、ブラウザ幅に応じたコンテンツレイアウトを定義

•異なるスクリーン幅の「動く」デザインカンプを同時に作成

• CSSスタイル設定•様々なCSS3の設定に対応し、メディアクエリーで定義されたCSSも書き出し

•強力なプレビュー機能• PCブラウザだけでなく、Edge Inspect連携でスマホ、タブレット上で、リアルタイムにデザインを確認

プレビュー版本日公開Adobe Edge ReflowNEW!

無償ビルドの機能制限

* 2013年2月15日現在

無償ビルドは Creative Cloud の無償メンバーシップから入手

リリースビルド 機能制限

Edge AnimateHTML5アニメーションツール

1.5 なしAnimate 1.x は完全無償提供

Edge CodeHTML / CSS / JS コードエディタ

preview 3 なし

Edge Inspectモバイルサイトのリモート検証

1.2 同時接続デバイス1台

Edge ReflowレスポンシブWebデザインツール

preview なし

無償サービスの機能制限

サービス 機能制限

Edge Web Fonts無償のWebフォントサービス

正式現在は英文フォントのみ

なし

PhoneGap Buildクラウドでモバイルアプリを作成

正式 privateアプリ1つpublicアプリ無制限

* 2013年2月15日現在

Dreamweaver & Edge Tools

web workflow

統合制作環境

Dreamweaver

Edge Animate Edge Reflow Edge Code PhoneGap Build Edge Inspect

専用ツール

統合制作環境と専用ツールは役割が異なる。これらを自由に組み合わせて最適なワークフローを構築する事を提案。

Adobe Edge ツール & サービス

Edge Animate Edge Reflow Edge Code Edge Inspect

PhoneGap BuildTypekitEdge Web Fonts

洗練された最先端のWebサイトを構築できる新しいツール&サービス

http://onair.adobe-adc.jp

レスポンシブWebデザインのワークフロー徹底討論！（仮）

Vol. 01

Web情報番組「ADC OnAir」

Adobe & HTMLアドビのWebに対する取り組みや

Edge ツール & サービスの最新情報を掲載。

http://html.adobe.com/jp

ADCAdobe Developer Connection

Web技術ポータルサイト。著名クリエイター/開発者による技術記事を定期的に掲載。

http://www.adobe.com/jp/devnet/

HTML5 特設サイトHTML5関連のサンプルが入手できるサイト。

http://adobe-html5.jp