View
4.515
Download
2
Category
Preview:
DESCRIPTION
2013/2/15にリリースされたレスポンシブWebデザイン専用ツールのEdge Reflow preview版の話を含む制作ツールのご紹介。
Citation preview
無償でここまで使えるアドビの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/
Recommended