「コードを書かずにコードを産み出す？！」スマホ時代の最先端Web/アプリ制作

コードを書かずにコードを産み出す？！
スマホ時代の最先端Web/アプリ制作
仲尾毅｜ Adobe Creative Cloud エバンジェリスト
© 2014 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

自己紹介
 電気電子工学専攻→ プロビデオSE → プロダクトマーケティング
→ エバンジェリスト
 興味は、ユーザーと創り手(エンジニア) のクロスポイント
 趣味は、バンド、ビデオ、Mac
 Creative Cloud 道場ブログhttp://blogs.adobe.com/tnakao/
 Creative Cloud 道場on USTREAM 毎週木曜夜8時
@tsuyo
仲尾毅n
Tsuyoshi Nakao
Adobe Creative Cloud エバンジェリスト

Web/アプリ制作
- ワークフローと課題-

ターゲット

モバイルに最適なデザイン

ユーザビリティ向上に必要な開発プロセス
プロトタ
イピング
デザイン
カンプ
UI UX

ユーザビリティ向上に必要な開発プロセス
要件定義
プロトタ
イピング
評価

レガシーなワークフロー
情報
設計
画面
設計
問題発生!
デザイン
カンプ実装テスト

理想的なモバイル時代のワークフロー
情報
設計
画面
設計
デザイン
カンプ
実装
(テスト)
プロト
タイプ
(テスト)
画面
設計
プロト
タイプ
(テスト)
工程を分割し何度も回す

画面設計プロトタイ
プ(テスト)
?

壁を取り去る
- カンプからコードへ、瞬時に、正確に-

Adobe Web Tools
 Dreamweaver CC
 Flash Professional CC
 Edge Animate CC
 Edge Inspect CC
 Edge Reflow CC Preview
 Edge Code CC Preview

各ツールの役割
情報設計
画面設計実装テスト
Web フォントアプリパッケージ化
•パブリッシュ
•アプリ
リッチコンテンツ制作
Web統合開発環境

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

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

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

情報
設計
画面
設計
デザイン
カンプ
実装
(テスト)
プロト
タイプ
(テスト)
画面
設計
プロト
タイプ
(テスト)
工程を分割し何度も回す

DEMO. 2
Extract でコーディングに必要な情報を抽出

ツールの入手はCreative Cloudから
30日間無償体験
Edge Reflow CC Preview とEdge Code CC Preview
は
その後も無償!
creative.adobe.com

リソース
Adobe Pinch In
www.adobe.com/jp/jos/pinchin.html
Creative Cloud 道場
ブログhtml.adobe.com/jp
USTREAM html
仲尾毅Tsuyoshi Nakao
@tsuyon | tnakao@adobe.com

まにフェスP3 もうひとつのアドビセッション
15:45 4F ホールステージ

「コードを書かずにコードを産み出す？！」スマホ時代の最先端Web/アプリ制作

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 「コードを書かずにコードを産み出す？！」スマホ時代の最先端Web/アプリ制作

Similar to 「コードを書かずにコードを産み出す？！」スマホ時代の最先端Web/アプリ制作 (20)

More from Tsuyoshi Nakao

More from Tsuyoshi Nakao (7)

「コードを書かずにコードを産み出す？！」スマホ時代の最先端Web/アプリ制作

Editor's Notes