あらゆるデザインを行う際に、レイアウトはとても大切な要素です。
それは、Webデザインにおいても同じことが言えるでしょう。
レイアウトの基礎
レイアウトというのはデザインや設計をする際に、何をどのように配置するのかという位置決めのことを指します。
Webデザインにおいてレイアウトを考えるとき、感性だけを頼りにするよりもきちんと論理づけて配置することが大切です。
例えば、関連性の高いものは近くに配置したり、同じジャンルのものは同じ色を使用したりすることで、とても見やすく使いやすいwebページを作ることができます。
レイアウトの4大原則
レイアウトを考えるとき、必ず守りたい4つの原則が存在します。
Webデザイン初心者の人でもこの4つの原則をしっかりと守ることで、デザインを様がわりさせることが可能です。
近接の原則
人は、近くにあるものは関連性があるものだと認識しやすいと言われています。
そのため、全く関係がないものでも近くにレイアウトされていると、何か関係があるのかな？と勘違いを起こしやすいのです。
そのため、位置関係をしっかりと整理して見やすいレイアウトにすることが大切なのです。
整列の原則
デザインの中の要素の位置や大きさ、形、色などを揃えることで見た目を整えることを整列と言います。
整列は、＜近接＞と同様に直感的に情報の構成を理解できるようになるため、デザインにおいては欠かせないポイントです。
このように名刺にある要素（名前や会社名、電話番号など）を整列するだけで、デザイン性をアップさせることができます。
見えない線を感じるようなデザインになることで、見た目にもスッキリと見やすくなりました。
左右の整列には、「左揃え」「中央揃え」「右揃え」があります。
また、上下の整列には「上揃え」「中央揃え」「下揃え」があります。
整列をしっかりと行えば、デザインに一体感が生まれ、組織化にもつながります。
どの方法で整列させるかによって見え方が変わりますので、目的に応じて揃え方を選択するようにしましょう。
反復の原則
反復の原則とは、デザインの中で何らかの要素を繰り返すということを意味します。
例えば、Webページにおいてヘッダー部分（メニューバー）は、どのページに移動しても同じものが使用されていることが多くあります。
これは、反復の原則に沿って考えられたデザインだと言えます。
参考ホームページ：LOWYA
Webページにおいて、モチーフや線、色などを繰り返し使うことで統一性を持たせようとする考え方も反復の原則の一つです。
別のページに移動した時、「全く違うページに移動してしまった」と誤解されないよう、ページをまたいで要素を反復させることで統一感や一貫性を持たせているのです。
参考ホームページ：タカラトミー
タカラトミーでは、青色を反復して使用することで統一性を持たせています。
Webや広告では、全体に一貫性を持たせるためのスタイルやルールのことを「トーン&マナー」ともいいます。
強弱の原則（コントラスト）
強弱の原則は、デザインにおいて非常に大切なポイントです。
整列の原則では、レイアウトに統一性を持たせることでデザインを見やすいものにしていましたが、
強弱の原則ではそれとは反対に、レイアウトの一部を揃えないようにすることでデザインを見やすくしていきます。
考え方としては整列の原則とは反対になりますが、それは決して整列の原則を守らないということではなく、整列の原則を守りつつも強弱をつけていくというやり方が大切です。
伝えたい情報の優先度をはっきりさせよう
見出しやタイトルは大きく、太く。
本文は小さく。
これは、当たり前のことだと思いがちですが、その強弱の付け方や加減によってデザインは大きく異なってきます。
メリハリのある、伝わるデザインにしたい場合、文字のサイズや色の違いも思い切ってつけることが大切です。
ほんの少しの違いだと、ユーザーはその違いを感じることができません。
強弱をつけるならば、上の図のように大きくその差をつけるように心がけましょう。
強弱のついたレイアウトをしたい場合、まずは情報の整理をすることも大切です。
デザインの中の要素を分解し、それぞれにまずは優先順位をつけます。
そして強弱を意識し、伝えたいことははっきりと大きく目立たせ、違うものははっきりと違わせましょう。
レイアウトで視線誘導をする
ユーザーがWebページを閲覧した際、視線がどのように動いていくのかというのは無意識なものだけではなく、デザインやレイアウトに大きく左右されています。
今回はレイアウトを工夫することで、見て欲しいポイントへ視線を運んでいく方法について学びましょう。
視線は左上から右下へ
これは、ポスターや紙媒体の広告から派生したものだと言われていますが、
人の視線は基本的にまずは左上に注目します。
その後最後に右下へ流れていくとされています。
Webページにおいても、店や会社のロゴなどはまず初めに目に留まる左上にあることが多いと思います。
このように左上と右下は最初と最後にしっかりとユーザーが見てくれる場所であるため、見て欲しい重要な要素を置くのに適しています。
Z型のレイアウト
視線を左上から右上、その後左下から右下へとアルファベットのZのように誘導していくレイアウトです。
参考ホームページ：studio clip
このように大切な要素をZ型にレイアウトすることでユーザーの興味を引き立たせるように見せていく手法です。
今回例に出したホームページでは、まず最初に今最も注目のキャンペーン内容に目が行き、
その後は開催中のキャンペーンへ、
そして商品一覧を見ていくことができるようなレイアウトになっています。
F型のレイアウト
このF型のレイアウトは、最近ではECサイトやブログで多用されているレイアウトです。
PC向けサイトだけではなく、スマートフォンやアプリでも取り入れられることが多くなっています。
左上にロゴなどの1番目立たせたいものを配置する手法はZ型と同様ですが、
視線の誘導方向が異なります。
参考ホームページ：キナリノ
このようにまずはピックアップされている記事を見て、その後ブログ記事一覧を順番に下へ読み進めます。
その際、ブログ記事のサムネイルを見た流れで、タイトルと本文一部を見るというように、横へも視線が誘導されていきます。
このように横に下に順番に視線を誘導していく手法をF型のレイアウトと言います。
今回のページでは、Webデザインの要とも言えるレイアウトについて、基礎的な部分に重点を置いて解説しました。
4原則は、Webデザインだけではなく、あらゆるデザインに共通して必要な基礎知識ですので、しっかりと理解しておきましょう。
次のページでは、デザインにおける文字・写真について解説していきます。