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

1,091 views
997 views

Published on

2014年2月28日開催のEnterprise x HTML5 Web Application Conference 2014
Adobe セッション スライドです。
タイトル「ゼロコーディングでブラウザ動作プロトタイプを作る最新のWeb制作ツール」
Edge ツールをご紹介

Published in: Technology

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

  1. 1. ゼロコーディングでブラウザ動作プロトタイプを作る 最新のWeb制作ツール 仲尾 毅 | Adobe Creative Cloud エバンジェリスト © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  2. 2. 自己紹介 @tsuyo 仲尾 毅 n Tsuyoshi Nakao Adobe Creative Cloud エバンジェリスト  電気電子工学専攻 → Pro Video SE → Product Marketing → Evangelist  興味は、ユーザーと創り手 (エンジニア) のクロスポイント  Creative Cloud 道場ブログ http://blogs.adobe.com/tnakao/  Creative Cloud 道場 on USTREAM 毎週木曜夜8時  趣味は、バンド、ビデオ、Mac © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  3. 3. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  4. 4. 新 Web 標準と Adobe の取り組み - ツール・貢献 - © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  5. 5. DIGITAL CREATIVE TOOLS 新 Web 標準と Adobe の取り組み - ツール・貢献 - © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  6. 6. Adobe & HTML5 - 新しい Web 標準と Adobe の取り組み - © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  7. 7. Adobe の活動 より良いウェブに貢献 contribute to a better web ウェブへの革新を提供 ウェブのためのより良いツール bring innovations to the web better tools for the web より良いウェブ体験を better web experience © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  8. 8. Contributing to the web ウェブへの貢献 表示 レイアウト ブレンドモード カスタムフィルター Clip Paths CSS Regions CSS Shapes プラットフォー ム Apache Cordova (PhoneGap) コミュニティー & テスト Test the Web Forward Web Platform ドキュメンテーション © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  9. 9. Webの進化の事例: CSS フィルター © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  10. 10. Webの進化の事例: CSS フィルター filter: sepia(0.8); © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  11. 11. Webの進化の事例: カスタム フィルター © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  12. 12. Webの進化の事例: CSS シェイプ 現状の対応: Chrome, Opera(有効に設定する必要がある) Webkit (ナイトリービルド) © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  13. 13. Webの進化の事例: CSS Regions 現状の対応: iOS7 (標準対応!) IE、Safari (プレフィックス) Chrome, Opera(有効に設定する必要がある) Webkit (ナイトリービルド) © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  14. 14. Edge Animate、Reflow でビジュアルに作る © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  15. 15. Reflow でビジュアルに作る © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  16. 16. Adobe & HTML5 より良いウェブに貢献 contribute to a better web ウェブへの革新を提供 ウェブのためのより良いツール bring innovations to the web better tools for the web より良いウェブ体験を better web experience © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  17. 17. 業務系アプリの課題 - 使い勝手の重要性 - © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  18. 18. 業務アプリケーションが成し遂げるべき事 © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  19. 19. 業務アプリケーションが成し遂げるべき事 © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  20. 20. 業務アプリケーションが成し遂げるべき事 © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  21. 21. 業務アプリケーション開発の要件定義 機能 • アプリケーショ ンで実行可能な 業務機能 非機能 • 保守/運用/信頼/ セキュリティ など © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. ユーザビリティ • 使い勝手
  22. 22. 業務アプリケーションが成し遂げるべき事 © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  23. 23. 開発 • コスト • リソース • 時間 © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 運用
  24. 24. 業務アプリケーションが成し遂げるべき事 http://builder.japan.zdnet.com/ria-ajax/20381355/1/ © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  25. 25. ユーザビリティ向上に必要な開発プロセス デザイン カンプ プロトタ イピング UI UX © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  26. 26. ユーザビリティ向上に必要な開発プロセス 要件定義 © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. プロトタ イピング 評価
  27. 27. 問題発生! 情報 設計 画面 設計 © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. デザイン カンプ 実装 テスト
  28. 28. 工程を分割し何度も回す 画面 設計 実装 情報 設計 画面 設計 プロト タイプ デザイン カンプ プロト タイプ (テスト) (テスト) © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. (テスト)
  29. 29. Tools - ウェブのためのより良いツール - © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  30. 30. Tools Adobe Edge Tools & Services 洗練された最先端の Web を構築するための最新ツール & サービス Edge Animate CC Edge Reflow CC Edge Web Fonts © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Edge Code CC Typekit Edge Inspect CC PhoneGap Build
  31. 31. 各ツールの役割 情報設計 画面設計 実装 テスト リッチコンテンツ制作 Web フォント © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. アプリパッケージ化
  32. 32. 各ツールの役割 情報設計 画面設計 実装 テスト リッチコンテンツ制作 Web フォント © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. アプリパッケージ化
  33. 33. Edge Reflow CC プレビュー版 レスポンシブ デザイン ツール メディアクエリーによるレスポンシブデザインを直感的な操作で定義。 CSS パネルでスタイル設定も思いのまま。 Edge Inspect 連携によるスマホ上でのリアルタイムプレビューも強力。 © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  34. 34. Edge Inspect CC モバイルサイトのリモート検証ツール PC上のブラウザから、コネクションを張った全てのデバイスのブラウジン グ、Webインスペクト、スクリーンショットをリモート操作。 © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  35. 35. Edge Inspect CC モバイルサイトのリモート検証ツール PC上のブラウザから、コネクションを張った全てのデバイスのブラウジン グ、Webインスペクト、スクリーンショットをリモート操作。 © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  36. 36. DEMO Edge Reflow CC と Edge Inspect CC による、 プロトタイプ制作と実機テスト © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  37. 37. 工程を分割し何度も回す 画面 設計 実装 情報 設計 画面 設計 プロト タイプ デザイン カンプ プロト タイプ (テスト) (テスト) © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. (テスト)
  38. 38. まとめ ユーザビリティ向上 圧倒的費用対効果 UI/UX デザイン 低コストで実現 コーディングゼロで 実働プロト作成 © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  39. 39. Adobe Edge Tools & Services 洗練された最先端の Web を構築するための最新ツール & サービス Edge Animate CC Edge Reflow CC Edge Web Fonts © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Edge Code CC Typekit Edge Inspect CC PhoneGap Build
  40. 40. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  41. 41. ツールの入手はCreative Cloudから 30日間無償体験 Edge Reflow CC Preview と Edge Code CC Preview は その後も無償! creative.adobe.com © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  42. 42. リソース Adobe & HTML html.adobe.com/jp Adobe Pinch In www.adobe.com/jp/jos/pinchin.html 仲尾 毅 Tsuyoshi Nakao @tsuyon | tnakao@adobe.com © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  43. 43. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  44. 44. appendix - その他の Edge Tools & Services - © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  45. 45. Edge Code CC プレビュー版 超軽量コードエディター HTML / CSS / JavaScript を効率よくコーディングしていくための、 全く新しいコードエディター。 © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  46. 46. Edge Animate CC HTML5 アニメーション制作ツール HTML5 / CSS3 / JavaScript によるアニメーションやインタラクティブコン テンツを直感的なタイムライン操作で制作。 © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  47. 47. フリー・オープンソース HTML5モバイルアプリ開発フレームワーク © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  48. 48. © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
  49. 49. PhoneGap Build クラウド上でパッケージを生成 build.phonegap.com © 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

×