• HOME
  • 記事
  • Webデザイン
  • 【これでもう迷わない!】Webデザインの基本レイアウト5選と、メリット・デメリット。

【これでもう迷わない!】Webデザインの基本レイアウト5選と、メリット・デメリット。

Webデザイン

1からWebサイトを制作する際に、目的に合うレイアウトが分からず迷ってしまう方、いませんか?

今回は、目的に合ったレイアウトを知りたい人や、初心者Webデザイナーのために、基本のレイアウトを5つお伝えします。

それぞれの手法によるメリットやデメリットも記載したので、ぜひ参考にしてみてくださいね。

仲間と一緒に学びたい方はこちら↓

Webデザインの基本レイアウト5選

⑴  モバイルファースト時代に不可欠【シングルカラムレイアウト】

https://www.hoppin-garage.com/

ランディングページなどに使われるシングルカラム(1カラム)レイアウト は、「モバイルファースト」である現代にはなくてはならない存在です。

「そもそもカラムって何?」と疑問に思っている方のために、簡単にご説明します。

カラム(columm)とは、簡単にいえば‘‘列’’のことです。Excelなどの表を想像してみてください。表の上にはA、B、Cなど列を示す英単語が記されてますよね。その1つの列が‘‘1カラム’’です。

特徴
  • すべてのコンテンツを縦にまっすぐ配置するレイアウト
  • ランディングページなどに使われる
メリット
  • スマホなどのモバイル機器でも閲覧しやすい
  • 画面いっぱいにコンテンツを表示できるため、大きな写真や見出しなどを使ってユーザーの注目をコントロールできる
  • 視線の誘導が少なく、コンテンツに集中できる
デメリット
  • 他の記事やサイトへ誘導しにくいため、直帰率が上がりやすい
  • コンテンツを探しにくい
  • 回遊率を求めるサイトには向かない

⑵ 視線の流れで配置を決める【2カラムレイアウト】

https://www.toa-estate.co.jp/

メインページの隣にサイドバーを置くことのできる、2カラムレイアウト ボックスを2つ並べているイメージですね。

最近では、サイドバーを固定してメインページのみスクロールできるページや、画面全体を中央で分けるスプリットスクリーンも増えてきているのだそう。

特徴
  • ページを2つに分けて配置するレイアウト
  • コンテンツ量の多いサイトに使われる
  • 人の視線はZ字やF字に流れるため、コンテンツに集中させたいニュースサイトやブログでは右にサイドバーを配置することが多い。逆に回遊率を高めたいECサイトなどでは左に配置されやすい
メリット
  • 他のページへの導線やバナー配置により、回遊率(ホームページ内のページをどれくらい閲覧したのかを表す指標)を高めやすい
デメリット
  • メインページの幅が狭まり、サイドバーに導線やバナーが並んでいることから、メインのコンテンツに集中しにくくなる

⑶ 美しく整っている【グリッドレイアウト】

https://www.fujiya-peko.co.jp/countrymaam/

要素をグリッド(格子)のように並べることで、美しく整った印象を与えることのできるグリッドレイアウト

もともとは、情報量の多い雑誌などの紙媒体で使われていた手法です。

特徴
  • 要素を格子状に並べるレイアウト
  • 整理された印象を与えられる
  • いくつかの種類があり、代表的なものはブラウザの幅によってレイアウトが変化する「リキッドレイアウト」と、コンテンツの最大幅・最小幅を固定する「フレキシブルレイアウト」
メリット
  • 多くの情報を一度に伝えられる
  • 整った配置のため、ページの統一感がでやすい
  • コンテンツの追加時に構成に迷うことなく、効率的に更新できる
デメリット
  • 全体の統一感により、コンテンツの重要度が分かりにくい
  • 情報量が多いため、見る順番に迷う

⑷ つい視線を奪われる【ブロークングリッドレイアウト】

https://www.ga-tech.co.jp/

美しく整えられたグリッドレイアウトを崩すことにより視線を惹きつける、ブロークングリッドレイアウト

情報が整理されているサイトは美しいですが、面白みには欠けますよね。しかしブロークングリッドレイアウトであれば、新鮮さや面白さを印象づけることができます。

特徴
  • 規律性・法則性を‘‘あえて崩す’’レイアウト
メリット
  • 新鮮さや面白さ、オリジナリティを感じる
  • 画像やテキストを重ねたり、はみ出したりすることにより、ユーザーを注目させることができる
デメリット
  • 「グリッドレイアウトを壊す」という名前だが、ある程度の規律性・法則性を持たせなければ「ただ自由に配置しただけのサイト」になる
  • 要素間、全体のバランス感覚が必要

⑸ まるで絵画を描くように。【ノングリッドデザイン】

https://www.jvebstudio.com/

グリッドやデザインの原則に囚われずに要素を配置する手法を、ノングリッドデザイン と呼びます。

真っ白のキャンバスに絵を描くような自由さがありますが、センスや要素間のバランスが求められる高度なレイアウト方法です。

特徴
  • グリッドや原則に囚われない自由なレイアウト
  • インパクトがあるため、サービスや商品の紹介には効果を発揮するが、コンテンツをじっくり読んでもらうことが重要なメディアなどには向かない。
メリット
  • 規律性や法則性を持たない自由さから抑揚が生まれ、面白さや楽しさを感じる
  • オリジナリティにより差別化できる
  • インパクトがある
デメリット
  • 要素間や全体のバランス感覚、デザインの知識がなければ、ただの「要素を自由に配置しただけのサイト」になってしまう

まとめ

レイアウトにもそれぞれ目的やメリット、デメリットがあるのですね。うまく使いこなすことができれば、Web制作の本来の目的を達成しやすくなるのではないでしょうか。

目的ごとにレイアウトを使い分けて、より良いデザインを目指していきましょう!

仲間と一緒に学びたい方はこちら↓

関連記事一覧

ライター育成します