• LIGの広告成功事例
LIGPR WEB

PSDデザインカンプのスライス不要!DreamweaverでのHTML/CSSコーディングを爆速化する方法

PSDデザインカンプのスライス不要!DreamweaverでのHTML/CSSコーディングを爆速化する方法

こんにちは、デザイナーの佐藤タカアキ(@sato_tkaaki)です。

僕の主な業務は、Webや紙などのさまざまなものをデザインしていくことなのですが、最近は今まで以上にマルチな動きを求められるようになりました。
何事もそうですが、自分自身が次のステップにいくためには、今までと同じ時間の使い方をしていたらいけません。

つまりは「効率化」することが必須になるわけです。

そこで今回は、アドビさんにお聞きした「WebデザイナーがDreamweaverのExtract機能を使って、PSDファイルから効率よくデザインする方法」をご紹介させていただきます。

そもそもExtract機能とは?

Dreamweaverは聞いたことあるけど、Extract機能ってなんぞ?!と、Extract機能を初めて聞いた方は首を傾げることでしょう。
以下に公式サイトの文言を引用させていただきます。

コンテキストに応じたコードヒントを取得したり、最適化された画像をライブビューにドラッグ&ドロップしたり、CSSとテキストを簡単にコピーしたりできるほか、カラー、グラデーション、フォントなどについての情報や測定値をPSDから取得することもできます。

要は、ExtractパネルでPSDファイルを直接開くことで、情報や画像を抽出できるというツールです。Photoshopを立ち上げる必要がなく、レイヤー情報も抽出できるから、デザインカンプをスライスする必要もないということ!

ふむ、実際に使ってみることにしましょう!!

DreamweaverのExtract機能を使ってみた

それでは、ひとつひとつレポートしていきたいと思います。

(※ここで使用しているのは「Dreamweaver CC 2014.1」です。)

Dreamweaverを起動させる

12

AdobeのDreamweaverを起動させ、ファイルメニューの「新規ドキュメンタリー」からHTMLファイルを作成します。
 

01

Dreamweaverを起動し、新規ファイルを開くと、画面左側にExtractのワークスペースが表示されているかと思います。
 

02

ちなみにワークスペースはウインドウメニューの「ワークスペースのレイアウト」から変更できます。

PSDデータをアップロードする

03

画面左上の「PSDをアップロード」をクリックします。
 

04

「PSDをアップロード」をクリックすると、上のような画面が現れます。

「+ PSDをアップロード」をクリックし、PSDファイルをアップロードしましょう。
ここでアップロードするPSDデータは、Adobeの公式ページに練習用のサンプルがあるのでそちらからダウンロードしてください。
https://helpx.adobe.com/dreamweaver/how-to/extract-photoshop-design-code.html
アップロードが完了したら、アップロードしたPSDデータをクリックします。
 

05

クリックすると、上のようにExtractパネル内にカンプが開かれます。

Extractの環境を設定する

新しいツール、機能を使用するときは、まず環境を整えてから使用することをおすすめします。

Windowsの方は編集メニューの「環境設定」、Macの方はDreamweaverメニューの「環境設定」を選択してください。

07

カテゴリから「Extract」を選択します。
ここでは、Extractパネルで表示する基本フォントサイズの指定、抽出する画像の保存形式が指定できます。設定を指定し、「適用」をクリックしたら、環境設定ダイアログボックスを閉じましょう。
 

08

環境の変更をExtractパネルで確認したいときは、ポップアップメニューの「PSDをリロード」をクリックしましょう。

PSDファイルからCSSや計測値を抽出

PSDカンプ内のCSSプロパティをコピーします。これで任意のCSSソースにスタイルを直接ペーストできます。

エレメントのCSSを抽出

テキストや画像など各エレメントのCSSを抽出しましょう。

13

Extractパネルに表示されているエレメントをクリックします。
するとポップアップでCSSプロパティのリストが表示されるので、「CSSをコピー」を選択しましょう。
CSSをコピーする際は、コピーするプロパティにチェックを入れることを忘れないように。

エレメントのテキストデータを抽出

つづいて、テキストデータを抽出しましょう。

14

