閉じる

Dreamweaverとは?できること、機能、メリット・デメリットなどを詳しく解説

DreamweaverとはAdobe社が提供しているWebオーサリングツールのことです。今回の記事では、DreamweaverとAdobe XDとの違いや、利用するメリットなどを解説します。

カテゴリ: Dreamweaver

本記事では、これからDreamweaverの利用を検討している方に向けて、Dreamweaverの概要やその特徴を詳しく解説します。

Dreamweaverとは

Dreamweaverとは、Adobe社が提供しているWebオーサリングツール(Webページ作成ソフトウェアのこと)です。オーサリング(authoring)とは、文字、画像、音声、動画などの要素を組み合わせて一つのメディア作品を制作するという意味です。

DTPにおけるInDesignの立ち位置と同じように、他のグラフィックソフトで作成した画像や素材なども利用して、コード編集によってコンテンツをレイアウトデザインし、Webページを作っていくツールであるとイメージするとわかりやすいでしょう。

Dreamweaverの歴史

Dreamweaverは、現在Adobe社が販売していますが、もともとはMacromediaというソフトウェア会社が開発したソフトウェアで、Webデザイン業界でデファクトスタンダードツール(事実上の標準化したツール)として圧倒的なシェアを誇っていました。

このDreamweaverに対抗して、Adobe社でもGoLiveというWebオーサリングツールを開発・提供(こちらもGoLive社というソフトウェア会社が開発していたソフトウェアを買収したもの)していたのですが、2005年にAdobeがMacromediaを買収し、徐々にGoLiveからDreamweaverへ移行して現在に至っています。

また、Dreamweaverを補完するグラフィックソフトウェアにFireworksというツールがあり、こちらもAdobe社に買収された後も開発・提供されていました。

しかし、PhotoshopやIllustratorでもWeb用の画像加工機能が強化されてきたこともあり、Creative SuiteシリーズからCreative Cloudに移行されるのと同時にFireworksの開発が終了しています。

DreamweaverとAdobe XDとの違い

Adobeには、同じWebデザイン用のツールとしてAdobe XDというソフトウェアが提供されています。このXDとDreamweaverの違いについても確認しておきましょう。

Adobe XDは、Adobe公式が「Webサイトやモバイルアプリなどのデザインに適したオールインワンのUX/UIソリューション」であると説明しているように、主にUX/UIを意識したWebサイトのワイヤーフレーム制作やプロトタイプ制作に用いるツールです。

以前、Adobeはデザイナーがコードを入力せずにWebサイトを製作できるツールとしてAdobe Museというソフトウェアを提供していましたが、2018年にこのソフトウェアの開発を終了させます。そして、複雑化していくWebサイトの機能やデザインに対応するために新たなツールとして登場したのがAdobe XDです。

Webデザインの制作工程は大きく分けると「1.コンテンツのプランを立てる」→「2.デザインのワイヤーフレームを作成する」→「3.Webページを作成する」→「4.Webサイトを公開する」という4つの流れになります。

このうち、Adobe XDが主に担当するのが2で、Dreamweaverが主に担当するのが後半部分の3、4です。

また、Adobe XDは、WebデザイナーやエンジニアだけでなくWebディレクター、Webプロデューサー、イラストレーター、コピーライターといったWebデザイン周辺の協業者もユーザーとして想定されており、チームプロジェクトの共同作業においてコミュニケーションツールとしても機能します。

一方で、Dreamweaverは、実際にWebページを作成・実装していく段階で用いるソフトウェアになります。

このように、別の作業工程を担っているので、競合するソフトウェア同士ではありません。Adobe XDとDreamweaverは、連携して活用していくことが可能な関係で、例えば、Adobe XDで作成したデータをDreamweaver用のデータに変換することも簡単です。

ただし、Adobe XDが、WebサイトだけでなくWebアプリケーションのデザインカンプやプロトタイプまで対応しているのに対し、Dreamweaverは基本的にWebサイトに特化しているので、Webアプリケーションを実装する場合は他のツールが選択されることが多いでしょう。

