センスに頼らないWebデザインの基本｜杏さんの分量レシピ

デザインは才能だと思われがちですが、個人サイトで必要なのは、確認できる基準に沿って画面を整えることです。杏さんの「分量レシピ」として、直す順番と目安を示します。

デザインは目的と優先順位から決める

飾りを足す前に、何を最初に見てほしいかを決めます。優先順位が決まると、整え方も決まります。

読者に最初に見てほしいもの

ページを開いた人に、まず何を見てほしいかを一つ決めます。見出しか、写真か、ボタンか。主役が決まると、他の要素はそれを邪魔しないよう控えめにできます。全部を目立たせると、結局どれも目立ちません。

読後に取ってほしい行動

読み終えた人に、次に何をしてほしいかを決めます。問い合わせか、次の記事か、購入か。その行動への導線を、迷わない位置に置きます。デザインは、行動を後押しするための整理でもあります。

装飾より先に情報を整理する

色や飾りを足す前に、載せる情報を減らし、順番を整えます。情報が整理されていれば、装飾が少なくても伝わります。逆に、散らかった情報は、どれだけ飾っても読みにくいままです。

四つの原則で画面を整える

有名な4原則は、覚えておくと画面のどこを直せばよいか判断できます。順に見ていきます。

近い情報をまとめる(近接)

関係の深い要素どうしを近づけ、関係の薄いものは離します。見出しとその本文を近づけるだけで、どこからどこまでが一まとまりかが伝わります。余白の取り方で、情報の区切りを示します。

見えない線へそろえる(整列)

文字や画像の左端・上端を、見えない線にそろえます。位置がそろうだけで、素人っぽさが消えて落ち着きます。中央ぞろえを多用せず、基準の線を決めて左ぞろえにすると安定します。

同じ役割を繰り返す(反復)

見出しの大きさ、色、余白などのルールを、ページ全体で繰り返します。同じ役割の要素が同じ見た目になっていると、読者は迷いません。一貫性そのものが、整った印象を作ります。

差をつけて優先度を示す(対比)

大事なものは大きく・濃く、そうでないものは小さく・淡くします。中途半端な差は迷いに見えるため、差をつけるときははっきりつけます。対比が、視線の順番を作ります。

色は役割と分量で管理する

色は増やすほど難しくなります。数を絞り、役割と分量で管理すると、素人でも破綻しません。

基本色・補助色・強調色

色は「基本色・補助色・強調色」の3種類くらいに絞ります。基本色は背景や文字、補助色は区切りや帯、強調色はボタンなど一番押したいものに使います。役割を決めると、色選びが迷いにくくなります。

7対2.5対0.5を出発点にする

分量の目安として、基本色を約7割、補助色を約2.5割、強調色を約0.5割にすると落ち着きます。強調色は少ないほど効きます。あくまで出発点なので、そこから微調整します。

文字とのコントラストを確認する

背景と文字の明るさの差(コントラスト)が小さいと、読みにくくなります。薄い灰色の文字などは、見た目はおしゃれでも読めないことがあります。とくにスマートフォンの屋外表示を想定して確認します。

文字で読みやすさを作る

サイトの中身は、ほとんどが文字です。文字が読みやすいだけで、印象は大きく変わります。

本文と見出しの大きさ

本文は小さすぎないサイズにし、見出しは本文よりはっきり大きくします。大きさの差で、どこが区切りかが伝わります。スマートフォンで読めるかを基準に決めます。

行間と一行の長さ

行間が詰まっていると窮屈で、開きすぎるとばらけます。少しゆとりのある行間にし、一行が長すぎないようにすると読みやすくなります。本文の幅を広げすぎないのがコツです。

書体と太字を増やしすぎない

書体は1〜2種類に絞り、太字や色文字を多用しないようにします。強調が多いと、どこも強調に見えず、かえって読みにくくなります。強調は本当に大事な箇所だけにします。

余白と幅でまとまりを示す

余白は「何もない部分」ではなく、情報を区切る道具です。幅とあわせて、まとまりを作ります。

外側と内側の余白

要素の外側と内側に、適切な余白を取ります。ぎゅうぎゅうに詰めず、呼吸できる隙間を残すと、上品に見えます。余白をけちらないことが、整った印象につながります。

本文幅と画像幅

本文の幅を広げすぎると、目線が左右に行き来して読みにくくなります。読みやすい幅に収め、画像はそろえた幅で並べます。幅がそろうと、ページ全体が落ち着きます。

セクション間の間隔

話題が変わるところでは、間隔を広めに取ります。区切りが見えると、読者は構造をつかみやすくなります。間隔の大小で、情報のまとまりを示します。

スマートフォンを基準に確認する

多くの読者はスマートフォンで見ます。最後に、小さな画面で崩れていないかを確認します。

最初の画面に置く内容

スマートフォンで開いた最初の画面に、何を伝えるかを決めます。ここで何のサイトか分からないと、離れてしまいます。主役の要素を、最初の画面に置きます。

ボタンとリンクの押しやすさ

指で押す前提で、ボタンやリンクは十分な大きさと間隔を取ります。近すぎると誤タップします。押しやすさが、行動につながります。

横スクロールと文字の折り返し

横スクロールが出たり、文字が画面からはみ出したりしていないか確認します。画像や表が原因になりがちです。小さな画面で破綻しないことを、公開前の基準にします。

まとめ

見やすいサイトは、目的と優先順位を決め、4原則でそろえ、色は役割と分量で絞り、最後に整えるという順番で作れました。センスではなく手順です。次は、画像づくり(Canva)やテーマ選びの記事へ進めます。