サイトを作る前の準備で…えっとマーケティングとかぁ、キーワード選定とかぁ、なにやらいろいろほんとはあるけど…今回はコーディングをする前ということで考えますと、やはり「ラフ作成」は必要かと思います。
（ほんとはラフを作成する前に、ワイヤーフレーム（ワイヤーカンプ）を作成されることをオススメします。ワイヤーフレームの段階で、クライアントに見せることがあると思います。今後のラフ作成のためにもPhotoShopやイラストレーターで作成されるほうがよいかと思います。）

このブログにだってもちろんラフはあります。
ラフはイラストレーターで作成されてもかまいませんが、コーディングの際にパーツをスライスするのにPhotoShopのほうが楽だなぁと私は感じます。1pxのズレとか直せたり、イラストレーターだとどうしても線がアンチエイリアスかかってしまうので、ピッチリ1pxとなってくれません。クッキリ！ハッキリ！作りたいときにはPhotoShopが断然オススメです。もしイラレで描いたものを使いたいというときにはフォトショに貼り付けて使うとか、併用してもいいですね。

すべてのページのラフを作成する必要はありませんが、デザインが異なるページくらいはラフを作成しておきましょう。
ただ、基本的にひとつのサイトの中でユーザーに「ん？違うサイトに飛んだ？」と思わせるほど、メチャクチャにデザインの異なるページを作成するべきではありません。見ていて安心感のあるサイトにするべきなので、自然に感じ取れるルールにのっとったデザインアレンジ程度にしましょう。

作成されたラフを基にコーディングをしていくわけですが、作りこんでいく段階で「必要だと思われるパーツ」「必要ないパーツ」などが出てくると思います。ラフを作る段階では「いたらなかった何か」をコーディングしていく中で思いつくことは十分にありえます。このブログでも、「検索フォーム」や「RSS」、「サイトマップ」や「前のページへ」などを追加したり、Trackbackを保留にしてみたり、十分にありえることですので、完璧に揺るがないラフを作りこむことよりも、ディレクターとデザイナーとコーダーの連携であると考え、常に意見を投じて、いろいろな意味でベストなサイトを作っていくことが大切だと思います。

ラフを区切っていきます。紙に印刷して手書きでも、photoshopなどで上のサンプルのように直接書き込んだものを作ってもいいでしょう。
まずは、どのサイトにも必ずあるでしょう、「ヘッダー」「コンテンツ」「フッター」。divでクギって、idをふります。さらにヘッダーの中、コンテンツの中、フッターの中を区切っていきます。例のヘッダーのように複雑になっていないものはいきなり要素を書いてもいいでしょう。しかし、コンテンツやフッターは少し複雑なようですので、この中もdivでクギってidを振っておきましょう。

このようにdivで内容を細かくグループ化して、わかりやすいidを振って行きましょう。また、同じようなものが繰り返される場合はclassをふります。タグにたどり着く前に、グループ化、id名、class名を整理しておくと大変コーディングがしやすくなります。