PCとスマホの余白の違いとは?画面サイズに合わせた余白の調整方法を解説

PCとスマホで余白の考え方が変わる理由

まずは、なぜPCとスマホで同じ余白をそのまま使えないのかを押さえましょう。

理由は大きく「画面の広さ」と「操作の方法」の2つです。

同じ余白でも画面の広さで割合が変わる

余白は「何px空けたか」という数値だけでなく、画面全体に対してどのくらいの割合を占めるかで、見え方が決まります。

たとえば、画面の左右に40pxずつ余白を取る場合を考えてみましょう。

横幅1,280pxのパソコンの画面なら、左右合わせて80pxの余白は画面の約6%で、中身には1,200pxの幅が残ります。

一方、横幅375pxのスマートフォンの画面では、同じ80pxが画面の約21%を占め、中身に使える幅は295pxまで狭くなります。

本文を16pxの文字で組むと、295pxに入るのは1行18文字ほどです。
左右の余白を16pxずつにすれば中身は343pxになり、1行21文字ほどまで入れられます(画面の端の余白の決め方はページ左右の余白とはで解説しています)。

つまり、PCで「ゆったり」に見えた余白が、スマホでは「中身を押しつぶす余白」に変わってしまうのです。

次の見本は、スマートフォンほどの横幅の画面に、PC向けの大きな余白をそのまま当てはめた場合と、スマホ向けに調整した場合を比べたものです。

NGの見本では、外側の余白が大きすぎて文字が細い柱のように詰め込まれ、見出しと本文のあいだも離れすぎて、どの本文がどの見出しのものか分かりにくくなっています。

OKの見本では、外側の余白とまとまり同士の間隔を縮めつつ、「見出しと本文は近く、次のまとまりとは離す」という関係はそのまま保っています。

マウスと指では必要な余白が違う

PCはマウスで操作することが多く、スマホは指で画面に触れて操作するため、押す部品の周りに必要な余白も変わります。

マウスのポインターは小さな点で細かく狙えますが、指先は面積が大きく、狙った場所から少しずれて触れることもあるからです。

Googleのアクセシビリティのヘルプでも、タップする場所は48×48dp以上(物理的な大きさでおよそ9mm)にし、8dp以上の余白を設けることがすすめられています(Androidユーザー補助ヘルプ「タップ ターゲットのサイズ」)。
dpはAndroidで使われる長さの単位で、画面の細かさに左右されず、どの端末でもほぼ同じ見た目の大きさになるように決められています。

そのためスマホでは、画面が狭いからといって、ボタンやリンク同士の間隔まで一緒に縮めてしまうと、押し間違いが起きやすくなります(部品同士の間隔の決め方はUIコンポーネントの間隔とは、ボタンの押せる範囲の決め方はボタンの内側の余白とはで解説しています)。

レスポンシブデザインとは

画面の大きさに合わせて余白を変える土台になるのが、レスポンシブデザインという考え方です。

レスポンシブデザインとは、1つのWebページを、パソコン・タブレット・スマートフォンなど画面の大きさに応じて、レイアウトや大きさを自動で切り替えて表示する作り方のことです。

表示を切り替える画面幅の境目は「ブレイクポイント」と呼ばれ、たとえば「横幅が○px以上ならPC向けの余白、それより狭ければスマホ向けの余白」というように使い分けます。

デザインの段階では、PC向けとスマホ向けの2つの画面幅でデザインを作り、それぞれの余白の数値を決めておくのが一般的です。

PCとスマホで余白を調整する方法

ここからは、PC向けの余白をスマホ向けに直すときの具体的な考え方を見ていきます。

ポイントは「どの余白を縮め、どの余白を守るか」を見分けることです。

縮めてよい余白と、縮めない余白を分ける

スマホ向けに余白を調整するときは、すべての余白を同じ割合で小さくするのではなく、縮めてよい余白と縮めない余白を分けて考えます。

画面を広く使うために縮めたい余白がある一方で、使いやすさや読みやすさのために守るべき余白もあるからです。

余白の種類	スマホでの扱い	理由
画面の左右の余白	縮める	中身に使える幅を確保するため
セクション(話題のまとまり)同士の間隔	縮める	縦に長くなりすぎて、間延びして見えるのを防ぐため
写真や見出しの周りの、雰囲気づくりの大きな余白	縮める	PCほどの広さがなくても、比率を保てば印象は伝わるため
ボタンやリンク同士の間隔	縮めない	指で押し間違えないため
ボタンの内側の余白	縮めない	押せる範囲を小さくしないため
ラベルと入力欄、見出しと本文などの「近い関係」の間隔	ほぼそのまま	もともと小さく、縮めるとくっついて見えるため

大きな余白は縮め、小さな余白や押す部品の周りの余白は守る、と覚えておくと判断しやすくなります。

表にない余白で迷ったときは、次の2つを確かめます。

1. その余白を縮めると、ボタンやリンクが押しにくくなるか
2. その余白は、「この2つは同じ仲間」という近い関係を表す小さな余白か

どちらかに当てはまれば守る余白、どちらにも当てはまらなければ縮めてよい余白と考えると、判断がぶれにくくなります。

余白の大小関係は保ったまま縮める

余白を縮めるときは、「セクション同士の間隔 > まとまりの中の間隔 > 部品同士の間隔」という大小の関係を崩さないようにします。

余白の大小は、情報の区切りや、どれとどれが同じグループかを伝える役割を持っているからです。

