デザインというと「おしゃれさ」や「かっこよさ」をイメージしがちですが、Webサイトではそれ以上に
「読みやすさ」「わかりやすさ」「安心感」がとても大切です。
この記事では、見る人にとって「やさしい」デザインのポイントを、できるだけ専門用語を使わずにご紹介します。
ホームページを見る方の多くは、「じっくり読み込む」というよりも「ざっと見て、必要なところだけ読む」ことがほとんどです。
そのため、デザインは「パッと見て内容がつかめる」「どこを見ればいいか迷わない」ことがとても重要になります。
文字サイズと行間を「少しゆったりめ」にする
まず見直したいのが、文字の大きさと行間(行と行の間隔)です。
小さすぎる文字や、ぎゅっと詰まった文章は、それだけで読む気持ちが少し遠のいてしまいます。
- スマホでは、本文がおおよそ 15〜16px 以上になるようにする
- 行間は、文字サイズの 1.6〜1.8 倍くらいを目安にする
- 見出しと本文の間には、少し多めに余白を取る
ほんの少しの調整でも、「読みやすさ」の印象は大きく変わります。
余白は「贅沢」ではなく「呼吸スペース」
情報をたくさん載せたくなると、つい要素同士が近づきがちです。
ですが、余白は「何もないスペース」ではなく、情報同士の区切りや「ひと呼吸」の役割を持っています。
例えば、セクションごとに背景色を変えたり、上下に大きめの余白を入れることで、 見ている人は自然と「ここで話題が変わったんだな」と理解できます。
色使いは「コントラスト」と「数を絞る」ことがポイント
色は、サイトの印象を決める大きな要素です。
ただし、色数が多すぎたり、文字色と背景色のコントラスト(明るさの差)が小さすぎると、読みづらさにつながります。
- メインカラーは 1〜2色にしぼる
- 文字色は、背景に対してしっかり読める濃さにする
- 「ここを押してほしい」ボタンの色を、他より少し目立たせる
アクセシビリティ(誰にとっても見やすい状態)も意識しながら、色を選んでいくことが大切です。