Dreamweaverとは(読み:アドビ ドリームウィーバー)。
もちろん、AdobeのWEBデザインアプリってことはわかります。でも、このソフト、どんなソフトでどんなことができるのか?よくわからないという方も多いですよね?
そこで今回の記事では
今回の記事でわかること
- Dreamweaverとは?
- Dreamweaverを使うメリット
- 機能
- 使い方
を紹介します。
さらに、Dreamweaverの無料ダウンロード(日本語)などの素朴な疑問についてもお答えします。

執筆者
この記事は、動画制作・デザインを手がける「ワイラボ」の代表が執筆しています。普段は企画やディレクションの立場から、現場チームと連携して映像制作に関わっており、その経験から得た視点でお話ししています。
1. Adobe Dreamweaverとは?

まずは、どんなソフトなのか?を一言でというと
です。
①高機能なWEB制作アプリ(WEBオーサリングツール)
Adobe Dreamweaverは、プロ向けのWEB制作ソフトです。
高度な機能がひとつのアプリにまとまっていて、これだけでホームページ制作を完結できます。
HTML、CSS、PHP、JavaScriptなどのプログラム言語に対応しています。そのため、スピーディーなコーディングができることから人気を獲得しています。
また、Dreamweaverには、組み込まれたライブラリ機能があります。これにより、ホームページ制作時に、メニューやサイドバーの追加といった面倒な作業も効率的に進められます。
②デザインを見ながら作業できる
さらに、リアルタイムでデザインを見ながら作業できるのも、Adobe Dreamweaverの大きなメリットです。
くわえて、コーディングを視覚的に確認できることで、正確性を高めながらWEB制作を進められます。
また、タグ、ID、Classにカーソルを合わせてCtrl+e(Macはコマンド+e)。などのショートカットでの編集など、クイック編集機能も豊富です。
③Dreamweaverとは?WEB制作の自由度が高い
Adobe Dreamweaverはカスタマイズ性に優れています。
そして、その自由度の高さは、ワークスペースにも及びます。
そのため、作業効率を高められる点もメリットです。
2. Adobe Dreamweaverの機能やメリット

Adobe Dreamweaverは高度な機能が豊富です。が、その中でも特に便利なものについてご紹介します。
①コーディングサポート機能
まず、優れているのは、コーディングサポート機能(Emmetプラグイン搭載)です。
例えばコードのサジェスト表示機能では、コードの文字を少し打つだけで、コードの候補が表示されます。特に頻繁に使うコードの場合は、入力を簡易化させられるので作業の時短に便利です。
他にも、ブログを書くような感覚で作業できるコーディングサポート機能もあり、直感的にAdobe Dreamweaverを操作できます。
②サイト管理もできる
つぎに、Dreamweaverの利点は、WEB制作だけでなく、サイト管理もできること、です。
さらに、FTP機能も搭載しているため、サーバーへのアップロードや同期も可能です。
ちなみに、Dreamweaverは、同期する際は、更新分だけがアップロードされます。そのため、サイト管理の時間節約ができます。都度、全てのファイルが読み込まれるわけではありません。
③Adobe Creative Cloud製品とのシームレスな連携
Dreamweaverは、PhotoshopやIllustrator。もちろん、こういったAdobe CCソフトとの連携もできます。
例えば、Photoshopは「PSD」、Illustratorは「.ai」といったファイル形式が多くあります。が、そういったAdobe製品のファイル形式をそのままAdobe Dreamweaverに読み込むことが可能です。
JPEG、PNG、GIFといったホームページに最適な形に変換、連携されます。
④インターネット上にマニュアルの情報が多い
Dreamweaverは、プロに使用者が多く、これまでに、さまざまなノウハウが構築されています。
そのためインターネット上に情報が多い点も大きなメリットです。
使い方で分からないことがあった場合でも、すぐに検索して解決できます。
3. Adobe DreamweaverとXDの違いは?

