レイアウトの一貫性とは?反復の原則でページ全体に統一感を出す方法

レイアウトの一貫性の基本

まずは、レイアウトの一貫性とは何か、そしてそれを支える「反復の原則」と、一貫性がもたらす効果を押さえましょう。

レイアウトの一貫性とは

レイアウトの一貫性とは、同じ役割の要素を、ページの中でもページをまたいでも、同じ配置・同じ見た目で繰り返すことです。

たとえば、記事一覧のカードがどれも「画像→日付→タイトル」の順に並んでいる、どのページでもメニューが画面の上にある、といった状態が一貫性のあるレイアウトです。

レイアウト(画面の中に要素を配置して構成すること)を1ページずつ見るのではなく、サイト全体を通して「同じものは同じに見せる」ルールを守ることだと考えるとわかりやすいでしょう。

一貫性の土台になる「反復の原則」

レイアウトの一貫性は、デザインの4つの基本原則(近接・整列・反復・コントラスト)のうち、「反復」の原則を実践したものです。

4つの基本原則は、アメリカのデザイナー、ロビン・ウィリアムズの著書『ノンデザイナーズ・デザインブック』で紹介されています(書籍はこの記事の最後で紹介しています)。

同書では反復の原則を「デザインのある要素を、作品全体を通して繰り返す」ことと説明し、繰り返す要素の例として、太い書体、太い罫線(区切りの線)、決まった箇条書きの記号、色、形式、要素同士の位置関係などを挙げています(Peachpit: The Use of Repetition in Design(英語・同書の抜粋))。

同じ箇所では、反復は「一貫性」と言い換えられるとも書かれており、16ページのパンフレットのどのページにも共通の要素があるからこそ、すべてのページが同じパンフレットの一部に見える、という例が紹介されています。

Webサイトでいえば、1つのページの中で見出しやカードの形を繰り返すことも、ページをまたいでヘッダーや本文の幅を繰り返すことも、どちらも反復です。

一貫性がもたらす効果

レイアウトに一貫性があると、「使いやすくなる」と「信頼感が生まれる」という2つの効果があります。

• 一度覚えた見方を、ほかの場所でも使える
  同じ役割の要素がいつも同じ場所・同じ見た目なら、見る人は1回見ただけで「ここにはこれがある」と覚えられます。
  ページを移るたびに見方を学び直さなくてよいので、迷わず目的の情報にたどり着けます。
• きちんと作られている印象になる
  ルールがそろっていると、サイト全体が1つの作品としてまとまって見え、「しっかり作られている」という信頼感につながります。
  反対に、ページごとに作りがばらばらだと、別のサイトに移ったのかと不安になることもあります。

ユーザビリティ(使いやすさ)の研究で知られるニールセン・ノーマン・グループも、使いやすさの10原則の1つに「一貫性と標準」を挙げ、同じ製品の中で一貫していることと、ほかのサイトで広く使われている慣習に沿うことの両方が大切だと解説しています(Nielsen Norman Group: Consistency and Standards(英語))。

同じ記事では、人はほかのサイトで多くの時間を過ごしているため、ほかのサイトで慣れた配置の期待を持ち込む、とも説明されています。

ロゴを画面の左上に置く、といった多くのサイトで共通する配置は、この「ほかのサイトとの一貫性」にあたります。

同じ記事一覧で、カードのレイアウトがそろっている場合とそうでない場合を比べてみましょう。

NGの見本では、カードごとに画像・日付・タイトルの並び順や大きさ、枠の形が違うため、1枚ずつ読み方を確かめる必要があり、見比べにくくなっています。

OKの見本では、3枚のカードがすべて同じ並びと見た目なので、1枚目を見ただけで2枚目以降の読み方が分かり、タイトルだけを順に目で追えます。

なお、黄色い四角は画像の代わりです。

レイアウトの一貫性を保つ方法

ここからは、レイアウトの一貫性を実際にどう保てばよいかを見ていきます。

「役割ごとに見た目を決める」「ページをまたいで共通部分を固定する」「ルールを書き残す」「例外は意図して作る」の4つがポイントです。

同じ役割の要素には同じ見た目を決める

まずは、ページの中に出てくる要素を役割ごとに分け、役割ごとの見た目と配置を1つに決めましょう。

