Adobe Dreamweaver CCとは できることやメリットを解説

Adobe Dreamweaverは、HTMLやCSSを編集してWebページを作るためのソフトです。

コードを書くところから、ページの表示確認、サイト内のファイル管理、サーバーへの転送までをDreamweaverだけで行うことができます。

Dreamweaverの特徴は、コードを書けることだけではありません。Webサイトを更新するための作業を、一つの制作環境へまとめられることにあります。

Adobe DreamweaverとはWebサイトの制作と管理に使うソフト

Dreamweaverは、Webサイトを表示するためのHTML、CSS、JavaScriptなどを編集するソフトです。

PhotoshopやIllustratorで作成した画像やロゴを配置し、ブラウザで見られるWebページへ仕上げます。

一般的なコードエディターでもHTMLやCSSは編集できますが、Dreamweaverには表示確認、サイト管理、リンクチェック、サーバー転送などの機能が加わっています。

Dreamweaverはコードを書かずに使うソフトではない

Dreamweaverには、コードを入力しやすくする機能や、編集中のページを確認する機能があります。

ただし、WordPressのブロックエディターやノーコードツールのように、コードをほとんど意識せずページを作るソフトではありません。

Dreamweaverはコーディングを不要にするのではなく、コーディングとサイト管理を進めやすくするソフトです。

現在は安定して使い続けるための更新が中心

現在では、コアライブラリや各種コンポーネント、セキュリティ、互換性、サーバー接続などの更新が中心です。

大きな制作機能を次々に追加するというより、既存の機能を現在の環境で安定して使い続けられるように改善されています。

既存のWebサイトを継続して制作・保守するための、成熟したソフトと考えるとわかりやすいでしょう。

Adobe Dreamweaver CCでできること

Dreamweaverには多くの機能がありますが、最初からすべてを覚える必要はありません。

まずは、Webサイトを作成・更新するときによく使う機能から見ていきましょう。

コードの入力候補を表示してくれる

DreamweaverでHTMLやCSSを入力すると、途中まで入力した文字に合わせてコードの候補が表示されます。

タグ名やCSSのプロパティをすべて暗記していなくても、候補を選びながら入力できます。

入力ミスを減らしながらコードを書けるため、HTMLやCSSを学び始めた人にも便利です。

ただし、表示された候補が目的に合っているかは自分で判断します。

コードとページの見た目を並べて確認できる

Dreamweaverでは、コードとページの表示を同じ画面で確認できます。

コードを変更したあと、ページのどこが変わったのかを見ながら調整できます。

「このHTMLが見出しになっている」「このCSSが余白を変えている」といった関係を目で追えるのがメリットです。

ページを見ながら画像やクラスを設定できる

ライブビューでは、ページ上の要素を選び、画像サイズ、alt、リンク先、classなどを確認・設定できます。

コードだけでは対象を見つけにくいときも、ページ上の位置を確認しながら編集できます。

見た目だけでページを完成させる機能ではありませんが、コードと対象要素を対応させやすくなります。

Webサイト内のファイルをまとめて管理できる

Dreamweaverでは、HTML、CSS、JavaScript、画像などを一つの「サイト」として登録できます。

現在開いているページだけでなく、サイトを構成するファイル全体を見ながら作業できます。

ファイルを移動したり名前を変更したりした際に、関連するリンクも更新できるため、ページ数やファイル数が多いサイトほど便利です。

サイト全体を検索してまとめて変更できる

Dreamweaverの検索・置換は、開いているページだけでなく、サイト内の複数ファイルを対象にできます。

たとえば、次のような変更をまとめて行えます。

HTMLファイルを一つずつ開いて探す必要がないため、複数ページへ同じ修正を行うときに便利です。

短い単語を指定すると変更したくない場所まで置き換わることがあるため、実行前に対象箇所を確認しましょう。

リンク切れや使われていないファイルを確認できる

ページを移動・削除したあと、古いリンクだけが残ることがあります。

Dreamweaverでは、サイト内のリンクを調べてリンク先が見つからない箇所をチェックすることができます。

