» ブログ・webサイト・ランディングページにイラストを活用してみませんか?

Dreamweaver CC 2018でレスポンシブサイトを作る勉強になるチュートリアルサイト(Extract機能、PSDカンプ、レスポンシブコーディング)

投稿日時2018年2月8日 タグ

カテゴリ Webデザイン・コーディング

Dreamweaver CC 2018でレスポンシブサイトを作る勉強になるチュートリアルサイト(Extract機能、PSDカンプ、レスポンシブコーディング)

動画付きでレスポンシブサイト作成の参考になるAdobe公式サイト

フリーで仕事してたまにPSDカンプをコーディングしてくれという依頼があります。

(現在はWeb制作系のコーディングのみの依頼は断るようにしています)

でもコーディングする側にしたらPhotoshopなんて重たいソフトをわざわざ開きたくないですよね?

そんな悩みを解消してくれるDreamweaverの機能がExtractです。

公式サイト(Dreamweaver CC 内の Extract)

https://helpx.adobe.com/jp/dreamweaver/using/dreamweaver-integration-extract.html

こちらの動画の手順通りにサンプルPSDファイルからコーディングしていくとDreamweaverが進化してることに気づきます。

レスポンシブなグリッドレイアウトの作成

https://helpx.adobe.com/jp/dreamweaver/how-to/create-responsive-grid-layout.html?playlist=/jp/ja/ccx/v1/collection/product/dreamweaver/segment/designer/explevel/beginner/applaunch/continuinged/collection.ccx.js?ref=helpx.adobe.com

Dreamweaver CCのチュートリアル

https://helpx.adobe.com/jp/dreamweaver/tutorials.html

Dreamweaver CC 2018を使った感想のまとめ

便利と思った機能

  1. Bracketsと同じ感覚でコーディング出来る(Emmet標準装備)
  2. Sass,Lessに対応可能
  3. Extract機能でPhotoshopカンプからサイトカラー、サイズ、テキスト抽出が出来る
  4. スマホの実機でQRコードから簡単に動作確認できる

ブラウザでプレビューはPCサイト、デバイスでプレビューでスマホサイトの動作確認が行えます。

Dreamweaver CC 2018でレスポンシブサイトを作る勉強になるチュートリアルサイト(Extract機能、PSDカンプ、レスポンシブコーディング)

活用できるシーン

  1. CSSフレームワークを使わないレスポンシブサイト制作のHTML雛形作成に便利そう
  2. 納期の短いLPとかキャンペーンサイトを素早くHTML/CSSコーディングする時に便利そう

新しいDreamweaverだとコーディングが得意じゃない人でもレスポンシブサイトを短時間で作りたい時はBootstrapのフレームワーク使わなくてもサイトを構築できます。

(AdobeのサンプルのTOPページコーディングなら1時間以内で作れる)

Adobe CCに契約してる人で普段他のエディタ使ってる人もDreamweaverも試しに使ってみてもいいんじゃないかなと思います。

社内の内製で自社サイトのページ制作する程度の仕事ならDreamweaver CCがあると便利だと思います。中小企業だと静的なDreamweaverで作成したHTMLサイトの方が社内の人間も更新しやすいのではないかと思います。

私も昔はWeb担当だった頃にDreamweaver CS5で複雑なHTML/CSSコーディングわからなくても企業サイトの携帯サイトを構築してました。ちゃんと崩れもなく携帯サイトで表示されてました。

当時からDreamweaverすごかったんだと思います。



Adobe CCに契約するのは高いと思われるでしょうが、デジハリから契約すると年間3万円で最新のAdobe製品を何種類も使い倒せる上にモリサワフォントも使用できるのでデザイン作業は快適になりますよ。

デジハリのマスター講座に関しては私のブログ過去記事をご参照ください。(最近は期間限定なしで税込29,800円に変更されました)

2017-10-20

デジハリのAdobeマスター講座がリニューアル!今だけAdobe CCコンプリートプランが29,800円で購入できる!10/31まで