2022.02.17

ウェブ制作

ウェブサイトのレイアウトの基本を学ぼう！レイアウトの基本的な型や作成の流れをご紹介します。

ウェブサイトのレイアウトやデザインを考える前に、まずデザインの原則やレイアウトの基本を学んでおきましょう。

デザインには流行がありますが、デザインの原則やレイアウトの基本はトレンドに流されず基礎となるので、ユーザーが分かりやすく使いやすいウェブサイトを作る際に非常に役立ちます。

パソコンからスマホといったデバイスの変化、ウェブサイトからアプリといったプロダクトの変化、５Gなどの通信回線の改善による表現の多様性など、その時代時代により最適なデザインは移り変わっていきます。

本記事では、デザインの原則やウェブサイトの各パーツについて、また、レイアウトの基本的な型やデザインまでの流れをまとめてみました。

レイアウトを考える前の基礎知識

デザインの４原則について

レイアウトについて学ぶ前に、まずはデザインにおける基本の「デザインの4原則」についてご紹介しておきます。
世の中には様々な形の「良いデザイン」がありますが、多くのデザインにおいて「デザインの4原則」が念頭にあり、それは次の4つの項目で説明することができます。

近接の原則

「近接」とは、関連する項目をまとめてグループ化することです。

要素がバラバラに配置されてまとまりがないと、要素を整理して理解するのに時間がかかります。

そこで「近接の原則」を活用し、各要素をグループ化します。

それぞれの要素をグループ化できたら、グループ間の距離を少し大きめに取り配置することで、直感的に情報の構成を理解できるようになります。このように情報の関連性を考慮し、同じ種類や系列の情報を近くに配置しましょう。

例えば名刺では、その人の名前や「所属」する企業名や部署名、「連絡先」となる住所、電話番号・メールアドレスなどがまとめる必要があります。

「所属」「連絡先」などそれぞれのグループごとに項目を近づけて配置することによって、情報がまとめられ、視線がそこに止まりやすくなります。

レイアウトを考える際は、なるべく表示する情報をグループ化し、独立した個別の要素を作らないようにすることで、整理されて見やすい表現をすることが可能となります。

整列の原則

「整列」とは、デザインの中の各要素を意図的に整列して配置することです。

画面上に多くの情報が表示されているとき、きれいに整列せずにそれぞれの要素がバラバラに並んでいると、どこからそのページを読めばいいのか混乱をしてしまいます。

そこで、「整列の原則」を活用し、各要素の位置や大きさ、形、色などを揃えることで見た目が整えます。

整列を行うことで、近接と同様に直感的に情報の構成を理解できるようになります。

整列は、「左右の整列」「上下の整列」が存在します。

整列を用いることでページの内容に一体感が生まれると同時に、組織化につながります。どの方法で整列させるかによって印象が大きく変わりますので、目的に応じて揃え方を選択しましょう。

また、整列を利用すると、自然と目に見えない線が生まれます。視線の基準となる透明な線は、「写真画像とテキストの上辺」「タイトル文字と本文の頭」など要素や大きさ、色などを揃えることで生まれます。この目に見えない線こそが整列のポイントです。

近接で要素と要素をグループ化できたら、それを綺麗に整列することで、より一層「近接」「整列」が活きてきます。

反復の法則

「反復」とは、デザイン上のある特徴を繰り返し使用することです。そのため、「ルール」「一貫性」とも言いかえられます。

例えば、見出しのデザインがそれぞれ違うと、各見出しの重要度の判別が付きません。

そこで、「反復の法則」を活用し、太字体、罫線、色、アイコンなど様々なものがあり、要素を繰り返し用いることで一貫性や統一感のあるレイアウトを実現できます。

また、一度理解したデザイン構造が他の要素にも適用されるため、情報をすばやく取得できるようになります。

同じレベル感の見出しは一貫性を持たせて同じ文字サイズ・フォント・色・装飾を使うとよいでしょう。

コントラストの法則

「コントラスト」とは、特定の要素に強さや重みを付けて際立たせたり、逆に目立たぬように抑えたりすることです。

例えば、文章すべての文字やサイズなどが同じだとどこが重要なのかが分かりにくくなります。学生時代に教科書や参考書の重要なポイントにマーカーで色を付けたりしましたよね。

そこで、「コントラストの法則」を活用し、情報の優先度を考慮し、重要な要素はより目立たせるなど差別化させましょう。

具体的にはフォントの大きさや太さ、形、写真のトリミングに変化をつけることで他の要素と対比させます。強弱が生み出され、目を引くデザインになります。

要素に統一感を持たせる近接や整列に対し、コントラストでは他の要素と差別化した表現をすることができます。

レイアウトにおける人間の視線の動き「視線の法則」

人間がWEBサイトや雑誌、チラシなどを見る時の視線の動き方は、大きく4つのパターンで動きを説明することができます。
横書きのレイアウトの場合は、「グーテンベルク・ダイヤグラムの法則」「Z型の法則」「F型の法則」、縦書きのレイアウトの場合は、「N型の法則」の計4パターンです。
この視線の動きを知ることで、より読みやすいレイアウトを意識することができます。

グーテンベルク・ダイヤグラムの法則

「グーテンベルク・ダイヤグラムに法則」は「同じ種類の情報が均等に配置されている時の視線の流れ」のことを言います。

「均一に配置された情報を見る時、視線は左上から右下に流れていくように習慣づけられている」という考え方で、15世紀に活版印刷技術の発明者として活躍したヨハネス・グーテンベルグが提唱されました。

均等に配置されている情報を4分割した時に左上から右下に流れるように視線が移動していきます。

この視線の流れは、縦書きが主流である日本語の本だと該当しにくいですが、欧米文書の本を読む時に無意識に体に擦り込まれているもので、「読書重力」とも呼ばれます。

このようにまず最初に左上から右上を少し見て、次に左下を少し見てから右下を最後に見るように視線が動きます。

この4ブロックはこのような領域として分割します。

最初の視覚領域
終着領域
強い休閑領域
弱い休閑領域

これはWEB上のページよりも、均等にコンテンツが並ぶことが多い印刷物によく当てはまるパターンです。

ユーザーは文章やレイアウトを読み飛ばしてしまうことも多いため、重要な要素（タイトルやバナーなど）は左上から右下に流れる斜めのラインに入れておくかがポイントです。

Z型の法則

「Z型の法則」は、名前通りアルファベットの「Z」の形に沿って動く視線の流れことです。

横書きで多くの要素が配置されたものを見る時に、人は自然に左上から右下へ視線を移動させるのですが、まっすぐと斜めに読むのではなく、左上から右上へ、そして真ん中を斜めに読んで、左下から右下に移動していく動きになります。

そのため、雑誌やチラシ、ポスターなど画像が多く並ぶとき、全体の内容を把握したい時にZの法則が取り入れらえます。

例えば、ウェブサイトの場合、企業ホームページなどで左上に企業ロゴ（サイトロゴ）が配置されているのをよく目にすると思いますが、左上には一番見てほしい情報・重要な情報などを配置することで一番目に留まりやすくしています。

F型とは？

「Fの法則」は、名前通りアルファベットの「F」の形に沿って動く視線の流れことです。

ニュースサイトやブログなど文字量が多い時、内容をしっかり把握したい時（よく読みたい時）の視線の動き方で、パソコンやスマートフォンで情報を閲覧する際に、最も用いられる視線誘導の型です。

タイトルを見る（左から右に）、そして次の行から本文を読み始める（一段下がって、左から右に）という動作を繰り返すため、Fの形に視線を移動することになります。

そのため、情報はFのライン上に、そして右側よりも左側に配置されている情報の方が見られる傾向があります。

N型の法則

「Fの法則」は、名前通りアルファベットの「N」の形に沿って動く視線の流れことです。

日本文書のような縦書きになると、人は右上から左下に視線を移動させます。右上から右下、真ん中を斜めに呼んで、左上から左下に移動するという視線の流れです。

このように「N」の文字に似た線を描く形で視線を移動するため、このようなレイアウトにおける視線の誘導は「N型の法則」と呼ばれています。

デザインの4原則（近接・整列・反復・コントラスト）や視線の法則（グーテンベルク・ダイヤグラム・Z型F型・N型・）はホームページだけではなく、名刺・ポスター・バナーなど、あらゆる場面で役に立つ知識です。

