Webデザインをする順番はどんな感じですか？

質問

Web初心者みたいな人間です。

私が作成する順番は本に書いてあった通り、

1．レイアウトのラフを書く。

2.Illustratorでラフ通り四角ツールとかでワイヤーフレーム（レイアウト）を作る。

3．photoshopにワイヤーフレームを移動させて、それを基に写真加工したものやロゴ、バナーなどを入れていく。

4．それを全てオブジェクトごとにスライスする。

5．photoshopでF8キーの「情報」を見ながら、サイズを確認しながらエディターでCSSコーディング。

って感じなのですが、人とどう違うのか聞きたいのです。

最近聞いたプロの方の話ですとラフ→FWで作って→スライス→DWでコーディングと聞きました。

後、表とか、もしページじゃなく、カンプの状態で他の会社にプレゼンとかする場合とかどういう風に作るのでしょうか？

エクセルで作ってPhotoshopで貼りつけるとかでしょうか？

教えて下さい。

回答No.6

nori_007 · ベストアンサー

デザイナーでも無ければ、DTP の経験も皆無ですがホームページ制作の世界に少しだけ仕事をしています。

自分の場合は。
まず始めにコンテンツの内容確認です。コンテンツの内容を書き出し整理し、承認を得たら、html もしくは html ファイルを文書構造を意識して制作します。
制作は Dreamweaver でコードモードで利用します。タグは手打ちですが、Dreamweaver の補完機能を利用しています。

コンテンツの内容が確認出来ていれば、どのような項目が必要が分かりますので、Fireworks でレイアウトを作成します。

写真の加工が必要な場合は、Photoshop で作業を行います。単にコントラストやサイズの変更で有れば、Fireworks でも可能ですが、写真の加工は Photoshop が便利です。最終的に Fireworks で纏めます。レイアウトが出来た時点で、クライアントに確認。

デザインの OK が出たら、Fireworks からパーツの切り出し、自分はスライスは使わず、オブジェクトでグループ化して、新規ファイルにコピーしています。この辺は人それぞれだと思います。
作業の効率を考えたら、Fireworks でスライスし、Dreamweaver へ流し込みかもしれません。

パーツが完成したら、必要なフォルダにパーツ分類して保存
先に作っておいた、html(xhtml)ファイルに、<div>にて大まかに区分けてして、CSS でレイアウトしていきます。作業は Dreamweaver です。
Dreamweaver はコードモードですが、ソースの判読が難しくなってきたら、デザインモードで場所を確認し、該当の場所をコードモードで修正します。最終的な確認はブラウザで行い、Dreamweaver の見た目はあてにしません。

Illustrator は持っていますが、ロゴの作成や単なるドローソフトして利用しています。Illustrator はどうしても、紙の世界が基本にあると思います。web サイトのパーツ作成には違和感を覚えます。

Fireworks は紙の世界には向いていませんが、本来は Dreamweaver と連携させればより早く制作が出来るだと思います。
自分は、Fireworks が出た当時から使っていますので、web パーツの製作は Fireworks と言うイメージです。Illustrator も Fireworks の機能を見て発展して来たと思いますが、世界が違うのではと思います。

マクロメディアがアドビに買収された事で、今後より一層、Illustrator と Fireworks の棲み分けが進み、お互いにデータを利用出来るようになって行くのではないでしょうか。
マクロメディアがアドビに買収された際に、Fireworks は Illustrator は飲み込まれて消えるかと言われましたが生き残れました。

アドビのセミナー等に参加した時、日本では営業がパワーポイントでデモを行い OK が出たら改めてデザイナーがデザインを作り直している。アメリカでは、始めから InDesign でラフを起こし、OK が出たら必要に応じて Illustrator、Fireworks で完成させると言ってました。

上記の件はもう記憶も定かではありません。話半分で聞いてください。
全てをアドビに統合されるのも、如何な物かと思いますが、言っていることには納得出来る部分もあると思います。

話がそれてしまいましたが、web に限定した話なら、Fireworks から Dreamweaver がシームレスで良いと思います。
自分は、基本手書きの世界から入ってきましたので、どうしても手書き感覚が残っており、Fireworks から Dreamweaver へのシームレスへ作業が出来ていません。この辺は自分の勉強不足だと実感しています。

以上、参考になればと思います。

回答No.5

noname#98828

確かにイラレのがいろいろデザイン動かすときに融通が利きますね。
DTPとかから転職してきた人は、頑なにイラレ使ってましたね。

質問者さんの手順で別にどこもおかしいとこはないと思いますよ。
人によって…というか、会社によっても手順なんてバラバラだと思うんで。
うちは結構適当かもしれません。。

