はじめに
季節の変わり目ということもあり、寒暖差が激しくなってきましたね。体調管理をしっかりしていきましょう。
今回も前回に引き続きレイアウトについてまとめました。
第3弾は「よく用いられる2つのレイアウト」についてです。
前回記事：【HP作成】Webデザインの基礎！【レイアウト編②】
よく使われるレイアウトとは
Webデザインにおけるレイアウトを大きく分けると2つあります。
①グリッドレイアウト
②フリーレイアウト
今回はこの2つについて説明していきます。
①グリッドレイアウトについて
グリッドは「格子状」という意味で、グリッドレイアウトとは、Webデザインにおいては垂直方向と水平方向に画面を分割してレイアウトしていく手法を指します。
グリッドレイアウトの利点は以下の通り。
- 事前にグリッドを決めておくことで、レイアウト作業が簡単になる
- 多くの要素が入ったデザインであっても統一性を持たせることができ、整理されたレイアウトに仕上げられる
- スマートフォンやタブレットなど多くのデバイスに対応しやすい
スマートフォンやタブレットで閲覧するユーザーも増えてきていることから、最近では多くの企業サイトやECサイトで用いられている定番のレイアウトになっています。
②フリーレイアウトについて
フリーレイアウトとは、あらかじめ決められたページ幅でレイアウトしていく手法で、掲載する情報量が多いPC専用サイトなどによく用いられます。
フリーレイアウトにおける利点は以下になります。
- どのブラウザ幅でもこちらが意図した通りのレイアウトを見せられる
- 一定の幅で決められているため、閲覧するユーザーの環境をPCに限定できること
固定幅の要素(画像やフォーム、動画など)との兼ね合いに悩むことなく、自由な表現が可能なレイアウトになります。
おわりに
2つのレイアウトを紹介しましたが、コンテンツの内容や対象となるユーザーのデバイスによってどのレイアウトが適切かは変わってきます。
更にスマートフォンの普及によって、Webデザインも多様化してきました。
ターゲットやコンセプトに合わせて使い分けていきましょう
また、➃を投稿しました。「視線の導線」についてまとめていますので、こちらもご参照ください。