creatersnest

美しいグリッドデザインを作る方法&お役立ちツール3つ


最近では、レスポンシブにするために
可変なグリッドデザインを導入するサイトも増えました。
グリッドデザインでサイトを作る上で便利なツールも、
近頃は色々なものが作られているようです。
そんなグリッドデザインですが、美しいグリッドデザインのサイトを作るために
注意しなければならない点、ご存知ですか。

垂直方向と水平方向の両方を揃える

それは、垂直方向だけでなく水平方向も揃える、ということです。
グリッド(Grid)という英語を日本語に訳すと「格子」となります。
つまり、グリッドデザインは、タテを揃えるだけでなく、
ヨコ方向も段違いにならないように揃えた方が美しい見た目になるのです。
たとえば、こちらのサイトをご覧ください。

UNIQLOhttp://www.uniqlo.com/jp/

ここのサイトは、セクションによって区切りは違っているものの、
基本的には区切りは4つです。
しかし、各セクションを水平方向で見てみると、区切りがいくつであっても、
きれいに上と下が揃っていることが見てわかります。

他にも、きれいに揃ったグリッドデザインのサイト(国内)をいくつかご紹介します。

Baby G

http://baby-g.jp/

 

LAWSON

http://www.lawson.co.jp/index.html

 

AQUA FEShttp://aquafes.jp/top/

いかがでしょうか。
グリッドデザインを採用する場合、垂直方向と水平方向の両方を揃えることが
サイトを美しく見せるポイントであることがご理解いただけたかと思います。

 

 

グリッドデザインで作る上で役立つツール3つ

それを気をつけたいと思っても、特にツールを使わないで行なおうとするのは
なかなか難しいことかもしれません。
そこで、グリッドデザインのレイアウト制作を助けてくれるお役立ちツールを3つ、
ご紹介します。

 

Dreamweaver

Dreamweaver

http://www.adobe.com/jp/products/dreamweaver.html
最近のDreamweaverにはグリッドデザインのためのツールが標準で用意されています。
ライブビューを利用すれば視覚的に各ボックスの長さや位置を変更することが可能です。
可変グリッドデザインにも対応しています。
Creative Cloudを契約している方は、
ぜひDreamweaverもインストールして利用してみてください。

 

960 Grid System

960 grid system

http://960.gs/
グリッドデザインを作れるツールとしては割と古参で有名なサイトです。
960pxというページ幅の枠内で柔軟に、
グリッドデザインのレイアウトを作ることができます。
現在もメンテナンスや改良が続けられており、
ツールの使い方に関する日本語のWebページも多く存在するため、使いやすいです。

 

Grid Designer

Grid Designer

http://grid.mindplay.dk/
やや見た目が簡素ではありますが、こちらも使いやすいツールだと思います。
このツールの良い点は、簡単に区切りの数や余白を変更できることです。
また、h1からh6のフォント設定を行なえて、
それによって文章がどのように表示されるかも画面に出してくれます。

 

おわりに

グリッドデザインは、現在のWebデザインにおけるレイアウトの主流のひとつです。
垂直方向だけでなく水平方向も、各要素の上下のラインが階段上にならずに
横一直線で並んでいる方が、より美しいサイトに見えます。
今回ご紹介したツールを利用すれば、レイアウトを考えることもしやすくなるでしょう。
ぜひ、ご活用ください。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article目指せ人目を引くデザイン!バナー広告に使う素材選びのポイント