役割と見た目が1対1で結びついていれば、見る人は見た目だけで「これは見出しだ」「これは押せるボタンだ」と判断できるためです。

たとえば次のように、役割ごとに決めておく項目を書き出しておくと、作業中に迷いません。

役割	決めておくことの例
大見出し	文字の大きさ・太さ、左揃えか中央揃えか、下に線を引くかどうか
本文	文字の大きさ、行間、1行の長さ(コンテンツの幅)
画像	置く位置(文章の上か横か)、縦横の比率、角を丸めるかどうか
カード	中の要素の並び順、枠や影の有無、画像の位置
ボタン	色、形、文言の書き方、置く位置(文章の後ろか、まとまりの最後か)

具体的には、「画像は縦横比16:9で角丸8px」「いちばん押してほしいボタンは塗りつぶし、それ以外のボタンは枠線だけ」のように、数値や言葉で言い切れる形にしておくと、迷ったときに見返して同じ判断ができます。

同じページの中で、セクションごとに見出しの見た目を変えてしまった例と比べてみましょう。

NGの見本では、「サービス内容」は中央揃えで下線、「料金プラン」は帯付き、「よくある質問」は右揃えで細い文字と、見出しごとに見た目が違います。

そのため、3つが同じ重さの見出し(本でいえば、同じ「章」のタイトル同士)なのか、どれかが特別な意味を持つのかが分かりません。

OKの見本では、3つの見出しを同じ見た目で繰り返したので、「同じ重さのセクションが3つ並んでいる」という構造がひと目で伝わります。

ページをまたいで共通部分の位置を固定する

ヘッダー(ページ上部のロゴやメニューの帯)、メニュー、本文の幅、フッター(ページ下部の帯)といった、どのページにも出てくる部分は、ページが変わっても同じ位置・同じ形にしておきましょう(各部位の役割はWebページの基本構造とは?で解説しています)。

見る人はページを移るたびに、まず「メニューはどこか」「本文はどこから始まるか」を探すため、その場所が変わると毎回探し直すことになるからです。

次の見本は、同じサイトの「トップページ」と「記事ページ」を並べたワイヤーフレーム(色の付いた箱で配置だけを表した設計図)です。

ワイヤーフレームは家でいう間取り図のようなもので、色や写真を入れる前の段階で「どこに何を置くか」だけを確かめるために描きます。

NGの見本は、それぞれ1つのページとして見れば問題はありませんが、トップページから記事ページに移ったとたんにメニューの位置が変わるため、見る人は戸惑います。

OKの見本は、中身(メインと本文)は違っても、ヘッダー・メニューとフッターの位置と形が同じなので、どのページでも迷わずメニューにたどり着けます。

本文の幅をページごとに変えないことも大切です。
文章や画像を置く範囲の横幅を「コンテンツ幅」と呼び、これがページごとに違うと、ページを移るたびに文章の始まる位置や1行の長さが変わってしまいます(決め方はコンテンツ幅とは?で解説しています)。

また、画面をいくつかの列に区切るグリッドをサイト全体で共通にしておくと、ページが増えても要素の位置がそろいやすくなります(詳しくはグリッドと余白の関係とは?、よく使われる12カラムのグリッドは12カラムグリッドとは?で解説しています)。

ルールを書き残して共有する

決めたレイアウトのルールは、頭の中だけで覚えておかず、文書や見本として書き残しておきましょう。

時間がたつと自分でも決めた内容を忘れますし、複数人で作る場合は、人によって「なんとなくの感覚」が少しずつ違うため、書き残さないと一貫性が崩れていくからです。

最初は、役割ごとに決めておくことをまとめた表のように、「役割」と「決めたこと」を1枚にまとめた簡単なメモで十分です。

たとえば、GoogleドキュメントやNotionに「大見出し:24px・太字・左揃え・下線あり」「ボタン:角丸・塗りつぶし」と文字で書いておくだけでも役に立ちます。
Figmaなどのデザインツールを使っているなら、見出し・ボタン・カードなどの部品を1ページに並べた「部品の一覧」を作っておくと、新しいページを作るときにそこから写すだけでそろいます。

こうしたルールを部品や手順まで含めて体系的にまとめたものは「デザインシステム」と呼ばれ、たとえば日本のデジタル庁は、行政のWebサイトなどで使う色・文字・部品の考え方やガイドラインをデジタル庁デザインシステムとして公開しています。

