Webサイトのレイアウトを考える上で非常に使われることの多いグリッドデザイン。グリッド（見えない線）を基準にパーツを整理するため、見やすくすっきりとした印象を与えられるのが特徴です。
グリッドデザインとは？
Webデザインでは、要素の幅はいくつか？
要素と要素の間はどれぐらい開けるべきか？と、いった事を設計してデザインを起こします。
グリッドデザインは、その値の基準を先に決め、各要素や余白をそれらに合わせてデザインする事をいい、Webデザインにとって非常に馴染みやすい手法の一つです。
近年ではCSSそのものにグリッドを考慮したフレームワークが多数あり、それを元に設計、デザインを行うケースも少なくありません。
そのため、グリッドシステムはWebデザインにとってデファクトスタンダードではないか？とも考えます。
グリッドの決め方
これは今回の記事のサンプルで作ったものですが、規則性にそってパーツが配置されているのがわかるかと思います。
これを作る時のグリッドはこんな感じです
グリッドを引くには、Photoshopであれば以下の手順で行います。
- ・カンバスの作成（今回は630×630）
- ・メニューの表示＞新規ガイドレイアウトを作成
- ・列、行にチェックを入れて、それぞれの数に分割したい値（今回は32）を入れる。
今回は自分でグリッドを敷いてデザインを起こしていますが、1から考えるだけではなく、誰でも利用できるように公開されているグリッドシステムを利用するやり方もあります。
有名なものといえば960 Grid Systemがありますね。
どれを使うのが正しいということはなく、デザインを行う場面場面で最適と思えるものを選択することが大事です。
崩す
グリッドに添ってレイアウトしていくとパーツが整うため綺麗に見えます。しかし全てがルールに沿っているため、単調さを感じてしまい退屈な印象を与えてしまいがちです。
それを避けるため、あえてグリッドから崩すことで目を引き、見ている人へ訴えかけるデザインに昇華させることが出来ます。
デザインは綺麗に仕上がっている必要がありますが、それが最終の目的でないことがほとんどです。
目的を達成するためにデザインを行う必要があり、それが出来なければデザインとはよべません。
例えば先程のサンプルで、一箇所を目立たせる必要があるなら、少し手を加えるだけでも簡単に要素が際立ちます。
一定の規則のなかで一つだけ規則に従わなければ、当然その要素は他より目立ちますね？それを応用して、メニューであったり、ショッピングカートのボタンであったり、資料請求のボタンであったり、目立つ必要のある要素をうまくルールから崩してあげることで、より効果の望めるデザインになります。
今までのサンプルにメニューを付け、左上の写真を斜めにしてメニューへ視線が行きやすいようにしました。
このサンプルの場合ですとメインは猫の写真達なので、全体のトーンは壊したくないところです。
メニューを目立たせるには色味を変えるという手もありますが、それをしてしまうと目立ちすぎるので、あえてそれはせずに、崩すことでメニューに目が行くよう施しました。
まとめ
グリッドデザインで大事なのはそのまま、グリッドを意識することであり、揃えることです。これがしっかりできていないと違和感がでるので充分気をつけなければなりません。
綺麗に揃っていれば揃っているほど、違和感はより浮き彫りになります。
しかし、3項で述べたとおり、そのままでは単調なデザインになってしまいがちなので、あえて崩すということも忘れてはいけません。
デザインはルールに従うこともありますが、時にはそれを破ることも大事で、最も大事なのは全てのものに意味があるということです。
何故揃えるのか？ 何故崩すのか？を自分の中にしっかりと理由を持ってデザインすることが大事です。
お役に立てたらお願いします🙇
Comments