Webレイアウトとは?配置で伝わり方が変わるデザインの役割と4つの視点

Webレイアウトの基本

まずは、レイアウトとは何を指すのか、そして配置の違いで伝わり方がどう変わるのかを押さえましょう。

レイアウトとは

レイアウトとは、文字・画像・ボタンなどの要素を、画面や紙面の「どこに」「どの大きさで」「どの順番で」置くかを決めて、全体を組み立てることです。

ここでいう要素とは、見出しや本文のかたまり、写真、ボタン、入力欄など、画面に置かれる1つひとつの部品を指します。

レイアウトは、要素をただ並べる作業ではなく、情報を整理して、見る人に「何を・どの順番で見てもらうか」を設計することだと考えると分かりやすくなります。

Webレイアウトは、このレイアウトの考え方をWebページに当てはめたものです。

紙のチラシと違い、Webページはパソコン・タブレット・スマートフォンなど、見る端末によって画面の幅が変わります。

そのため、Webレイアウトでは「1つの画面でどう置くか」に加えて、「画面の幅が変わったときに配置をどう変えるか」も考える必要があります(画面の大きさに合わせて配置を変える作り方は「レスポンシブデザイン」と呼ばれます。MDN「レスポンシブウェブデザイン」)。

レスポンシブ(responsive)は「反応する・応じる」という意味で、パソコンの横長の画面でもスマートフォンの縦長の画面でも見やすいように、画面の幅に応じて配置が切り替わるように作っておくことを指します。

同じ要素でも配置で伝わり方が変わる

レイアウトが大切なのは、まったく同じ文字と画像を使っていても、配置によって見る人が最初に受け取る情報が変わるからです。

カフェの新メニューのお知らせを、画像を大きくした版と、文字を大きくした版で比べてみましょう。

見本Aは、写真が画面の大部分を占めているため、見た瞬間に「おいしそう」という雰囲気が伝わります。

見本Bは、メニュー名と販売開始日が大きく置かれているため、「何が、いつから買えるのか」という情報が先に頭に入ります。

どちらが正しいということはなく、「雰囲気で興味を持ってほしい」のか「販売日を確実に知らせたい」のかによって、選ぶべき配置が変わります(目的から配置を決める方法は目的から逆算するレイアウトの決め方で解説しています)。

つまりレイアウトは、見た目を整える最後の仕上げではなく、情報の伝わり方そのものを決める作業なのです。

レイアウトと余白の関係

レイアウトとよく一緒に語られるのが「余白」ですが、2つは扱う範囲が違います。

ざっくり言うと、余白は「要素同士の距離」を決めるもので、レイアウトは「要素を画面全体でどう構成するか」を決めるものです。

部屋の模様替えにたとえると、レイアウトは「ソファやテレビを部屋のどこに置くか」を決めることで、余白は「ソファとテーブルの間をどれくらい空けるか」を決めることにあたります。

	余白	レイアウト
扱う範囲	隣り合う要素同士の間、要素の内側	画面やページ全体の構成
考えることの例	見出しと本文をどれくらい離すか、ボタンの周りをどれくらい空けるか	何をどこに置くか、何を大きく見せるか、画面を何列に分けるか

この2つを分けて考えると、「なぜ見づらいのか」を、間隔の問題なのか、配置そのものの問題なのかに切り分けられるようになります。

進め方としては、まずレイアウトで大まかな配置を決め、そのあと余白で細かい間隔を整えるとスムーズです。

ただし、「関係のある要素を近くにまとめる」という余白の考え方は、大まかな配置を決める段階から意識しておきましょう(余白の役割は余白とは?で解説しています)。

Webレイアウトのデザインで考える4つの視点

レイアウトを考えるときは、「要素の配置」「情報の整理」「視線の流れ」「情報の優先順位」の4つの視点で見ると、判断に迷いにくくなります。

ここでは全体像をつかむために、それぞれを簡単に紹介します。

要素の配置:何をどこに置くか

1つめの視点は、ページの中のどこに、どんな役割の要素を置くかという、画面全体の骨組みです。

多くのWebページは、ヘッダー(ページ上部のロゴやメニューの帯)、メインビジュアル(最初に目に入る大きな画像やキャッチコピー)、コンテンツ(本文)、フッター(ページ下部のまとめの帯)といった部位でできています。

それぞれの部位の役割と、ワイヤーフレームでの組み立て方はWebページの基本構造とは?で解説しています。

同じ部位を使っていても、画面をいくつの列に分けるかで、ページの印象や読みやすさは変わります。

この画面を縦に区切った列のことを「カラム」と呼び、新聞や雑誌の段組みと同じように、列が1つなら1カラム、2つ並べば2カラムと数えます。

見本Cは、すべての部位を縦に1列で積んだ形で、上から順に読めばよいので、見る人が迷いにくい配置です。

見本Dは、コンテンツの横にサイドバー(本文の横に置く、関連記事やメニューなどの細い列)を並べた形で、パソコンの広い画面を活かして、ほかの情報にも目を向けてもらいやすくなります。

スマートフォンの細い画面では2列に並べると窮屈になるため、パソコンでは2カラム、スマートフォンでは1カラムに切り替える作り方がよく使われます。

情報の整理:まとめて、そろえる

2つめの視点は、関係のある情報同士をまとめ、要素の端をそろえて、情報の関係が見ただけで分かるようにすることです。

人は近くにあるもの同士を「ひとまとまり」として見る傾向があるため、関係のある情報が離れていたり、関係のない情報がくっついていたりすると、内容を読み違えやすくなります。

