CSS Nite LP51「Reboot Dreamweaverフォローアップ(5)デザインツールとの連携

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を使うデモはアドビで紹介されているワークフローを元に、簡潔な形へ変更してご紹介しました。手順の概要は以下の通りです。

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

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

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

デモデータ

このセッションは「CSS Niteベストセッション2017」にてベスト・セッション10に選ばれました。

2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション+αを選びました。

2010年から2019年のベスト・セッション