ウェブ（一般的にはホームページ？）のデザインをするときに、私は自分の中で一定のルールを持って設計するようにしています。そのほうが効率が良いし、デザインカンプ→コーディングの際にスムーズに移行できるからです。

ウェブ制作の流れとしては、photoshop(or fireworks)でデザインカンプを作る→画像のパーツ化→HTMLコーディング→ブラウザチェックの順番で行っています。本でもよく紹介されているし、一般的であるはず。

基本的にウェブを作るにあたって気をつけていること：

• 見出しをデザインの時点で作っておく
• それぞれの要素を理解して、デザインすること
• 同じ要素をつくるのが鍵。これを見通せば見やすさもコーディングしやすさもかわる
• CSSのコーディングの時点で、同じ要素のものはまとめる。
• 最低限押さえておく場所と、自由な場所をつくる

１：見出しをデザインカンプの時点で作っておく

h1,h2,h3など、文章構造上とても便利なタグがあるにもかかわらず、もてあましている方が多いように見受けますが、デザインの時点でどんな風にコーディングするかを意識すれば、この後の作業がとても楽になります。HTMLを知らない方がデザインしたものよりも、HTMLを知っている方がデザインしたカンプのほうが閲覧する方も見やすく、ブラウザにもやさしく、なによりチームメイトの負担を減らせることになります。

２：それぞれの要素を理解して、デザインすること

ホームページは、内容ありきです。どんな素敵なデザインでも、どんな素敵なテクニックでプレゼンテーションされても、内容がなくては、意味がないのです。（もちろんポートフォリオなどの場合は別です、そのプレゼンテーションそのもの＝内容な訳ですから。）ホームページを実際に見る人が「期待」する「情報」を、期待する場所に配置することがウェブデザインだと考えています。

内容＝実際の文章の内容や画像などのコンテンツがどのようにたち振る舞えば、見やすくなるんでしょうか。それをまず考えます。

その上で、HTMLの文章構造にあわせて乗せていきます。見出しならh1などのhxとされるタグを。文章のひとかたまりにはpタグを。リストにはliタグを。
もちろんCSSもカラーリングもこの時点では考慮しません。今のメインブラウザならCSSでだいたいなんとかなるんですから。

何度か繰り返しているうちに、デザインカンプからどの場所にどの要素があてはまるのか、またデザインカンプを起こすときにどの要素を入れるべきなのか、どのくらいの空白を入れるのか、ということが浮かんでくるようになるはず。

３：同じ要素をつくるのが鍵。これを見通せば見やすさもコーディングしやすさもかわる

ホームページのデザインでも、同じ要素が繰り返されることがよくあります。
見出しの色、背景画像のパターン、文章の空白（marginやpadding）、リストのアイコンなど・・。
これらも、デザインカンプの時点でまとめ、HTMLでも統一しましょう。同じ意味を持つところは同じデザインで。こうすることで、デザインレベルでもソースレベルでも可読性が高まります。

４：CSSのコーディングの時点で、同じ要素のものはまとめる。

３の時点でまとまったデザインを、CSSコーディング適用の際もまとめて表示します。CSSでは、classやidをコンマを使って連続で指定することができるので、それを利用します。
背景や、文字色など一般的なものはまとめて指定し、独立的なもの、例外的なものを別に連ねて書くようにします。こうしておくと、あとで色を変えたくなった時も、対応がとても速くなります。

幸い、CSSファイルは上から下へと読み込まれ、下に書かれた指示のほうが上書きされていくので、都合がよいのです。

５：最低限押さえておく場所と、自由な場所をつくる

いわゆる、「ルール」なのですが。デザインカンプ作成とHTML、CSSコーディングに関しては、自由度が高いためルールを持つことが大事です。
ただ、それに縛られると、今度は自分を圧迫し、コーディングが楽しくなくなってしまいます。それじゃ意味がない。

ある程度、妥協しても良いと思うのです。どうしてもH1タグを入れられない構造なら、入れなくても良いぐらい自由に。（もちろん、案件上むずかしいところもたくさんあるでしょう。）デザイン上正しいが、管理がとても難しいソースコードなら、わたしはソースコード上、何度でも利用できるようにしておきたいと考えます。そのためにデザインカンプから２〜３ｐｘのずれが生じるとしても、です。

わたしがいつも考えているのは、

• 閲覧者（ユーザ）にとって見やすいページ
• ソースコード上がある程度クリーンであり、再利用が可能であること
• 上記の２つが成立する上で、ターゲットにあったカラーリングやアイコンなどのアイテムを配置すること

この３つです。これらが成立することで、作業がすばやくこなせるだけでなく、閲覧者の期待するページが同時にできあがります。

ひとまず思想を書いてみました。
もっと詳しく具体例もあわせて書きたいのですが、それはどこか違う機会で。