WEBレイアウトの基本4パターンそれぞれのメリット・デメリット

webサイトのレイアウトパターンは数多く存在しますが、スマートフォンやタブレットの普及に伴ってレイアウトが多様化した近年において、代表的な4パターンを紹介します。

基本4パターンのメリット・デメリット

①シングルカラム（1カラムレイアウト）

https://www.eneco-hd.co.jp/
-参考　Eneco Holdings株式会社

ランディングページに代表されるように、まっすぐ縦に配置するレイアウトを、シングルカラム（1カラムレイアウト）と言います。
数年前のWebサイトでは、サイドバーを設けた2カラムが主流でしたが、スマートフォンやタブレットの横幅を考慮したレスポンシブレイアウトと相性の良いシングルカラム（1カラムレイアウト）が急速に普及していきました。

メリット

横幅いっぱいにメインコンテンツを配置できる為、訴求したい内容をしっかり見てもらう事ができます。

デメリット

階層の深いサイトの場合、下層ページへの誘導がしにくく、離脱率が上がりやすくなってしまいます。

②マルチカラム

https://news.google.com/news/?ned=jp&hl=ja
-参考　Google ニュース

ページを複数の列に分割して配置するレイアウトを、マルチカラムと言います。
メニューとメインコンテンツに分割する2カラムや、更にバナーエリアなどを設けた3カラムなどが代表的なマルチカラムです。
シングルカラムが主流になりつつある近年においても、実用性が高い事から多くのwebサイトに活用されたレイアウトになります。

メリット

他ページへの導線やバナー設置が可能な事から、ユーザーの回遊性を高めやすい性質があります。ニュースサイトやポータルサイトなどコンテンツ量が多いサイトに適したレイアウトと言えます。

デメリット

メインコンテンツの表示幅が狭くなり、サイドバーには別ページへの導線が設置されている事から、情報が多くなってしまい、メインコンテンツへの集中力が持続しにくくなってしまいます。

カード型

https://www.pinterest.jp/
-参考　Pinterest

グリッドレイアウトの一つで、カードを並べたかのような特徴的なレイアウトです。レスポンシブレイアウトと相性が良く、画像を大きく見せる事が可能な為、ECサイトやSNSなどで力を発揮するレイアウトになります。

メリット

印象的なデザインが作りやすく、多くの情報を掲載する事ができる為、第二階層以降にユーザーを誘導しやすくなります。

デメリット

構成が統一化されてしまう為、コンテンツ毎の棲み分けや差異化がしにくく、全体のデザインイメージも画像の質に大きく左右されてしまいます。

フルスクリーン型

http://www.holon.co.jp/
-参考　株式会社ホロンシステム

コンテンツを画面幅いっぱいまで広げたレイアウトです。 ヒーローヘッダーとの相性が良く、一つ一つのコンテンツを強調して見せる事のできるレイアウトです。

メリット

画面幅いっぱいまでコンテンツを配置できるので、ダイナミックな表現が可能です。また、コンテンツ間のメリハリがつけやすく目立たせたい箇所の強調もしやすいレイアウトとなっています。

デメリット

テキストが少ない、もしくは目立たないデザインである事が多く、何のサイトか分かりにくくなりやすい。

まとめ

どんなレイアウトにもメリット・デメリットが存在します。

まずは、ユーザーが求めている情報や自分たちが見てもらいたいコンテンツをまとめ、優先順位をつけましょう。

しかし、ここで一番大事にしたいのはユーザビリティです。

コーポレートサイト、サービスサイト、ECサイト、採用サイト、LPなど、どのようなサイトを制作するかによっても変わってきますが、コンバージョンまでの導線設計がスムーズなレイアウトを選ぶように心がけましょう。

自分たちのWEBサイトの目的や利用ユーザーを明確にする事で、より適したWEBレイアウトが見えてくるのではないでしょうか。