グリッドレイアウトをWEBデザインで活用

グリッドレイアウトをWEBデザインで活用

グリッドレイアウトとは元は紙媒体のデザインで使われていたレイアウト方法で、

縦や横に等間隔で分割した中でレイアウトする方法です。

グリッドレイアウト01

 

上記のような青色の縦の等間隔のガイドラインがグリッドです。(赤の横線も)

あくまでガイドラインなので、最終的には線はなくなります。

制作段階でのあくまでガイドになります。

 

なぜこのグリッドレイアウトが必要なのか。

まずは単純にキレイに揃える事や、そこに文字や写真を置く意味を持たせる為だと思います。

なぜ、タイトルがここにきた後、文章がここにくるのか、写真がここにくるのか。

あらかじめグリッドがあるとすんなりレイアウトしやすいと思います。

 

いまいち説明が上手くできません。

 

最初の無法地帯の真っ白なページにルール(秩序)を作ってそのルールに沿ってデザインをしていく為です。

そうする事によってデザインで自分自身が悩む事を少なくする事ができますし、

見る人も見やすくなります。

 

ブログのグリッド

このブログのグリッド

(このブログも多少はグリッド意識してます)

 

一見がっちりルールが決められてしまってつまらないデザインになりそうと思いやすいですが、

それが逆でそのレイアウトを崩す事によってページに面白みが出てきます。

ここがグリッドデザインの面白さの一つだと思います。

ルールを作っておいてルールを破るのが楽しい。

自由なデザインを作りたいって人は特にルールを守ってみた方がいいかもしれません。

ルールを守った方が自由にやらせてもらえる、って何だか人の生活の中でもある話ですよねw

 

自由にデザインする為のグリッドデザインとして今回は説明をさせていただきたいです。
関連サイト:
960 grid system


このエントリーをはてなブックマークに追加
TAGS: