Pedia

グリッドシステム(グリッドデザイン)

ぐりっどしすてむ

English: Grid System

意味

グリッドシステムとは、デザインにおいて、画面や紙面を規則的な格子状(グリッド)のガイドラインに分割し、それに沿って文字や画像を配置するレイアウト手法。整然とした統一感と秩序を生み出し、情報の可読性を高める効果がある。Webデザインでは、様々な画面サイズに対応するレスポンシブデザインの基礎として重要。

概要

画面や紙面を、縦横の格子状(グリッド)のガイドラインで分割し、そのマス目に沿って文字や画像を配置するデザイン手法。 新聞や雑誌のレイアウト(段組み)がルーツ。

Webデザインにおける重要性

BootstrapなどのCSSフレームワークで採用され、標準となった。 画面を横に12分割し、「PCなら画像を3マス分使う」「スマホなら12マス分(全幅)使う」といったルールを決めることで、どんな画面サイズのデバイスでも綺麗に表示される「レスポンシブデザイン」を簡単に実現できる。

メリット

  • 整列: 要素がピシッと揃うので、見た目が美しく、読みやすくなる。
  • 効率: 配置に迷わなくなる。
  • 一貫性: ページごとのバラつきがなくなる。
TOP / 検索 Amazonで探す