見やすいレイアウトには、どのデザインにも共通する基本のルールがあります。ルールを知っておくと、センスに頼らなくても、整理された読みやすいデザインに近づけます。
この記事では、レイアウトの4つの原則、読みやすい文章の行間や1行の文字数の目安、視線の流れに合わせた配置、余白・色・書体の整え方を紹介します。
目次
見やすいレイアウトの4つの原則
見やすいレイアウトには、どのデザインにも共通する4つの原則があります。チラシ、Webサイト、資料など、何を作るときも、まずこの4つを確かめましょう。
整列：見えない線にそろえる
文字や写真を、見えない線にそってそろえて並べます。端がそろうだけで、整理されて見えます。横書きの長い文章は左揃え、短いキャッチコピーは中央揃えが基本です。右揃えは見にくくなりやすいので、日付や金額など一部にとどめましょう。
近接：関係のある情報を近づける
写真とその説明、見出しと本文のように関係のある情報は近づけ、関係の薄い情報は離します。近さで「ここまでがひとまとまり」と伝わるので、線や枠で囲まなくても分かりやすくなります。
反復：同じ形をくり返す
見出しの大きさや色、写真の大きさ、文字の行間など、同じ役割のものは同じ見た目でくり返します。「この情報はこの形」と分かるので、読む人は内容に集中できます。
強弱：大事な情報を目立たせる
文字の大きさ、太さ、色で、情報の優先順位をはっきりさせます。目立たせる色は、基本の色のほかに1〜2色までにしましょう。全部を目立たせると、結局どれも目立たなくなります。
読みやすい文章のレイアウトのコツ
文章が多いページや資料では、文字の並べ方で読みやすさが大きく変わります。次の数字を目安にしましょう。
行間は文字の大きさの1.5倍以上
行と行の間が詰まっていると、次の行を読み違えやすくなります。行間（行の高さ）は文字の大きさの1.5倍以上にしましょう。Webのアクセシビリティの基準（WCAG 2.1 達成基準1.4.8）でも、段落の中の行間を1.5倍以上にすることが挙げられています。
1行は40字以内
1行が長すぎると、行の終わりから次の行の頭に目を戻すときに、どこを読んでいたか見失いやすくなります。同じ基準では、日本語などは1行40字以内が目安とされています。パソコンで横に広いページでも、本文の幅は広げすぎないようにしましょう。
段落の間は行間より広くあける
段落と段落の間を、行間より広くあけます。話の区切りがひと目で分かり、長い文章でも読み進めやすくなります。
長い文章は左揃えにする
中央揃えは行の頭の位置が毎行変わるので、長い文章では読みにくくなります。中央揃えは、見出しや短いキャッチコピーだけにしましょう。
Webの本文は16px前後にする
Webの本文の文字は、16px前後が一般的です。小さすぎるとスマートフォンで読みにくくなります。文章を短く区切り、見出しや箇条書きを使うことも、読みやすさにつながります。
視線の流れに合わせて配置する
人の視線は、決まった流れで動きやすいと言われています。大事な情報を、視線が通る場所に置きましょう。
文字が多いページは「F型」
文章が多いWebページでは、上の行を横に読み、少し下でまた横に読み、あとは左側を縦に流し読みする「F型」の動きが多いとされています。見出しや段落の書き出しに、大事な言葉を入れましょう。
文字が少ないデザインは「Z型」
チラシやバナー、LPのファーストビューのように文字が少ないデザインでは、左上から右上、左下、右下へと「Z」の形に視線が動きやすいとされています。左上にキャッチコピー、右下に申し込みボタンや問い合わせ先を置くと、流れが自然になります。
視線の動きについては「Webサイトのロゴの位置は左上が基本」でもくわしく紹介しています。
余白・色・書体を整える
4つの原則に加えて、余白・色・書体を整えると、さらに見やすくなります。
余白を削らない
余白は、余ったスペースではありません。情報のまとまりを分け、見てほしいものに目を向けさせる役割があります。情報を詰めこみたくなったら、まず載せる情報をしぼりましょう。
色は3色を基本にする
使う色は、背景などのベースカラー、全体の印象を決めるメインカラー、目立たせたいところのアクセントカラーの3色を基本にします。面積の目安は70％・25％・5％です。
書体は2種類くらいまで
本文は読みやすいゴシック体などにし、見出しだけ印象に合わせた書体にすると、メリハリが出ます。書体の種類が多すぎると、まとまりがなくなります。書体の選び方は「明朝体とゴシック体の違い」で紹介しています。
レイアウトの前に、伝える順番を決める
レイアウトを整えても、伝える順番が決まっていなければ、見やすいデザインにはなりません。
弊社でLPを作るときは、ヒアリングシートでお客様の情報をそろえ、デザインに入る前に「どの順番で何を伝えるか」をまとめた構成案を作って、お客様と確認しています。チラシや資料でも、先に載せる情報と順番を決めてからレイアウトに入ると、作り直しが少なくなります。
見にくいレイアウトの3つの共通点
できあがったら、次の3つに当てはまらないかを確かめましょう。1つでも当てはまると、見にくいレイアウトになります。
・文字や写真の位置が不ぞろい
・必要な情報がひと目で見つからない
・余白が少ない
作った本人は見慣れているので気づきにくいものです。少し時間をおいて見直すか、ほかの人に見てもらいましょう。
まとめ
見やすいレイアウトの基本は、整列・近接・反復・強弱の4つの原則です。文章は、行間を文字の1.5倍以上、1行40字以内、段落の間を広く、長い文章は左揃えにすると読みやすくなります。視線の流れに合わせて大事な情報を置き、余白・色・書体を整えましょう。
ほかの人にレイアウトを見てもらうときは、気になる場所に直接コメントを書き込んでもらうと、修正点が正確に伝わります。修正指示ツール「mitekaku」なら、画像やWebページに直接書き込んで指示できます。
ポイント
■4つの原則
・整列：見えない線にそろえる
・近接：関係のある情報を近づける
・反復：同じ形をくり返す
・強弱：大事な情報を目立たせる
■読みやすい文章の目安
・行間は文字の1.5倍以上
・1行は40字以内
・段落の間は行間より広く
・長い文章は左揃え
・Webの本文は16px前後
■整えること
・余白を削らない
・色は3色を基本に
・書体は2種類くらいまで
