マニュアルキャンセル

Dreamweaver 内の Extract

検索

最終更新日 : 2021年12月30日

PSD をモバイルおよびデスクトップ向け HTML ベースの web デザインにすばやく変換する方法について説明します。CSS、画像、計測値、フォント、カラー、グラデーションなどを、Photoshop から直接 Dreamweaver に抽出します。

注意：

2022 年 7 月 1 日より、Dreamweaver 21.2 以前のバージョンでは、エクストラクトパネルの機能が使用できなくなります。Adobe Photoshop を使って PSD コンポーネントからスタイル情報やアセットを抽出し、Dreamweaver で再利用することができます。

Extract と Dreamweaver の統合により、web デザイナーおよびデベロッパーは、デザイン情報や web 用に最適化されたアセットをコーディング環境に直接適用／抽出できます。Extract に、PSD カンプからスタイル情報やアセットを抽出するための完全な自己完結型のソリューションが用意されているため、Photoshop と Dreamweaver 間を行ったり来たりする必要が減ります。

Dreamweaver 内の Extract パネルでは、CSS、画像、フォント、カラー、グラデーション、測定値を web ページに直接抽出できます。これらの主要な Extract の機能に加え、Dreamweaver によっても次の固有の機能が提供されます。

Creative Cloud 上にある、また共同作業用フォルダーで共有している PSD ファイルへの直接アクセス
状況に応じたコードヒントを使用したフォント、カラー、グラデーションの簡単な定義
ドラッグ＆ドロップを使用した PSD レイヤーからの画像タグの作成
ライブビュー（CSS デザイナーやエレメントディスプレイなど）にスタイルを直接ペースト

Extract での作業の開始

Dreamweaver で Extract を使用することにより、Dreamweaver 内の Extract パネルから直接 PSD ファイルにアクセスできます。Extract パネルとワークスペースについて、また Extract パネルでの PSD ファイルのロード方法について詳しくは、以下の各トピックを参照してください。

Extract パネルとワークスペース

Extract のワークスペースは、Extract を Dreamweaver とともに効果的に使用できるように設計されています。このワークスペースでは、分割されたビュー（ライブビューとコードビュー）の左側に Extract パネルが、右側に web ページが表示されます。ワークスペースは、パネルをドラッグ、ドッキング、縮小／展開して、用途に応じてカスタマイズできます。カスタマイズしたワークスペースを保存して、後で使用することもできます。

注意：

Extract パネルを閉じてしまった場合は、キーボードショートカット（Ctrl + K キー（Windows）、Command + K（Mac））を使用するか、ウィンドウ／Extract を選択してパネルを再度開くことができます。

Dreamweaver の初回起動時に、Extract パネルにワークフローを開始するためのインタラクティブなチュートリアルが表示されます。チュートリアルを切り替えるには、パネルの上部にあるドロップダウンリストを使用します。

チュートリアルが完了したら、「開始」をクリックして Dreamweaver で Extract の使用を開始できます。Extract パネルに、Creative Cloud アカウントのフォルダーおよび PSD ファイルのサムネールビューが表示されます。これらのファイルはデスクトップからアップロードまたは同期したファイルか、Creative Cloud 上の共同作業用フォルダーで共有されたファイルのいずれかです。

Creative Cloud に保存された PSD ファイルを示す Extract パネル

注意：

チュートリアルを再起動するには、パネルの右上隅にあるポップアップメニューをクリックし、「チュートリアルを起動」を選択します。

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

PSD ファイルを Creative Cloud にアップロードするには、ウィンドウ／抽出の順に選択し、PSD をアップロードをクリックします。他のユーザーまたはチームが PSD カンプを開発した場合、Creative Cloud でそれらを共有できます。その後、Creative Cloud に直接ログインするか、Dreamweaver の Extract パネルを通じて、ファイルのダウンロードや、アカウントへのアップロードを実行できます。

注意：

macOS デバイスで Dreamweaver 21.2 以降のバージョンを使用している場合は、Finder ウィンドウから PSD ファイルタイプを有効にしてファイルをアップロードします。

macOS の場合

以下の手順に従って、PSD ファイルを有効にしてアップロードします。

