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

by Adobe Comms

Posted on 06-17-2015

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

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

1. Web制作の作業効率化

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

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

psd_design_comp

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

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

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

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

dwcc2015_extract_codehinting

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

dwcc2015_extract_csscopying

その結果、

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

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

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

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

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

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

multi-screen

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

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

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

dwcc2015_adding_breakpoint

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

2column_to_1column

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

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

dwcc2015_device_preview

まとめ

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

Topics: クリエイティブ, UI/UX & Web

Products: