Webデザインの基礎知識大全！レイアウト・カラー・タイポグラフィをすべて学ぶ

フッター

フッターエリアは、閲覧しているページの最後尾を伝えるためのものであり、コピーライトや会社の住所などが内包されています。

また、サイト内のコンテンツページへのナビゲーション「サイトマップ」が内包しているケースもある。

Webデザインのレイアウトには、いくつかの型があります。

Webサイトの種類、目的によって用いるレイアウトが違いますのでそれぞれの特徴を覚えておきましょう。

ひとつずつ解説していきます。

シングルカラムレイアウトは、両サイドのエリアを無くして情報構造を縦に並べたレイアウトです。ワンカラムレイアウトとも呼ばれています。

視線導線を減らすことでコンテンツ（情報）を集中させやすいです。
スマホ端末に順応させやすいレイアウト構造になっているため標準的なレイアウトになっています。

マルチカラムレイアウトは、情報構造が複数カラムで配置されているレイアウトです。

基本的にはコンテンツ＋サイドバーなどの2カラム構成になっており、中には両サイドにサイドメニューやバナーをいれた3カラムレイアウトもあります。

主にECサイトやニュース系、メディアサイトに使われています。

グリッドレイアウトは、コンテンツ要素をカードやタイル状に敷き詰めていくようなレイアウトです。

グリッドレイアウトは数多くのコンテンツを配置できるため、ECサイトやニュースサイトに適しています。スマホやタブレットで閲覧する際もデザインが崩れにくく、利便性に優れたレイアウトといえるでしょう。

同じ大きさのコンテンツを配置することも可能ですし、大きさの異なる複数のコンテンツを配置してもメリハリが出るのでECサイトやメディア系のサイトに適しています。

フルスクリーンレイアウトは、1画面の中に自由にコンテンツを配置していくフリーレイアウトです。

主に写真や動画をディスプレイ一杯に表示させています。ブランドサイトなどに用いることで商品やサービスの世界観を演出させることが可能です。

デザインを学ぶにあたり、全てのデザイナー（Webデザイナー、グラフィックデザイナー、エディトリアルデザイナー等）が身につけている「デザインの4原則」と呼ばれるデザインルールがあります。

デザインの4原則は以下の通り。

ひとつずつ解説していきます。

近接は、関連する要素を近づけてグループ化していくことです。

近接をWebデザインに落とし込むと下図の例でサムネイル画像の表示で画像とテキストリンクの間隔が同じ余白になっていると、一見テキストとサムネイル画像の関連性が分かりづらいです。（下図1）

余白を十分にとることでテキストとサムネイル画像の関連性が一目でわかります。（下図2）

整列は、ページ上のものを左揃え・中央揃え・右揃えなど、基準線に沿って要素を意図的に配置することです。

整列をWebデザインに落とし込むと下図の例で日付とタイトルがセンター揃えでは読みにくいです。そこで、日付とタイトルを左揃えに揃えることで圧倒的に読みやすく感じられます。

反復は、デザイン上の型（パーツ、レイアウトなど）を、デザイン全体を通して繰り返すことです。

反復をWebデザインに落とし込むと下図の例でテキストの左のビュレット部分がバラバラだと統一感がなくなりデザインにしまりがなくなってしまいます。

同じビュレットで統一し反復することでリズムが出てきてデザインに調和が生まれます。

コントラストは、情報の優先順位に合わせて要素同士の違いを強調することです。
コントラストの調整の対象となる要素は、大きさ・配色・太さです。

コントラストをWebデザインに落とし込むと下図の例でコンテンツ内テキストがプレーンの状態で表記されています。ここにテキストの重要な部分を緑の太文字で表記させるようにコントラストを付けると目立たせることができます。

Webデザインの印象を付けさせるには「配色」が重要な役割になります。
Webデザインで効果的な印象を狙うために色の仕組みを理解していきましょう。

理解しておきたい色の仕組みは下記の3つです。

ひとつずつ解説していきます。

色は赤・黄・緑と区別しますが、「赤」と呼ばれるものでも明暗や濃淡の違いが多数あります。
色は、「色相」「明度」「彩度」の3つの属性から定義されています。

色の三属性を知らないと補正による指示が出せない、または指示を理解できません。色を扱う基礎になりますので覚えておきましょう。