【初心者向け】レイアウトの種類と特徴・デメリット、レイアウトの基本原則
こんにちは。デザイナーのアピコです。
Webサイトを作成する時、
・見やすいECサイトのレイアウトってどんなもの？
・採用サイトを作りたいけど、どんなレイアウトにすればいいの？
など、レイアウトで悩んだことはありませんか?
本記事では初心者向けにWebデザイン制作におけるレイアウトについて解説していきます。参考になれば幸いです。
INDEX
Webデザインについて
Webデザインとは
Webデザインとは一般的に以下の内容を指します。
・Webサイト全体の情報設計
・情報を視覚的に表現するイラストやアイコンなどの要素を制作するグラフィックデザイン
・WEBサイト・アプリなどのUI（ユーザーインターフェース）設計
簡単にいうと、ユーザーが使いやすく・読みやすく、目的の情報にたどりついたり、商品を購入したりできるようにWebサイトを設計することがWebデザインの仕事になります。
デザイン制作の基本要素
デザインを考える際には基本要素として
・レイアウト
・フォント
・配色
という３つの大きな要素があります。
今回はレイアウトについて詳しく解説していきたいと思います。
全体のレイアウトについて
Webデザイン制作を始める際には、まず大まかにレイアウトを作成する必要があります。サイトの種類、情報量、目的によって、レイアウトの手法は大きく異なります。
現在、主に1カラム、2カラム、3カラムからグリッドレイアウトという4つのレイアウトに大きく分けられます。
１．1カラム
1カラムはワンカラムまたはシングルカラムといいます。
1カラムとはWebサイトのコンテンツを縦1列に上から下へ並べるレイアウトの手法のことになります。
近年、小規模サイトでは1カラムのWebデザインが増えている傾向にあります。
特徴
・左右に他の情報がないため、コンテンツに視点を集中させることができます。
・ディスプレイの横幅に合わせて、レイアウトがしやすく、レスポンシブデザインとも相性がよいので制作もしやすく、メンテナンスもしやすいです。
・ランディングページやコーポレートサイト、キャンペーンサイトなどで使われることが多いです。
■例
▶ Web制作・ホームページ制作に関するお問い合わせはこちら ▶
デメリット
・スマホで表示すると画面下までスクロールするのに時間がかかります。そのため、情報量が多く極端に縦長の1カラムレイアウトはユーザーの離脱につながる恐れがあります。
・メインコンテンツ以外の他のコンテンツの情報を探しにくいので、サイト内の回遊率を高めるのが難しいです。
２．2カラム
2カラムレイアウトは左または右にサイドバーがあります。
特徴
・メインコンテンツに加え、カテゴリー、関連情報も掲載することができるので回遊率の向上が期待できると思います。
・他のサービス、情報が目につきやすいレイアウトのため、ブログ、ショッピングサイト、ニュースサイトなどで使われることが多いです。
■例
デメリット
・近年のホームページはレスポンシブ対応できるデザインを採用することが多くなり、PCでは2カラムで表示されていても、スマホサイズでは1カラムになることがほとんどなので、デザイン構成を再検討しなければなりません。
３．3カラム
3カラムは左右の両方にサイドバーがあるタイプのレイアウトになります。
3カラムは情報量の多いポータルサイトやECサイトでよく使われます。
特徴
・このレイアウトでは多くのコンテンツを載せることができます。一度に一画面でたくさんのコンテンツを見せることで、サイトを回遊したくなるワクワク感をあたえたり、サイトの情報量や商品数の多さをアピールすることができます。
■例
▶ ECサイトの立ち上げをご検討中の方はこちらのサイトをご参照ください！▶
デメリット
・情報量が非常に多いため、レイアウト、サイドバーのメニューをしっかり考えておかないと情報の羅列で終わってしまいます。そのため、3カラムのサイトをデザインする際には、UX面の調査や実験を重ねて計画していくことが大切です。
・またこのレイアウトもスマホ画面での配慮が必要になります。もともとコンテンツが豊富なこともあり、スマホでそのまま1カラムにまとめることが難しくなります。
４．グリッドレイアウト
グリッドレイアウトは画面、ページを縦横の直線で格子状に分割させ、コンテンツをブロック内に配置するレイアウトです。
特徴
・レスポンシブレイアウトと相性が良く画像を大きく見せることが可能なため、ECサイトで力を発揮するレイアウトになります。
・印象的なデザインが作りやすく、多くの情報を掲載することができるため、ユーザーを誘導しやすくなります。
■例
▶ 会社ホームページの作成・リニューアル、採用サイト作成などのWeb制作に関するお問い合わせはこちら ▶
デメリット
・画像がメインになるので、画像の質によってデザインの印象が大きく左右されます。いい画像を準備しないとダサく見えてしまう恐れがあります。
・サイト上の統一感や情報量の多さから、コンテンツの重要度の見極めが難しく、ユーザーがどのコンテンツから見ればよいか迷う可能性があげられます。
・コンテンツごとに重要度の差を表現するなら、サイズや画像、カラーなどをうまく変えて強調しなければなりません。
コンテンツのレイアウトについて
全体のレイアウトの次はコンテンツ毎のレイアウトを考えていきます。デザインのレイアウトには基本的な原則として「近接」「整列」「反復」「強弱」という4つの原則があります。
この4つの基本に基づいてデザインしていくと比較的整ったデザインに仕上げられますので、情報を見やすく、分かりやすく伝えることができます。
それでは、1つずつ解説していきたいと思います。
１．近接
近接は関連する要素をまとめて、グループ化する手法になります。関連するものを近づけることでそれぞれ無関係なものではなく一つのまとまったグループとして見せることが可能になります。
関連性のない情報同士は余白を開けることが必要になります。
例えば、上の例のように各グループの間に適切な余白を空けるとページを訪れたユーザーが関連している情報を瞬時に判別でき、視覚的にも見やすく読みやすいため、ページの滞在時間やコンテンツ回遊率のアップに繋がります。
ポイントとしては関係する要素同士を近づける、異なる要素や関連性のない要素同士は余白を空けることがポイントになってきます。
２．整列
整列は要素にルールを持たせてレイアウトをすることになります。
関連する要素同士の配置や大きさがバラバラだと、気持ち悪く感じたり、不安定に見えるので、関連する情報や同じ様子のパーツに揃えることを意識しなければなりません。レイアウト作成する際にまずは近接で同じ情報をグループ化し、整列でその情報をより伝わりやすい形、見た目に整える というようなイメージになります。
レイアウトの場合は左揃え、中央揃え、右揃えの3種類にわけられます。
上下のレイアウトの場合は上揃え、中央揃え、下揃えの3種類に大きく分けられます。
揃えに着目してレイアウトをすると上の例のように透明な揃えラインがデザインの中に生まれてきて、情報を綺麗に見せることができます。
３．反復
反復は要素のデザインルールを繰り返すことです。例えば、同じサイズの見出し、同じ色、同じフォントなどをページ内で繰り返し使えば、反復ということになります。
もし各要素が異なるルールで作られていたら、統一感がなくなり、見づらくなってしまいます。また要素の関連性も分かりづらくなります。そのため同じ要素を繰り返して配置する時はデザインルールも統一して繰り返して、レイアウトをするのが基本になります。
反復をすることでユーザーが瞬時に同じものについて表現しているのだと理解することができますし、直観的にわかりやすくなってきます。
ところが全体的に同一のルールだけで、デザインを制作すると、単調になりすぎて、印象の薄いものにもなってしまいますので、一つのデザインルールから派生させたらいいと思います。
例えば、1件目だけは大きく表示すること、①②③位のアイコンを入れることなどちょっとだけ工夫を加えるとデザインの印象を変えることができます。
ポイントとしては同じ要素を繰り返して配置する時はデザインルールも繰り返す、単調になりすぎないように必要に応じて工夫するポイントも作るこの２つがポイントになります。
４．強弱
レイアウトの基本原則の最後は強弱です。強弱は要素、情報を明確にし、はっきりと差をつける手法になります。大きさや色などで、差をつけるだけで伝えたい情報が明確になり、視線が止まりやすく、読みやすくなると思います。
ここのポイントはまずは情報を整理し、要素を分解、それぞれに優先順位をつけることになります。 そして強弱を意識し、違うものは思い切って変化をつけます。
まとめ
今回はWebデザインを制作する際に、覚えておきたいレイアウトの基本知識をご紹介しました。
コーポレートサイト、ブランドサイト、ランディングページ、ECサイト、採用サイトなどウェブサイトの種類、コンテンツの内容によって、レイアウトの選び方が変わってきます。適切なレイアウトで設計することにより、サイトの直帰率や回遊率を改善し、成果につなげることができます。そのために、デザイン制作を始める前にユーザビリティを考えてレイアウトを決めましょう。
Web制作・開発について、無料でご相談できます！ご質問・ご相談がございましたら、お気軽にご連絡ください！▶
また弊社では、一緒にWEB業界を盛り上げてくれるメンバーを募集中です！
デザインやWEB制作に興味がある方は、ぜひエントリーページからご応募ください。