Adobe Creative CloudのWEB制作アプリには、Dreamweaverの他にもXDがあります。何が違うの?って思っている人もいますよね?
大きく分けて次の3点が挙げられます。
DreamweaverとXDの違いは?
- コーティングしながら作業する
- チーム作業に適しているのはXD
- 専門知識が必要なDreamweaver
①コーディングしながら作業する点
XDもWindowsとMacの両方で使えます。
が、コンセプトやアプローチはAdobe Dreamweaverとは違います。
Adobe Dreamweaverは、コーディングしながらWEB制作を積み上げていきます。反面、XDはサイトのUI/UXを大まかに配置してから細部をデザインしていく形です。
②チーム作業に適しているのはXD
XDはより直感的にWEB制作を行うことができ、チームなど複数名での共同作業にも適しています。
また、XDはAdobe DreamweaverのようにHTMLやCSSの専門知識は不可欠ではありません。
③専門知識が必要なDreamweaver
Dreamweaverを使いこなすためには、HTMLやCSSといったコーディングを専門的に習得する必要があります。
ソフトの使い方以外にも専門知識が必要です。そのため、専門知識のない方にとっては敷居が高く感じられるかもしれません。
DreamweaverとXDは、同じCreative Cloudとして連携させることができます。そうすることで、両方のメリットを取り入れた相乗効果が発揮される。それぞれまったく違う役割を持ったソフトです。
4. Adobe Dreamweaverの使い方

ここからは、Dreamweaverの使い方について見ていきましょう。
①Adobe Dreamweaverの基本操作
新規サイトを選ぶ
Adobe Dreamweaverを開いたら、まずメニューバーの「サイト」から「新規サイト」を選んでください。
この操作で新規ドキュメントを作成できます。
作業スペース
ワークスペースは左がデザインエリア、右がコードエリアに分かれています。
デザインエリアに文字入力すると、その情報がコードエリアにHTMLやCSSなどの形式で表示されます。
画像ファイルの読み込み
PhotoshopやIllustratorで作った画像ファイルを読み込みます。
それには、メニューバーの「挿入」から「Image」をクリックします。後は、フォルダから画像ファイルを選んで適用するだけです。
デザインエリアに画像ファイルが読み込まれると、コードエリアにコードで画像ファイルの情報が表示されます。
基本操作はこのような形になります。
もちろん、このほかにも、たくさんの便利な機能が豊富に備わっています。
②Adobe Dreamweaverはテンプレートが便利
Adobe Dreamweaverはコーディングスキルが不可欠と聞くと、難しそうに感じられるかもしれません。
でも、ご安心ください。無料テンプレートを使えばAdobe Dreamweaverで簡単にWEBサイトを量産できます。

テンプレートは、新規ドキュメント作成時に選択できるよ

Adobe Dreamweaver用テンプレート「.dwt」ファイルを読み込んでもOK
テンプレートは編集可能範囲を決められるので、共通部分を一元管理することもできます。
この機能を使えばページごとに編集する項目を減らして、サイトの更新作業もスピードアップを図ることができます。
③Adobe Dreamweaverは重い?対処法は?
Dreamweaverは高機能なアプリですが、その分だけ動作が重いと感じる使用者もいます。
特に、文字入力で重いまたは遅いと感じられるケースが多くあります。
Adobe Dreamweaverの動作が重くなった場合の対処法として「Configuration」と「Temp File List」の削除が考えられます。
Configuration
Configurationは、コンピューター/ユーザー名/AppDataにある。(隠しファイルの場合あり)
Temp File List
Temp File Listは、コンピューター/ユーザー名/Software/Adobe/Dreamweaverにある。
これらのファイル削除で改善されない場合。そのケースでは、Dreamweaverを最新から前のバージョンにバージョンダウンするのも有効です。
5. Adobe Dreamweaverの気になる疑問