Adobe XDと競合するツールは、海外のWebデザイナーに非常に人気が高く日本でもシェアを広げているFigmaやエンジニアに人気の高いSketchといったプロトタイピングツールになります。

一方で、Dreamweaverと競合するツールはVS codeやSublime Textといったテキストエディタや、WordPressやShopifyといったCMSのサービスになります。

※ 尚、2022年9月の時点で、FigmaをAdobeが買収する意向を表明していますので、今後Adobe XDとFigmaは統合されていく可能性が高くソフトウェアのシェアに関する勢力図も変化が予想されます。

Dreamweaverの将来性

近年、Webサイトの開発環境も大きく変わってきています。例えば、WordPressは、Gutenberg(グーテンベルク)という新しいエディターを導入し、ノーコードツール的な側面を強めています。

同様に、Webサイト制作用のツールやサービスも、コモディティ化(高付加価値の製品の市場価値が低下し一般的な商品になること)が進み、専門的な知識を持たない人でも気軽に利用できる方向へシフトしていく傾向が見られます。

こうした流れの中で、かつてはプロユースの専門ソフトというイメージが強かったDreamweaverも、初心者にも使い勝手が良く設計されている点から、ノンエンジニア、ノンデザイナーなども含めたWebデザイン初心者におすすめできるツールとしての存在価値を高めています。

Dreamweaverでできること

Dreamweaverは、ツールとしていくつかの側面を持ち合わせたソフトウェアです。Dreamweaverを使ってできることを以下に紹介します。

1.Webデザインツールとしての側面

仕事でWebデザインを行う場合は、PhotoshopやAdobe XD、figmaといったツールでデザインカンプを作成し、そのカンプをもとにコーダーやプログラマーがWebページを完成させていくといった分業体制が基本となります。

しかし、Dreamweaverは、この作業工程で必須のソフトウェアではありませんので、ツールとして選択されないケースもあります。

その一方で、Dreamweaverは、HTMLやCSSといったマークアップ言語の基本的な知識さえ理解していれば、高度な専門知識がなくても利用可能なツールであるというメリットもあります。

Dreamweaverは、HTMLやCSSの記述法を覚えていなくても、WordPressのブロックエディターやビジュアルエディターのように挿入メニューから見出しや画像といった要素・属性を指定し追加していくことも可能です。

また、プライベートでWebサイト制作を行う場合などは、Dreamweaverだけでデザインから実装までを完結させることもできるのです。

もちろん、正確に表示されるWebサイトを作成する、自分の思い通りにWebデザインを表現するといった場合には、HTMLとCSSの知識は必須になりますが、グラフィックデザインと同じような感覚で素材をレイアウトしていくこともできるエディタであることは注目すべきポイントです。

Webデザインに必要な要素の大半を網羅していますので、これからWebデザインを学んでいくといった場合にも非常に役立つソフトウェアです。

2.コーディングを行うエディタとしての側面

コーディングを行うテキストエディタのシェア率は、現在VS Codeが1強となりつつあり、その状況はさらに強まると予測されます。しかし、どのエディタを使うかというのは宗教論争にも例えられるくらいですので、その歴史の長さからDreamweaverを愛用しているというWebデザイナーも少なくありません。

現在も、Webデザイン用のテキストエディタとして代表的なツールであることは間違いなく、コード編集に関しても多機能で、実際のデザインを確認しながら感覚的にコーディングできることが特徴的なツールです。

HTMLやCSSといったマークアップ言語はもちろんのこと、JavaScriptやPHPといったWebサイト制作に必要なプログラミング言語のコーディングも行えます。特に、JavaScriptは、BootstrapやjQueryといったライブラリに関する機能も標準搭載されており、効率的にWebデザイン作業ができるように設計されています。

また、Webサイトデザインに特化しているイメージが強いですが、C言語、Java、Perl、Python、Ruby、SQLといったプログラミング言語にも対応しておりWebアプリケーション開発にも対応できるツールです。

さらに、サードパーティ拡張機能をインストールすることでマニアックなカスタマイズを施すことも可能です。

