• サイトマップ

グリッドシステムを活用しよう

レイアウト作業をするにあたってグリッドシステムという考え方を利用すると非常に便利です。 この考えかたを使えば誰でもスッキリとしたレイアウトが可能です。 このトピックスではそのグリッドシステムについて解説したいと思います。

グリッドシステムとは

グリッドシステムとはヨーロッパで生まれた伝統的なレイアウトテクニックです。 下の図のように、画面をグリッドと呼ばれる格子状に分割し、 格子を基準に画像や見出し、文章などの要素を線に合わせてレイアウトします。 このテクニックはWebと非常に相性のよい方法です。 ちなみにこの格子線は実際の画面には表示されない、 ガイドラインのようなものです。 このグリッドシステムを採用することで次のメリットを得ることができます。

簡単にバリエーションをつくることができる

要素を差し替えたり、入れ替えるだけで様々なバリエーションを作ることができます。 またこのシステムを使って一定のルール (タイトル・ロゴの位置、メニューの位置、見出しの位置を決めておくなど) で各ページを作成すればサイト全体に高い統一感をつくれ、 誰でもある程度のクオリティを持ったレイアウトが作成可能です。

基準線を簡単に設定することができる

グリッドシステムを採用すると基準線を簡単に見つけ、 設定することができます。格子を作っている縦と横の線に注目し、 要素をそろえて配置するだけでいいのです！

テーブルレイアウトとの相性がよい

テーブルはもともと格子状をしている表です。 ですからテーブルのセルをグリッドシステムのグリッドに見立てて レイアウトすれば簡単にグリッドシステムを利用できるのです。