ホームページ制作にて、どんなホームページにしたいかまでは情報が集まっているとします。

Webデザイナーは、ここからどのようなソフトを利用してデザインを作成し、HTMLに落としこむのかを教えて頂きたいです。
もし参考サイトがあれば教えて頂けるとありがたいです。

回答は、現在Webデザイナー、かつCS3orCS4で制作している方限定でお願致します。

(補足)
私はWebプログラマでHTMLやWebに関する知識、及びデザイン基礎は持ち合わせておりますので、専門用語は多用されても構いません。
どの工程でどんなソフトを使用しているのかを特に注目しております。

回答の条件
  • 1人2回まで
  • 登録:2009/05/16 20:55:45
  • 終了:2009/05/19 06:40:14

ベストアンサー

id:chinya No.3

chinya回答回数566ベストアンサー獲得回数202009/05/17 10:28:39

ポイント50pt

■1.MS-Office

↓ ・Powerpointでサイトマップを書きます。

↓ ・Excelでワイヤーフレームとディレクトリ構成を書きます

■2.ドロー系アプリケーション

↓ ・Photoshop/Fireworksでデザインします。

↓ ・必要があればIllustratorでイラストを描きます。

↓ ・スライス/切抜き⇒WEB用に保存しパーツ(画像)を分解します。

↓ ※画像のスライス(分解)は、HTML

■3.オーサリングアプリケーション

↓ ・DreamweaverでHTMLテンプレートを作成します。(分解画像の組み立て、HTMLとCSSマークアップ)

↓ ・Dreamweaverで下部階層ページ(レイヤー)を量産します。(HTMLのマークアップと画像の貼り付け)

↓ ・必要に応じFlashで動くイメージを作成し、HTMLに貼り付けます

↓ ※フォーム系、システム系ページから先に着手するとスムーズでしょう

■4.サーバアップ

↓ ・リンクチェック、動作チェック、表示(崩れ)チェック等

↓ 

■5.納品


ばくーっと一般的なのを書きました。やりたい内容によって、もっと掘り下げられますよ。

ですので「ここをもっと詳しく…」のように再度質問いただければ、掘り下げ回答しますね。

id:beachboysit

ひとつひとつ丁寧にありがとうございました。

とてもわかりやすくて参考になりました。

2009/05/19 06:39:13

その他の回答(2件)

id:some1 No.1

some1回答回数842ベストアンサー獲得回数372009/05/16 21:12:21

ポイント50pt

事前にクライアントとサイトマップなどでの構造確認を済ましていることと、

Webプログラマーとの作業内容確認と範囲明確化はデザイン以前に事前にやっておきますが


Photoshopでイメージボードを起こし、

クライアントに確認し、修正後、

スライスしてテンプレートパーツへ、

DreamWeaverへパーツを当てつつ、

HTMLやCSSでコーディングしてサーバアップしサイトへ構築

システムともテンプレート等で結合を行い、

遷移やLINK、動作をチェック、デバグについてはWebプログラマーと協力

クライアントが動作含め確認。最終修正を行い納品


この手順で10年以上Webデザインについては構築をやってきています。

id:beachboysit

ご回答ありがとうございます。

最初はPhotoshopで制作されるんですね。

Webデザイナー側の作業の流れを書いて頂いたので参考になりました。

2009/05/17 07:41:00
id:rafin No.2

rafin回答回数8ベストアンサー獲得回数02009/05/16 22:36:57

ポイント50pt

1:FireworksかPhotoshopを使って資料や参考サイトにを元に、デザインを作成します。

2:JPEGで書き出して、確認者(上司・クライアント等)に送信します。

3:修正があれば修正し、無ければスライスを切って画像をパーツ毎に分けます。

4:HTMLコーディングしていきます。

今まで5年ほどこの仕事をしていますが、外注さんからの対応も含め、だいたいこのような流れです。

id:beachboysit

ご回答ありがとうございます。

Fireworksでもデザイン作成できるのですね。

参考になりました。

2009/05/17 07:40:49
id:chinya No.3

chinya回答回数566ベストアンサー獲得回数202009/05/17 10:28:39ここでベストアンサー

ポイント50pt

■1.MS-Office

↓ ・Powerpointでサイトマップを書きます。

↓ ・Excelでワイヤーフレームとディレクトリ構成を書きます

■2.ドロー系アプリケーション

↓ ・Photoshop/Fireworksでデザインします。

↓ ・必要があればIllustratorでイラストを描きます。

↓ ・スライス/切抜き⇒WEB用に保存しパーツ(画像)を分解します。

↓ ※画像のスライス(分解)は、HTML

■3.オーサリングアプリケーション

↓ ・DreamweaverでHTMLテンプレートを作成します。(分解画像の組み立て、HTMLとCSSマークアップ)

↓ ・Dreamweaverで下部階層ページ(レイヤー)を量産します。(HTMLのマークアップと画像の貼り付け)

↓ ・必要に応じFlashで動くイメージを作成し、HTMLに貼り付けます

↓ ※フォーム系、システム系ページから先に着手するとスムーズでしょう

■4.サーバアップ

↓ ・リンクチェック、動作チェック、表示(崩れ)チェック等

↓ 

■5.納品


ばくーっと一般的なのを書きました。やりたい内容によって、もっと掘り下げられますよ。

ですので「ここをもっと詳しく…」のように再度質問いただければ、掘り下げ回答しますね。

id:beachboysit

ひとつひとつ丁寧にありがとうございました。

とてもわかりやすくて参考になりました。

2009/05/19 06:39:13

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません