Adobeでのホームページ作成

質問

お世話になります。
　Adobe（Macromedia）のFireworksとDreamweaverを組み合わせてホームページを作成するという話を聞いたのですが、この２つのソフトを組み合わせて使う理由は具体的なメリットは何でしょうか？

　またFireworksのスライスという機能と組み合わせて使う視点でお教えいただけるとありがたいです。
ホームページビルダーでもそれなり？ソースや素材をうまく取り込めばよいサイトができるのではと思いますが、やはりビルダーの方が圧倒的に簡単だとそれほど知識のない私にもわかります。

どうかよろしくお願いします。

回答No.2

einn · ベストアンサー

No1です。補足を読みました。
前回よりわかりやすく簡潔に書いていこうと思います。

Fireworksの真髄はwebページのモックアップ、
つまり見本をさっさと作れることにあります。
Html構文を一切無視、あるいは知らなくても、
Photoshop的な画像編集ソフトを使ったことのある人間が、
簡単に画像ファイルとして全体の見本を作れちゃうわけです。

そして、見本を作った後、大まかにそれをHTMLとして出力できる、と。

これは、プロが行う作業である、
クライアントに見本を提出→web作成→コーディング→本提出
という作業のうち、見本からweb作成までの作業を、
短い納期期間の間にさっさと行える事につながります。

見本の段階では、画像ファイルのままでいいのです。
というかそのほうが提出が早く済みますからね。

いちいちコードを書く、あるいはweb作成ソフトを使ってHTMLを作るより、
画像ベースで見本を作ったほうが普通は早いのです。
いかに早く見本をだして製作に移れるかがビジネスのキモですから、
それだけでも存在の意義はあるでしょう。
ただ、個人の趣味レベルではどうでもいい話ですけどね。

余談ですが、コーディング、つまりコードの修正については、
コーダーというプロが居ます。デザイナーとは別にです。
デザイナーがビジュアル的なデザインをFireworksで行い、
それをHTMLに出力してかるーく直したあと、
本気の修正はコーダーがするわけですね。

そういう背景もあって、見本用、あるいは下地としてプロは使います。

あと、画像編集ソフトのPhotoshopでは、
webページに特化した見本を作ることに長けていません。（できなくはないです）
というのも、Photoshopは写真を編集する事が前提のソフトで、
Fireworksはwebページの見本や基礎を作る事が前提のソフトだからです。
今ではAdobe社がPhotoshopもFireworksもDreamwerverも全部一緒に売ってますが、
元々FireworksとDreamwerverはマクロメディア社のweb用のイメージツールですからね。

さらに余談ですが、DTP畑の人ならソフトのイラストレーターを使って
モックアップとしてクライアントに提出する人もいるみたいですよ。
連携は難しいので、本当にサイトデザインを画像として見せるだけになりますが。

DreamwerberとFireworksを組み合わせて使う場合の最大のメリットは、
見本を作るときに感じられます。webパーツの作りやすさという点で。
もう一つのメリットは、完成した見本を、そのまま下地にできることです。

一般の方だと、下地を作れるという点そのものがメリットでしょう。
大きな画像をスライスして、スライスしたとおりにHTML出力、
あるいはCSS出力が出来る事が目先のメリットになると思います。

デメリットは、下地にしたところでソースが狂ってることがある事。
ただしこれはスライスの仕方や設定の仕方である程度回避可能です。

おっしゃっていたフォームの出力についてですが、
見本を作る前提でなければ、さっさとDreamwerver単体で
フォームを作ったほうが早いです。間違いなく。

Fireworks使ってんなぁ、と一発でわかるのは、
サイトをぱっとみた時に画像だらけのサイトですね。
大きな画像を切りとって余白にテキスト入れてる感じの。
そしてやたらボタン部分やリンク部分が画像ファイルになってるサイトです。

リンク部分が画像になっているとSEO効果は半分以下ですから、
コーダーよりの人間としては面白くないわけです。私のように。
たしか数年前のVerのFireworksからテキスト出力できるはずなので、
やろうと思えばボタンも『背景画像+CSS+テキスト』でボタン化できるはずですが、
実際にやろうとすると面倒な作業になるようで、
結局は画像出力しているのをよく見ます。余談ですけども。

ちなみに私はデザインもコーディングも一人でやるのですが、
あくまで一人でwebを作ってお金を稼いでいるし、
見本を提出する機会も無いお仕事をやっていますから、
Fireworksを使うことはありません。今後も多分無いですね。

もし今後使うとすれば、まずビジュアルありきで画像を
たくさん使ったほうがアピールできるジャンルのサイトを作る時くらいでしょう。
大半が画像で構成されているサイトを作るなら、
Fireworksを使ったほうが確かに楽なので。

例として、たぶんこれはベースにFireworks使ったなというサイトのURLを。

http://nicole-v.co.jp/

上のメニュー部分が全部画像ですよね。みっちり隙間無く。
こんな感じのサイトって結構ありますよね。