いきなりここまで作る必要はありませんが、「ルールを書き残して共有する」と一貫性を保ちやすいことが分かる例として、一度のぞいてみるとよいでしょう。

なお、要素同士の間隔(余白)をルールとしてそろえる方法は、余白の間隔のルールとは?で詳しく解説しています。

例外は「目立たせたい場所」だけに意図して作る

ルールから外れた見た目にするのは、特に目立たせたい場所だけに限りましょう。

ルールがそろっているからこそ、そこから外れたものが「特別なもの」として目に入るためです。

前に紹介した『ノンデザイナーズ・デザインブック』でも、すべてがばらばらなら何が特別なのか見分けられない、一貫したデザインだからこそ驚きの要素を入れられる、という趣旨が書かれています(英語版第4版のサンプルページ(PDF・英語))。

たとえば記事一覧で、おすすめの1件だけカードを大きくして「ピックアップ」の目印を付ける、キャンペーン中のバナーだけ色を変える、といった使い方です。

例外が1つの画面に3つも4つもあると、どれが本当に大事なのか分からなくなり、例外が特別に見えなくなります。
1つの画面の中では1〜2か所程度にとどめるのが目安です。

例外をつくるときは、「なぜここだけ違うのか」を説明できるかを確認し、説明できない例外は作らないようにしましょう。

実践のポイント

レイアウトの一貫性で陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 「このページだけ少し変えたい」という例外を重ねるうちに、気づけばページごとに配置がばらばらになっていることがあります。
  新しいページを作るときは、まず既存のページの配置ルールを確認してから合わせましょう。
• 複数人で作るときに、ルールを口頭で伝えるだけにしてしまうことがあります。
  人によって受け取り方がずれるので、役割と見た目の対応を文書や見本にして共有しましょう。
• 一貫性を意識しすぎて、すべての要素を同じ大きさ・同じ見た目にしてしまうことがあります。
  同じにするのは「同じ役割の要素」だけで、役割が違う要素には差をつけましょう(差のつけ方はコントラストとは?のほか、情報の優先順位と色とは?やジャンプ率で変わるメッセージの伝わり方も参考になります)。
• パソコンの画面ではそろっているのに、スマホで見るとカードの並びや見出しの形がページごとに違っていることがあります。
  たとえば、パソコンでは横に3枚並んでいたカードは、スマホでは縦1列に並び替わるのが一般的ですが、このとき「あるページでは画像がカードの上、別のページでは画像が左」のように、ページによって並び替わり方が違ってしまうことがあります。
  スマホでの表示も、ページをまたいで同じルールになっているかを確認しましょう。

よくある質問

• Q. 一貫性と統一感は同じ意味?
  A. ほぼ同じ方向を目指す言葉です。
  一貫性は「同じ役割のものを同じルールで繰り返すこと」という作り方の話で、統一感はその結果として生まれる「全体がまとまって見える印象」のことだと考えると分かりやすいでしょう。
  色の面から統一感を出す方法は色の統一感とは?で解説しています。
• Q. 全部のページが同じだと、つまらなくならない?
  A. そろえるのはヘッダーや見出しの形などの「枠組み」なので、中身の写真や文章が違えば、ページごとの個性は十分に出ます。
  それでも単調に感じる場合は、目立たせたい場所にだけ意図的な例外を作りましょう。
• Q. ページ数の少ない小さなサイトでも、ルールは必要?
  A. 必要です。
  小さなサイトでも、カードや見出しのように同じ役割の要素は何度も出てくるので、最初に「この役割はこの見た目」と決めておくだけで、作業が速くなり、仕上がりもそろいます。

まとめ

レイアウトの一貫性とは、同じ役割の要素を、ページの中でもページをまたいでも同じ配置・同じ見た目で繰り返すことで、反復の原則を実践したものです。

役割ごとに見た目を決め、ヘッダーや本文の幅などの共通部分をページをまたいで固定し、ルールを書き残して共有し、例外は目立たせたい場所にだけ意図して作ることがポイントです。

まずは自分のサイトや作品の中から2つのページを並べて開き、見出し・ボタン・カードの見た目と位置が同じになっているかを見比べてみてください。

あわせて読みたい書籍

反復をはじめとするデザインの4原則を、たくさんの作例と一緒に学びたい方は、こちらの書籍もあわせてチェックしてみてください。