· HARUBOUYA · design · 14 min read
Webデザインの基礎を、デザイナー以外の人が押さえる
4つの原則、余白、文字、色、スマホ前提の設計をまとめます。デザインを判断したり依頼したりする側が知っておくと話が早くなる基礎を整理します。
「なんとなく見づらい」「素人っぽい」と感じるが、どこを直せばいいか言えません。デザイナーではない立場でレビューや発注に関わると、この状態になりやすいです。
デザインの良し悪しは感覚の問題に見えますが、大半は決まった型から外れているかどうかで説明できます。作る側になるためではなく、判断したり依頼したりするために必要な基礎を整理します。
デザインは、見た目ではなく判断を助ける仕組み
Webデザインの目的は、きれいにすることではありません。見る人が迷わず目的にたどり着くことにあります。
判断の基準は1つです。「この画面で、見る人に何をしてほしいか」です。ここが決まっていない画面は、どれだけ整えても良くなりません。
| よくある依頼 | 言い換えると |
|---|---|
| おしゃれにしてほしいです | 誰に、何を感じてほしいか |
| 情報を全部載せたいです | 何を最初に見てほしいか |
| もっと目立たせたいです | 何より目立たせたいか |
目立たせたいものが3つあるとき、どれも目立ちません。 優先順位を決めるのは、デザイナーではなく依頼する側の仕事です。
1. 4つの原則
デザインの教科書で最初に出てくる4つです。これを外すと「素人っぽい」と感じられます。
| 原則 | 内容 | 外れている例 |
|---|---|---|
| 近接 | 関係あるものを近づけます | 見出しと本文が同じ間隔で並んでいます |
| 整列 | 端を揃えます | 要素ごとに左端の位置が違います |
| 反復 | 同じ役割には同じ見た目を使います | ボタンの色や形がページごとに違います |
| 対比 | 重要なものは、はっきり差をつけます | 見出しと本文の大きさがほぼ同じ |
近接がいちばん効く
見出しと、その下の本文の間隔と、本文と、次の見出しの間隔です。後者を広くします。
見出し
← 狭い（関係が近い）
本文本文本文本文
← 広い（関係が遠い）
次の見出し
← 狭い
本文本文本文本文これだけで、情報のまとまりが目で分かるようになります。線や枠で囲むより、間隔で分けるほうがきれいに収まります。
整列は「見えない線」を意識する
要素の左端を揃えると、見えない縦線ができます。この線が多いほど散らかって見えます。線は少ないほどよいです。
中央揃えは、行数が違う要素が並ぶと端がガタつきます。基本は左揃え、見出しなど短い要素だけ中央揃え、と決めると安定します。
2. 余白
初心者と経験者の差が最も出る部分です。迷ったら余白を広げます。
| 考え方 | 内容 |
|---|---|
| 余白は「空き」ではなく要素 | 何も置かないことで、他を目立たせています |
| 間隔は数種類に絞ります | 8px、16px、24px、48px のように倍数で決めます |
| 外側は内側より広く | 枠の外の余白 > 枠の中の余白 |
間隔を目分量で決めません。 8の倍数など基準を決めて、その中から選びます。数値が揃うだけで整って見えます。
3. 文字
読みやすさの大半は、文字の設定で決まります。
| 項目 | 目安 | 理由 |
|---|---|---|
| 本文の大きさ | 16px以上 | スマホで拡大せずに読める下限 |
| 行間 | 文字の1.5〜1.8倍 | 日本語は英語より行間を広く取ります |
| 1行の長さ | 全角35〜45字 | 長すぎると次の行を見失います |
| 書体の種類 | 2種類まで | 増やすほどまとまりがなくなります |
| 見出しと本文の差 | 1.5倍以上 | 差が小さいと構造が見えません |
行間は詰めません。 日本語は文字が詰まって見えるため、英語のデザインをそのまま真似ると読みづらくなります。
太字の使いすぎ
強調が多いと、どれも強調に見えなくなります。1画面で強調するのは2〜3か所までを目安にします。
4. 色
色は最も失敗しやすいです。数を絞るほど失敗しません。
| 役割 | 割合の目安 | 使うところ |
|---|---|---|
| ベース | 70% | 背景 |
| メイン | 25% | 見出し、区切り |
| アクセント | 5% | ボタン、リンク |
アクセントカラーは1色だけにします。 押してほしいボタンにだけ使います。他の場所で使うと、ボタンが埋もれます。
読めるかどうかは数値で判断できる
背景と文字の明るさの差（コントラスト比）には基準があります。
| 用途 | 必要な比率 |
|---|---|
| 本文 | 4.5:1 以上 |
| 大きい文字（24px以上） | 3:1 以上 |
薄いグレーの文字は、おしゃれに見えて読めないことが多いです。ブラウザの開発者ツールやオンラインの判定ツールで数値を確認できるため、感覚で決めません。
色だけで情報を伝えない
「赤が未対応、緑が完了」だけの表示は、色の見分けがつきにくい人には伝わりません。文字やアイコンを併記します。
5. レイアウトと視線
人は画面を左上から見ます。日本語のサイトでは、視線は次のように動きます。
| 形 | 動き | 向いている画面 |
|---|---|---|
| Z型 | 左上→右上→左下→右下 | 情報が少ないページ、LP |
| F型 | 左上から横に読み、下へ移動を繰り返します | 文章が多いページ、一覧 |
いちばん伝えたいものを左上か中央上に置きます。 右下は最も見られません。
グリッド
画面を縦の列に分けて、その線に合わせて要素を置く考え方です。列を意識するだけで揃います。
一般的には12列に分けます。要素の幅を「4列分」「6列分」のように決めると、幅がバラバラになりません。
6. スマホを前提にする
多くのサイトで、閲覧の半分以上がスマホです。スマホで成立する形を先に決め、そこから広げるほうが失敗しにくいです。
| 項目 | 目安 |
|---|---|
| 押せる領域 | 44×44px 以上 |
| 要素の間隔 | 指が隣を押さない程度に空けます |
| 横幅 | 左右に16px以上の余白 |
| 横スクロール | 発生させません |
| 固定表示 | 画面の1/4を超えません |
PCで作ってからスマホに縮める順番だと、情報が入りきらずに破綻します。 逆にします。
7. 画像
| 項目 | 目安 |
|---|---|
| 縦横比 | 一覧で並べるものは比率を統一（16:9 など） |
| 書き出し | 表示サイズの2倍程度。それ以上は不要 |
| 形式 | 写真はJPEGまたはWebP、図はPNGまたはSVG |
| 容量 | 1枚200KB以下を目安 |
| 代替テキスト | 画像の内容を短く書きます |
大きすぎる画像は、表示速度を直接落とします。 スマホの通信環境では数秒の差になります。
8. やりがちな失敗
| 失敗 | 起きること | 直し方 |
|---|---|---|
| 余白が狭いです | 窮屈で読みづらいです | 間隔を1.5倍にしてみます |
| 中央揃えを多用 | 端がガタつきます | 左揃えを基本にします |
| 色を増やします | まとまりがなくなります | 3色に絞ります |
| 書体を増やします | ちぐはぐになります | 2種類まで |
| 全部を目立たせます | どれも目立ちません | 優先順位を1つ決めます |
| 文字を薄くします | 読めません | コントラスト比を確認します |
| 参考サイトの真似 | 自社の情報量と合いません | 型だけ借りて、内容に合わせます |
9. 依頼するときに決めておくこと
外部に依頼する場合、先に決めておくと手戻りが減ります。
| 項目 | 内容 |
|---|---|
| 目的 | この画面で何をしてほしいか（1つ） |
| 対象 | 誰が見るか |
| 優先順位 | 載せる情報の順番 |
| 参考サイト | 3つ。どこが良いと思ったかを言葉で添えます |
| 避けたい方向 | 「かたい印象は避けたい」など |
| 更新する人 | 誰が、どのくらいの頻度で直すか |
参考サイトは「どこが良いか」まで書きます。 URLだけ渡すと、色が良いのか、構成が良いのか、伝わりません。
更新する人を決めておくのも重要です。凝ったデザインは、更新が続かずに崩れていきます。
まとめ
- デザインの目的は見る人が迷わないことです。きれいにすることではありません
- 近接・整列・反復・対比の4原則です。外すと「素人っぽい」と感じられます
- 余白は広めにとります。間隔は8の倍数など基準を決めて、その中から選びます
- 本文16px以上、行間1.5〜1.8倍、1行35〜45字
- 色は3色にします。アクセントは1色だけです。コントラスト比は数値で確認します
- スマホの形を先に決めます
- 依頼時は、目的・優先順位・参考サイトの「どこが良いか」まで書きます
型を知っていると、「なんとなく見づらい」を「余白が狭い」「強調が多すぎる」と言い換えられます。言葉にできると、直せるようになります。
参考になったら、いいねを押してください。