Fireworksで作るとしたら、上のメニューは一瞬で出来ちゃうわけです。
メニュー部分を全部くっついた状態でFireworksで作って、
ボタンにしたいサイズでスライスすれば、
画像出力＆HTML出力が一瞬で終わるのですから。

一個一個メニューのボタン画像を作って保存し、
それをHTMLで並べて、CSS書いて…という手間が省略できる、と。
1時間くらいかかりそうな作業が10分以下で出来るなら、
10分以下でさっさと作って次の作業したほうがいいですから。

ただ、前述したとおりSEO的にはお勧めしません。

お礼

本当に丁寧な解説ありがとうございます。

　ソフトそれぞれで考えている段階で私がずれてる感に気付きました。
まず、確かにラフ案的なものを示す段階でソースから作業していたら効率以前の問題ですね。
（一応他言語ですが多少プログラムは実務経験があるので）
よくフリーランスの方でコーダーさんはいますね。
（調整専門といいますか大きく出来上がった、とりあえず出来あがったものを修正される方・・・でいいのかな？）

　仮に自分でtotalで作成するならFireworksの作成も出来れば正確に、私の中でもdreamweaverにつつがなく反映されてるなぐらいのつもりで作りたいですが、そこに力を入れすぎては本末転倒な気がしますが。

今現在は両方使う環境にあるので関連を把握しないと頭の中がうまく整理出来ないので。
ファイル形式もpng（拡張子）なのでdreamweaverホームページテンプレート作成用ソフト
（プロの方が相応のデザイン、クオリティーで作成するソフト）
という感じです。

まだ操作時間が浅いのでもう少し触って１つサイトを（製品としてではなく機能を把握するうえで）作ってみようと思います。

einnさんとても勉強になる丁寧な解説ありがとうございました。
また、自分でもきちんと進めてみてわからないところが出てくるかもしれませんがその時はよろしくお願いいたします。

回答No.1

einn

一応プロで、dreamweaverを使っているものです。

Fireworksについては、使っている人もいれば使っていない人もいます。
デザイン重視のサイトの場合、つかうととても楽ですね。

ただし、『楽だから』ってだけで何も考えていないデザイナーが、
より多く利用していると思います。
どう考えてもデザイナーのオナニーにしか思えないサイトとかね。
スライスで全部終わらせる場合、デザインとユーザービリティが両立することは稀です。
センスのある人はこの限りではないですけども、希少種ですね。

例えばサイトのページ全体の構成をFireworsで画像としてつくり、
それから部位ごとにスライスし、出力します。
出力したものをdreamweaverで読み込むと、
tableタグやdivタグを中心にコードの入力が完成しているのです。

つまり、いちいちタグを入力して数値を入力して背景画像にjpgをおいて、
というような一連の流れが一切省略できる、ということですね。
スライスしたとおりにデザインしてくれるのですから。
もちろん、あっちゃこっちゃ狂ったりするので、コードの修正はたまに必要です。
（スライスが下手なアホに限る）

あとはテキストを打ち込んだりところどころ修正すれば、
あっという間にデザインに優れたサイトができる、と。
デザインが優れすぎて、ただの名刺サイトになってる事が多いですが。
んー。かっこいいけど、どうすんのこれ？
イメージ戦略以外の経営戦略無理じゃね？的な。

コード重視、SEO重視の人間が補助的に使うぶんなら、賢い使い方といえるでしょう。
SEO的にtableは邪魔なことがあるので、そこまで考えるとCSSでスライスしますね。
デザインありきの人はtable出力、サイトの商売力のことを考える人はCSS出力します。
ただし、コードの修正はCSS出力のほうが大変です。
（最新版のＣＳ5ではエラーがだいぶ減りました）

Fireworksとの連携を考えなくても、Dreamweaverは使いやすいですよ。
コードを十分に理解している事が大前提ですけどね。初心者は機能が多すぎて混乱するだけ。
もちろんデザインビューをめったに使わず、コードビューを主に使うような人間でも、
Dreamweaverのサポート機能のほうが優れていることは直感的にわかるでしょう。
ビルダーもだいぶ使いやすくなったようですが、まだコードの暴走が頻発するみたいですし。

ちなみに私はFireworksそのものを一切使いません。
使うとすれば、見本を最初につくるときだけですね。
コーダーに近い脳みそ構造なので、デザインありきは好きになれません。

最終的には、ソフトは好きなほうを使えばいい、という話になります。
ただプロとして行動するなら、プロの市場に合わせてDreamweaverとなりますね。

お礼

大変詳しいご回答ありがとうございます。

私は触りたてで表現が読みとり辛いかもしれませんが、Fireworksでも雑に、あまり頼り過ぎると
結局Dreamweaverで修正する場面が多々出てきました。

ソースが最近のこれらのソフトはソースからでもイメージから直接でも修正しやすいので使いやすいのですが、Fireworksで始めにフォームを作成しそれをdreaweaverに読み込ませるというところにまだ２度手間感を感じてしまっています。
　まずここをしっかり理解したのですが・・・。

実際両方使うのと使わない場合のメリット、デメリットを理解してから両方使うか一つに絞るか進めたいです。