Dreamweaver Extract でデザインとコーディングの軋轢解消

アイキャッチ Adobe CC

Creative Cloud エクストラクトとは

Creative Cloud エクストラクトについてAdobeは下記の通り説明しています.

Creative Cloud エクストラクトにより、カンプからコードを抽出するための新たなワークフローをWebデザイナーとWeb開発者に提供します。カラー、フォント、CSS、アセットなど、PSDカンプに含まれる重要なデザイン情報を簡単に抽出して、モバイルおよびデスクトップ向けのデザインをコーディングする際に使用できます。

具体的には次の2つの機能を指します.
1. Photoshop CCの「アセットを書き出し」機能
2. Dreamweaver CCの「Extract」パネルを利用した,PSDファイルからのCSSコードや画像,カラー,文章などの抽出

本記事では2つ目のDreamweaver CCの「Extract」機能について扱います.

Extractを利用する理由/メリット

  • PSDカンプから直接各種データを抽出できるので,PSDからの変換作業を省き,CSSコードを書く工数を大幅に減らせる
  • Photoshopデザイナーとコーディング担当者が別の場合,デザイン確認の連絡を減らせる

本記事の動作環境

  • Photoshop CC 19.1.6
  • Dreamweaver CC 18.2

Extractの使用方法

事前準備

下記ファイルを用意しておく(本記事では参考サイトの練習用ファイルを使用).

  • 完成済みPSDカンプ
  • 大枠を作成済のHTMLとCSS

Extract使用前後の比較

本記事のサンプルの完成前後のデザインの差異を示します.
適用させる抽出項目は下記の通りです.

  1. フッターの背景グラデーション
  2. メインビジュアル右下のスタンプロゴ
  3. メインテキスト本文とCSSスタイル

Extract使用前後の比較

CCフォルダへPSDファイルをアップロード

Dreamweaverの「ウィンドウ」メニュー/「Extractパネル」からPSDカンプファイルをCCフォルダへアップロードする. ※

※ 事前にCCフォルダへアップロード済の場合は不要

PSDファイルのアップロード

Extractパネル内の表示

本記事ではExtractを使ったコーディング専用のワークスペースを作成しています.

Extractパネル右上の%が表示されたドロップダウンメニューから,パネル内での全アートボードの表示倍率を設定する.

表示倍率の切り替え

  • スタイル : カンプに適用されたフォントやカラーなどのスタイル情報を表示/抽出する
  • レイヤー : PSDのレイヤー情報を表示する.各レイヤーから画像を抽出/保存する.

スタイル/レイヤー情報

Extractによる抽出例

抽出1 フッターの背景グラデーション

  1. Extractパネルから該当グラデーションを選択し,表示されるポップアップボックスからCSSをコピーする
  2. コードパネルのHTMLソースコードから,グラデーション適用箇所のクイックエディットを開き(⌘ + E),CSSをペースト ※

※ ベンダープレフィックス付きでペーストされる

フッターの背景グラデーションの抽出

抽出2 メインビジュアル右下のスタンプロゴ

  1. Extractパネルのレイヤーを表示し,該当レイヤー右の↓印をクリックし抽出設定を開く
  2. 抽出する画像の保存場所を指定
  3. ファイル形式を指定すると,自動的にファイル名に拡張子が追記される
  4. 異なるサイズで抽出する場合などは,環境設定ダイアログから抽出要件を設定可能
  5. 保存後,画像が書き出されたことを確認
  6. コードパネルでimg要素にsrc属性を追記し,抽出した画像を反映

メインビジュアル右下のスタンプロゴの抽出

抽出3 メインテキスト本文とCSSスタイル

  1. Extractパネルで該当テキストを選択し,ポップアップボックスからテキストをコピーしてHTMLへ貼り付け
  2. 同様に必要なCSS情報をコピーして,クイックエディット(⌘ + E)を開き貼り付け ※

※ スタイルをメディアクエリで切り替える場合,モバイルとデスクトップ両CSSをそれぞれコピペする

メインテキスト本文とCSSスタイルの抽出

Extract使用前後の比較(確認用)

完成デザインに下記3点が反映されていることを再度確認しておきます.

  1. フッターの背景グラデーション
  2. メインビジュアル右下のスタンプロゴ
  3. メインテキスト本文とCSSスタイル

Extract使用前後の比較

まとめ

Extract機能はPSDカンプデザインが練り込まれているほど,その威力を発揮します.
様々な作業をDreamweaverで一括して行えるので,アプリケーション切り替えの煩わしさも減らせますね.

参考サイト

以下のサイトを参考にさせていただきました.
本記事で使用したサンプルファイルのダウンロードとExtract使用手順を確認できます.
PSDからCSSをコピー | Adobe Dreamweaver CCチュートリアル

コメント