Bootstrap、Emmet、レスポンシブWebデザイン対応を強化したDreamweaver CC 2015を使ってみた：写真素材サービスAdobe Stockも（1/2 ページ）

2015年6月16日、Adobe Creative Cloudが2015年版のメジャーアップデートを果たした。本稿ではDreamweaver CC 2015と周辺のサービスをレビューした結果を紹介する。

[岡本紳吾，hatte Inc.]

　2015年6月16日、Adobe Creative Cloud（以下、Creative Cloud）が公約通り年1回のメジャーアップデートを果たした。今回さまざまな機能追加や改善、新しいサービスなどが登場している。アップデートの概要についてはニュースなどで取り上げられているので参考にしていただきたい。

• お得なCSユーザー向け乗り換えキャンペーンも：「Adobe Creative Cloud」が2015年版にメジャーアップデート、使い勝手が向上する新機能とは？ - ITmedia PC USER
• 1点1180円から利用可能：アドビ、4000万点以上のロイヤリティフリー画像素材を販売する「Adobe Stock」開始 - ITmedia PC USER

　本稿では、このアップデートの中から、Web制作系アプリケーションの一つである「Dreamweaver CC 2015」と周辺サービスをレビューした結果を紹介しよう。

Dreamweaver CC 2015の公式イメージ

レスポンシブWebデザインの機能がより強化された

　Web制作業界の最近のトピックとして必ずと言っていいほど挙げられるのが、グーグルの「モバイルフレンドリーアップデート」だ。これは、「モバイルに最適化されていないWebサイトは、PageRankが低くなりますよ」といったものだ。

グーグル提供のモバイル フレンドリー テストを＠ITで実行した結果

　このため今後のWeb制作には、ますますモバイル環境への対応が求められることになるだろう。モバイルフレンドリーなサイトを作る上で欠かせないといえるのが「レスポンシブWebデザイン」だ。

　Dreamweaverには以前のバージョンからレスポンシブWebデザインの機能が搭載されている。そして、Dreamweaverのプレビュー画面でもGoogle Chromeと互換性を持たせることで、実機検証の手間をできるだけ削減する努力を重ねてきた。

• レスポンシブWebデザインから実機検証までサクッと - ＠IT
• 前版リリースからわずか2カ月、Dreamweaver CCはアップデートで何が変わったのか - ＠IT

　Dreamweaver CC 2015では、Dreamweaver自体のウインドー幅にかかわらずプレビュー画面の大きさをドラッグで調整できる「スクラブ」が搭載された。これでプレビューウインドー内でウインドーの幅が変わったときの状態を自由に確認することが容易になった。

　また、「メディアクエリーバー」が搭載された。これは、以前はEdge Reflowなどで搭載されていたメディアクエリをビジュアライズしたものだが、コンバージョンはさらにその数値がInner Widthなのか、Outer Widthなのか分かりやすいように色分けがされるようになった。

　これとスクラブを組み合わせることで、「現在どのスタイルが適用されているのか」が分かりやすくなっている。