人の視線の動き方の傾向に則って、デザインの4原則を活かし、目立たせたいポイントを明確することがで、より伝わるレイアウトを作成することができます。

ホームページに用いられるパーツの名称

ホームページのレイアウトを考える上で、ホームページ内に用いられるパーツの種類と名称も知っておきましょう。
誤った名称でデザイナーやエンジニアに伝えてしまうと、コミュニケーションのすれ違いが発生してしまい思ったような仕上がりにならない可能性があるので注意が必要です。

ヘッダー

ヘッダーとは、ウェブページの上部スペースに位置し、どのページが開かれても常に共通して表示される部分をいいます。
ヘッダーの中にはグローバルナビゲーションやお問合わせや資料請求といったコンバージョンポイントが設置されます。
スクロールをしても常に表示しておく「固定ヘッダー」も一般的になってきています。

グローバルナビゲーション

グローバルナビゲーションとは、サイトの上部に並んでいて全ページ共通で表示されているホームページにおける主要なコンテンツへのリンクのことで、ホームページにおける「目次」のような役割を果たします。「グロナビ」と訳されたり、「メニュー」と呼んだりすることもあります。

コンテンツ

ウェブレイアウトにおけるコンテンツとは、文章や画像といったページ内を構成する要素を配置する部分、またはその構成要素自体のことを指します。

サイドバー

サイドバーとは、メインコンテンツエリアと区別されて、サイトの画面の横に設置されたブロックのことを指します。必要に応じて、メインコンテンツの左端か右端、もしくは両方にサイドバーが配置されます。

フッター

フッターとは、WEBページの下部スペースに位置し、どのページが開かれても常に共通して表示される部分をいいます。
ページの一番下にあるコピーライトなどを記載する箇所をフッターと呼びます。
フッター内にナビゲーションを設置することもあり、それをフッターナビゲーションと呼びます。
ここに企業情報や運営元などをしっかり書くことで、コンテンツの信頼性をアピールするということもあります。

ホームページのヘッダー・ナビゲーション・コンテンツ・サイドバー・フッターなどの基本のパーツの役割については、制作開始前にデザイナー・エンジニアとよく確認しておくと良いでしょう。

レイアウトに影響を与える要因

レイアウトにはいくつかの型がありますが、まずその型を決定する前に、レイアウトに影響を与える要因についても把握しておく必要があるでしょう。
それらの要因によって、レイアウトの型が選定していく必要があります。

サイト階層の深さ

通常は、レイアウトの作成を始める前に、ディレクトリマップやサイトマップを作成しているはずなので、階層の深さに合わせて適切なレイアウトを取ることが必要です。

サイトの目的・属性

作成するウェブサイトの目的によって、コーポレートサイトなのか、サービスサイトなのかなどユーザーに伝えるべき情報やその優先度が異なってきます。

情報伝達の手段

サイトの目的・属性と被るところもありますが、画僧やイラストなどのヴィジュアル主体で伝えたいのか、テキスト主体で伝えたいのかなど、企業やサービス・プロダクトの特性を把握しえ上で、レイアウトを決めましょう。

ホームページに用いられるレイアウトの種類

デザインや視線の法則、ウェブサイトのパーツなどが理解できたら、いよいよ「レイアウト」のご紹介に移りますが、その前に、レイアウトの説明をするために、まずは「カラム」についてもご紹介しておきます。

はじめに：「カラム」について

ホームページのレイアウトにおいて、情報を整理して見やすくするために、要素と要素の「段組み」を行うことがあります。
雑誌などを見ると写真と文章が見やすい位置にそれぞれ配置されており、このようにホームページでも最適な位置に配置をする必要があります。

この段組みのことを、ホームページ制作の現場では「カラム」と呼び、カラムがいくつ組み合わさっているかによって、「シングルカラムレイアウト」「マルチカラムレイアウト」というような呼び方をしています。

ここからはホームページでよく用いられるレイアウトの種類について紹介します。

シングルカラムレイアウト

シングルカラムレイアウトは、縦長で1列に段組みされたすっきりとしたレイアウトのデザイン手法です。

