見やすいデザインの基本。4つの原則から始める | デジタルラボ金沢

先に結論を書くと、見やすいデザインはセンスではなく整理のしかたで決まります。色の選びかたや飾りを覚える前に、「関係のあるものをまとめる」「線をそろえる」といった地味な作業をやるだけで、同じ内容でも読みやすさは大きく変わります。

ここで紹介する4つの原則は、デザイン入門書として長く読まれている『ノンデザイナーズ・デザインブック』（Robin Williams 著）で整理されたもので、日本語では近接・整列・反復・対比と呼ばれることが多いものです。チラシでもスライドでもWebページでも同じように使えます。

1. 近接：関係のあるものを近づける

いちばん効くのがこれです。関係のある要素どうしを近づけ、関係のないものとは離す。それだけで、読む人は「どこからどこまでが1つのかたまりか」を考えずに理解できます。

よくあるのは、見出しと本文のあいだが空きすぎていて、見出しが下の段落ではなく上の段落にくっついて見えるケースです。文章としては正しくても、目で見たときの区切りがずれてしまいます。

余白が足りないと感じたら、何かを足すのではなく、まず離す・近づけるを見直すほうが早いことが多いです。

要素の位置をなんとなく置かず、共通の線にそろえます。左ぞろえなら全部左、中央ぞろえなら全部中央。ばらばらの端が並ぶだけで、内容に関係なく雑な印象になります。

初心者がやりがちなのは、見出しは中央ぞろえ、本文は左ぞろえ、写真の説明はまた別、というように場所ごとに変えてしまうことです。1枚のなかで基準になる線は、できるだけ少なくします。

文章量が多いものは、原則として左ぞろえが読みやすいとされています。中央ぞろえは行の始まりの位置が毎行変わるため、長い文章では目が迷いやすくなるためです。短いタイトルや招待状のようなものなら中央ぞろえも合います。

同じ意味を持つものは、同じ見た目にそろえます。大見出しはすべて同じ大きさ・同じ色、リンクはすべて同じ色、といった具合です。

反復ができていると、読む人は「太字の青い文字はリンクだ」と一度覚えるだけで、あとは説明なしで読み進められます。逆に、場所ごとに見た目が違うと、そのたびに意味を考えることになります。

作りはじめる前に、次の3つだけ決めておくと迷いが減ります。

Webページで作る場合は、この「決めごと」をCSSにまとめておくと、あとから直すのも一箇所で済みます。HTMLとCSSの役割分担はHTMLとCSSで何ができるのか、最初の全体像にまとめています。

強調したいところは、中途半端ではなく思いきって差をつけます。見出しを本文より少しだけ大きくすると、「大きくしたかったのか、ずれているのか」がわからず、かえって落ち着かない見た目になります。

対比のつけかたは大きさだけではありません。太さ、色、余白の量、書体の種類でも差は作れます。ただし一度に全部を変えると、どこが大事なのかわからなくなります。1画面のなかで、いちばん目立つものは1つと決めておくと整理しやすくなります。

強調が多すぎると感じたときは、強調を足すのではなく、ほかの強調を減らすほうが効きます。

4つを覚えても、作っている最中は自分の作ったものを客観的に見るのが難しいものです。次の見かたが助けになります。

ひとつは、縮小して眺めること。画面を縮めたり、印刷して少し離れて見たりすると、文字は読めなくなりますが、かたまりの位置と余白のバランスだけが残ります。この状態で違和感があれば、近接か整列に原因があることが多いです。

もうひとつは、時間をあけて見ること。作った直後は自分の意図が頭に残っているため、ずれに気づきにくくなります。一晩おいてから見ると、他人の目に近い状態で確認できます。

AIに意見を求めるという手もありますが、見た目の良し悪しは目的や相手によって変わるため、そのまま受け取らず判断材料の1つとして使うのが安全です。AIの答えの扱いかたはAIが書いた文章をそのまま使わないほうがいい理由でも触れました。

原則を知っていても、自分の作ったものは判断が難しいものです。人に見てもらうと一気に進むこともあります。デジタルラボ金沢は初心者からOK・一人一人が主役という考えかたでワークショップや勉強会を開いていますので、気になった方はお問い合わせからどうぞ。