Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Creative Cloud 2015で変わる、Web制作のワークフロー~PhotoshopとDreamweaverの新機能を有効活用する

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/01/25 14:00

目次

解像度が異なる画像を一気に書き出し

 ExtractパネルでPSDを開き、書き出したい画像をクリックします。

 アセットを抽出ボタンをクリックし、フォルダー、画像ファイル名、形式、画質などを設定し、「複数保存」をクリックします。複数保存は、高解像度のデバイス用に2倍、3倍などの解像度の画像を一度に書き出す機能です。

 しばらくして書き出しが終わると、メッセージが表示されます。

 ファイルが解像度別に書き出されていることが分かります。Photoshopを起動しなくても、必要なときに必要な画像を複数解像度で一気に書き出すことができるようになりました。

 なお、このフォルダー名やファイル名は、Dreamweaverの環境設定の「Extract」で変更できます。

ブレークポイントを分かりやすく管理

 レスポンシブWebデザインに対応した機能も追加されています。「スクラブ」をつかんで左右に動かすと、画面の幅を変えながらページのレイアウトをチェックできます。これでレスポンシブデザインのコーディングの効率が上がりますね。

 また、ビジュアルメディアクエリーバーも大きな新機能です。ブレークポイントの状況がひと目で分かり、メディアクエリーの編集も簡単にできます。

デバイスでプレビュー

 Dreamweaver CC 2015では、特にサーバーなどを用意しなくても、制作中のページをデバイスで確認できるようになりました。

 画面右下のデバイスプレビューボタンをクリックし、QRコードを読み取るか、表示されたURLをスマートフォンなどで開いて表示を確認できます。

 Dreamweaverで編集した内容は、リアルタイムにデバイスのブラウザに反映されます。

最後に

 Creative Cloudがいよいよ「クラウド」っぽくなってきましたね。ここ最近のPhotoshopとDreamweaverの進化は、何かと面倒な作業を一気に楽にしてくれそうな予感がします。

 アートボードを使い、素材をクラウドに置くことで、Web制作、特にレスポンシブデザインに対応したサイト制作のワークフローが劇的に変わりそうです。ぜひ最新版で試してみてください。

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 石川 修一(イシカワ シュウイチ)

    株式会社ニューロマジック 執行役員 早稲田大学大学院 基幹理工学研究科 招聘研究員 慶應義塾大学大学院メディアデザイン研究科附属メディアデザイン研究所 リサーチャー デザイン、フロントエンドからクラウドまで、新しいことに興味がありすぎて時間が足りない、Web制作会社の制作部門統括。Adobeイ...

All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5