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

ゼロコーディングでブラウザ動作プロトタイプを作る

最新のWeb制作ツール
仲尾毅｜ Adobe Creative Cloud エバンジェリスト

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

自己紹介

@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


新 Web 標準と Adobe の取り組み
- ツール・貢献 -


DIGITAL CREATIVE TOOLS

新 Web 標準と Adobe の取り組み
- ツール・貢献 -


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


Adobe の活動
より良いウェブに貢献
contribute to a better web

ウェブへの革新を提供

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

bring innovations to the web

better tools for the web

より良いウェブ体験を
better web experience


Contributing to the web ウェブへの貢献

表示

レイアウト

ブレンドモード
カスタムフィルター
Clip Paths

CSS Regions
CSS Shapes

プラットフォー
ム
Apache Cordova
(PhoneGap)

コミュニティー＆テスト
Test the Web Forward
Web Platform ドキュメンテーション


Webの進化の事例：

CSS フィルター



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

ウェブへの革新を提供

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

bring innovations to the web

better tools for the web

より良いウェブ体験を
better web experience


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


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


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

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

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


ユーザビリティ
• 使い勝手

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


運用

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

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


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

デザイン
カンプ

プロトタ
イピング

UI

UX


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

要件定義


プロトタ
イピング

評価

問題発生!

情報
設計

画面
設計


デザイン
カンプ

実装

テスト

工程を分割し何度も回す
画面
設計

実装

情報
設計

画面
設計

プロト
タイプ

デザイン
カンプ

プロト
タイプ
(テスト)

(テスト)


(テスト)

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


Tools

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

Edge Animate CC

Edge Reflow CC

Edge Web Fonts


Edge Code CC

Typekit

Edge Inspect CC

PhoneGap Build

各ツールの役割

情報設計
画面設計

実装

テスト

リッチコンテンツ制作

Web フォント


アプリパッケージ化

Edge Reflow CC

プレビュー版

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

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

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

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


DEMO
Edge Reflow CC と Edge Inspect CC による、
プロトタイプ制作と実機テスト


まとめ

ユーザビリティ向上

圧倒的費用対効果

UI/UX デザイン
低コストで実現
コーディングゼロで
実働プロト作成


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

Edge Animate CC

Edge Reflow CC

Edge Web Fonts


Edge Code CC

Typekit

Edge Inspect CC

PhoneGap Build

ツールの入手はCreative Cloudから

30日間無償体験
Edge Reflow CC Preview と Edge Code CC Preview
は
その後も無償!

creative.adobe.com

リソース

Adobe & HTML
html.adobe.com/jp

Adobe Pinch In
www.adobe.com/jp/jos/pinchin.html
仲尾毅 Tsuyoshi Nakao
@tsuyon | tnakao@adobe.com

appendix
- その他の Edge Tools & Services -


Edge Code CC

プレビュー版

超軽量コードエディター

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


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

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


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

PhoneGap Build

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

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (14)

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

Similar to Adobe セッション for Enterprise x HTML5 Web Application Conference 2014 (20)

Recently uploaded

Recently uploaded (12)

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