グリッドシステムのフレームワークでデザインを作成する際、コーディングの時点で困らないデザイン方法です。
完全に順守すればほとんどカラム落ちやブラウザのことも考えずに作れると思います。
ただ、例外の部分もあって構わないと私は思っているので、あくまでも基本ということで、拡張は自由にやってください。

今回は960gsサイトのテンプレートファイルを使います。

サイト：http://960.gs
ファイルへの直リンク：ダウンロード



「960-Grid-System-master.zip」がダウンロードできたら、

template > photoshop > 960_grid_12_col.psd

を任意の場所にコピーして、photoshopで開いて作業開始です。
そのまま開いて作業をしてもいいのですが、元データはどこかに保存しておいて、新規ページ作成の時などにおいておくことをおすすめします。


photoshopでファイルを開いてみました。
12カラムのグリッドを選んだので、赤い12本のラインが見えるとおもいます。

photoshopのガイドを使いたいので、[cmd+;]を押して、ガイドを表示させ、さらにレイヤーの「12 Col Grid」は非表示にしておきます。


このような表示になりました。


ヘッダーの高さ、サイドメニュー、メインエリアのカラム幅を決めます。
このとき、気をつけなくてはいけないのは、外側の10pxは使わないということです。
また、内側に引かれた10pxの幅のガイドには合わせないこと。
各グリッドは１カラム幅60pxで、間のマージンは20pxであることを意識しておきます。

ということは、縦の空間の幅も10pxないし20pxの倍数であるとより綺麗に見えてくることがわかるとおもいます。
[shift+↓]でオブジェクトを動かすと、10pxごとにオブジェクトが動きますので、組み立てていくときに利用するとさらに便利になります。ここはお好みで。


ヘッダーの高さを 横幅12カラムの　高さ120px、
サイドメニューは高さはアタリで　横幅3カラム
メインエリアも高さはアタリで、横幅９カラムとしています。

この中にデザインを入れ込んでいき、仕上げていきます。枠内にマージンをかけるとグリッドが崩れてしまいますので、あくまでこの幅ぎりぎりで作業をすすめるのがコツです。


通常はここまででも恩恵が受けられると思うのですが、注意というか、デザインとして綺麗に表示させて、さらにコーディングの時に時短できるようなコツのようなものを紹介します。

今回はサイドメニューに３カラム使っているので、メインコンテンツで利用できるのは９カラムです。グリッド分けをするとき、すべてのカラムを足して９になるようにすると、コーディングの時にグリッドシステムのフレームワークがそのまま使えます。


９カラムを２等分、９カラムを４等分にわける場合は割り切れませんので、フレームワークが利用できなくなりますので多用はしないようにします。
オリジナルのdivスタイルなどを設定すると利用が可能ですが、フレームワークの恩恵にあやかれないということです。

＊ちなみにですが、3:9でサイドメニューを作っていても、
サイドメニューが終わるところでフレームワーク上で回り込みを解除しますので

3（サイドメニュー）:9（コンテンツ）　エリア
１２カラムの広い広告エリア
3（サイドメニュー）:9（コンテンツ）　エリア
12カラムでフッター

みたいな組み方もできます。


カラムが決まったら、カラムの枠いっぱいをつかってデザインすると縦ラインが揃ってデザイン上整って見えます。変な空間は入れないこと。空間を入れるときは、ルールを作ってカラムの枠や縦のラインがきちんと感覚的に「見える」ようにすることがコツです。


応用すれば空間があいていてもきちんとパターンが作れるようになりますが、まずは、グリッドいっぱいにデザインすることを心がけてみましょう。

なぜ、空間が空いているとダメになってしまうのか・・
それは、この空間が統一されていないようなデザインになってしまうときに起こります。
同じ意味合いを持つコンテンツを連続させたいとき、同じ幅や高さにして繰り返すと「同類」と人間の目はみなしますが、グリッドで折角合わせていても残念になってしまう例をご紹介します。


見えているグリッドに頼りすぎて、まとまりがあるように見えてしまうといいますか・・グリッドシステムをはじめて使うとこういう罠に陥りやすくなります。
初期のころわたしもハマりました。３段目なんて、10pxはみ出しています。グリッドシステムのフレームワークからははみ出しています。コーディングで新たに定義行きですね。いいんですが。
もちろん「はみ出す」という表現としては問題ありません。基本はこうしない、ということです。

まだ紫の枠が見えてるのでわかりづらいかとおもいます。
外してみましょう。


全く枠が見なくなりました、縦ラインも見えません。こうなってしまっては、デザインとしてひとつひとつの意味合いがよくわからなくなってしまいました。

ウェブサイトでは縦ラインはとても重要です。ないけれど、そこにある「線」を見せていくのが、グリッドデザインの基本です。基本を抑えて、CSSフレームワークなどがあって、すばやくコーディングしたいときには向いていません。


ここまでが基本でしたが、メインエリアがランディングページや広告のように目立つようなデザインにする場合、ここのグリッドを気にしていてはどうしようもない場合があります。その場合は割りきってメインエリアは独自コンテンツにしてしまうのもアリだと思っています。
レスポンシブデザインの時など、切り落としもカラム落としもコーディング時に全部自前になる場合もありますが、そこを覚悟してデザインするのも一興です。

覚悟というのも、工数が増える、それだけですが。


グリッドシステムでデザインしておくとPC向けのみのサイトでコーディングする場合もスムーズに行くのですが、レスポンシブデザインの場合、CSSフレームワークで設定をショートカットしたい場合にも、便利です。レスポンシブCSSフレームワーク自身にグリッド設定があって、ブラウザ幅でカラムを最終的に100%にするようなものが非常に多いからです。
最初から利用するフレームワークが決まっているときは、そのフレームワークに時折付属しているデザインの方法や、気をつけることは同じですので、独自に添付されているpsdファイルをつかってもいいでしょう。

グリッドシステムでデザインするときの基本ルール

・カラムの個数を足し算したり引き算したりして全体幅にあうように組み立てる
・カラムはめいいっぱい使ってデザインする（full width的な）
・デザイン上、縦の線に気をつければ自然と整頓できる
・自由に配置するときは、独自CSSを付け加える（工数が増える？かも？）ことを覚悟する

これらのルールに従ってつくっておけば、html上でカラム幅を数えて設定するだけでカラムの設定がスムーズになります。グリッドが苦手な方、なんだかうまくグリッド上で表現できなくて邪魔だな―と思っていた方。ぜひこの機会に挑戦してみてください。

関連記事

• グリッドシステムベースのデザインをするときに気をつけること
• おしゃれなワークスペースのイメージいろいろまとめ。
• インテリアデザインとWebデザイン。
• ウェブデザインに関する知識や技術の相互関係チャート
• ウェブデザイン配置のちょっとした「もやもや」をスッキリさせる解決例。