Extract パネルで PSD ファイルのアップロードをクリックします。
Finder ウインドウでオプションをクリックし、表示されるドロップダウンから *.psd を選択します。
PSD ファイルを選択し、開くをクリックしてファイルをアップロードします。

Extract パネルで PSD ファイルを開く

Extract パネルで目的の PSD ファイルのサムネール画像をクリックします。ファイルを開いて Creative Cloud で PSD ファイルのアップデートバージョンを使用できるようになったら、Extract パネルに PSD ファイルをリロードします。これを行うには、PSD ファイルの名前をクリックするか、右上のポップアップメニューで「PSD をリロード」をクリックします。サムネールビューに戻って、別のファイルを選択するには、パネルの左上にある Creative Cloud アイコンをクリックします。

ビューを拡大し、デザインを詳しく調べる場合、Extract パネルの上部にあるズームレベルを変更するか、Alt +/- を使用します。PSD ファイルのエレメントを表示または非表示にするには、「レイヤー」タブまたはレイヤーカンプドロップダウンリストを使用します。

これで、PSD カンプを web サイトに変換する準備が整いました。

Extract 環境設定の設定

Extract 環境設定を使用して、抽出する画像のデフォルトのファイル形式、Extract パネルで表示されるデフォルトのフォントの単位を指定できます。

編集／環境設定（Windows）または Dreamweaver／環境設定（Mac OS）を選択します。
「カテゴリー」リストで Extract を選択します。
（オプション）抽出する画像のデフォルトの形式を変更します。

抽出画像の形式
（オプション）「デバイス向けエクストラクト」セクションで目的の解像度を選択します。これらの設定は、様々な解像度で画像を保存することを選択した場合に使用されます。
- サフィックスの付いたバージョンを保存するには、「接尾辞」列の対応する行をクリックし、テキストを入力します。
- 解像度が異なる各種画像を別々の出力フォルダーに保存するには、「フォルダー」列の対応する行をクリックし、相対パスを指定します。
デバイス向け Extract
（オプション）Extract の使用に関連するキャッシュされたデータを削除するには、「キャッシュを消去」をクリックします。
「適用」をクリックし、環境設定ダイアログボックスを閉じます。
変更を Extract パネルで確認するには、PSD をリロードします（ポップアップメニュー／PSD をリロード）。

Extract パネルの「PSD をリロード」オプション

PSD ファイルから CSS を抽出

PSD カンプ内のエレメントのすべてまたは特定の CSS プロパティをコピーし、ライブビュー内の CSS デザイナーやエレメントディスプレイ、またはコード内（CSS ソースまたは HTML ドキュメント）にスタイルを直接ペーストできます。

また、コードヒントに、PSD カンプで選択したエレメントの CSS プロパティが自動的に読み込まれます。コードを使用する場合は、これらのコードヒントを使用してコードに CSS プロパティを抽出できます。

Extract パネル（ウィンドウ／Extract）で、目的の PSD ファイルをクリックします。PSD のサムネールビューが展開され、カンプをはっきりと表示できるようになります。
PSD ファイルで、目的のエレメントまたはアセットをクリックします。ポップアップでエレメントの CSS プロパティのリストが表示され、プロパティを選択およびコピーするためのオプションが提供されます。選択したエレメントの幅と高さをピクセルまたは割合（％）で表示できます。

注意：ここで％を選択すると、計測値も％で表示されます。

Extract パネルの「CSS をコピー」オプション

CSS をコピーするには、コピーするプロパティを選択し、「CSS をコピー」をクリックします。
次のいずれかの方法を使用して、ドキュメントに CSS をペーストします。
- CSS デザイナーに CSS をペーストするには、必要なセレクターを右クリックして、「スタイルをペースト」をクリックします。
- エレメントディスプレイで CSS をペーストするには、セレクターを右クリックし、「スタイルをペースト」をクリックします。
- コードに CSS をペーストするには、目的の場所に挿入ポイントを置いて右クリックし、「ペースト」をクリックします。

コードヒントを使用して CSS を抽出するには、次の手順に従います。