近年はスマートフォンでの訪問者が増え、余計な情報は表示しない縦長のシングルカラムレイアウトのサイトが増えてきました。

また、集客したユーザーに1ページの中で情報を伝えきり購入やお問合わせといったアクションを促す「ランディングページ」などは、コンテンツを読むのに集中させることができるシングルカラムレイアウトが適しています。

マルチカラムレイアウト

マルチカラムレイアウトは、コンテンツの脇にサイドバーを設置するというような、ページを複数の列に分割して配置する（2カラム以上）に分かれたレイアウトです。

情報量が多いメーカーのサイトやポータルサイト・検索サイト・ニュースメディアのような回遊性が求められるサイトの場合は、ユーザーにわかりやすい導線を提供するために、マルチカラムレイアウトで作られることが多いです。

最近では、マルチカラムレイアウトを使用する（特にサイドバーの使用）と古臭く感じされることもあるので、サイトの目的や情報量に合わせてレイアウトを考える必要があります。

2カラムレイアウト

一般的な2カラムレイアウトは、コンテンツの左、もしくは右にサイドバーを設置したレイアウトです。

3カラムレイアウト

一般的な2カラムレイアウトは、コンテンツの左右にサイドバーを設置したレイアウトです。

シングルカラム・マルチカラムレイアウトのレスポンシブ対応

マルチカラムレイアウトは、画面幅の小さなスマートフォンでは表現が難しいため、レスポンシブウェブデザインで実装をする際は、PC画面ではマルチカラム、スマホ画面はシングルカラムというように表示を分岐させることが一般的です。

グリッドレイアウト（等分割型）

グリッドレイアウトとは、グリッドをベースにデザインを検討していくデザイン手法のことです。「グリッドデザイン」「グリッドシステム」とも呼ばれます。

グリッドを組み合わせて、要素や余白のレイアウトを構成していき、配置される要素が、格子状の見えない線にすべて揃えられて配置するため、すっきりと見やすく整理された構成にすることが可能です。

シングルカラムやマルチカラムよりもテクニックが求められるレイアウトですが、写真やイラストなどの素材がきちんと用意できて、それを際立たせたいという場合は非常に有効なデザイン手法です。

つまり、画像やイラストの質が重要となってくるので、素材次第でおしゃれにも、ダサくもなってしまいます。

ポートフォリオサイトやブランドサイト、飲食店や観光地の紹介サイトなど、文章では伝えるよりも雰囲気での演出が重要な場合はおすすめです。

ブロークングリッドレイアウト（不当分割型）

ブロークングリッドレイアウトとは、規則性のある境界線をあえて外したレイアウトのデザイン手法のことです。「ノングリッドレイアウト」とも呼ばれます。

ブロークングリッドレイアウトは、ユーザーの視線を惹きつけ、印象的なデザインを作り出すことができるため、自由で開放的・オリジナリティなどを出したいような場合によく利用される手法です。
大きな写真・イラストなどを使って、まるで紙の雑誌のようなレイアウトを組むことで、表現の幅を広げてインパクトをもたせます。

周年記念サイトや新商品や新ブランドなどの紹介サイトや、期間限定のキャンペーンサイトなど、一定期間公開したあとは更新せずに終了するようなホームページなどで多く利用されることも特徴です。

レイアウトの決定からデザインの完成まで

ウェブサイトのレイアウトの型が決まったら、次はワイヤーフレームの作成に移っていきます。「デザインの4原則」を意識しながら、画像やテキストなどの構成要素をはめ込んでいきましょう。
これらの要素を、どこに、どれだけの量を、どのように配置し、何を訴求したいのかが決まったらワイヤーフレームの完成です。

最後に、ここから装飾となるデザインに入っていきます。
ワイヤーフレームをもとに最終の完成イメージとなるデザインカンプが完成するとデザインの完了となりコーディングに移っていきます。

レイアウト別にサイトを調べられる参考サイト

最後にウェブサイトのレイアウトの参考になるサイトをご紹介します。
良いレイアウトを作るには、良いレイアウトのサイトを見て、知って、インプットすることが一番です。
ホームページの種類や目的の参考サイトと同じように、良質なデザインのホームページがレイアウト別にまとめられたサイトがあるで、ぜひ参考にしてみてください。