デザインの数値の決め方｜余白・文字サイズ・角丸
この記事で学べること
- 余白や文字の大きさを、毎回迷わずにルールで決められる
- 見出しと本文の差や行間を、読みやすさから決められる
- デザイン全体の数値に統一感を出せる
デザインを作っていると、「この余白は20pxか24pxか」と毎回迷うことがあります。数値をその場の感覚で決めると、ページごとに値がばらつき、まとまりのない見た目になります。決め方のルールを知っておけば、迷う時間が減り、どのページにも統一感が出せます。
ハコマル
数値にルールがあると、デザインを直すときもラクになるよ！
デザインの数値を決めるルールの全体像
決めたい数値ごとに、基本のルールを次の表にまとめました。
| やりたいこと | 基本のルール | 解説 |
|---|---|---|
| 余白を決める | 8の倍数で決め、細かいすき間だけ4の倍数にする | 余白を8の倍数で決める |
| 文字の大きさを決める | 本文の大きさを基準に、一定の比率で大きくする | 文字の大きさを比率で決める |
| 行間を決める | 本文は広め、見出しは狭めにする | 行間を決める |
| 1行の長さを決める | 日本語は1行40文字以内を目安に、幅を逆算する | 1行の長さを決める |
| 角丸を決める | 2〜3種類に絞って使い回す | 角丸の大きさを決める |
| 例外を確かめる | 文字サイズ・角丸・線の太さなどは8の倍数でなくてよい | 8の倍数にしなくていいもの |
余白を8の倍数で決める
余白は、8・16・24のように8の倍数を基本にして決めるのが定番です。
なぜ8の倍数なのか
GoogleのAndroid Developersのデザインガイドでも、画面のレイアウト・部品・余白は8刻みでそろえるのが基本です。
8の倍数で決めるメリット
- 半分にしても整数のまま割れる（8→4→2と割れるが、10は5→2.5と小数になる）
- 画面を1.5倍・2倍の密度で表示する機種でも整数のまま（5pxは1.5倍で7.5pxになり、線の端がぼやける）
- 使える値が絞られ、「15pxか16pxか」と迷わない
ハコマル
迷ったら「8で割り切れるか」だけチェックすればOKだよ！
8と4を使い分ける
8刻みでは大きすぎる細かいすき間には、4の倍数を使います。8の倍数はすべて4の倍数でもあるので、2つのルールを一緒に使っても矛盾しません。
| 刻み | 使う場所 |
|---|---|
| 8の倍数 | 部品どうしの間隔、ボタンやカードなど部品の大きさ |
| 4の倍数 | アイコンと文字のすき間など、部品の中の小さい要素 |
出典：Google公式「Material Design」のSpacing methods、Android Developersの「Grids and units」（ページ一覧）
余白の段階を作る
8と4の倍数の中から、実際に使う値をあらかじめ段階として決めておくと迷いません。小さい余白は細かく、大きい余白は粗く刻むのが基本です。
| 範囲 | 使う値 | 使う場所 |
|---|---|---|
| 小 | 0・4・8px（4px刻み） | アイコンと文字のすき間、入力欄の内側 |
| 中 | 12・16・20・24px（4px刻み） | ボタンの内側、カードの中の項目どうし |
| 大 | 32・40・48・64・80px（8〜16px刻み） | セクションどうしの間、ページ全体のレイアウト |
出典：Atlassian Design System「Spacing」
文字の大きさを比率で決める
文字の大きさは、余白とは別のルールで決めます。8の倍数ではなく、本文の大きさを基準に、一定の比率で大きくしていく考え方です。
本文のサイズを基準にする
本文の文字サイズに同じ比率を掛け続けて、見出しのサイズを作ります。この段階をタイプスケールと呼びます。
例えば本文16px・1.25倍なら、20・25・31・39pxです。文字の大きさの差は、何px違うかより何倍違うかで目立つため、4pxずつ足すよりも大きい見出しどうしの差がはっきりつきます。
計算結果は切りのいい数字に丸め、使う段階だけ選べば十分です。何倍にするかは、次の「見出しと本文の差を決める」の目安から選びます。
見出しと本文の差を決める
1段ごとに掛ける比率を大きくするほど、見出しと本文の大きさの差が開き、メリハリが強くなります。この見出しと本文の大きさの差をジャンプ率と呼びます。比率に決まった正解はないため、次の値を目安に選びましょう。
| 1段ごとの比率 | 4段目の大きさ（本文16px） | 差の付き方 | 使われることが多いページ |
|---|---|---|---|
| 1.2倍 | 33px | 控えめ | 管理画面など、文字の多い画面 |
| 1.25倍 | 39px | 中くらい | ブログ・一般的なサイト |
| 1.618倍 | 110px | 強い | LPなど、見出しで目を引きたいページ |
スマホでは大きい見出しほど縮める
スマホでは画面が狭いため、文字を小さくします。方法の1つが、スマホだけ1段ごとの比率を小さくすることです。本文はそのままで、大きい見出しほど大きく縮みます。
| 段階 | PC（1.25倍） | スマホ（1.125倍） |
|---|---|---|
| 本文 | 16px | 16px |
| 1段目 | 20px | 18px |
| 2段目 | 25px | 20px |
| 3段目 | 31px | 23px |
| 4段目 | 39px | 26px |
4段目は約3分の2まで縮みますが、1段目はほとんど変わりません。スマホでは、本文の大きさ自体を小さくする方法もあります。
行間を決める
行間は、文字サイズに対する倍率で決めます。本文は広め、見出しは狭めにするのが基本です。
| 種類 | 倍率の目安 | 理由 |
|---|---|---|
| 本文 | 1.5倍 | 1行読み終えたあと、次の行に移りやすくする |
| 見出し | 1.2倍 | 文字が大きいため、行間を広げると見出しがまとまって見えない |
出典：Singapore Government Design System「Typography」
1行の長さを決める
本文を流す幅は、1行に入る文字数から逆算して決めます。WCAG※1では、1行の幅を80文字以内、日本語などは40文字以内にすることを目安にしています。日本語の文字は英字のおよそ2倍の幅があるため、上限も半分になっています。
計算式は「文字サイズ × 1行の文字数」です。本文16pxで40文字なら、16 × 40 ＝ 640pxが本文の幅の上限になります。
ページ全体の幅を1000px以上にしている場合は、文章だけの段落に、640pxのような狭い最大幅を別に用意しておきましょう。
ハコマル
カードを並べる幅と、文章を読ませる幅は分けて考えるといいよ！
※1：WCAG…Webサイトを、障害のある人を含めて誰もが使いやすくするための国際的なガイドライン。
角丸の大きさを決める
角丸は、8の倍数でなくても問題ありません。余白と違い、角丸は要素の位置や大きさを変えないため、半端な数値でもずれが起きにくいからです。
大事なのは、使う角丸を2〜3種類に決めて使い回すことです。決めずに作ると、カードごとに10px・12px・14pxのように値がばらつき、まとまりがなくなります。
| 角丸の大きさ | 使う場所 |
|---|---|
| 小 | ボタン・入力欄など小さい部品 |
| 大 | カード・画像など大きい要素 |
| 完全な丸（9999px） | ピル型のボタン・タグ・アイコンの円 |
角丸のカードの中に角丸の画像を入れるときは、「外側の角丸 ＝ 内側の角丸 ＋ 余白」で計算します。内側と外側を同じ値にすると、角の部分だけすき間が細く見えてしまいます。
角丸を余白と同じ数値（8px・16pxなど）にしておくと、この計算も楽になります。
ハコマル
角丸がしっくりこないときは、まず入れ子の計算を見直してみてね！
出典：Hightouch UI「Border Radius」
8の倍数にしなくていいもの
8の倍数は、余白と部品の大きさのためのルールです。次の数値は、無理に8の倍数にそろえなくてかまいません。
8の倍数にしなくていい数値
- 文字サイズ（本文を基準に比率で決めるため）
- 角丸（要素の位置や大きさを変えないため）
- 線の太さ（1pxなど細い線を使うため）
- 写真の大きさ（グリッドの列幅に合わせて決めるため）
部品の中で上下中央に置いた文字も、グリッドの線にぴったり合わせる必要はありません。
出典：Google公式「Material Design」のSpacing methods（ページ一覧）
さいごに
まとめ
デザインの数値は、その場の感覚ではなくルールで決めると、迷う時間が減り、ページ全体に統一感が出ます。
数値を決める4つのルール
- 余白は8の倍数で決め、細かいすき間だけ4の倍数にする
- 文字の大きさは、本文を基準に一定の比率で大きくする
- 行間は本文を広め・見出しを狭めにし、本文の幅は1行40文字以内にする
- 角丸は2〜3種類に絞って使い回す
よくある質問
余白を20pxにしてもいいですか？
20pxは4の倍数なので、アイコンと文字のすき間など、部品の中の細かいすき間には使えます。部品どうしの間隔は、16pxか24pxのような8の倍数から選びましょう。
使い分けは「8と4を使い分ける」で解説しています。
比率で計算した文字サイズが31.25pxのように小数になりました
計算結果は、31pxのように切りのいい数字に丸めてかまいません。すべての段階を使う必要もないので、必要なサイズだけ選びましょう。
決め方は「本文のサイズを基準にする」で解説しています。
見出しの行間を本文と同じにしてはいけませんか？
見出しは文字が大きいため、本文と同じ行間にすると行どうしが離れすぎて、まとまって見えなくなります。見出しは1.2倍程度に狭めるのが基本です。
目安は「行間を決める」で解説しています。
角丸を12pxにしても大丈夫ですか？
角丸は8の倍数でなくても問題ありません。12pxを使う場合は、ほかの角丸と合わせて2〜3種類に絞り、同じ種類の部品には同じ値を使いましょう。
決め方は「角丸の大きさを決める」で解説しています。
参考にした公式情報
Google公式 デザインガイドライン
余白を8刻み、小さい要素を4刻みでそろえる考え方を確認できます。
どのページも英語ですが、ブラウザの翻訳機能を使えば日本語で読めます。