ドキュメントに関連付けられた CSS ソースを開くか、HTML ドキュメントのコードビューに切り替えます。
Extract パネルで、目的の PSD ファイル、カンプ内の目的のエレメントの順にクリックします。
ドキュメントで、コード内の目的の位置に挿入ポイントを置きます。
CSS プロパティ名の入力を開始すると、PSD カンプの選択したエレメントの CSS プロパティを含むコードヒントが表示されます。必要な CSS プロパティをクリックしてコードに挿入します。

PSD ファイル内のエレメントの CSS プロパティを含むコードヒント
複数の CSS プロパティを抽出するには、Extract パネルのポップアップで必要なプロパティを選択します。次に、コードヒントで「選択した以下のものを挿入」をクリックします。

CSS プロパティの一括挿入

PSD ファイルからのテキストのコピー

PSD カンプのテキストやコンテンツを 1 クリックで web ページ内に挿入できます。Extract パネルで PSD カンプからテキストをコピーするには、テキストエレメントを選択し、「テキストをコピー」をクリックします。テキストがクリップボードにコピーされます。次に、テキストを目的の場所にペーストします。

注意：

テキストを抽出すると、テキストに関連付けられたプロパティ（フォント、カラーなど）を抽出できるようになります。詳しくは、PSD ファイルからフォント、カラー、グラデーションを抽出を参照してください。

PSD ファイルから画像を抽出

Extract パネルから PSD カンプのレイヤーを web ページのライブビューの正確な場所に単純にドラッグできます。ライブビューのライブガイドや DOM アイコンなどのビジュアルエイドは、エレメントをドラッグして配置するのに役立ちます。エレメントをドロップする前にしばらく停止すると、DOM アイコン（</>）が表示されます。</> アイコンをマウスでポイントすると DOM 構造が表示され、構造内にエレメントをドロップできます。コードを使用する場合は、状況に応じたコードヒント使用して画像を抽出できます。コードヒントを使用すると、カラーやグラデーションを画像として抽出できます。

注意：

PSD ファイルに複数のアートボードが含まれている場合、各アートボードがレイヤーパネルにフォルダーとして表示されます。フォルダーを展開または折りたたんで、その内容を表示または非表示にできます。特定のアートボードにズームインするには、単にアートボード名をクリックします。ズームアウトするには、アートボードの外側の任意の場所をクリックして「フィットさせる」をクリックします。

抽出した画像を挿入する前に、Dreamweaver により画像名が表示されます。これは編集可能です。デフォルトでは、画像はサイトのルートフォルダーに保存されます。カスタムの場所に画像を保存する場合は、ファイル名とともにディレクトリの完全パスを含めることができます。

注意：定義されているサイトに属していないドキュメントに画像を抽出する場合、画像はドキュメントが存在するディレクトリに抽出されます。未保存のドキュメントについて、保存するかどうかを確認するメッセージが表示されます。

ローカルディスクに画像を保存し、後で web ページに呼び出すこともできます。また、レスポンシブ web サイトをデザインする場合、デバイス向けの解像度が異なる複数の画像を 1 クリックで保存できます。

Extract パネルで、画像のダウンロード元の PSD ファイルをクリックします。
PSD ファイルの目的の画像をクリックします。

注意：

PSD カンプの画像を表示または非表示にするには、Extract パネルの「レイヤー」タブおよびレイヤーカンプドロップダウンリストを使用します。画像に複数のレイヤーが含まれている場合、抽出する画像のレイヤーを個別に選択できます。

ワークスペースの右側のコードビューで、コードヒントがポップアップしていることに注意してください。
複数の画像をインポートするには、Shift キーまたは Command キーを押しながら、目的の画像をクリックします。選択した画像は、単一の画像として抽出されます。
次のいずれかの操作を実行します。
- 画像のクリック時に表示されるポップアップで、をクリックします。（必要に応じて）パス、ファイル名、ファイル形式、スケール比率を指定します。次のいずれかの操作を実行します。
  
  「保存」をクリックして、1x の解像度で画像を保存します。画像をサイズ変更するには、「倍率」を選択し、スケール比率を指定します。
  
  「複数保存」をクリックし、解像度が異なる各種画像を保存します。PSD ファイルにこれらの異なるバージョンを必ずしも含める必要はありませんが、必要に応じて、Dreamweaver では抽出中に複数の解像度で画像を保存できます。
必要な解像度バージョンや対応する出力フォルダーは、環境設定で指定できます。
アセットを抽出アイコンを使用した画像の抽出
- ドキュメントのライブビューに画像をドラッグします。画像の配置に役立つライブガイドが、ライブビューに表示されます。
画像をドロップすると、Dreamweaver により画像の名前が表示されます。画像名のほか、拡張子も編集できます。Enter キーを押して画像を保存します。画像はデフォルトでサイトのルートフォルダーに保存されます。カスタムの場所に画像を保存するには、パスとファイル名を入力します。
Extract パネルから画像をドラッグしたときのファイル名および拡張子の編集オプション
- 画像をクリックすると、Dreamweaver の状況に応じたコードヒントが表示されます。HTML ドキュメントまたは CSS ドキュメントのコードビューで、挿入ポイントにカーソルを置きます。background-image プロパティ名または <img> タグを入力すると、選択した画像の名前がコードヒントに表示されます。画像を選択し、必要に応じて名前と拡張子を変更して、Enter キーを押します。
デフォルトでは、画像はサイトのルートフォルダーに保存されます。画像をカスタムの場所に保存するには、カスタムファイルのパスとファイル名を入力します。
コードヒントを使用した画像の抽出

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

Extract パネルを使用すると、PSD カンプの 2 つの任意のエレメント間の測定値を簡単に表示および抽出できます。

Extract パネルの PSD ファイルで、Shift キーまたは Command キーを押しながら目的のエレメントをクリックします。

Extract パネルに、2 つのエレメント間の水平距離と垂直距離が表示されます。

Extract パネルの測定値

注意：

計測値を％で表示するには、エレメントをクリックしてから、％をクリックします。
目的の値をクリックしてクリップボードにコピーします。
必要な場所（CSS デザイナーの CSS プロパティまたはコード内など）に値をペーストします。

PSD ファイルからフォント、カラー、グラデーションを抽出

Extract パネルでは、PSD カンプで使用されているフォント、カラー、グラデーションの CSS プロパティを抽出できます。

Extract パネルで「スタイル」をクリックします。
フォントを抽出するには、「フォント」セクションで次の操作を実行します。
1. 必要なフォントタイプを展開します。
  
  フォントの詳細を見るには、Adobe Fonts アイコン（）をクリックします。
2. コピーする形式やサイズを表示されるポップアップでクリックし、「CSS をコピー」をクリックします。クリックしたフォント、形式、サイズを使用するテキストエレメントが Extract によりタグ付けされます。
  
  注意：
  
  フォントの単位を、Extract 環境設定（環境設定／Extract）で「em」または「rem」に変更できます。Extract パネルの右上隅にあるポップアップメニューの「PSD をリロード」をクリックして変更を確認します。
  
  フォントの抽出
3. コードまたは CSS デザイナーなど必要な場所に CSS をペーストします。
カラーを抽出するには、「カラー」セクションで次の操作を実行します。
1. 目的のカラースウォッチをクリックします。選択したカラーを使用するエレメントが Extract によってタグ付けされます。
  
  注意：カラーピッカーを使用して PSD カンプから他のカラーを選択することもできます。
2. カラースウォッチのクリック時に表示されるポップアップで、必要なカラーモデル（RGB、Hex または HSL）を選択し、カラー値をコピーします（Ctrl + c または Command + c）。
  
  カラーの抽出
3. コードまたは CSS デザイナーなど必要な場所にカラー値をペーストします。
グラデーションを抽出するには、「グラデーション」セクションのグラデーションスウォッチをクリックします。表示されるポップアップで「CSS をコピー」をクリックします。コードまたは CSS デザイナーなど必要な場所に CSS をペーストします。

環境設定（環境設定／CSS スタイル）で選択されているベンダー接頭辞もグラデーションと共に貼り付けられます。放射状グラデーションはサポートされていないため、放射状グラデーションを抽出した場合は、対応する CSS がベンダー接頭辞なしで挿入されます。

グラデーションの抽出チュウシュツ