一覧に戻る
Lv.1

グリッドレイアウト

Grid Layout

画面を縦横のマス目に分けて、文字や画像をきれいに配置するデザインの手法。

簡単に説明すると

グリッドレイアウトは、画面をマス目に見立てて情報を整理して並べるデザインの手法だよ。 インターネットのニュースサイトや写真アプリなどで、記事や写真が縦横にきれいに並んでいる画面でよく使われているんだ。 マス目の幅を変えることで、画面の大きさが違うスマートフォンとパソコンのどちらから見ても、自動でその画面サイズに合わせたレイアウトを表示できる特徴があるよ。

名前のヒミツ

グリッドレイアウトの「グリッド」は、英語の「Grid」で格子やマス目という意味なんだよ。 画面に見えない縦と横の線を引いてマス目を作り、その線に沿って文字や画像を配置することからこの名前がついているんだ。 配置の基準となる線を使うことが名前の由来だよ。

くわしく見てみよう!

グリッドレイアウトとは、ウェブサイトやアプリの画面を縦と横の線でマス目のように区切り、そのマス目に沿って画像や文章を配置するデザインの手法のことなんだ。
この手法を使うことで、色々な大きさの情報をすっきりと整理して伝えることができるよ。

大まかに言うと、本棚の仕切りに本をきれいに並べるように、画面の中の決まった枠に情報を当てはめていくイメージだね。
この方法を使うと、情報の高さや幅が自然とそろうため、バラバラになりがちな情報でも統一感を持たせることができるんだ。
さらに、文字や画像のサイズがばらばらであっても、全体のバランスが崩れにくくなるよ。

また、スマートフォンやパソコンなど、画面の大きさが違う機器に対応しやすいのも大きな特徴なんだ。
例えば、パソコンの広い画面では横に4つのマス目を並べ、スマートフォンの狭い画面では一列に並べ直す、といった配置の切り替えがスムーズに行えるよ。
ウェブサイトやアプリのデザインにおいて、基本となる重要な技術の1つとして広く使われているよ。

カテゴリデザインWeb