3.FTP転送ソフトとしての側面

サーバーにWebページのファイルをアップロードするためにはFTP転送ソフトが必要になります。

FTP転送ソフトには、FFFTP、Cyberduck、FileZilla、ForkLift、FetchといったFTP転送ソフトが数多く提供されています。しかし、無料で利用できるツールもありますが、日本語化されているものはそれほど多くなく、特にMacユーザーの場合は選択肢が限られています。

ファイル転送は、ミスをするとWebサイトが表示されなくなることもありますので、英語のみのツールを利用するのが不安な方も多いかと思います。その点、Dreamweaverには、FTP転送ソフトとしての機能も搭載されており、完全日本語化されているので安心して利用できます。

4.CMSとしての側面

Dreamweaverは、CMS(Contents Management System:コンテンツ・マネジメント・システム)ツールとしての側面も持っています。CMSのツールの国内シェア率はWordPressが圧倒的な1位ですが、W3Techの調査では、Dreamweaver(Adobe Systems)が2位となっています(2022年現在)。

DreamweaverをCMSとして捉えるのには意見の分かれるところかもしれませんが、WordPressを利用せずにオリジナルのサイトを制作し、なおかつ独自のCMSを開発するには至らないといったケースでは、DreamweaverによってWebサイトのコンテンツを管理する方法も選択肢の一つになり得るでしょう。

参考URL:Distribution of content management systems among websites that use Japanese

Dreamweaverの特徴

ここではDreamweaverの特徴をメリット・デメリットにわけて解説します。

Dreamweaverを使うメリット

Dreamweaverを使うメリットをしっかり理解しておくと、ツールを選択する上で判断材料になりますので以下に紹介します。

1.ライブラリ機能、クイック編集機能など便利な機能を多数搭載

Dreamweaverには、Webサイト制作を行う上で便利な独自の機能が多数搭載されています。代表的な機能に、ライブラリ機能やクイック編集機能があります。

ライブラリ機能とは、Webページにレイアウトするために作成した個別のアセット(プログラミングの一部、部品、素材など)の集合体、またはそのコピーを格納しておく機能です。

このライブラリには、jQueryやBootstrapといったJavaScriptのライブラリや、Adobe Creative Cloudの「Stockとマーケットプレイス」で提供されている素材やテンプレート、ライブラリなど様々なアセットが含まれます。

JavaScriptのライブラリを、簡単に読み込む機能は他のエディタにも拡張機能などで搭載されていることが多いですが、写真、イラスト、フォントといったデザインを行う上で重要な要素についても簡単に利用できるのは、Dreamweaverの大きな魅力の一つです。

クイック編集機能は、関連したファイルを新しいタブで開かずに編集できる機能です。例えば、HTMLのclassやidなどタグの属性にカーソルを合わせるだけで、それに関連したCSSを編集可能です。HTMLファイルとCSSファイルを別々に開いて編集する必要がないので、作業効率も大幅にアップします。

この他にも、これから打つコードを予測変換してくれるサジェスト表示機能など、便利な機能が数多く搭載されています。

2.Emmetを標準搭載

Dreamweaverには、Emmetが標準搭載されています。Emmetとは、HTMLやCSSを省略記法で入力できるプラグインです。作業効率を大幅にアップできるので、大半のWebデザイナー、エンジニアがEmmetやそれに類似した機能をエディタに追加しています。

プラグインですので、他のエディタでは拡張機能としてインストールする必要があります。Dreamweaverは、最初からEmmetが搭載されているので追加でインストールする必要はありません。

エディタによっては、拡張機能をインストールするのにも、それなりに知識や下調べが必要になってくるので、そうした準備作業の必要がないのはメリットです。

3.便利なリアルタイムプレビュー表示

Dreamweaverには、リアルタイムプレビュー機能という作成したWebページをワンクリックでブラウザに読み込ませて確認できる機能が搭載されています。

プレビュー実行環境の構築に専門知識やある程度の手間が必要になってきますので、はじめからリアルタイムで実際のデザインを確認できる本機能は大変便利です。

