Dreamweaverの使い方

Dreamweaverとは、アドビ社が提供しているWebデザインやアプリデザインのためのソフトウェアを指します。アドビ社は、アメリカに本社を置いている企業であり、他にも数多くのソフトウェアを提供しています。例えば、PhotoshopやIllustratorなどが挙げられます。

Dreamweaverは、ユーザビリティに適切に配慮されていることから、多くのWebデザイナーから高い評価を得ているソフトウェアです。HTML・CSS・JavaScriptなどのマークアップ言語のサポートに対応しているソフトウェアであり、利便性が高いことも特徴です。近年、DreamweaverはWebデザインのスクールにおいても人気のコースとなっています。

ここでは、Dreamweaverの使い方についてサイトフォルダの準備から解説します。

Dreamweaverでは具体的にどういったことができるのでしょうか。Dreamweaverでできることは多岐にわたり、主に以下のようなことができます。

【テンプレートがある】 初心者の人でも使いやすいように、あらかじめさまざまなテンプレートが用意されています。これにより、Webサイトの骨組みを簡単に作成できます。

【コードのサジェスト表示】 Dreamweaverでは、コードを打つ際にソフトが予測変換のためのサジェストを表示してくれる機能があります。候補を表示してくれることで、コードを打つ手間が省略・スペルミスの防止・コードを正確に覚えなくても大丈夫、などのメリットがあります。

【リアルタイムでプレビューできる】 Dreamweaverはリアルタイムでプレビュー画面を表示できます。コードを入力した瞬間にプレビュー画面に切り替わることで、自分が書いたコードがどのように動くのか瞬時に確認できるため、作業効率が向上します。

Dreamweaverの使用するにあたり、まずサイトフォルダを準備することが重要です。HTMLやCSSに関するファイル、画像のファイルなどWebサイトの制作に必要な全てのファイルを1つのフォルダに統一します。サイトフォルダの中に、画像ファイル、CSSファイルなどのようにさらに細かくフォルダを作成しておくとフォルダが整理しやすいです。

サイトフォルダの準備が完了したら、Dreamweaverを用いてサイト設定を行います。まず画面のメニューより「サイト」を選択し、「新規サイト」を選びます。「サイト設定」のダイアログの画面が表示されたら、サイト名を記載しましょう。その後、準備しておいたサイトフォルダを指定し「保存」をクリックします。

Dreamweaverの画面にサイトフォルダの内容が映し出されていることを確認できるでしょう。以上で、サイト設定は完了です。

サイト設定が完了したらトップページを作ってみてください。Webサイトにおいてトップページは必ず存在するといっても過言ではありません。トップページの出来が悪いと、ユーザーはコンテンツの中身を見ようとしないことも多いです。また、トップページを作成することができれば、他のページも内容の変更だけで済む場合も少なくありません。

なお、トップページを制作する前にまずはレイアウトを考えることが重要です。レイアウトを決めてから実装を行いましょう。

Dreamweaverの5つのメリット

Dreamweaverは有料のソフトウェアです。無料でもWebサイトの制作に使用できるソフトウェアは多くあります。無料のソフトウェアを含め、多くの選択肢があるにも関わらず、Dreamweaverを使うメリットに疑問を持つ方も少なくないでしょう。ここでは、Dreamweaverを利用するメリットについて5点紹介します。

Dreamweaverは、WindowsとMacOSどちらでも利用できるソフトウェアです。そのため、OS環境を気にすることなくWebサイトの制作を行うことができます。操作環境やユーザインタフェースに関しても同一のソフトウェアを用いるため基本的には変わりません。

さらに、アドビ社が提供しているサービス「Adobe Creative Cloud」というソフトウェアを利用することで、無制限にインストールとアンインストールができます。Adobe Creative Cloudは、グラフィックデザインや動画の編集、Webデザインにおけるアプリケーションソフトをサブスクリプション方式で利用することができます。

独学でWebデザインを学ぶ方法とその注意点について徹底解説！

Dreamweaverはアップデートが定期的に行われます。そのため、新しい機能や便利な機能が追加される場合も多く、常に最新機能を扱いながらWebサイトの制作を行うことができます。

Dreamweaverにはマニュアルが豊富であることもメリットの1つです。さらにアドビ社が開催している勉強会などでDreamweaverを学べる環境も揃えられています。また、海外で開発された無料のソフトウェアの場合、英語でのマニュアルしか用意されていないことが多いですが、Dreamweaverの場合は日本語で情報を収集することが可能です。

Dreamweaverを使用することでさまざまな画面のサイズに対応したデザインを作成できるため、Webデザインだけではなく、アプリのデザインなども容易に作成できます。したがって、デバイスに依存せずWebサイトを制作できます。