最後は、Adobe Dreamweaverの気になる疑問に応えていきたいと思います。
HTMLやCSSのコーディングスキルがある方、これからコーディングを学びたいと考えている初心者の方です。
コーディングの専門知識がないと、Adobe Dreamweaverを使いこなすことはできません。
しかし、Adobe Dreamweaverはサジェスト候補表示といったコーディングサポートが豊富なため、HTMLやCSSの基礎知識を身に付ければ、直感的に操作できます。
プロはAdobe Dreamweaverを使わない(いらない)という声も一部で聞かれますが、そうではありません。
WEB制作を行う企業に勤務する場合にも必要性があります。
求人や案件の中には、Adobe Dreamweaverのスキルを重視するところもあります。働く環境により使わない(いらない)かどうかも変わってくるというのが事実です。
6. Adobe Dreamweaverの料金とオススメの購入方法は?

Adobe Creative Cloud製品に含まれます。月額料金のサブスクです。
ソフトを単体で購入する『単体プラン』なら、月額3,280円(定額制)です。
さらに、Adobe CCの全ソフトが使えるコンプリートプラン。こちらなら、月額7,780円です。
購入プラン | 金額 | 使えるソフト |
---|---|---|
単体プラン | 3,280円/月 | Dreamweaverのみ |
Adobe Creative Cloud コンプリートプラン | 1か月毎契約/月= 12,380円 年間契約/月払い= 7,780円 年間契約/一括 =86,880円 | ●Photoshop ●XD ●Illustrator ●Premiere Pro などAdobe製品すべてプラス ●Adobe Font ●クラウドストレージ(100GB) |
Adobe Creative Cloud 学生・教職員版 | 1か月毎契約/月=なし 年間契約/月払い= 2,180円 年間契約/一括 =26,162円 |
Amazonなどでの販売はありません。
①Adobe Dreamweaverの無料ダウンロード(日本語)
現在、Adobe Dreamweaverは定額制(サブスクリプション)のみで、買い切り版の販売はありません。
検討中の方は、7日間のAdobe Dreamweaver無料体験版(「 無料で始める」)で、まず使い勝手を確かめから、購入することをオススメします。
②買い切り版はオススメできません

以前は、Adobe Dreamweaver CS6という買い切り型もありました。
まれにですが、今でもAdobe Dreamweaver CS6は中古で入手可能な時があります。Windows10など最新OSにインストールできるようです。
しかし、CS6バージョンはサポート外です。トラブル発生時には対応されないのでビジネス利用に限らず、おすすめできません。
中古品やCS買い切り版をオススメしない理由
- Adobe製品はライセンス版で、中古品はライセンス違反の可能性が高いから
- 現在のバージョンと互換性がなく、最新の機能が使えないから
- 海賊版の可能性もあり、パソコンにウィルスが混入する可能性が高いから
③オススメの購入方法は?
Dreamweaver単体で使うよりも、コンプリートプランでの購入をオススメします。
もちろん、予算が許せば…です。
なぜなら、Photoshop、XDなど、ほかのAdobe製品を併用した使った方が使い勝手が良いから、です。
その際、一番安いのは、学生・教職員版ですが、社会人でも学生価格に近い金額で購入できる方法もあります。
7. Adobe Dreamweaverとは?まとめ
Adobe Dreamweaverは、サブスクリプション型のWEB制作アプリです。
オールインワンの高機能なアプリなので、ホームページの作成から公開・管理までひとつのソフトで完結できます。
ただし、Adobe Dreamweaverはコーディングを基本にしており、HTMLやCSSといった専門知識が不可欠です。しかし、コーディングサポート機能やテンプレートも豊富なため、直感的かつスピーディにWEB制作を行えるメリットがあります。
単体プランで買うよりも、Adobe製品を全て使えるコンプリートプランでの購入の方がお得です。
今回も最後まで読んでいただき、ありがとうございました!