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のバージョン
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
Adobe Dreamweaver CS5.5 11.5 2011 Adobe Creative Suite 5.5
Adobe Dreamweaver CS6 12 2012 Adobe Creative Suite 6
Adobe Creative Cloud

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

Dreamweaver 1 の必須PC環境は、マニュアルによるとIntel Pentium 90MHz以上のWindows 95またはNT 4.0だそうです。空きメモリーは16MB以上。隔世の感がありますね。

しかし、タグセレクタやビヘイビア、インスペクタなどの基本機能がバージョン 1 の段階ですでに存在しています。驚くべき完成度です。

Dreamweaverの最新バージョン

現在の最新バージョンは、Adobe Dreamweaver CS6(ドリームウィーバーCS6)です。

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

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

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

Dreamweaverの読み方

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

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

よくあるつづりまちがい

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

よくあるまちがった読み方(すべて実話)

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

Dreamweaverの普及率

Adobe Dreamweaver CS6(アドビ ドリームウィーバーCS6)

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

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

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

Dreamweaverの長所・メリット

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

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

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

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

テキストエディターでホームページ(HTML)を作ろうとする

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

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

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

Dreamweaverの場合は、こんな画面で編集する

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

HTMLの文法の書き方(マークアップ)は、慣れてくればメモ帳だけでも作成できます。

そのため、コーダーと呼ばれるマークアップを専門にする職業の人は「テキスト編集がいい!」という方もいらっしゃいます。

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

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

最新バージョンのDreamweaver 6では、HTML5CSS3などの最新の規格をサポートしたり、jQuery(ジェイクエリー)というJavaScriptライブラリーが統合されたり、iPhone/iPadやAndroidなどのスマートフォンやタブレットなどにも対応できたりと、イマドキのホームページを作るときもバッチリな制作環境となっています。

作業効率が上がる

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

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

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

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

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

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

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

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

そこでマルチスクリーンプレビューパネルを使えば、PC、タブレット、スマートフォンでそれぞれどのように見えるのかをチェックできます。

コード入力も速くなる

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

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

Dreamweaver コードヒント機能

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

ケータイの予測変換みたいな機能ですね。これなら誤字によるバグを大幅に減らせます。jQueryのスクリプトにも対応しているのは感涙ものですね。

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

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

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

テンプレート&ライブラリ機能を使うと、ヘッダー情報などを含んだ「ひな形」を1個所変更するだけで、すべてのページに反映できます。便利ですね。

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

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

拡張機能

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

機能がめちゃくちゃ豊富

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

Dreamweaverの短所・デメリット

すこーしマイナス面もあります。

ちょっと取っつきにくい

『ボタンをクリックして選ぶだけで、カンタンホームページのできあがり!』みたいなソフトよりは、やはり少し敷居が高いです。「こんなページを作りたい」といったイメージがないと、どこからスタートすればいいのかわからないかと思います。

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

簡単にページを作成できるツールやサービスは、どうしても他者との差別化がしにくいもの。しかしDreamweaverなら、可能性は無限大。オンリーワンのWebサイトを作成できます。

すこし、お値段がします

新規で購入すると、4万円前後します。

m-Schoolでも販売しています。アカデミック版もあります。

Dreamweaverと競合製品

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

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

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

Microsoft FrontPageはおもに個人で利用されています。

現状でもっともDreamweaverに近い製品は、Microsoft Expression Webです。

JustSystem Homepage Builderはバージョンを17まで重ね、古くから愛好者も多いソフトです。

Dreamweaverの講座

Dreamweaverの使い方

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

ホームページの作り方

Adobe Dreamweaver CS6 CSSデザイン技法 基礎講座を受講すれば、ホームページ制作に欠かせない「CSSデザイン」に必要な知識とテクニックが2日間で身につきます。

CSS3でかっこいいサイトを作りたい!

対応するブラウザーの普及も進み、注目の技術となったCSS3を駆使できれば、デザインが一気にパワーアップします。

入門ならここがすごい!CSS3入門講座が、応用なら実案件から学ぶCSS3使いどころ講座で習得できます。

スマートフォンにも対応したい!

2010年ごろより、日本でも一気に普及が進み始めたスマートフォン。対応させるには、PC用のページとはまた違った知識やテクニックが必要です。

スマートフォン対応サイト制作の基礎知識講座なら、スマホならではのホームページ作成技術が学べます。

Movable Type

ブログ構築ソフトMovable TypeをDreamweaverで活用するなら、Movable Type 5 スタートアップ入門講座がピッタリです。

関連リンク

RSSフィードで
最新情報を購読