Dreamweaver（ドリームウィーバー）とはAdobe Dreamweaverの使い方を知って、HTMLを使ったホームページを作りたい方に

Adobe Dreamweaver（アドビドリームウィーバー）とは、ホームページを作成するための統合ソフトです。m-SchoolのWebマスターたいちょが、Dreamweaverとはいったいどんなものなのか！をご紹介します。

このページのポイント

Adobe Dreamweaverとはなんたるかが、だいたいわかります。
このホームページも、Dreamweaverで作られています。

こんな方におすすめのページです

とりあえずDreamweaverのことについて、だいたい知りたい。
ずっと「マイクロメディアドリームウェーバー」だと思っていた。

Adobe Dreamweaverとは

Adobe Dreamweaver（アドビドリームウィーバー）は、ひとことで言うとホームページ制作ソフトです。

編集機能やレイアウトの表示機能、ファイル管理機能など、制作や更新作業に必要な機能がひとまとめになっている、統合ソフトウェアとなります。

アドビシステムズのホームページでは、“Webデザインソフトウェア、HTMLエディター”となっています。“Webオーサリングツール”や“Webサイト作成ソフト”などとも呼ばれます。

ホームページは基本的に「HTML＋画像」なので、頑張れば「メモ帳＋ペイント」でもなんとか作れます。しかし、作業効率などやミスの防止などを考えると、専用ソフトを利用した方が効果的です。

Dreamweaverの歴史

Dreamweaverの歩んできた歴史は長く、10年以上もバージョンアップを続けています。もともとはMacromedia（マクロメディア）社の製品でしたが、MacromediaがAdobe Systemsに買収され、以降はアドビ製品としてリリースされています。

Dreamweaverのバージョン	内部Ver	日本語版発売年	該当するスイート製品（統合パッケージ）
Macromedia Dreamweaver J	1.2	1998
Macromedia Dreamweaver 2J	2	1999
Macromedia Dreamweaver 3J	3	2000
Macromedia Dreamweaver 4 / UltraDeveloper 4	4	2001
Macromedia Dreamweaver MX	6	2002	Macromedia Studio MX
Macromedia Dreamweaver MX 2004	7	2003	Macromedia Studio MX 2004
Macromedia Dreamweaver 8	8	2005	Macromedia Studio 8
Adobe Dreamweaver CS3	9	2007	Adobe Creative Suite 3
Adobe Dreamweaver CS4	10	2008	Adobe Creative Suite 4
Adobe Dreamweaver CS5	11	2010	Adobe Creative Suite 5

ちなみにこの表、Wikipediaからパクった…なんてことはなく、社内にある購入したDreamweaverをチェックして確認しましたので、信頼性は高いと思います。

Dreamweaver 1 の必須PC環境は、マニュアルによるとIntel Pentium 90MHz以上のWindows 95またはNT 4.0だそうです。空きメモリは16MB以上。隔世の感がありますね。しかし、タグセレクタやビヘイビア、インスペクタなどの基本機能がバージョン 1 の段階ですでに存在しています。驚くべき完成度です。

Dreamweaverの最新バージョン

現在の最新バージョンは、Adobe Dreamweaver CS5（ドリームウィーバーCS5）です。

スイート製品（Dreamweaver以外にも、PhotoshopやFlashなどAdobeの主要製品がひとまとめになったセット）としては、

Adobe Creative Suite 5 Master Collection（アドビCS5 マスターコレクション）
Adobe Creative Suite 5 Design Premium（アドビCS5 デザインプレミアム）
Adobe Creative Suite 5 Web Premium（アドビCS5 ウェブプレミアム）

に、それぞれ含まれています。

ちなみにお買い求めは、アドビ認定ディーラーであるm-Schoolでご購入いただくと幸せです。

Dreamweaverの読み方

Dreamweaverの読み方は、ドリームウィーバーが正解です。「夢（Dream）」を「紡ぐ（Weave）」が由来です。しかし「波（Wave）」の誤解からか、ドリームウェーバー、ドリームウェイバーと誤って発音される方も、結構多いです。

一般的に「ドリ」「ドリー」と略して呼ばれます。

よくあるつづりまちがい

DreamWeaver: Wを大文字にしてしまうケースです。慣れている人でも、つい大文字にしてしまうことが多いですね。
Dream Weaver: つづりをわけてしまうケース。気持ちはわかります。
Dreamwaver: waveにしてしまうケース。日本でweaveというつづりはなじみがないからか、このまちがいは多いです。
Dreamwever: aがないパターン。なんかスッキリしてこれでいい気も。こちらも結構多いです。ついでにAdobeもAdbeと短くしてしまうケース、多いです。
Dreamweber: vがbに。weberさんとか、人名で存在するつづりのようです。

よくあるまちがった読み方