同じイベント告知の情報で比べてみましょう。

NGの見本は、5つの情報が同じ間隔で並び、行の始まりの位置もそろっていないため、どれとどれがセットなのかを読み取りにくくなっています。

OKの見本は、載っている情報は同じですが、「日時・場所・参加費」を近づけて1つのまとまりにし、すべての行の始まりをそろえたことで、情報の関係がひと目で分かります。

近くに置いてまとめる考え方は近接の原則とは?、文字の行をそろえる位置の使い分けは文字の揃え方とは?で解説しています。まとめる・そろえるを含むデザインの基本原則は、デザインの4原則とは?でまとめています。

視線の流れ:どの順番で見てもらうか

3つめの視点は、見る人の視線がページの中をどんな順番で動くかを考え、伝えたい順番に情報を並べることです。

人は画面のすべてを同時に見ているわけではなく、目立つところから順に、ある程度決まった流れで目を動かしています。

よく知られているのが、バナーのように情報が少なく全体を一目で見渡せるデザインで起こりやすい「Z」の字のような動きと、文章の多いページを流し読みしたときに起こりやすい「F」の字のような動きです。

Z字の動きは、左上→右上→左下→右下とアルファベットの「Z」をなぞるように目が動く流れです。

F字の動きは、上のほうは左から右へ読み、下に進むほど左端だけを縦に拾い読みしていく流れで、上ほど横に長く読まれるため、アルファベットの「F」のような形になります。

たとえばZ字の流れになりやすいデザインでは、最初に見てほしい情報を流れの始まりの左上に、最後に押してほしいボタンを流れの終わりの右下に置くと、伝えたい順番どおりに見てもらいやすくなります。

F字の流れになりやすい文章の多いページでは、見出しや段落の書き出しに大事な言葉を置くと、左端の拾い読みでも内容が伝わりやすくなります(視線の動き方と導き方は視線誘導とは?で詳しく解説しています)。

情報の優先順位:何を目立たせるか

4つめの視点は、載せる情報に優先順位をつけ、一番伝えたいものが一番目立つようにすることです。

すべての情報を同じ大きさ・同じ強さで並べると、どれも目立たず、見る人は何から見ればよいか分からなくなります。

カフェの新メニューの見本Aと見本Bで比べたように、写真と文字のどちらを大きくするかを決めることも、優先順位をつける判断の1つです。

大きさのほかにも、置く位置・色・周りの余白などで差をつけて、主役(一番伝えたい要素)とそれ以外を見分けられるようにします(主役と脇役の分け方は主役と脇役とは?、置く位置による優先順位は重要な情報はどこに置く?、色で優先順位をつける方法は情報の優先順位と色とは?、見出しと本文の文字の大きさの差(ジャンプ率)のつけ方はジャンプ率の記事で解説しています)。

この4つの視点は別々のものではなく、「何を一番伝えたいか」を決めると、置く場所・まとめ方・見せる順番も自然と決まってくる、というように互いにつながっています。

実践のポイント

Webレイアウトを考え始めるときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 「センスよく配置する」ことを最初の目標にして、いきなり画面に要素を並べ始めてしまうことがあります。
  配置を決める前に、載せる情報を書き出し、「何を一番伝えたいか」「どれとどれがセットか」を整理しましょう。
• 見た目のバランスが整ったことで満足し、情報が正しい順番で伝わっているかを確かめないことがあります。
  作ったあとに「最初に目に入るのは何か」を自分で確かめ、一番伝えたい情報と一致しているかを見直しましょう。
• 細かい余白の調整にこだわりすぎて、画面全体の配置のバランスを見失うことがあります。
  ときどき画面を縮小したり、少し離れて見たりして、全体の構成を確認しましょう。
• パソコンの画面だけでレイアウトを確認してしまうことがあります。
  Webページはスマートフォンで見られることも多いので、細い画面で配置が崩れたり、順番が入れ替わって分かりにくくなったりしていないかも確かめましょう。

よくある質問

• Q. レイアウトとデザインは何が違う?
  A. デザインは、色・文字・画像・配置などを含めた「伝わる形を作ること」全体を指す、広い言葉です。
  レイアウトはその中の「配置と構成」を担当する部分だと考えると分かりやすいでしょう。
• Q. センスがなくてもレイアウトはできる?
  A. できます。
  レイアウトの多くは、「関係のあるものを近くにまとめる」「端をそろえる」「一番伝えたいものを目立たせる」といった、言葉で説明できる考え方の積み重ねです。
  まずはこの記事の4つの視点で、自分の配置に理由をつけられるかを意識してみましょう。
• Q. Webのレイアウトと、チラシなど紙のレイアウトは別物?
  A. 情報を整理して伝える順番を設計する、という考え方は共通です。
  違うのは、Webは見る端末によって画面の幅が変わり、縦にスクロールして読まれることです。
  そのため、Webでは画面の幅ごとに配置をどう変えるかまで考える必要があります。

まとめ

Webレイアウトとは、文字・画像・ボタンなどの要素をどこに・どの大きさで・どの順番で置くかを決めて、見る人に「何を・どの順番で見てもらうか」を設計することです。

考えるときは、「要素の配置」「情報の整理」「視線の流れ」「情報の優先順位」の4つの視点で見ると、配置に理由を持たせられるようになります。

まずは好きなWebサイトを1つ開き、ヘッダー・メインビジュアル・コンテンツ・フッターがどこにあるかを、紙に四角い箱で描き写してみてください。