CSS抽出と同様の方法で「テキストをコピー」を選択しましょう。
テキストデータをコピーできるのは、マジでありがたい。テキストを画像データとして抽出することもできます。

ちなみに、2015年5月現在はDreamweaverとBracketsのExtractパネルから日本語をコピーすると、文字化けすることがあります。改修中とのことなので、それまではブラウザ版のExtractサービス(後述します)で日本語をコピーしましょう!

画像のアセットを抽出

つぎに画像のアセット抽出です。

16

Extractパネルから画像のPSDファイルをクリックし、PSDファイルの目的の画像をクリックします。
複数の画像を同時にインポートするにはshiftを押しながら画像をクリックしましょう。
ただ、選択した画像はまとめて一つの画像として抽出されます。
画像をクリックするとポップアップが表示されるので、パスやファイル名などを指定して保存をクリックしましょう。

ファイルからエレメント間の計測値を抽出

エレメント同士の間隔の値を抽出することもできます。

15

計測したいエレメント間のエレメント2つをshiftを押したまま同時選択し、widthとheightの値を抽出します。
これでいちいちPhotoshopでデザインデータを開いて、地道に間隔を測る必要がなくなりましたね。

CCじゃなくてもExtract機能が使える!

Photoshop CCやDreamweaver CCといったクラウド版にデフォルトで備わっているExtract機能ですが、クラウド版ではなくパッケージ版のソフトを使用している方もいるのではないでしょうか。

パッケージ版でもExtract機能の一部が利用できるのが、Creative Cloudアセットです。ここにPSDデータをアップロードすることで、上述のようにCSS情報や画像を抽出できます。こちらも試してみましょう!

1. マイアセットにPSDデータをアップロード

z1

Creative Cloudアセットにアクセスし、マイアセットからPSDデータをアップロードしましょう。

2. PSDデータから画像を書き出す

z2

アップロードしたPSDデータを開くと、このようにデザインをプレビューできます。
 

z3

レイヤー構造が表示されています。書き出したい画像を選択しましょう。
 

z4

画像を選択したら、名前をつけて拡張子を選ぶだけで書き出しができます。なんと、スライス不要! これはなかなか嬉しいんじゃないでしょうか。

3. エレメントのCSS・テキストデータを抽出

z5

Dreamweaver CC同様、エレメントを選択するとCSSやテキストデータが抽出できます。コピペも簡単なので、そのままDreamweaverにペロッと貼れますね。

4. エレメント間の計測値を抽出

z6

2つのエレメントを選択すると、相対的な位置関係が数値で抽出できます。いちいち計測する手間が省けてありがたいです。

さいごに

ざっとご紹介しただけでも、Extract機能によってWebデザインのワークフローを大幅に変えることができそうですね。
このExtract機能を上手く使いこなせば、これまでとは比べものにならないほど、スピーディーかつ丁寧なデザインとコーディングが可能になると思いますので、一度試してみることをおすすめします。

Extract機能についてさらに詳しく知りたい方は、アドビさんの公式サイトにチュートリアルを含めた説明が豊富に掲載されているので、ぜひ一度そちらをご覧ください。

Adobe Creative Cloud Extract

z7

Adobe IDを持っているユーザなら誰でも無料で利用できるExtract。
Dreamweaverはもちろん、軽量さが魅力のコードエディターBracketsでも活用できます。お好きなエディターと組み合わせて、コーディングを効率化させていけるといいですね!

それではまた。

 

【コーディングを爆速で!】

Adobe Creative Cloud アセットでPSD画像をスライスし、テキストのCSS情報を取得しよう

DreamweaverとPhotoshopを使い、神速でスライスする方法

楽してコーディング!Dreamweaverのテクニックいろいろ

CSSコーディングを高速化できる、Sassでカラーを変数に設定する方法

カスタマイズ性抜群!Sassに対応したCSSフレームワークがアツイ!

この記事を書いた人

佐藤タカアキ
佐藤タカアキ デザイナー 2014年入社
3年目に突入したのですが、デザイナー兼カメラマン的なフワフワした立ち位置で、良くも悪くも毎日多忙な日々を送っているフリをしています。