ドリームウェーバー: 「夢の波乗り人」になってしまったケースです。普通はこう思っちゃいますよね。
ドリームウェイバー: ウェーバーをちょっとかっこよく言ってみたケース。
ドリームウェバー: ネイティブの方の発音だと、実はこっちに聞こえなくもない…！？
アドビドリーム: おもいっきり省略したケース。なんか意外とかっこいい気が…！？

Dreamweaverの普及率

プロの利用にも耐えうる本格的な統合ソフトとして、ホームページ制作業界の中では圧倒的なシェアを誇ると言われています。

正確な普及率の調査結果は残念ながら公開されていないようですが、インターネット上でも多数のユーザーが利用して情報を交換しています。

日本のユーザーも多いので、困ったときに日本語で調べられるのもいいところです。

Dreamweaverの長所・メリット

具体的にDreamweaverとは、どんなソフトなのでしょうか。

まずは、長所やメリットなど「あぁ、使ってよかった」ところをご紹介します。

デザインビューだけで作れる

普通にメモ帳などでのテキストエディターでホームページ（HTML）を作ろうとすると、こんな画面で編集することになります。

困りますね。どこから手を付ければいいのか、わかりませんね。『やっぱりホムペ作るのって、タルいんっスね』とか、言われちゃいそうですね。

ちなみに < > ←このカギカッコを1文字でも間違えると、ブラウザーで表示したときにえらいことになったりします。大変危険です。

ところがDreamweaverの場合は、デザインビューとよばれるこんな画面で編集します。

わかりやすいですね。直感的ですね。『よし、いっちょやってみるか！』という気になりますね。

DreamweaverでCSSの使い方を習得: スタイルシートの書き方から使い方、ブラウザーごとの動きの差まで、ページレイアウト手法を習得します。; Dreamweaver CS4 CSSデザイン手法

HTMLの文法の書き方（マークアップ）に慣れてくれば、メモ帳だけでも作成できます。そのため、コーダーと呼ばれるマークアップを専門にする職業の人は「テキスト編集がいい！」という方もいらっしゃいます。

しかし、それは専門職として極めたゆえの発言。一般的には、最終結果に近い画面で作るほうがラクチンですよね。

現在のWeb制作のスタイルは、CSS（カスケーディングスタイルシート）という、ホームページのデザインを決定する機能で指定するのがほとんどですが、DreamweaverのデザインビューはもちろんこのCSSに完全対応しています。

作業効率が上がる

とくに企業などのホームページ制作において、作業効率は大変重要です。『納期は無期限でいいよ』というクライアントさんがいらっしゃればいいのですが、残念ながら生まれてこの方一度も出会ったことがありません。たいていは期限はすぐ間近のケースがほとんどですので、時間をかけずにクオリティを上げる必要があります。

また、ホームページ制作に終着点はない（つねに改善・更新し続ける必要がある）ので、ムダな手間暇は一切省略したいところです。

Dreamweaverなら、作業効率を上げるゴージャスな機能が多数用意されています。

たとえば、先ほどのデザインビューのように、いちいちブラウザーを起動してチェックしなくても編集しながらレイアウトを確認できます。

また、複数のホームページを管理できるサイト管理機能や、変更したページを随時アップロードできるFTP機能、Flashコンテンツ（.swf）やFlashビデオ（.flv）を簡単に配置できる機能など、いろいろなシチュエーションで手間を削減できます。WordやExcelのデータをHTMLに変換する、といったおもしろい機能も搭載しています。

いろんなブラウザー、デバイスに対応

現在はブラウザーの種類が大変多く、パソコン用で主要なものでも

Microsoft Internet Explorer（IE：マイクロソフトインターネットエクスプローラー）
Mozilla Firefox（Fx：モジラファイアーフォックス）
Google Chrome（グーグルクローム）
Apple Safari（アップルサファリ）
Opera（オペラ）

があります。さらに、Apple iPhoneやiPad、Android（アンドロイド）などのモバイル系の製品でインターネットを見る人も多く、みんなバラバラの環境でホームページを見るのが普通の時代になりました。

Dreamweaverでは「ブラウザーの互換性チェック」機能で、実機で試す前に確認できます。実際のブラウザーで確認する場合も、Dreamweaver上からボタンをクリックするだけで自動的に表示できます。Adobe Device Central（アドビデバイスセントラル）というソフトと連動して、携帯電話用のチェックもできます。

さらに最新版のDreamweaver CS5では、Adobe BrowserLab（アドビブラウザーラボ）を利用してブラウザーの種類やバージョンをまとめてチェックできます。

コード入力も速くなる

Dreamweaverでは先に述べたデザインビューだけでかなりの編集ができますが、コードビューと呼ばれるHTMLエディターとしての編集機能も高性能です。

たとえば「もっとも強調したい」ときに使う要素（タグ）の<strong></strong>を入力したいとき、単語が長いので間違えて<sting>とか入力してしまいそうです。もっと長い<blockqoute>とか、誤入力率1000％な勢いです。

しかしDreamweaverなら、途中まで入力すると予測して候補を出してくれます（コードヒント機能）。

