【初心者】HPの効率的な作り方は？

質問

dreamweaver（cs4）とphotoshop(cs)で企業HPを作る時の、効率の良い作りかた（流れ）を教えて下さい。
(環境：mac os x10.5、上記ソフトウェア)

これまで、ホームページビルダー12でHPを作っていました。
どこでも配置モードという、パワポのような操作イメージで作れるものでしたが、どうしても素人っぽいHPになってしまうため、このたびdreamweaver(cs4)を使いHPを作ろうとしています。

HPを作る際に、私が単純にイメージしているのは、
１、HPのテーマ、全体イメージを決める（他社サイトを参考に）
２、HP専用フォルダを作る
３、photoshopで、アイコンや画像を作る
４、HPのテキストを作る（書く）
５、３と４を配置する（各ページも同じく）
６、リンクを貼る
７、出来上がり

このような形なのですが、お手本にするサイトがすでにある場合、どのようにすると効率よくHPが作れますでしょうか？
また上記のやり方は、間違えている（また時間が掛かりすぎている）でしょうか？

参考にしようとしているサイトは、http://www.apple.com/jp/retail/onetoone/
http://www.apple.com/jp/macosx/refinements/
です。

1.(xxxxxx）2.(iiiiiiiii) 3.(xxxx) 4.出来上がり
のような形でご回答いただけますと、嬉しいです。

どうか、みなさんのお知恵をお貸しください。
お願い致します。

回答No.5

metametamu

＞これらについては、各画像に対して、上記の数値等を変えたタグを入れていけば、問題なくなるので、それを先に考えておくべきだ、ということでしょうか？

だいたいそういうニュアンスで合っていると思います。
タグやスタイルを追加指定して修正できるレベルならいいのですが、場合によっては別の場所のcssでの指定方法を変えなければならなくなったりすることもあります。
なのでそういう点を少なくすることが一番効率化につながると思います。

ただ、あくまでこれから何回か作ることを前提としている部分もあるので最初のうちは実現方法を考えるのに時間を割くより修正の方に時間をかける方が効率的だと思います。

補足

ビルダーを過去に使っており、IE以外ではデザインが大きく崩れていた事もあって、各ブラウザでのレイアウト崩れが、懸念材料となっております。
試行錯誤しながら、イメージに少しでも近づくHPを作っていこうと思います。
ありがとうございました。

回答No.4

metametamu

1. サイトに載せる情報を分類し、必要なコンテンツを決めます
2. 見た目を決めます
3. 2で決定した見た目の実現方法を考えます(場合によっては2に戻る)
4. HTMLを書きます
5. CSSを書きます
6. 画像を作ります(2をphotoshopでpx単位で作りながら考えている場合はこの手間を省けます)
7. ブラウザでチェック
8. 修正します(場合によっては7に戻る)
9. 完成です

HTMLとCSSのみである程度のサイトを作る時のプロセスです。
多少ハードルが高いので最初からは難しいかもしれませんが、多くの場合に重要なのは2と3です。

例えばcssの実装の差でwidthでauto以外の値を指定した要素にpaddingを指定するとブラウザによって表示が変わるという例があります。
この場合は　<div style="width:800px;"><p style="padding:10px;">あああ</p></div>　のようにすることでこの問題を回避することができますがhtmlとcssの記述に多少変更が出てきます。
また、時と場合によっては実現できないorしないほうがいい見た目というものもあります。(これは広義でのデザインの問題が入るので細かい説明は省略します)
これらは限られた狭い範囲ならすぐ対応できるのですが、数が多くなってくると対処に時間がかかるためできるだけ先に考えておくと良いと思います。

ちなみにどのソフトを使うにしてもある程度のサイトを作ろうと思うとHTMLとCSSの知識は必須です。
私はここで覚えました。
http://www.tohoho-web.com/www.htm

それとブラウザの実装の差やバグを覚えていくことが重要です。これに関しては問題を見つけるたび検索してみると良いと思います。

補足

とても解りやすく大変勉強になります！
ありがとうございます。
また、少し質問があります。
お時間ございましたら、ご回答いただけると大変嬉しいです。

各ブラウザ対応についての質問です。

＞これらは限られた狭い範囲ならすぐ対応できるのですが、数が多くなってくると対処に時間がかかるためできるだけ先に考えておくと良いと思います。
＞この場合は　<div style="width:800px;"><p style="padding:10px;">あああ</p></div>　のようにすることでこの問題を回避することができますがhtmlとcssの記述に多少変更が出てきます。

これらについては、各画像に対して、上記の数値等を変えたタグを入れていけば、問題なくなるので、それを先に考えておくべきだ、ということでしょうか？

回答No.3

noname#119957

上から順で行えばできます。とても難しいですよ。

■画像処理ソフトでデザインカンプの作成(photpshopやillustratorやfireworksなど)
（１）全体イメージの作成　ヘッダー・ナビの作成
（３）バナー画像・写真修正・テキストの作成　
※この段階でぺージの出来上がりを確認しておく。

■ＦＬＡＳＨなどの作成
■コーディング
ＤＲＥＭ　ＷＥＡＶＥＲでサイトを構成しておく（保存フォルダーの決定）html,css,imageのサーバー上のdirectoryを決める
この辺はＨＰＢと同じです。
--
画像のスライス（切り出し）この処理は、ADOBEのforeworksが便利。
画像は、切り出し時に形式を選択できます。（JPG,PNG,GIF）
---
ＤＲＥＭＷＥＡＶＥＲで、
デザインカンプを基にコーディングする
ＨＴＭＬとＣＳＳの作成
★HTMLとＣＳＳのバリデートチェックは必須です。

■動作確認
複数のブラウザで動作確認（特にＣＳＳはブラウザにより解釈が違うことがありますので複数のブラウザで確認）、ＣＧＩなどサーバーでなければ動作しない部分はにＵＰＬＯＡＤして動作確認

■SEOを施す。
ＳＥＯを施す。
google,yahoo,msnにサイト登録。
携帯サイトは、必ず登録しなければならない。

補足

ご丁寧なアドバイスありがとうございます。
とても勉強になります。
なんとか形にしたいと思います。
ありがとうございました。

回答No.2

neko-ten

一部だけの回答ですが・・・

＜1に関して＞
私の場合は要素の配置をまず考えますね。
アイコン等のデザインはそのあとでいいです。
position:absoluteで座標配置するならいいのですが、通常はブロックの配置でレイアウトしますので、どんなブロック配置にするかを考えます。そのあたりがわかってくると、サイトのブロック構造をぱぱっと考えて配置していけます。
2-4,6の画像作成や文章の推敲ではあまり時間稼ぎができないので、自分のレイアウトテンプレートを持つのが早く作るコツ　だと思ってます。

＜5に関して＞
HTMLやCSSを直接いじったほうが早い場合も多いです。
要素配置の修正とか、ピクセル単位で調節したいなら私はソースいじっちゃいます。
Dreamweaver自体HTML/CSSはできることが前提のソフトなので、一通りいじれるようになるとそれだけで速くなると思います。

補足

早速のご返答ありがとうございます。
配置に関しては、リンク先HP（特に最初のもの）で、大枠は決まっている状態です。
＞HTMLやCSSを直接いじったほうが早い場合も多いです。
こちらは具体的にはどのようなことをするのでしょうか？
（一概に言えないと思いますが。。）
HTML、CSSについて、オススメの教えサイトなど、ありましたら、ご教示いただきたいです。

回答No.1

inu2

2～6は、はっきり言ってどうでもいいこと。

どうでもいい。というと語弊はありますが、
例えば、料理で言えば、
食材の購入方法、包丁の使い方、コンロの火のつけ方。
といった基礎的なレベルのお話。

一番重要なのは
1
です。
いきなりPCで作業するのではなく、紙に絵を書いて大体の構造やデザインや写真イメージなどを盛り込んで「レイアウト」を作ることです。
いくら、2番以降をサクサクと出来る技術をもっていたとしても、1番の行程がうまくなければ、だぁれも見向きもしてくれない汚いサイトが出来てしまいますよ。

補足

確かにHPのコンセプトが決まらないで、良いHPが作れなければ、本末転倒ですよね。
最初は紙等でのレイアウトですね。ありがとうございます。