0Webデザイナーにフル活用してもらいたいWeb制作ツール轟 啓介 | アドビ システムズ 株式会社

本日の対象”Webデザイナー”

グラフィックツールを主に使う。 HTMLやCSSコーディングもする、 もしくは、頑張ろうと思ってる。

本日のテーマ

1. デザインからコードへ 2. HTMLアニメーション 3. 新しいCSSの表現

デザインからコードへDesign to Code1

DESIGN

CODE

DESIGN

CODE

デザインカンプ

HTML / CSS

• ページ構成 • レイアウト • カラー

• フォント • テキスト • 画像

DESIGN CODE• これまでは、デザインカンプから • デザイン要素を、「確認」して「知識」でCSS化 • 画像を、「スライス」して書き出し

!

• これからは、デザインカンプから • デザイン要素を、ダイレクトにCSS化 • 画像を、ダイレクトに書き出し

デザインからCSSをコピーする5つの方法5 easy ways of copying CSS from Design / Design to Code1-1

ツール

Fireworks Illustrator Photoshop Edge Reflow Extract

CSSのコピーと画像の切り出し□ 塗り、線、グラデーション □ フォント情報 □ サイズ □ 位置 □ 画像の切り出し

Fireworks

Fireworks□ 塗り、線、グラデーション □ フォント情報 □ サイズ □ 位置 □ 画像の切り出し

FireworksCSS プロパティ

Illustrator

Illustrator□ 塗り、線、グラデーション □ フォント情報 □ サイズ □ 位置 □ 画像の切り出し

IllustratorCSS プロパティ

Photoshop

Photoshop□ 塗り、線、グラデーション □ フォント情報 □ サイズ □ 位置 □ 画像の切り出し

PhotoshopCSSをコピー

Edge Reflow

Edge Reflow□ 塗り、線、グラデーション □ フォント情報 □ サイズ □ 位置 □ 画像の切り出し

CSSをコピー

Edge Reflow

Extract

Extract□ 塗り、線、グラデーション □ フォント情報 □ サイズ □ 位置 □ 画像の切り出し

CSSをコピー

Extract

CSSのコピーと画像切り出しFireworks Illustrator Photoshop Edge Reflow Extract

線 / 塗り/ グラデ ○ ○ ○ ○ ○

フォント △WebフォントNG

○ ○ ○ ○

サイズ ○ ○ ○ ◎ ○

位置情報 × ○ ○ ◎ ○

画像切出し × ○ ◎ × ◎

デザインからコードに変換する3つの方法3 easy ways of Code from Design / Design to Code1-2

ツール & サービス

Photoshop Edge Reflow Dreamweaver Brackets Extract

Photoshop + Reflow

Photoshop + Reflow

PhotoshopとReflowのツール連携 デザインを一気にHTML/CSSコードに

2013/12 -

Dreamweaver + Extract

Dreamweaver + Extract2014/10 -

DreamweaverとExtractのサービス連携 PSDからCSSコードや画像を取り出す

Brackets + Extract

Brackets + Extract2014/11 -

BracketsとExtractのサービス連携 PSDからCSSコードや画像を取り出す

デザインからコードへ変換Photoshop + Edge Reflow Dreamweaver + Extract Brackets + Extract

HTMLへ変換 ○ × ×

CSSコードヒント - ○ ○

画像コードヒント - ○ ○

画像 Drag & Drop - ○ ×

画像切出し - ○ ○

HTMLアニメーションHTML Animation2

ツール

Flash Professional Dreamweaver Brackets Edge Animate

Flash Professional

Flash Professional

HTML Canvas と JavaScriptをサポート 既存のflaファイルを変換できる

2013/12 -

Dreamweaver

Dreamweaver

CSS トランジションをサポート クリック操作でCSSアニメーション

2012/05 -

Brackets

Brackets

CSS トランジションのタイミングを ベジエ曲線で編集可能

2013/11 -

Edge Animate

Edge Animate

直感的なタイムライン操作で HTMLアニメーションを作成

2012/09 -

GUIによるHTMLアニメーションFlash Professional Dreamweaver Brackets Edge Animate

GUIで作成するアニメーション Canvas CSS CSS DOM (+CSS)

タイムライン ○ × × ○

既存ページへの アニメ追加 × ○ ○ ○

表現力 ◎ ○ △ ◎

主な用途 バナー / ゲーム Webサイトの演出 Webサイトの演出 バナー / ゲーム / Webサイトの演出

CSSの新しい表現New expressions with CSS3

http://webplatform.adobe.com/

1. デザインからコードへ 2. HTMLアニメーション 3. 新しいCSSの表現

Webで表現できること ツールで簡単にできること

!

これらを知ることで制作の幅と効率化が確実にできます