今回の記事はウェブデザイン初心者向けの内容となります。

Adobe社製品のいくつかは、
ウェブデザイナー必携と言っても過言ではありません。

先日の記事ではAdobe社の画像編集ソフトPhotoshopとIllustratorの違いおよび
ウェブデザインにおける主な用途をお伝えしました。

それぞれのソフトウェアの説明文からはあまり違いは感じられませんが、
持つ機能は大きく異なることが分かったかと思います。

今回の記事では、
Adobe社のウェブサイト制作ソフトDreamweaverとFireworksの違いをご紹介してまいります。

DreamweaverとFireworksの違い

1
DreamweaverもFireworksも、

ビジュアルのイメージを確認しながらウェブサイトを編集できるソフトです。

ただしDreamweaverはテキストエディタ寄りのコーディングソフト、
FireworksはPhotoshop寄りのデザイン制作ソフトという違いがあります。

Dreamweaverを利用してサイトを制作する際は、
”Photoshopでデザインカンプ制作後、
HTMLなどのコーディングを手で行う”という流れで進行します。

Dreamweaverにはスニペット(よく使うコードを登録しておき簡単に呼び出すことのできる機能)や
スペルミスのチェックなど高性能な機能が備えられています。

ただし適切に使用するにはコーディングの知識が必要となりますので、
Dreamweaverを使用してみたいと考えているウェブサイト制作初心者の方は、
まずはコーディングの勉強をきちんと行った方が良いでしょう。

一方Fireworksを利用してサイトを制作する際は、
”Photoshopのような機能を利用しながらデザインカンプを制作し、
書き出したコードを適宜修正していく”という流れで進行します。

Fireworksはグラフィック系の機能のうちウェブデザイン制作で
よく使うもののみをまとめたソフトウェアといった具合で、
制作したデザイン通りにHTMLやCSSを書き出す機能も用意されています。

ただし書き出されるコードは無駄が多かったりブラウザによっては
正しく表示されないものもありますので、
コードを確認し修正する作業が必要になります。

Fireworksの問題点

168192c7f86db4c571d21eaf8ef1f960_m
FireworksにはPhotoshopのようなグラフィック系の機能が(すべてではありませんが)
多く搭載されています。

しかしこれはPhotoshopからウェブデザイン制作に
必要な機能を選んで移植したというわけではなく、
Adobe社がMacromedia社を買収した際にFireworksもAdobeファミリーへ加えられたため、
Photoshopと重複した機能を持つFireworksがラインナップに並んだという経緯があります。

Adobe社製品の多くは最新バージョンがCCまたはCC2014となっていますが、
Fireworksの最新バージョンはCS6(CC2014から数えると2つ前)で止まっています。

実はFireworksはCS6で開発終了が宣言されているのです。

FireworksはAdobe Creative Cloudに加入すれば
現在でもインストールおよび使用が問題なく行えますが、
開発終了ということは今後の新しい技術には対応していかないということでもあります。

例えば、HTML6やCSS4が発表されて一般化したらどうしましょう・・・?

FireworksはDreamweaverよりもビジュアル寄りの機能を持つソフトウェアであるため、
ウェブデザイン初心者の方はコーディングの勉強と平行しながらFireworksを使い、
コーディングに自信が持てたらDreamweaverに乗り換えると良いかもしれませんね。

まとめ

Adobe社のウェブサイト制作ソフトDreamweaverとFireworksの違いは
お伝えできたでしょうか。

DreamweaverにはサーバとのGET/PUT機能
(サーバからファイルをダウンロード/アップロード、
つまり同期する機能で、複数人が作業する際に便利)もあります。

制作はFireworks、サーバ同期だけDreamweaverという制作者もいるみたいです。

コーディングメインのウェブサイト制作ソフトはAdobe社以外からも
様々なものがリリースされていますが(例えばSublime TextやCodaなど)、
これらは中級者以上を想定した作りのソフトウェアだと思います。

慣れるまではFireworksかDreamweaverを使うとよいでしょう。

おすすめの記事