~絵や興味ある事について書いてます~
header image

webサイトにおけるグリッドレイアウトデザインとは

グリッドレイアウトデザインとは細く薄い色線が等間隔に縦横に枡目状に交差した補助線となる罫線であるグリッドに沿ってレイアウトする要素(パーツ)を配置するデザイン手法である。

webデザインにおいて基本的なレイアウトとして古くから採用されている。
その手法としてはデザイン案が先にありきではなくこのグリッド線に合わせてレイアウトをデザインしwebサイトのパーツを配置していく事が主眼になる事が多い。

特徴やメリット・デメリットとしては、

・既にデザインの定型が決まっているのでレイアウトする際に迷う事が少なく済む。

・規則正しく整然と秩序を以って(都市計画された街並みの様に)レイアウト要素が配置されるので閲覧した際に堅実な印象を与える事が出来る。最大限グリッドに沿わせるならば各レイアウト要素が必然的に角の整った方形になるので(曲線的なパーツとは対極的に)その与える印象に寄与する。

・デザインが似ているので他のサイトでも見かける事が多く何処から見れば良いのか分かりやすい。逆に言えばひと手間加えないとありきたりなデザインになり陳腐化しやすい。

といった特徴やメリット・デメリットがあり、主にニュースサイトや企業のコーポレートサイトや一般的なブログサイト等で顕著にこのグリッドレイアウト形式によるデザインをよく見かける事が出来る。webデザインではこの形式に沿って、ページ上部にサイトの名称やメインビジュアルとなる画像や他ページへのリンクボタンとなるナビゲーションバーを置く「ヘッダー」を、ページ中央部にサイトのメインとなるテキストや画像や動画等の「メインコンテンツ」を、ページ下部にその他の捕捉事項やサイトの各ページへのリンク一覧のリストを置く「フッター」を、ページのサイド又は両サイドに同じく捕捉事項や各ページへのリンクを置くカラム(柱)と呼ばれる縦長の「サイドバー」を配置する事が多い。

ウェブサイトのグリッドレイアウトデザインの例図
(デザインの一例)

※カテゴリ別一覧より関連記事もございますのでどうぞ↓