「とりあえず2カラム」はもう古い？LPやブログで失敗しない“レイアウト4選”の決定的な使い分け

Webデザイン初心者必見！ サイト制作で頻出する「3つのレイアウト」をわかりやすく解説

【Web- 頻出用語】「レスポンシブデザイン」

使用するデバイスに応じて表示されるデザインが自動で調整されるWebやアプリのデザインのこと。

レスポンシブデザインとは、スマホや PCなど画面サイズに応じてレイアウトを最適化するW e bデザイン手法です。どのデバイスで見てもわかりやすく、サイト管理もしやすいです。SEO対策*にも有利になり、今やWebデザイン制作には欠かせません。

*検索エンジンで特定のキーワードを検索した際に、自社のWebサイトを上位表示させるための施策

【Web- 頻出用語】「カラムレイアウト」

Webサイトにおいて、縦の列を利用したレイアウトのこと。

１カラム

シンプルでスマホ向き。コンテンツに集中しやすく、LP*に多い。
*ランディングページの略

２カラム

左にナビ、右にメインなど、情報を整理しやすくバランスがとれる。

３カラム

情報量が多いサイト向き。同時に多くの情報を載せることができる。

【Web- 頻出用語】「グリッドレイアウト」

画像やオブジェクト、テキストなどを格子状に配置するレイアウトのこと。

【メリット】
・視覚的に安定したデザインが可能
・優先順位が明確になり伝わりやすい

統一感と視認性が高まり、情報を伝えやすくするため広く活用されています。

【Web- 頻出用語】「メイソンリーレイアウト（MASONRY LAYOUT）」

レンガ状に縦方向に画像を並べるレイアウトのこと。

【メリット】
・コンテンツの量や高さに応じてムダなく表示できる
・ブログ・ギャラリー・ポートフォリオサイトに最適

高さの異なる要素をスペースを最大限に活用して配置できますが、順序があるものには不向きです。

【出典】『瞬解！ デザイン用語図鑑』著：ingectar-e