其の33　グリットを有効活用しよう

まとまりがない印象を受けるサイトには、表示されている要素の左側が揃っていなかったり、バラバラに配置されていることが多い【1】。

こうした場合には、レイアウトをする際にグリッドシステムを利用すると非常に便利だ。これを上手に活用すると、スッキリとまとまりのあるレイアウトが可能になる。

グリッドシステムとは、画面をグリッドと呼ばれる格子状に分割し、それを基準に画像や見出し、文章などの要素を線に合わせてレイアウトを行うことだ。見えない線に沿ってレイアウトするため、ページ上に載せる要素を簡単に揃えることができ、ページのフォーマットや、サイト全体のイメージを統一しやすいという利点がある【2】。また、CSSのボックスをグリットシステムの四角形一個分を見立ててレイアウトすると便利である。

ただ、機械的にグリットに合わせてばかりいると単調でつまらない印象になる場合もある。そんなときは、あえて意図的に一部をずらしてみよう。どの程度グリットに合わせてレイアウトしているかの度合いを「グリット拘束率」という。拘束率が高ければ堅い印象のサイトになり、低ければ自由度が高く楽しい印象を与えることができる【3】。