Dreamweaverでは豊富な機能が搭載されています。さらに複数人で共同作業もできるようにGiftサポート機能も搭載されているため、効率よくコーディングできるようにワークスペースをカスタマイズすることも可能です。

Dreamweaverの便利な3つの機能

ここからは、Dreamweaverの便利な機能について3つ紹介します。

DreamweaverにはEmmetが標準で搭載されています。なお、Emmetとは入力補完機能によりHTMLやCSS、XMLなどを迅速に編集できるテキストエディタ用のプラグインを指します。Emmetを利用することで、タグを簡単に作成可能です。たとえば「stro」と入力した状態でTabキーをクリックすると、「strongタグ」の開きタグと閉じタグが瞬時に作成されます。

他のタグも同様に行うことができるため、コーディング効率の向上が期待できます。

Dreamweaverにはクイック編集機能があります。クイック編集機能を利用することで、HTMLを参照しながらCSSを編集することができます。例えば、Windowsの場合「Ctrl + E」、MacOSの場合「Command + E」のコマンドで利用可能です。

前述の通り、Dreamweaverではライブプレビュー機能も利用できます。ライブプレビュー機能を使用することで、記述を行っているコードの反映した結果をリアルタイムで確認できます。編集しているコードのプレビューを確認しながら作業できるため、ミスやエラーを減らすことが可能です。また、リアルタイムでプレビューできるため、開発のモチベーションの向上も期待できます。

Dreamweaverの料金プランと特徴

ここからは、Dreamweaverの具体的な料金プランと特徴について紹介します。

Dreamweaverは有料のソフトウェアです。「Adobe Dreamweaver単体プラン」「Creative Cloudコンプリートプラン」「学生・教職員向け」「法人向け」の4種類の料金プランがあります。

「Adobe Dreamweaver単体プラン」は月額2,728円、「Creative Cloudコンプリートプラン」は月額6,248円で使用できます。また、「Creative Cloudコンプリートプラン」の場合、PhotoshopやIllustratorも利用できるため、画像加工やロゴ作成なども行いたい方におすすめです。

「学生・教職員向け」「法人向け」のプランの場合、他のプランと比較してコスト削減が可能などのメリットがあります。

【参考】：Creative Cloudアプリのプランと価格

Dreamweaverには豊富な機能が揃っています。機能の多さから扱いこなせるかという課題もあります。また、プロ向けに開発された高度な機能も多くあるのも特徴です。さらに、機能のカスタマイズを行うこともできるため、品質の高いWebサイトを作成できるでしょう。

一方、Webサイト制作に関して未経験者や初心者の方などは機能を使いこなすのがかなり難しい傾向にあります。対策としては、まずは実際に機能に触れてみることが重要です。Dreamweaverでは丁寧なチュートリアルも用意されており、チュートリアルを利用することで使い方を1から理解できるため、初心者の方でも安心して利用できます。

Dreamweaverの勉強方法3選

ここでは、Dreamweaverを習得するための勉強方法を3つに絞ってまとめました。

自分の好きなサイトを探し、そのサイトがどのようにしてデザイン・作成されているのかを分析する方法です。初心者ならまずは好きなサイトを参考にしながら作成することで、感覚的にどう扱えばいいのかを学習できます。

独学なら参考書を活用しながらDreamweaverを実際に使ってみましょう。Webデザインの基本であるHTML・CSSについて書かれている本や、自分のパソコン上でDreamweaverを動かしながら実践できる本など、スキルやどういう風に学びたいのかを明確にして参考書を選びましょう。

Dreamweaverは独学が難しいと言われているほど、習得はそう簡単ではありません。独学でももちろん習得できますが、初心者の場合だとスクールの受講が安心です。オフラインではないオンラインのスクールも増えているため、自分の都合に合わせた学習が可能です。

Dreamweaverを利用することで効率よくWebサイトの制作ができる

これまでにDreamweaverの使い方や特徴、メリット、便利な機能について解説しました。Dreamweaverとは、アドビ社が提供しているWebデザインやアプリデザインのためのソフトウェアを指します。Dreamweaverは有料のソフトウェアですが、豊富なマニュアルや機能を完備しているため、扱いこなすことができれば、効率よくWebサイトの制作を行うことができます。

したがって、Webサイト制作用の「統合開発環境」と称すこともできるでしょう。当記事で触れたDreamweaverの使い方や特徴に関する情報は基本的なものであるため、さらに詳しく使い方や機能などの特徴を知りたい方は、公式サイトのマニュアルやチュートリアルをぜひ活用してください。