今回は、WEBサイトを作成する上でのレイアウト手法のひとつ「グリッドレイアウト」について考えていきたいと思います。最近では「フラットデザイン」や「レスポンシブデザイン」など新たな表現スタイルでそれぞれのWEBサイトの個性を出していますが、その中でも安定して広がりを見せているのが、コンテンツ配置に特徴のある「グリッドレイアウト」です。
以前は、フォトグラファーがポートフォリオを載せるような、ギャラリーサイトで多く見られたスタイルですが、現在では企業サイトなどでもトピックスを一覧で並べたり、制作実績を一覧で表示したりするなど、整然とした印象の中に、少し遊び心を感じさせるようなWEBサイトに採用されている傾向が見られます。
1.グリッドレアウトとは…
グリッドとは「格子状の」という意味がありますが、画面を縦と横で分断した方眼のブロックを組み合わせて、コンテンツを配置していく画面設計手法のひとつになります。
グリッドレイアウトで作成されたWEBサイトは、「グリッドシステム」や「グリッドデザイン」などと呼ばれ、本来は新聞や雑誌などの印刷物で良く使われているレイアウト手法になります。画像や文章などの構成要素を、各グリッドにきちんと配置することで、マージンを統一して各要素の大きさが多少違っていても、きちんと整列された印象を与えることが可能になります。
2.グリッドデザインのタイプ別
グリッドデザインにもいくつかタイプがありますが、ここでは2種類を見ていきましょう。
カード型グリッドデザイン
コンテンツをカードを並べたような「カード型グリッドデザイン」。
可変グリッドデザイン
ブラウザの幅に合わせてコンテンツの幅や位置を変化させる「可変グリッドデザイン」。
可変グリッドデザインを見ていく前に、その他のWEBサイトの画面設計には「リキッドレイアウト」や「レスポンシブウェブデザイン」に触れておくと、この２つの手法は、ブラウザの横幅によってページ内のコンテンツが、変形したり移動したりしながら可変する仕様になっています。
WEBサイトのレイアウト設計をする際に、「カラム数」や「固定or可変」などを決定していきますが、リキッドレイアウトはその中でも基本的な設計で、要素の単位を「%」で指定することによって、ブラウザの横幅に合わせてコンテンツの幅や位置を相対的に変化させることができるレイアウト手法になっています。これは、様々なウィンドウサイズに対応したマルチデバイス向けとなっており、画面の幅が変わっても、横スクロールバーが表示されない。などのユーザビリティを保つことができるメリットがあります。
しかしながら、解像度が高いディスプレイと低いディスプレイとの間で、文章等が見えやすくなったり、見えにくくなってしまったりするという欠点もあります。そういった場合には、幅の上限や下限を指定することで最低限のビジュアルを維持するなどの対応が必要になります。
ブラウザの幅に合わせてコンテンツの幅が変化するという点においては、レスポンシブウェブデザインに近いものがありますが、ふたつの違いは何なのかというと、レスポシブウェブデザインは、画面サイズによってナビゲーションの表示が変わったり、あるコンテンツを非表示にしたりしますが、可変グリッドデザインは、コンテンツの幅を変える、配置する場所を変更するという点です。
3.グリッドを採用したWEBサイト
数多くの企業やPRサイトなどが、グリッドデザインを採用していますが、一例としていくつかご紹介します。
キューピーマヨネーズ
森永（英語版）
デザイン事務所 サガ
大阪人間科学大学
Shinya Inamura Web&Design%Illustration
NHKスタジオパーク
4.メリットとデメリット
メリット
- 一瞬で多くの情報を見せることができる
- サムネイル画像などを整列することでクリックがしやすい
- 整列したコンテンツを配置することでサイト全体の統一感が出やすい
- コンテンツの追加更新が効率的にできる
デメリット
- 一度に入ってくる情報量が多くなるため、どこから見れば良いのか迷いやすくなる
- 更新頻度高いWEBサイト程、過去に興味のあった記事を見つけにくい
- 全体的な統一感があることにより、コンテンツごとの重要度に差をつけにくい
ギャラリーや作品紹介などのように、情報の優先度にそこまで差がないWEBサイトには向いているが、コンテンツの内容によって、強弱をつけたい場合には、色で区別したり、コンテンツの大きさに違いを出さないとその重要度の差を出しにくい。
5.まとめ
グリッドに沿ってコンテンツを配置する「グリッドレイアウト」は、きちんと整列されたレイアウトから秩序のような印象を感じさせます。
グリッドと言うと、決められた範囲に沿って要素を配置させることから、どこかで自由度に対する制限をかけてしまうような印象もありますが、ある程度の規則性の中でイレギュラーなものや、大きさの違うものを配置したりすることで、ちょっとした「遊び心」のような自由感を見る側に与えることもできます。
ただ規則的に並べれば良いということではなく、コンテンツ間のスペースやテキストのサイズ、画像のトリミングなど、様々な要素を組み合わせることにより、それぞれのサイトごとに違った印象を持たせることが出来るというのもグリッドレイアウトの良いところかもしれません。今後のサイトレイアウトの手段として、このグリッドレイアウトを活用してみてはいかがでしょうか。