Webデザインのレイアウト基本まとめ｜5つの型と視線誘導の考え方

「Webデザインのレイアウトを、なんとなくの感覚で決めてしまっている」「参考サイトを真似ても、なぜか野暮ったくなる」という方に向けて、レイアウトの基本となる型と、その使い分けの判断基準を整理しました。

レイアウトは感性で決めるものではなく、載せる情報の量と、読み手にたどってほしい順番から逆算して決めるものです。この考え方が身につくと、参考サイトを見たときに「なぜこの配置なのか」が読み取れるようになります。

この記事では、代表的な5つのレイアウトの型、視線の動きに関する法則、そして実務でつまずきやすいポイントまでをお伝えします。デザインの経験が浅い方でも、判断の軸として使える内容にまとめました。

レイアウトは、見た目を整える作業に見えて、実は情報整理の作業なんだ。何を先に見せて、何を後に回すか。そこが決まれば配置は自然に決まっていくよ。

レイアウトが果たしている役割

情報に順番をつける

Webページには、大小さまざまな情報が並びます。すべてを同じ大きさ、同じ余白で置いてしまうと、読み手はどこから見ればよいのか分かりません。レイアウトの第一の役割は、情報に優先順位をつけて、見る順番を作ることです。

読みやすさを支える

1行の文字数が長すぎると、行の折り返しで視線が迷子になります。逆に短すぎると、視線の移動回数が増えて疲れます。レイアウトは、こうした読み心地の部分も引き受けています。

次の行動へつなげる

資料請求や問い合わせといった行動につなげるには、その導線が自然な位置にある必要があります。読み終えた直後にボタンがあるのと、はるか下までスクロールしないと出てこないのとでは、結果が変わります。

代表的な5つのレイアウト

1. シングルカラム

コンテンツを1列に並べる、最も基本的な型です。画面幅が変わってもレイアウトが崩れにくく、スマートフォンでの表示との相性が良いのが特徴です。読み手の視線が横に散らないため、ランディングページやサービス紹介ページで広く使われています。

一方で、他のページへの導線を置く場所が限られるため、回遊を促したいサイトには不向きな面があります。

2. マルチカラム（2カラム・3カラム）

本文の横にサイドバーを配置する型です。カテゴリー一覧や人気記事、問い合わせボタンなどを常に見える位置に置けるため、記事数の多いメディアサイトやブログで採用されることが多い構成です。

ただしスマートフォンではサイドバーが本文の下に回り込むため、そこに置いた導線はほぼ見られません。スマートフォンからの閲覧が中心のサイトでは、サイドバーに重要な要素を置かない設計が必要です。

3. グリッドレイアウト

コンテンツを格子状に並べる型です。要素の大きさがそろうため、情報量が多くても整って見えるのが利点で、作品集、商品一覧、ニュース一覧などで使われます。

画面幅に応じて列数を変えるだけで対応できるため、レスポンシブデザインとの相性も良好です。反対に、要素ごとの重要度に差をつけにくいという弱点があります。

4. フルスクリーン

画面いっぱいに大きな写真や動画を配置する型です。世界観を一瞬で伝えられる反面、情報量を詰め込めないため、ブランドサイトやポートフォリオ以外では扱いが難しい構成といえます。

画像の容量が大きくなりやすく、表示速度に影響が出る点にも注意が必要です。

5. カード型

個々の情報を四角い枠にまとめて並べる型です。グリッドレイアウトと組み合わせて使われることが多く、写真・見出し・短い説明という単位で情報を扱えるため、一覧性に優れます。

それぞれの型がどのような場面で使われているかは、作例を多く見るほど判断しやすくなります。レイアウトの作例をまとめた本を手元に置いておくと便利です。

視線の動きを踏まえた配置

Zの法則

初めて訪れたページを見渡すとき、視線は左上から右上へ移動し、そこから左下へ下り、右下へ抜けるという動きをとりやすいとされています。この動きをZの法則と呼びます。

ロゴを左上、問い合わせボタンを右上に置くレイアウトが定番になっているのは、この動きに沿った配置だからです。

Fの法則

本文を読み進める場面では、左から右へ視線が流れ、一段下がってまた左から右へという動きを繰り返すとされます。この形がアルファベットのFに似ていることからFの法則と呼ばれます。

重要な言葉を各行の左寄りに置くと拾われやすくなるのは、この動きが理由です。

ZとFの法則は、あくまで傾向の話。法則に縛られて不自然な配置にするくらいなら、素直に読みやすさを優先していこう。

スマートフォンでは縦一列

スマートフォンの画面では、そもそも横方向の視線移動がほとんど発生しません。閲覧の多くがスマートフォンからである現在、ZやFの法則より「上から順にどの情報を見せるか」のほうが影響が大きくなっています。

レイアウトを整える4つの原則

近接がいちばん効く

見出しと本文の距離、本文と次の見出しの距離。この2つが同じだと、どこで話題が変わったのか読み取れません。見出しの上の余白を、下の余白より大きく取るだけで、文章のかたまりが一気に読み取りやすくなります。

整列は「そろえる基準」を1つに

左揃え、中央揃え、右揃えを混在させると、画面が落ち着きません。本文は左揃えを基本とし、中央揃えは見出しや短いキャッチコピーに限定すると、まとまりが保たれます。

対比は中途半端が最も伝わらない

見出しを本文より少しだけ大きくすると、「大きくしたつもりが伝わらない」状態になります。差をつけるなら、はっきりと差をつける。これが対比の基本です。

