Adobe Live 2015 – Dreamweaver CC デモ – Web制作の作業効率化とレスポンシブデザイン

みなさんこんにちは。アドビの轟です。

本日のAdobe Live 2015にご参加された方、オンラインで視聴された方、どうもありがとうございます。基調講演の中で轟が行ったDreamweaver CC のデモの内容をお伝えします。

1. Web制作の作業効率化

これまではコーディング前の準備作業が大変でした

デザインカンプを受け取ったコーダーは、これまではコーディング作業に入る前に、こんな感じで色んな準備作業が必要でした。

• Photoshopを起動して、デザインカンプを開く
• ボタンや背景など、様々なシェイプの情報（位置、サイズ、カラーなど）を調べる
• テキストのフォント情報（フォント種類、フォントサイズ、フォントカラーなど）を調べる
• デザインカンプ内から画像をスライスして書き出す

https://blog.adobe.com/media_412e151177f65a8c40294e51e7ddb350ed46bbc1.gif

とにかく、コーディング作業に入る前に随分時間が掛かっていました。

Creative Cloudを使えば、準備作業は大幅に軽減できます

しかし、Creative Cloudを使えば、これらの作業は大幅に軽減できます。Photoshopを起動する必要もなくなります。なぜなら、最新のDreamweaverは、Creative Cloud Extractサービスと連携しているので、PSDファイルを読み込むことができ、デザインカンプから様々な情報をダイレクトにコードに適用できるからです。

具体的には、Dreamweaverに読み込んだPSDのデザインカンプ上でシェイプやテキスト、画像などを選択するだけで、それに関するすべての値入りCSSがコードヒントのリストに現れる仕組みです。カラーや画像の場合は、コードヒントリストの上にサムネイルプレビューが表示されるので、確認してから選択することができます。

https://blog.adobe.com/media_d39a85ffa3de7d5838f3241a9039a1322b6e13a5.gif

コードヒント以外にも、読み込んだデザインカンプ上でどれかオブジェクトを選択すれば、ダイアログが表示され、CSSをコピーすることができます。これを自分のCSSファイルにペーストするか、ライブビュー上の適用したい箇所で右クリックしてスタイルをペーストすればOKです。

https://blog.adobe.com/media_789a43ad3f82800c73c784943ea9ce75a94164b7.gif

その結果、

• オブジェクト：デザインカンプで選択、エディターでCSSの値入りコードヒントとして取得
  （デモ：グラデーション背景を選択、グラデーションのCSSをコードヒントから取得）
• フォント：デザインカンプでテキストを選択、ライブビューのテキストに右クリックでスタイルをペースト
• 画像：デザインカンプからHTMLファイルにドラッグ＆ドロップで配置
  （デモ：ドラッグ＆ドロップし、デフォルトのpngファイルを拡張子jpgに書き直して、jpgで取得。他に、gif、svgも可）

という感じで、デザインカンプからコードへの適用がサクサクできるようになります。

2. レスポンシブデザイン

まじでやんなきゃ、スマホ対応

“スマートフォンの普及に伴い、Webサイト制作においてスマートフォン対応は重要になっている”なんてことは、百も承知ですよね。そうは言ってもスマホ対応はまだいいか、と考えているクライアントさんがいたら、Googleさんが2015年4月21日から開始したモバイルフレンドリーな検索結果の取り組みを教えてあげてください。スマホでググった際に、スマホ対応されてないサイトが上位に表示されない可能性があるようです。場合によっては、これまで頑張ってきたSEO対策が勿体ないことになるかもしれません。

レスポンシブデザインの採用

スマホ対応については色々な方法がありますが、そのうちの一つであるレスポンシブデザインの採用は非常に多く見られるようになってきました。しかし、最適なブレイクポイントの見極めやレイアウト調整などは少々手間のかかる作業とも言えます。ひと昔前と違い、多くの画面サイズのデバイスがあることも頭を悩ませます。

https://blog.adobe.com/media_a50d32a441705c8f2194f49885b4b5fdd00cd987.gif

Dreamweaver CC 2015 に新たに追加されたレスポンシブデザイン機能

オープンソースのCSSフレームワーク、Bootstrapをネイティブでサポートしたので、新規HTMLファイル作成でBootstrapフレームワークを選択すれば、必要なライブラリファイル群をDreamweaverがすべて準備してくれます。Bootstrapテンプレートあるので、そちらをベースにWebページを作成することもできます。

また、ブレイクポイントを可視化するビジュアルメディアクエリーバーも新たに追加されたので、ライブビューの画面幅をリサイズバーで変えつつ、適切な場所にブレイクポイントを追加したりできます。

https://blog.adobe.com/media_0c454154402f799eb1aab9935c51065e0b65d008.gif

Bootstrapコンポーネントでレイアウトをしていけば、ある画面幅では非表示にしたり、2カラムを1カラムにする場合もライブビューでのマウス操作で簡単にできます。

https://blog.adobe.com/media_40bc3ee969ab8c345b87ca0a071f00c062dc3020.gif

スマホのブラウザでリアルタイムに出来栄えをチェック

今回のバージョンから追加された「デバイスプレビュー」機能を使えば、スマホでもQRコードを読み込むことで簡単に編集中のHTMLページのチェックをできます。また、HTMLページを編集すると、保存することなくリアルタイムで接続されたすべてのブラウザの内容に反映されるので、作業効率は大幅にアップしそうですね。

https://blog.adobe.com/media_3d294936b4c43f41ef46f9bfd90368a93b5c9cea.gif

まとめ

• カンプからのコーディング作業が劇的に効率化
• レスポンシブデザインをもっと手軽に
• リアルタイムなデバイスプレビュー

ということで、最新のDreamweaverを是非お試しください！