ほかのページから使われていないファイルも確認できますが、削除前にJavaScriptなどから読み込まれていないか確認が必要です。

テンプレートで複数ページの共通部分を管理できる

Dreamweaverのテンプレートを使うと、共通部分とページごとに変更する部分を分けて管理できます。

ヘッダーやメニューを変更するたびに、すべてのHTMLファイルを一つずつ修正する必要がありません。

ただし、既存サイトをDreamweaverで開くだけで、自動的にテンプレート形式へ変わるわけではありません。

編集したファイルをサーバーへ転送できる

Webサイトを公開するには、パソコン内で編集したHTMLや画像をWebサーバーへ送る必要があります。

Dreamweaverでは、パソコン内のローカルファイルと、サーバー上のリモートファイルを同じ画面で確認できます。

FTPやFTPSなどを使い、編集したファイルをサーバーへ転送できるため、別のFTPソフトへ切り替える回数を減らせます。

Gitの基本操作をDreamweaver内で行える

Gitは、ファイルの変更履歴を記録するための仕組みです。

Dreamweaverでは、Gitパネルから次のような基本操作を行えます。

Gitクライアントの導入や基本的な知識は別途必要です。複数人で使う場合は、チームが決めたブランチやレビュー方法へ合わせます。

Creative Cloudの素材を利用しやすい

DreamweaverはCreative Cloudの一部なので、PhotoshopやIllustratorで作成した画像やsvgなどをWebページへ使用できます。

素材制作はPhotoshopやIllustrator、ページへの配置とサイト管理はDreamweaverという役割です。

Adobeアプリを複数使ってWebサイトを制作する人にとって、制作環境をAdobe関連でまとめやすい点もメリットです。

Dreamweaver CCを使うメリット

ここまで紹介した機能は、ほかのソフトを組み合わせても実現できます。

Dreamweaverのメリットは、個々の機能が特別というより、Webサイトを更新するための作業が一つにつながっていることです。

コードと表示結果の関係を理解しやすい

Dreamweaverでは、コードとページの表示を下図のように同じ画面で確認できます。

コードだけを見ていると、どの部分がページ上の見出しや画像に対応しているのかわかりにくいことがあります。

Dreamweaverなら、入力したコードと画面上の変化を結びつけながら学べます。

ページだけでなくサイト全体を見ながら作業できる

通常のコードエディターでは、現在開いているファイルを中心に作業しますが、Dreamweaverではファイル同士のリンクや、パソコン内とサーバー上のファイルも含めてサイト全体を管理できます。

ファイル移動時のリンク更新、サイト全体の検索・置換、リンク切れの確認を同じ環境で行えます。

修正から公開まで一つのアプリで進められる

Webサイトを更新するときは、コードを直すだけでは終わりません。

コード編集、表示確認、関連ファイルの確認、サーバー転送までを一つの流れで進められます。

コードエディター、ブラウザ、FTPソフト、ファイル管理画面を何度も切り替える必要が少なくなります。

複数ページへ同じ修正を反映しやすい

会社名、住所、メニュー、フッターなどは、多くのページで共通して使われます。

Dreamweaverでは、変更の種類によって検索・置換とテンプレートを使い分けられます。

CMSを使用していないHTMLサイトでは、ページごとに同じ修正を繰り返す負担を減らせます。

既存サイトの保守で強みを発揮しやすい

Dreamweaverは、新しいサイトを一から作る場合だけのソフトではありません。

すでに公開されているHTMLサイトでは、次のような更新作業に向いています。

会社やクライアントがDreamweaverの設定やテンプレートを使っている場合は、その環境を引き継いで更新できます。

私自身もDreamweaverを便利に使ってきましたが、Web制作に必須のソフトだとは考えていません。

便利かどうかは、機能の多さよりも、現在管理しているサイトと更新方法に合っているかで変わります。

コーディングができない人にはDreamweaverは使えない

コードをすべて暗記していなければ使えない、という意味ではありません。