たとえば、PCでセクション同士を96px、見出しと本文を16px空けていたとします。

スマホでセクション同士を56pxに縮めるのはよいですが、見出しと本文まで同じだけ縮めると、くっついてしまいます。

反対に、セクション同士の間隔だけを極端に縮めて見出しと本文の間隔と同じくらいになると、どこで話題が切り替わったのかが分からなくなります。

数値は一例ですが、「大きい余白ほど大きく縮め、小さい余白はあまり変えない」と考えると、大小関係を保ちやすくなります。

横並びが縦に積まれるときの間隔

PCで横に並べていたカードや画像は、スマホでは縦に積み重ねることが多いので、そのときの上下の間隔もあらかじめ決めておきます。

PCで横並びのときに空けていた左右の間隔は、縦に積んだとたんに上下の間隔に置き換わるため、忘れるとカード同士がくっついてしまうからです。

NGの見本では、カード同士がくっついているうえ、カードの中の見出しと説明文のあいだ(12px)のほうがカード同士の間隔より広く、どこで1枚が終わるのかが分かりにくくなっています。

OKの見本では、カード同士を16px空け、カードの中の間隔はそれより狭くしているので、3枚のカードがそれぞれ独立したまとまりに見えます。

縦に積んだときは、「カードの中の間隔より、カード同士の間隔を広くする」と覚えておきましょう(カードの内側の余白とカード同士の間隔の決め方はカード内の余白とはで解説しています)。

CSSで画面幅ごとに余白を切り替える

ここからはコーディングする人向けの補足なので、デザインツールだけを使う人は読み飛ばしても大丈夫です。

CSSでは、メディアクエリーという仕組みを使うと、画面の幅などの条件に応じて、余白の数値を切り替えられます(MDN「メディアクエリーの使用」)。

次の例は、スマホ向けの余白を基本にして、画面の幅が768px以上のときだけセクションの上下の余白を広げる指定です。

.section {
  padding: 56px 0; /* スマホ向け:セクションの上下の余白 */
}

@media (min-width: 768px) {
  .section {
    padding: 96px 0; /* 画面幅768px以上:PC向けに広げる */
  }
}

768pxや56px・96pxという数値は一例なので、実際にはデザインで決めたブレイクポイントと余白の数値に合わせて書き換えます。

@media (min-width: 768px) { … }は、「画面の幅が768px以上のときだけ、{ }の中の指定を使う」という意味です。

デザインツールで言えば、スマホ幅とPC幅の2つの画面を作り、それぞれでセクションの余白を56px・96pxと決めたものを、1つのページの中で画面の幅に応じて切り替えているのがこのコードです。

実際の画面で確かめる

余白を調整したら、パソコンの画面だけで判断せず、スマホの大きさの画面で実際に見て、押して確かめます。

デザインツールの画面を拡大・縮小して眺めているだけでは、実際の画面での余白の感じ方や、指での押しやすさは分からないからです。

Chromeには、パソコン上でスマホの画面幅を再現できる「デバイスモード」という機能があり、手軽に確認できます(Chrome DevTools「デバイスモード」)。

ただし、公式の説明でも、デバイスモードはスマホでの見え方の「おおよその目安」とされているので、最後は手元のスマホの実機で確かめましょう。

実践のポイント

PCとスマホの余白を調整するときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• PCのデザインを、そのまま縮小してスマホ用にしてしまうことがあります。
  全体を縮小すると、余白と一緒に文字やボタンまで小さくなり、読みにくく押しにくい画面になります。
  スマホ用の余白は、縮小ではなく、余白ごとに数値を決め直しましょう。
• 画面が狭いからといって、ボタン同士の間隔まで詰めてしまうことがあります。
  押す部品の周りの余白は、スマホでこそ必要です。
• すべての余白を同じ割合で縮め、見出しと本文がくっついてしまうことがあります。
  大きな余白は大きく縮め、小さな余白はあまり変えないようにしましょう。
• パソコンの画面だけで確認して公開し、スマホで見て初めて違和感に気づくことがあります。
  公開前に、必ずスマホの実機でも表示を確かめましょう。

よくある質問

• Q. スマホの余白は、PCの何割くらいにすればいい?
  A. 決まった割合はありません。
  セクション同士の間隔のような大きな余白は大きく縮め、ラベルと入力欄のような小さな余白やボタンの周りの余白はほとんど変えない、というように、余白の役割ごとに決めるのが基本です。
• Q. PCとスマホの2種類だけ考えればいい?
  A. まずはPCとスマホの2種類から始めれば十分です。
  慣れてきたら、タブレットのような中間の画面幅でも崩れていないかを確かめ、必要なら中間の余白も用意しましょう。
• Q. 文字の大きさも、PCとスマホで変えたほうがいい?
  A. 文字の大きさも画面に合わせて調整することがあります。
  考え方はPC・スマホの文字サイズやレスポンシブタイポグラフィの記事で解説しています。

まとめ

余白は同じ数値でも画面の広さによって占める割合が変わり、指で操作するスマホでは押す部品の周りに余白が必要になるため、PCとスマホで余白の取り方を変える必要があります。

スマホ向けには、画面の左右やセクション同士などの大きな余白を縮め、ボタン同士の間隔や近い関係の小さな余白は守りながら、余白の大小関係を保って調整するのが基本です。

まずは自分の作ったページやよく見るサイトを、パソコンとスマホの両方で開き、セクション同士の間隔やボタンの周りの余白がどう変わっているかを見比べてみましょう。