CSS Nite LP51「Reboot Dreamweaverフォローアップ（5）デザインツールとの連携 | CSS Nite公式サイト

2017年3月11日（土）にベルサール神田で開催したCSS Nite LP51「Reboot Dreamweaver」のフォローアップとして、北村 崇さん（TIMING DESIGN）、浅野 桜さん（タガス）の『いまどきのPhotoshopとDreamweaverとの連携』セッションのスライドなどを公開します。

メッセージと補足

コメント（北村さん）

皆さまお疲れ様でした。私自身、Webデザインをまだ全く知らない時に、初めて触ったのがDreamweaverでした。その時は私も「ドリームウェーバー」だと思い込んでいた内の一人です（笑）

今回はデータの作り方と考え方、そしてDreamweaverとの連携方法を短い時間の中でお話ししましたが、デザイナーとコーダーの連携はアプリケーション間だけではなく、コミュニケーション上でも大事だと思っています。

これを機に、「データの受け渡し方法」や「データ作りのルール」などを社内やチームで見直して、より円滑なワークフローを探して頂ければと思います。

コメント（浅野さん）

Dreamweaverは初心者からベテラン、デザイナーからエンジニアまでさまざまなユーザーの業務に適応できるアプリだと改めて実感しました。

一方で、轟さんのセッションの"ヤシドリ作戦"で私のExtractへの要望をお見せしましたが、まだまだ改善点があるのも事実。今後もユーザー全員で盛り上げていければいいですね。

アンケート等の質問についてQ.ビール本の正式名称

A.『Webデザイン必携。 プロにまなぶ現場の制作ルール84』

Q.レイヤー名の順序が違う（フッター→メイン→ヘッダー）場合もあるがそれはいいのか？

A.ルールが明確で、コーダーとの意思疎通に問題なければ、いいと思います。

Q.レイヤー名、手打ちですか？

A.手打ちですが、一括でレイヤー名を変更するスクリプト等もありますので、使ってみても良いと思います。 Group Layer Renaming

Q.手順がよくわからなかった。

A.最後のBootstrapを使うデモはアドビで紹介されているワークフローを元に、簡潔な形へ変更してご紹介しました。手順の概要は以下の通りです。

• レスポンシブWeb制作を効率化（Webデザイン編）

1. DreamweaverでBootstrapを使ってサイトを作成しておく
2. 「スニペット」パネルの「Bootstrap snippets」→「responsiveimages」を参照して、img タグにresponsiveimageのclassをあてる。
3. ライブビューのビジュアルメディアクエリバーをクリックし、ライブビューでimgの画像右クリックすると「エレメントを隠す」という項目」が現れるので選択すると、classが自動で追加されて表示非表示を切り替えられる。

Q.「レスポンシブイメージ」という単語が出たが、HTML5実装のレスポンシブイメージではない？

A.今回ご紹介したサイズを変えながらの画像指定は、HTML5でのpicture要素などではなくBootstrapでのCSS実装になります。この点は新しい機能としてHTMLも是非追加して欲しいですね。

デモデータ

• デモデータ（PSD+html）
• 北村ライブラリ（SNS）
• 浅野ライブラリ（オレンジ住建）