解像度が異なる画像を一気に書き出し
ExtractパネルでPSDを開き、書き出したい画像をクリックします。
アセットを抽出ボタンをクリックし、フォルダー、画像ファイル名、形式、画質などを設定し、「複数保存」をクリックします。複数保存は、高解像度のデバイス用に2倍、3倍などの解像度の画像を一度に書き出す機能です。
しばらくして書き出しが終わると、メッセージが表示されます。
ファイルが解像度別に書き出されていることが分かります。Photoshopを起動しなくても、必要なときに必要な画像を複数解像度で一気に書き出すことができるようになりました。
なお、このフォルダー名やファイル名は、Dreamweaverの環境設定の「Extract」で変更できます。
ブレークポイントを分かりやすく管理
レスポンシブWebデザインに対応した機能も追加されています。「スクラブ」をつかんで左右に動かすと、画面の幅を変えながらページのレイアウトをチェックできます。これでレスポンシブデザインのコーディングの効率が上がりますね。
また、ビジュアルメディアクエリーバーも大きな新機能です。ブレークポイントの状況がひと目で分かり、メディアクエリーの編集も簡単にできます。
デバイスでプレビュー
Dreamweaver CC 2015では、特にサーバーなどを用意しなくても、制作中のページをデバイスで確認できるようになりました。
画面右下のデバイスプレビューボタンをクリックし、QRコードを読み取るか、表示されたURLをスマートフォンなどで開いて表示を確認できます。
Dreamweaverで編集した内容は、リアルタイムにデバイスのブラウザに反映されます。
最後に
Creative Cloudがいよいよ「クラウド」っぽくなってきましたね。ここ最近のPhotoshopとDreamweaverの進化は、何かと面倒な作業を一気に楽にしてくれそうな予感がします。
アートボードを使い、素材をクラウドに置くことで、Web制作、特にレスポンシブデザインに対応したサイト制作のワークフローが劇的に変わりそうです。ぜひ最新版で試してみてください。