4原則をより詳しく作例と一緒に確認したい方は、ノンデザイナー向けの入門書を1冊通しておくと理解が深まります。

実務でつまずきやすいポイント

コントラストが足りない

薄いグレーの文字は洗練されて見えますが、読めなければ意味がありません。アクセシビリティの国際的な指針であるWCAGでは、本文の文字と背景のコントラスト比は4.5対1以上、大きな文字では3対1以上が達成基準として示されています（WCAG 2.1 達成基準1.4.3）。

日本語訳はウェブアクセシビリティ基盤委員会（WAIC）が公開しています。判断に迷ったときの拠り所として、一度目を通しておくと役に立ちます。

1行の文字数が長すぎる

画面幅いっぱいに本文を広げると、1行が長くなりすぎて読みづらくなります。日本語の本文では、1行あたり35〜45文字程度に収まるよう最大幅を設定すると、読み心地が安定します。

デザインカンプと実装のずれ

デザインを作る段階で余白の数値を決めておかないと、実装時に判断がぶれます。Figmaなどのデザインツールで、余白を8の倍数に統一するといったルールを決めておくと、後工程が楽になります。

学習と作業環境について

手を動かして覚える

レイアウトの感覚は、読むだけでは身につきません。好きなサイトを1つ選び、同じ配置を再現してみる。この模写を10サイト分こなすと、余白の取り方や文字サイズの落差が体に入ってきます。日本語のフォント選びで迷ったときは、Google Fontsで日本語対応のフォントを比べてみると、印象の違いがつかめます。

基礎を体系的に押さえたい場合は、ノンデザイナー向けのデザイン入門書を1冊通しておくと、判断の軸ができます。配色に迷う場面が多いなら、配色パターンの見本帳も手元に置いておくと繰り返し使えます。

画面の広さが判断の質を左右する

ノートPCの13インチの画面だけでレイアウトを詰めていると、全体のバランスを見ながら細部を調整するという作業ができません。27インチのWQHDモニターを1枚足すと、デザインツールとブラウザのプレビューを並べて確認できるようになります。

色の判断を伴う作業では、sRGBカバー率の高いモニターを選ぶと、公開後の色ずれを減らせます。デスクの奥行きが足りない場合は、モニターアームで設置面積を節約できます。

レイアウトを決める前に整理しておくこと

情報を3つの層に分ける

レイアウトに取りかかる前に、載せる情報を「何よりも先に見せたいもの」「見せたいもの」「あれば見てほしいもの」の3層に分けてください。この3層が決まっていないと、どの型を選んでも配置の判断がぶれます。

第1層は最初の画面に、第2層はスクロールした先に、第3層はフッターやサイドバーに。この対応関係を先に決めておくと、あとの作業が単純作業に変わります。

ページの本数を数える

ページが1本ならシングルカラム、10本を超えるならマルチカラムやグリッドで一覧性を確保する。ページ数によって適した型は変わります。これから増えるページ数も含めて数えるのがポイントです。

更新の頻度を確認する

頻繁に更新するサイトでは、更新のたびにレイアウトを調整しなくて済む型が向いています。グリッドやカード型は、要素を追加するだけで形が保たれるため、運用の負担が軽くなります。

逆にフルスクリーンのような型は、1枚1枚の完成度を高く保つ必要があり、更新の手間が大きくなります。誰が、どれくらいの頻度で更新するのかを確認しないままレイアウトを決めると、公開の半年後に更新が止まったサイトが出来上がります。

よくある質問（Q&A）

Q. レイアウトの型は覚えたほうがよいですか

A. 型を暗記する必要はありませんが、「この情報量ならこの型」という対応関係を知っておくと、白紙から考える時間を減らせます。まずはシングルカラムとグリッドの2つを使いこなせるようになれば、多くの場面に対応できます。

Q. スマートフォンとパソコン、どちらから設計すべきですか

A. 閲覧の多くがスマートフォンである現在、スマートフォンの表示から設計する進め方が主流です。狭い画面で成立する情報の並びを先に決め、そこから広い画面へ広げていくほうが、無理のない構成になります。

Q. 余白はどれくらい取ればよいですか

A. 具体的な数値より、「関係の近い要素どうしは近く、遠い要素どうしは離す」という関係性のほうが重要です。そのうえで、8の倍数など基準となる単位を決めておくと、全体に統一感が出ます。

Q. 参考サイトはどこで探せばよいですか

A. 実際に自分が使っているサービスのサイトを観察するのが、最も実感を伴う学び方です。加えて、同じ業種のサイトを10件ほど集めて、情報の並び順を比較すると、その業界の型が見えてきます。

Q. グリッドは何分割にすべきですか

A. 12分割が扱いやすいとされています。12は2、3、4、6で割り切れるため、2列・3列・4列・6列のいずれにも対応できるからです。ただし分割数はあくまで道具なので、目的に合わせて変えてかまいません。

Q. デザインの経験がなくても実務で通用しますか

A. 4原則を守るだけでも、整った印象のレイアウトは作れます。実務で差がつくのは、見た目より「何を優先して見せるか」を決める判断です。ここは経験を重ねることでしか磨けない部分なので、まずは数をこなすことをおすすめします。

まとめ

レイアウトの上達に近道はありませんが、判断の軸を持っているかどうかで、伸び方は大きく変わります。「なんとなく良さそう」で決めていた部分を、「情報の優先順位がこうだから、この配置」と説明できるようになれば、それが実力になります。

まずは自分が作ったページを1つ開いて、見出しの上下の余白が同じになっていないか確認してみてください。そこを直すだけでも、読みやすさは変わります。