人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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


●質問者: beachboysit
●カテゴリ:ウェブ制作
✍キーワード:HTML Web WEBデザイナー サイト ソフト
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● some1
●50ポイント

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

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


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

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

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

DreamWeaverへパーツを当てつつ、

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

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

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

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


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

◎質問者からの返答

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

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

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


2 ● rafin
●50ポイント

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

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

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

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

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

◎質問者からの返答

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

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

参考になりました。


3 ● chinya
●50ポイント ベストアンサー

■1.MS-Office

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

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

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

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

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

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

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

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

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

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

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

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

■4.サーバアップ

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

■5.納品


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

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

◎質問者からの返答

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