Adobe セッション for Enterprise x HTML5 Web Application Conference 2014

© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

ゼロコーディングでブラウザ動作プロトタイプを作る最新の Web 制作ツール仲尾毅｜ Adobe Creative Cloud エバンジェリスト


自己紹介

電気電子工学専攻 → Pro Video SE → Product Marketing → Evangelist

興味は、ユーザーと創り手 ( エンジニア ) のクロスポイント Creative Cloud 道場ブログ http://blogs.adobe.com/tnakao/ Creative Cloud 道場 on USTREAM 毎週木曜夜 8 時趣味は、バンド、ビデオ、 Mac

@tsuyon仲尾毅

Tsuyoshi NakaoAdobe Creative Cloud エバンジェリスト

http://blogs.adobe.com/tnakao/



新 Web 標準と Adobe の取り組み

- ツール・貢献 -


新 Web 標準と Adobe の取り組み

- ツール・貢献 -

DIGITAL CREATIVE TOOLS


Adobe & HTML5- 新しい Web 標準と Adobe の取り組み -


Adobe の活動

contribute to a better web

better web experience

bring innovations to the web

better tools for the webウェブのためのより良いツールウェブへの革新を提供

より良いウェブに貢献

より良いウェブ体験を


Contributing to the web ウェブへの貢献

表示ブレンドモード

カスタムフィルターClip Paths

レイアウトCSS RegionsCSS Shapes

プラットフォーム

Apache Cordova(PhoneGap)

コミュニティー＆テスト Test the Web Forward

Web Platform ドキュメンテーション


CSS フィルター

Web の進化の事例：


CSS フィルター


filter: sepia(0.8);


カスタムフィルター



CSS シェイプ


現状の対応： Chrome, Opera （有効に設定する必要がある）

Webkit （ナイトリービルド）


CSS Regions


現状の対応： iOS7 （標準対応！）

IE 、 Safari （プレフィックス）

Chrome, Opera （有効に設定する必要がある）Webkit （ナイトリービルド）


Edge Animate 、 Reflow でビジュアルに作る


Reflow でビジュアルに作る


Adobe & HTML5

contribute to a better web

better web experience

bring innovations to the web

better tools for the webウェブのためのより良いツールウェブへの革新を提供

より良いウェブに貢献

より良いウェブ体験を


業務系アプリの課題- 使い勝手の重要性 -


業務アプリケーションが成し遂げるべき事






業務アプリケーション開発の要件定義

機能

• アプリケーションで実行可能な業務機能

非機能

• 保守 / 運用 / 信頼 / セキュリティなど

ユーザビリティ

• 使い勝手




開発

• コスト• リソース• 時間

運用

?



http://builder.japan.zdnet.com/ria-ajax/20381355/1/


ユーザビリティ向上に必要な開発プロセス

プロトタイピング

デザインカンプ

UI UX


ユーザビリティ向上に必要な開発プロセス

要件定義プロトタイピング評価


情報設計

画面設計

デザインカンプ実装テスト

問題発生 !


情報設計

画面設計


実装( テスト )

プロトタイプ

( テスト )

画面設計

プロトタイプ

( テスト )

工程を分割し何度も回す


Tools- ウェブのためのより良いツール -


Tools

Edge Animate CC

Adobe Edge Tools & Services

洗練された最先端の Web を構築するための最新ツール & サービス

Edge Reflow CC Edge Code CC Edge Inspect CC

Edge Web Fonts Typekit PhoneGap Build


アプリパッケージ化Web フォント

各ツールの役割

情報設計画面設計実装テスト

リッチコンテンツ制作


アプリパッケージ化Web フォント

各ツールの役割

情報設計画面設計実装テスト

リッチコンテンツ制作


メディアクエリーによるレスポンシブデザインを直感的な操作で定義。 CSS パネルでスタイル設定も思いのまま。Edge Inspect 連携によるスマホ上でのリアルタイムプレビューも強力。

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

プレビュー版


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

PC 上のブラウザから、コネクションを張った全てのデバイスのブラウジング、 Web インスペクト、スクリーンショットをリモート操作。


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

PC 上のブラウザから、コネクションを張った全てのデバイスのブラウジング、 Web インスペクト、スクリーンショットをリモート操作。


DEMOEdge Reflow CC と Edge Inspect CC によ

る、

プロトタイプ制作と実機テスト


情報設計

画面設計


実装( テスト )

プロトタイプ

( テスト )

画面設計

プロトタイプ

( テスト )

工程を分割し何度も回す


まとめ

ユーザビリティ向上圧倒的費用対効果

UI/UX デザイン低コストで実現

コーディングゼロで実働プロト作成


Edge Animate CC

Adobe Edge Tools & Services

洗練された最先端の Web を構築するための最新ツール & サービス

Edge Reflow CC Edge Code CC Edge Inspect CC

Edge Web Fonts Typekit PhoneGap Build



ツールの入手は Creative Cloud から

30 日間無償体験Edge Reflow CC Preview と Edge Code CC

Preview はその後も無償 !

creative.adobe.com


リソース

Adobe & HTMLhtml.adobe.com/jp

Adobe Pinch Inwww.adobe.com/jp/jos/

pinchin.html

仲尾毅 Tsuyoshi Nakao@tsuyon | [email protected]



appendix- その他の Edge Tools & Services -


Edge Code CC超軽量コードエディター

プレビュー版

HTML / CSS / JavaScript を効率よくコーディングしていくための、全く新しいコードエディター。


Edge Animate CCHTML5 アニメーション制作ツール

HTML5 / CSS3 / JavaScript によるアニメーションやインタラクティブコンテンツを直感的なタイムライン操作で制作。


フリー・オープンソースHTML5 モバイルアプリ開発フレームワーク



クラウド上でパッケージを生成build.phonegap.com

PhoneGap Build

Technology

Adobe セッション for Enterprise x HTML5 Web Application Conference 2014