効率よくWebサイトを制作するには？

質問

Webデザイナーの卵です。
いくつかサイトを制作したのですが、まだ慣れないこともあり物凄く時間がかかってしまいます。

時間短縮が必要不可欠だと思うのですが、皆様はどのような工程で、どのようなソフトを使ってサイトを制作しますか？

ちなみに自分は…

　ものすごーく簡単なラフ画を制作
　　↓
　ロゴをイラレで作ったりして、
　全体のイメージ制作はフォトショップで。
　　↓
　パーツごとに切り取り
　　↓
　ドリームウィーバーでコーディング

全体のイメージを作ったけど、それをHTMLにしていく過程に物凄く時間がかかっている感じです。アプリケーション間の連携もうまくいっていないというか…。
ちなみに会社のPCスペックが低すぎて、フォトショップとイラレ同時起動はできず、フォトショップ立ち上げたり、イラレ立ち上げたり…　この辺もストレスですね。

皆様のやり方を教えていただけるとうれしいです。

回答No.1

shut0325 · ベストアンサー

製作手順は打ち合わせ後、

1.コンテンツ作成（プレーンなXHTML)
2.マークアップ（外部ＣＳＳ）
3.必要な素材を制作
4.チェックと統合

としています。

製作に時間がかかるのは多分、融通がききやすいものを先に作った（決めた）あとに融通のききにくい作業をするからではないでしょうか？
PhotoShopもＩｌｌｕｓｔｒａｔｏｒもＨＴＭＬに比べたら比較にならないほど簡単に自由にレイアウトできます。　対してＷＥＢページはそういうわけにもいきません。

また、デザインよりもコンテンツが先でしょうから、ＷＥＢの方の仕様を先に固めるのが本道だと思います。

各種アプリを同時に起動することは可能ですが、あまりしませんしその必要は感じません。理由は規模によって上記1～4を分担する場合があるのと、素材を準備する際にもさらにその素材（たとえばロゴマークをAiで作成→最終的にはPsで画像にする、、このときＡｉで作ったロゴマークは素材の素材です。）を先に全部準備しますので、この方法なら同時起動する必要性はほとんどありません。

使用しているアプリケーション(Ｗｉｎ/Ｍａｃ混在）
Microsoft Expression/DreamWeaver/テキストエディタ
ＰｈｏｔｏＳｈｏｐ/Ｉｌｌｕｓｔｒａｔｏｒ/ＦｌａｓｈＰｒｏ/
必要に応じて　3ＤＣＧ（3ｄｓＭａＸ）/コンポジット（Ａｅ）/映像編集（FinalCutStudio)

お礼

早速のご回答ありがとうございます！

No.1様はプレーンなページを制作、マークアップしてから素材を作るのですか？私はマークアップしながら素材を制作しているから、手際が悪かったのでしょうか。

まだ慣れないせいか、コーディング、マークアップの際に素材が完成していないとイメージが掴めないため、上手くコーディングもマークアップもできません。
そのため、同時進行になってしまい、アプリケーションも同時に立ち上げる事が多いのだと思います。

では逆に『このIMGはW200×H300で…』など詳細を決めるのは、どの工程なのでしょうか？
申し訳ありませんが、1～4の工程をもう少し掘り下げて教えていただけますか？

回答No.3

shut0325

Ｎｏ．1です。続き遅くなって申し訳ありません。

前回最後にお話ししたかったのは、「私も昔はそうでした」ということです。質問者様は自分でどの辺がボトルネックになっているか気付いていらっしゃるので、その部分を見直していけばおのずと効率的にやっていけるのではないかと思います。一人で多様な事をする場合でも分業をイメージしてやると後々分業できるようになった時もスムーズですし、自分自身の頭も軽くなってよいかと思います。

現状も「遅いＰＣ」「詳しい人がいない」と一見悪そうな環境ですが、これは好都合だと思ってください。非効率なことを排除しなければ仕事になりませんし、ＰＣ上で考えることが少なくなります。

実際私も新人には古いＰＣを意図的に使わせますし、私自身も実作業以外でＰＣに向かうことはなく、ほとんど紙と鉛筆で仕様等を書き出したり、イメージ図を書いたりしています。その間ＰＣには映像の読み込みや、ＣＧのレンダリング等非常に時間のかかる作業をさせています。

またＨＰチェックにしても最新機種で大きなモニタでするよりもやや型遅れのちょっと小さめのモニタでチェックする方が万人向けだといえますし、最新の技術よりはちょっと枯れた技術を使う方がいいですね。もちろん最新動向には注目しておき、いざとなれば使えるように勉強しておくことは必須です。

大変そうですが、もしかしたら今が一番楽しい時かもしれません。楽しんでがんばってください。私はそういう状況（立ち上げ時）がとても好きです。公言したために社内ではいろんな事の立ち上げ専門屋になっていますが（＾＾；

お礼

続きのお話を楽しみにお待ちしていました。

>一人で多様な事をする場合でも分業をイメージしてやる

目先の技術よりも、この部分を一番鍛えなくたてはいけない時期なのかもしれませんね。
まず苦手な部分をリストアップして、少しずつ一人前のWebデザイナーへ近づいていきたいと思います。
お仕事の最中に回答していただいたり、本当にありがとうございました。
これを心の励みに、いつか誰かにアドバイスできるまで頑張ってみようと思います。
それでは失礼いたします。

回答No.2

shut0325

No.1です。
慣れも確かにあると思います。
私の場合は相手がある（クライアントがある）のがほとんどで、打ち合わせの時点で全体的な仕様（サイト構造など）を決めます。その時点で重要なのが、自分のスキルとＨＴＭLの仕様等をよく理解しておくことだと思います。

ご質問のたとえばIMGのサイズの決定は2.が終わった時点で必ず決まっています。実際には基本仕様（最低ページ幅とレイアウトが主です）から1をする時点でほぼ数値的なものは決まっていますので、大抵の場合、画像サイズは1でほぼ決めて実際と同じ書類名、階層にダミーの画像を配置しています。（トリミング前の商品画像がある場合はそれを配置します）。ＣＳＳも同様でその時点でダミー（中身なしまたは最低限の記述をしたもの）を置いてあり、タグにもＩＤやＣｌａｓｓを振っています。

*すみません　仕事が始まるので続きは次回に書きます。*

お礼

お礼が遅くなって申し訳ありませんでした。
お仕事前だというのに、とても詳しく教えていただきありがとうございます。

当方が勤務する会社では、IT部門が立ち上がったばかりで、サイト制作に詳しい人が居ない状態です。
まだ実力も無いのに、その方法まで模索しないといけない状態で、てんてこ舞いです。
参考書を見てもテクニックの紹介はありますが、実際の流れなどについて説明しているものを探すことができません。
なので、実際に職業とされている方のお話を聞けて嬉しかったです。
また時間があるときに、続きが聞けるととても嬉しいです。