adc meetup 08 session 4 how to get css from design comp

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

SESSION 4画面カンプから CSS を得る 5 つの方法

仲尾毅 @tsuyonAdobe Creative Cloud エバンジェリスト

ROUND

08


スマホ時代、 Web デザインの重要性が増大


Web デザインと Web 開発の大きな壁

Webデザイン

Web開発

パーツ

情報

CSS

Web デザインと Web 開発の大きな壁


画面カンプから CSS を得る 5 つの方法

1

2

3

4

5



1 Fireworks

2

3

4

5


Fireworks• Web ページのグラフィック

を効果的に作成できる軽量ツール。

• Photoshop 、 Illustrator および Dreamweaver とスムーズに連携し、 Web デザイナーは、コードの記述に手間を掛けたり、複数のカラーパレットに迷ったりすることなくグラフィックを制作可能。


Fireworks CS6CSS プロパティパネル


Fireworks CS6各種スライスツール

Fireworks CS6CSS スプライト書き出し



1 Fireworks

2

3

4

5



1 Fireworks

2 Photoshop CC

3 Illustrator CC

4

5



1 Fireworks

2 Photoshop CC

3 Illustrator CC

4 Edge Reflow CC

5


Edge Reflow CC• レスポンシブな Web ページデザ

インカンプ制作専用ツール。• 実際にブラウザーやモバイルデ

バイスで「動く」カンプが制作可能。

• 情報デザイン段階でのプロトタイピング・検証が可能。

• 最新版では、 Photoshop CC に搭載された Adobe Generatorとの連携により、 PSD カンプからそのまま始めることが可能に。



1 Fireworks

2 Photoshop CC

3 Illustrator CC

4 Edge Reflow CC

5



1 Fireworks

2 Photoshop CC

3 Illustrator CC

4 Edge Reflow CC

5 Project Parfait


Project Parfait• Photoshop カンプから、 Web

開発に必要なあらゆる情報を抽出する新ツール

• 実験的なサービスとして提供• ブラウザー上で稼働するサービ

スなので、 Photoshop がなくても大丈夫

• 近い将来、 Creative Cloud ファイルコンソールに統合される予定



1 Fireworks

2 Photoshop CC

3 Illustrator CC

4 Edge Reflow CC

5 Project Parfait


http://www.adobe.com/jp/jos/pinchin.html

adc meetup 08 session 4 how to get css from design comp

Technology