文章や画像の変更であれば、HTMLやCSSを学び始めた人でも操作できます。

Dreamweaverが助けてくれるのは、コードの入力、表示確認、ファイル管理、サーバー転送です。

表示が崩れた原因や、どのコードを修正すべきか、公開してよい状態かは自分で判断します。

Dreamweaverはあくまでもコーディングを助けるソフト

すべてのタグやCSSを暗記する必要はありません。

わからないコードを調べながらでも、何が書かれているかを読み取り、問題が起きた場所を探せる程度の基礎知識は必要です。

入力候補が出ることと、正しいコードを選べることは別です。

Dreamweaverに頼り切らずコードも読めるようにする

コードヒントやライブビューは、HTMLやCSSを学んでいる途中にも役立ちます。

ただし、Dreamweaverがなければ修正できない状態では、会社や制作環境が変わったときに対応しにくくなります。

Dreamweaverを使いながら、別のエディターでも基本的なコードを読める力を身につけておきましょう。

AIがコードを書いてくれる場合も基礎知識は必要

現在は、AIへ作りたいページを伝え、HTMLやCSSのたたき台を作ってもらうこともできます。

AIが生成したコードをDreamweaverで開き、ライブビューで確認しながら修正する使い方も可能です。

しかし、AIが作ったコードには次のような問題が起こることがあります。

Dreamweaverは、AIが作ったコードの表示結果を確認する助けにもなりますが、コード自体が適切か、既存サイトへ追加して問題ないかまでは判断することはできません。

Dreamweaverの中心的な強みはAI機能ではなく、コード編集、表示確認、サイト管理、サーバー転送を一つにまとめられることです。

Adobe Dreamweaver CCの料金と無料体験

Dreamweaverは、Creative Cloudのサブスクリプションとして利用します。

Dreamweaverだけを使う単体プランのほか、複数のAdobeアプリを利用できるCreative Cloudプランにも含まれています。

利用方法	料金・期間	内容
Dreamweaver単体プラン	3,280円／月	Dreamweaverだけを利用する
無料体験	7日間	すべての機能を試す
買い切り版	販売なし	Creative Cloudの契約が必要

Dreamweaverだけなら単体プラン

Dreamweaverだけを継続して使う場合は、単体プランが一番安く済みます。

しかし、PhotoshopやIllustratorなども利用する可能性があるのであれば、単体プランを複数契約するよりもCreative Cloudプランを選んだほうが圧倒的にコスパが良くなります。

Dreamweaverの買い切り版は現在販売されていない

現在のDreamweaverは、Creative Cloudのメンバーシップとして利用します。

現行製品の買い切り版はなく、Dreamweaver単体プランまたは複数アプリを含むプランの契約が必要です。

古いCreative Suite版は現在のOSやWeb制作環境を前提としていないため、中古の買い切り版を探す方法はおすすめできません。

無料体験は7日間

Dreamweaverには7日間の無料体験があります。

無料体験中も製品版と同じ機能を使用でき、期間終了後は有料プランへ移行します。継続しない場合は期間中に解約してください。

導入を迷っている場合は、次の機能を実際に試すと判断しやすくなります。

Dreamweaverの無料体験をチェック

無料体験の仕組みや解約時の注意は、Adobe CC無料体験の解説で解説しています。

Dreamweaverのよくある質問

まとめ｜DreamweaverはWeb制作とサイト管理を一つにまとめられる

Dreamweaverは、HTMLやCSSの編集、ページの表示確認、サイト内のファイル管理、サーバー転送を一つの環境で進められるWeb制作ソフトです。

コードを書くだけでなく、関連する画像やCSS、ページ同士のリンク、公開先のファイルまでまとめて管理できます。

特に、複数のHTMLファイルから構成された既存サイトを継続して更新するときに強みを発揮します。

コード編集だけでなく、サイトの確認・管理・公開までを一つのアプリへまとめたい人に向いているソフトです。

導入を検討している場合は、無料体験を利用して、コードヒント、ライブビュー、サイト管理、ファイル転送までの流れを実際に試してみてください。