4.テンプレートが充実している

Dreamweaverには、あらかじめ様々なテンプレートが用意されており、初心者でも簡単にサイトのフレームを構築することができます。

5.Mac、Windows両方で使える

Dreamweaverは、MacとWindows両方に対応しています。エディタによっては、どちらかのOSに限定されているものもあります。さまざまな端末で簡単に導入・利用できる点もDreamweaverの優れたポイントになります。

6.日本語のマニュアルが充実

Adobe公式のユーザーガイドはもちろん、検索すれば日本語で書かれたマニュアルや解説記事が数多くヒットするのもDreamweaverを使う魅力です。古いバージョンから積み重なれてきた知見やノウハウも多く情報提供されていますので、使い方がわからない場合も調べれば解決できることが多いです。

7.チュートリアルが丁寧でわかりやすい

Adobeのソフトウェア全般に言えることですが、プロのユーザーだけでなく、ツールを利用するのが初めての人にも分かりやすいチュートリアルが用意されています。

8.他のAdobe製品と相性の良い

Adobe社が提供している他のソフトウェア・サービスとの連携のしやすいのもDreamweaverのメリットです。

例えば、Adobe XDで作成したデータをDreamweaver用のデータに変換できます。

また、Behance(アドビが運営するクリエイター向けソーシャルメディアプラットフォーム)や、Adobe Portfolio(Behanceと連携可能なWebポートフォリオ作成ツール)との連携も簡単です。

Dreamweaverを使うデメリット

次に、Dreamweaverのデメリットについても確認しておきましょう。

1.多機能すぎて逆に使いづらいケースも

Dreamweaverに搭載されている機能は非常に多く、専門的な内容から作業効率をアップするものまで多岐に亘ります。しかし、機能が多すぎるために、利用方法についても覚えることが多く、使い方をマスターするまでに、それなりの時間を要します。

シンプルなWebサイト設計を行う上では、必要のない機能もありますので、ツールの使い方をマスターする時間がない方や、細かな機能を必要としない方には不向きなソフトウェアです。

2.HTML、CSS、プログラミング言語などのコーディングを覚えるにはマイナス

Dreamweaverには、コーディングを補助する機能が多数搭載されています。そのため、Dreamweaverの機能に頼りすぎてしまうと、コーディングを勉強したり、覚えていくといった面ではマイナスに働きます。

使い方次第にはなりますが、コーディングもしっかりできるWebデザイナーを目指したい場合や、プログラミングの勉強の中でHTMLやCSSの実装方法を学びたいといった場合には、一般的に不向きなツールであると言えます。

3.単品だと価格が高いサブスクリプションサービスである

Dreamweaverは有料のソフトウェアで、サブスクリプションの契約をすることで利用可能になります。AdobeのDreamweaver単体プランは、月額2,728円(2022年8月現在)でかなり高額の部類に入ります。

特にテキストエディタとして利用する場合は、無料で利用できる他のツールが多数提供されていますので、コストを抑えたい場合は候補から外れます。

一方で、AdobeのCreative Cloudコンプリートプランや、学生・教職員向けプラン、法人プランなどにすでに加入している場合は、Dreamweaverがプランの中に含まれていますので、導入しやすいツールになります。

ちなみに、Adobe社は、Bracketsという無料で利用できるテキストエディタも提供しています。BracketsはDreamweaverのテキストエディタ機能だけを抽出したようなツールですので、Dreamweaverを利用したいけれども予算的に厳しい場合はこちらも選択肢の一つになります。

4.低スペックのPCでは動作が重い場合がある

多機能であるが故に、動作が重い、もたつくという意見が多いのもDreamweaverを使うデメリットです。

しかし、最新のバージョンでは、こうした動作の重さは大幅に改善されています。PC自体のスペックも上がってきていますので、比較的新しい端末やOSのバージョンを利用している人はあまり気にする必要はないかもしれません。

ただし、低スペックなパソコン端末を用いる場合は、他のエディタに比べて、サクサク動かないケースもあり得るので、その点は注意しておきましょう。

