top of page

WEBサイトのレイアウト 基本3パターン

スマホサイトが一般的になりウェブサイトのデザインパターンはさらに多様化していますが、今日はウェブデザインの代表的なレイアウト 3パターンとそれぞれのメリット・デメリットをご紹介したいと思います。


①シングルカラム(1カラムレイアウト)

ランディングページに代表されるように、まっすぐ縦に配置するレイアウトを、シングルカラム、または1カラムレイアウトと言います。


最近では、スマートフォンやタブレットの横幅を考慮したレスポンシブレイアウトと相性の良いシングルカラム(1カラムレイアウト)が急速に普及しています。


メリット

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


デメリット

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

 

②マルチカラム

https://news.google.com/news/?ned=jp&hl=ja


ページを複数の列に分割して配置するレイアウトを、マルチカラムと言います。

メニューとメインコンテンツに分割する2カラムや、更にバナーエリアなどを設けた3カラムなどが代表的なマルチカラムのデザインです。


最近ではシングルカラムのサイトが増えていますが、実用性が高い事からいまだに多くのサイトでマルチカラムのレイアウトが使われています。


メリット

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


デメリット

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

 

③カード型

https://www.pinterest.jp/


グリッドレイアウトとも呼ばれるもので、カードを並べたかのようなレイアウトです。

カード型は多くの要素を並べた時に、それぞれがどこで区切られているのかを分かりやすく伝えることができるため、整った印象を与えることができます。


多くの情報を詰め込んでもきちんと整理することができるので、写真や制作事例、記事など多くのものを並べて表示しても分かりやすく見せることができます。


メリット

一番上に新しく要素を追加するだけで情報を追加することができるため、更新性に優れています。また、無意識に一番左上が最新の情報だということが認識できるので、アクセスした人にも最新の情報をしっかりと分かりやすく伝えることができます。


デメリット

構成が統一化されてしまう為、コンテンツごとの重要度に差が出にくい。

また、伝わる情報量が多いため、ユーザーがどこから閲覧すれば良いか迷う可能性がある

 
まとめ

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

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


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

bottom of page