自分はもろDWでコーディングしちゃいます。
予測入力無しではできないへなちょこです(笑)
しかしながら、コーダーの人とかは全部打っちゃった方が早いらしいですね。

お礼

返事ありがとうございます。

私もどちらかというと手打ち派ですねぇ。。最初の頃、意味わからんままDWのボックスとかの指定とかやってて、いらーってしてタグ打ちから始めてやっと意味とか理解出来てきましたし。。

どこを何やってるかってDWはホントわかりづらい。。
でもリンクの更新とかライブラリとかは凄い役立ちそうですけど。。

そうなんです。デザインを動かすのとかガイドとかの「○pxこっちに」とかphotoshopで出来れば、photoshopだけでいいんですけどねぇ。。

回答No.4

noname#119957

多分、イラレのが整列とかさせやすいからなんでしょうか。
>>イラレはその辺がダメですね。fireworksの方が簡単ですよ～♪

お礼

あははｗやっぱりそうなんでしょうね・・(;´▽｀A``
firewoksはwebに特化した物って聞きますもんね。。

fireworks欲しいなぁ。。持ってないんですよねぇ。。

回答No.3

noname#119957

やり方は人それぞれですね。
まず、デザインカンプはイラレまたはfireworksが多かったですね。
もちろん、photoshopでも出来るようですね。
これらの違いは、その人の経験からきています。
ＤＴＰからＷＥＢに移行したひとは、phptpshopかもしれませんね。
**
スライスはfireworksがいいと思います。
コーディングはＤＷ一本でないと、２度手間でしょうね。
コーディングはソースビューの方がいいですね。
**
ＭＡＣで全部ＸＭＬでコーディングしている人もいますね。

お礼

返事ありがとうございます。

教えて下さった事見てると面白いですねｗ

スライスはfireworksというのもよく聞きますね。。
でも前聞いた関西で有名なプロの方て人は全くスライスを使わないらしいですｗどうやってしてるんだろうｗｗ

今までずっとエディターで手打ちしてましたが、DWを最近教えてもらって何百ページとか作るならDWがいいってこともわかってきました。

MAC人口かなり解析見てると少なくなってきてますね。。

回答No.2

noname#100277

私の場合はWindowsなのでメモ帳のみで実施。
最初に大まかな構成を頭の中で構築。
其の構築を生かす為に位置をCSSで指定。
特別なオーサリングツールは不必要と考えてます。
尚、コーディングはXHTMLで実行。
w3cやAnother HTML-lint gatewayでもクリアしてます。

お礼

返事ありがとうございます。

メモ帳は大変じゃないですか？せめてエディターを使った方が早いと思うんですけど・・。

クリアするということはstrictでも行けそうですね・・凄い。

回答No.1

noname#98828

私はイラレは使いませんね。
ロゴとかいろんな解像度に対応するデザインのときのみです。
ラフでわざわざ使っても、時間がかかるだけなような。

フォトショップのシェイプを使ってサイズ打ってボックスを直接作っていっちゃいます。
もちろん、個々の素材は別々に作ってあとで合わせますが。

まぁ、人によってやりやすい方法もさまざまですね。
自分は仕事柄、速さを求められるので。

FWは残念ながら私は使わないので知らないですけど、
使っている同僚は正にその手順で作ってます。

レイアウトの状態でのプレゼンはエクセルで大まかにサイト構造作ってそのまま見せてますね。
フォトショップに貼り付ける意味は何でしょうか？

お礼

返事ありがとうございます。

多分、イラレのが整列とかさせやすいからなんでしょうか。

「移動」とか「コピー」とか「変形の繰り返し」とかphotoshopより早く数値入力で出来るような気がします。。ガイドもコピー出来るし、同じ大きさのボタンを同じ幅を空けて５つ並べるとか繰り返しでたったかたって作ります。

でも私的にもphotoshopのが全然使いやすいので好きなんでその辺の昨日だけあればイラレ触らないんですけどｗ。イラレはなんでか「625.194px」とか小数点にもなるし。

FWはフォトとイラレのいいとこを取ったソフトと聞いてるのでやってみたいですね。パスもスライスも楽だと聞きますし。FWの最新版は、絵だけでリンクが出来るらしいので、プレゼンにいいとプロの方に聞いたことがあります。

エクセルの表を絵にしてphotoshopで作ったレイアウトに挿入して、見た目の感じとサイズを見る為に入れてます。。。て何も知らないでやってるので、全然見当違いなのかなぁ、これって。。