Dreamweaverの利用をおすすめする人・環境

これまでの解説からも分かる通り、DreamweaverはWebサイト制作を行いたい人すべてにおすすめできるツールという訳ではありません。しかし、非常に多機能なツールなので以下のような人・環境でおすすめのソフトウェアになります。

ノンデザイナー/ノンエンジニアのWeb担当者

HTMLやCSSなどの知識はある程度有しているけれども、Webデザイナーやエンジニアを目指している訳ではないというWeb関連職の方も多いかと思います。

Dreamweaverは、コードと実際に表示されるWebページを確認する作業にとても便利なソフトウェアなため、Webディレクター、Webプロデューサーといったデータをチェックする側の役割の人に非常におすすめのツールになります。

グラフィックデザインやDTPデザインをメインに活動しているデザイナー

Webデザイナーには、デザイン面に特化しコーディング等はコーダーやエンジニアに任せるというスタンスの人と、デザインだけでなくコーディングやJavaScriptなどのフロントエンド開発に使われる言語までを扱っていくスタンスの人がいます。

しかし、複雑化するWebサイト開発環境から、デザイン力だけで生き残っていくのはなかなか難しい状況になりつつあり、プロのWebデザイナーとして活動していくためには、前者のスタンスを取る場合もHTMLやCSSの基本は理解しておく必要があります。

最近は、主にグラフィックデザイン・DTPデザインの分野で活動しているデザイナーが、Webサイト関連の案件も請け負うケースも増えてきています。

しかし、こうしたパターンではデザイナーの知識不足から、コーダーやエンジニアとの間でトラブルが起きやすく、SNSなどで論争になることも多いという現状があります。

Dreamweaverは、Adobe社が提供する他のグラフィックソフトウェアと共通する点も多く、ビジュアルを確認しながらコーディング作業ができるので、こうしたトラブルを未然に防ぐのにも役立ちます。

コーディングに不慣れだったり、苦手意識を持っているグラフィックデザイナーやDTPデザイナーにも使いやすいエディタなので、おすすめのツールです。

Webサイト制作初心者

Dreamweaverは、丁寧なチュートリアルや手厚いコーディングの補助機能がありますので、Webサイト制作初心者にもおすすめのツールです。

プライベートで、Webサイト制作をしたい、職業としてWebデザイナーやプログラマーは目指さないけれども、趣味として日曜大工的にWebサイト制作を学びたい・楽しみたいといった人にとって最適なエディタの一つでしょう。

Adobe CCを使っている他ジャンルのクリエイター

動画制作やアニメーション制作など他ジャンルの制作活動でAdobe社製のソフトを使っているクリエイターの方などは、すでに、Adobe Creative Cloudコンプリートプランに加入している方も多いかと思います。

Adobeのツールをよく利用する人にとっては、UIや操作性などの観点からもDreamweaverはおすすめのWebオーサリングツールになります。

サイト管理・運用のためのCMSツールとして利用する

WordPressなどのCMSを利用せずに、それほど更新が必要でない静的サイトでコーポーレートサイトを構築した場合などは、Dreamweaverによってコンテンツを管理していく方法が一つの選択肢になるでしょう。

特に、Adobe CCの法人プラン等に加入しており、社内にある程度Webサイト運営の知識を有しているものがいるといった状況であれば、検討に値する管理方法になります。

まとめ

プログラマーが選ぶテキストエディタとしてはシェア率が低下しているものの、Webデザイナーにはまだまだ人気の高いWebオーサリングツールです。特に日本では同じ業務ツールを使い続ける傾向がありますので、歴史も古く信頼性のあるツールとして広く認識されているDreamweaverを使う企業も一定数存在します。

そのため、クライアント先からDreamweaverを指定されたり、Web制作会社のWebデザイナー採用条件になっているケースもあり、Dreamweaverの概要を知っておくことは、Webデザイナーにとって必須の項目となります。

メインのテキストエディタとして利用しない場合でも、その特徴を理解しておくことは大切なことですので、本記事を参考にDreamweaverの全体像を掴んでおきましょう。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、 以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。