ケータイの予測変換みたいな機能ですね。これなら誤字によるバグを大幅に減らせます。

テンプレート＆ライブラリ機能で全体を管理

Dreamweaverのテンプレートを活用: Dreamweaver CS4のテンプレートやライブラリ機能で、Webサイトを効率的に構築・管理できます。; Dreamweaver テンプレート講座

この機能を『Dreamweaver最大のステキ機能』と言う方もいらっしゃるぐらい、超便利ものがテンプレートおよびライブラリです。これは、「ひな形」を作れば簡単に同じフォーマットのページを量産できる機能です。

いまのホームページでは、ヘッダーやフッターなどは各ページ共通がほとんどです。ページごとにメニューが右に行ったり左に行ったり…というサイトは、あまりないですよね。しかし、各ページごとにヘッダーなどをコピー＆ペーストするのも非効率です。ちょっと変更したいときにも、全ページ更新しなくてはなりません。

テンプレート＆ライブラリ機能を使うと、ヘッダー情報などを含んだ「ひな形」を1個所変更するだけで、すべてのページに反映できます。便利ですね。このホームページでも、テンプレート＆ライブラリ機能を多数活用しています。詳しくはAdobe Dreamweaver CS4 テンプレート実践活用講座にて、ご確認ください。

サーバーやバージョン管理システムとの連携

FTP機能を搭載しているので、インターネットやイントラネット上のサーバーに簡単にアップロードできます。またバージョン管理システムと呼ばれる、ファイルを変更した履歴情報を保存するソフトウェアと連携できます。代表的なSubversionやMicrosoft Visual SourceSafeにも、もちろん対応しています。

拡張機能

Adobe Exchange（アドビエクスチェンジ）という機能拡張サポートソフトを利用して、Dreamweaverを強化できます。一般のユーザーが作成した拡張機能などを追加し、標準にはない機能もパワーアップできます。

機能がめちゃくちゃ豊富

上記以外にも、とにかく機能が豊富です。正直ここでは書ききれないほどあるので、プロの使い方を学ぶ Adobe Dreamweaver CS4 入門講座で、Dreamweaverの使い方を身につけてください。

Dreamweaverの短所・デメリット

ちょっと取っつきにくい

Dreamweaverの使い方入門: Dreamweaver CS4の使い方からWebサイトの構築まで、3日間で学べる基礎講座です。; Dreamweaver CS4 入門講座

『ボタンをクリックして選ぶだけで、カンタンホームページのできあがり！』みたいなソフトよりは、やはり少し敷居が高いです。

「こんなページを作りたい」といったイメージがないと、どこからスタートすればいいのかわからないかと思います。

そんなときはプロの使い方を学ぶ Adobe Dreamweaver CS4 入門講座で、Dreamweaverの使い方を身につけてください。

そこそこ、お値段がします

楽天shopSATTで販売しています。楽天ポイントでちょっとお得にご購入を。

Dreamweaverと競合製品

ほかのホームページ作成ソフト

日本で販売されている（されていた）主要な競合ソフトは、おおよそ下記になります。

Microsoft FrontPage（マイクロソフトフロントページ）
Microsoft Expression Web（マイクロソフトエクスプレッションウェブ）
Adobe GoLive（アドビゴーライブ）
IBM Homepage Builder（アイビーエムホームページ・ビルダー）

この中で、同じアドビ社のAdobe GoLiveはバージョンアップおよび販売は正式に中止され、Dreamweaverへの移行が推奨されています。

Microsoft FrontPageはおもに個人で利用されています。現状でもっともDreamweaverに近い製品は、Microsoft Expression Webです。IBM Homepage Builderはバージョンを14まで重ね、古くから愛好者も多いソフトです。

Dreamweaverの講座

Dreamweaverの使い方

Dreamweaverの使い方を学びたい初心者のみなさんは、プロの使い方を学ぶ Adobe Dreamweaver CS4 入門講座がオススメです。パソコンを使った実習（ハンズオン）で学びますので、基礎がしっかりと身につきます。

テンプレート＆ライブラリ機能の使い方

超便利機能「テンプレート＆ライブラリ」をばっちり身につけるなら、Adobe Dreamweaver CS4 テンプレート実践活用講座がそのものズバリです。Dreamweaverのテンプレート＆ライブラリ機能に特化した珍しい講座ですので、効率よくサイト管理したい方には特にオススメします。

ホームページの作り方

レイアウト自由自在！Dreamweaver CS4 CSSデザイン手法を受講すれば、ホームページ制作に欠かせない「CSSレイアウト」に必要な知識とテクニックが2日間で身につきます。

Movable Type

ブログ構築ソフトMovable TypeをDreamweaverで活用するなら、Dreamweaver & Movable TypeによるWebサイト構築の基本がピッタリです。

Dreamweaverを購入する

楽天で販売中です。m-Schoolはアドビ認定正規ディーラーですので、安心してお求めいただけます。

関連リンク