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

ゼロコーディングでブラウザ動作プロトタイプを作る最新の 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 エバンジェリスト

新 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/

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

プロトタイピング

デザインカンプ

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

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

情報設計

画面設計

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

問題発生 !

情報設計

画面設計

実装( テスト )

プロトタイプ

( テスト )

画面設計

プロトタイプ

( テスト )

工程を分割し何度も回す

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 | tnakao@adobe.com

appendix- その他の Edge Tools & Services -

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

プレビュー版

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

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

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

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

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

PhoneGap Build

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

Technology

Html5 versus Adobe Flash

キフカッション塩尻セッション１

Concentrated HTML5 & Attractive HTML5

Sammenligningsoversikt for Adobe Buying Programs€¦ · Adobe ColdFusion-familien Adobe Flash Builder-familien Adobe Font Folio Adobe FrameMaker-familien Adobe FreeHand Adobe Photoshop

セッション「NW.js スタートアップ」資料

BGP ネイバーセッションオプションの設定...BGP ネイバーセッションオプションの設定 BGP ネイバーセッションオプションの設定に関する情報4

0.$1234 · • Adobe Captivate • Adobe Fireworks • Adobe Framemaker • Adobe Fuse • Adobe Illustrator • Adobe InCopy • Adobe InDesign • Adobe Lifecycle Designer • Adobe

HTML5マークアップ珍プレー集 - HTML5 Conference 2012

PUB HTML5 - lib.kmutt.ac.th · WHAT IS PUB HTML5? PUB HTML5 . คือ เครื่องมือสําหรับการสร างหนังสืออีเล็กทรอนิกส

Shibuya,trac セッション

HTML5. Waarom HTML5 nu relevant is voor jóu

VisualStudio2010ReadyDay Azureセッション資料

html5-ClickTag Anleitung extern - griephan.de · ClickTag-Einbindung (Verlinkung des Banners) • Die DVV Media Group GmbH empfiehlt den Export von html5-Bannern mit Adobe Animate

ABS2015 のセッション紹介

HTML5 소개 및 배우기- HTML5 Open Conference

HTML5? HTML5!

Word camptokyo2012セッション資料

Adobe RoboHelp (2017 release)...Générer un contenu interactf épi oustouflant avec la publicatoi n HTML5 de nouvelle génération Créez des mises en page Responsive HTML5 de nouvelle

Internet Week 2016 セッション総括「IPv6関連3セッション」

CreateJS勉強会 (第8回)「Adobe Animate CCで制作するHTML5 Canvas入門編」