SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

特集記事(AD)

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

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

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

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

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

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

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

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

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

デバイスでプレビュー

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

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

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

最後に

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

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

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
特集記事連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8921 2016/01/25 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング