UIコンポーネントの間隔とは?フォーム・ボタン・リストで余白を取るコツ

UIコンポーネントの間隔の基本

まずは、UIコンポーネントの間隔という言葉の意味と、間隔が使いやすさにどう関わるのかを押さえましょう。

「間隔は関係の近さを表す」という考え方が、この記事全体の土台になります。

UIコンポーネントの間隔とは

UIコンポーネントの間隔とは、ボタン・入力欄・カード・メニューなど、画面を組み立てる部品同士のあいだに取る余白のことです。

UIコンポーネントとは、Webサイトやアプリの画面を作るときに、何度も繰り返し使う部品のことを指します。
たとえば「送信ボタン」「メールアドレスの入力欄」「お知らせの一覧」などが、それぞれ1つのコンポーネントです。

余白には、部品の内側(枠と中身の文字のあいだ)に取るものと、部品の外側(部品と隣の部品のあいだ)に取るものがあります。

この記事で扱うのは、部品の外側、つまり部品同士の距離のほうです。

デザインの現場では、外側の余白を「マージン」、内側の余白を「パディング」と呼び分けることも多いので、言葉だけでも覚えておくと便利です。

どちらがどちらか迷ったら、宅配便の段ボール箱を思い浮かべてみてください。

商品が箱の壁にぶつからないように詰める緩衝材がパディング(内側の余白)、ほかの箱とくっつかないように空けて置くすき間がマージン(外側の余白)です(2つの余白の違いはCSSのmarginとpaddingの違いとはで詳しく解説しています)。

間隔が使いやすさを左右する理由

部品同士の間隔は、見た目を整えるためだけでなく、押し間違いを防ぎ、部品を見分けやすくするためにも欠かせません。

AppleのUIデザインの指針でも、ボタンの周りに十分な余白を取ることは、周りの部品と見分けやすくするためにも、押しやすくするためにも重要だと説明されています(Apple Human Interface Guidelines「Buttons」(英語))。

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

次の見本は、確認画面によくある2つのボタンを、間隔だけ変えて並べたものです。

NGの見本は、2つのボタンがくっついているため、指で押すときに「キャンセル」のつもりで「削除する」に触れてしまうおそれがあります。

OKの見本は、間隔を空けたことで、別々の操作だとひと目で分かり、押し間違いも起きにくくなっています。

関係の近さで間隔を変える

部品同士の間隔は、すべて同じにするのではなく、関係の近いものほど狭く、関係の遠いものほど広く取るのが基本です。

人は、近くにあるものを同じグループだと感じやすいためです。
デザインではこれを「近接」(関係のあるものを近くに置くこと)と呼びます(近接の考え方は近接の原則とはで詳しく解説しています)。

デジタル庁のデザインシステムでも、関連性の高い要素には小さな余白を、関連性の低い要素には大きな余白を置くことで、情報の構造を伝えると説明されています(デジタル庁デザインシステム「余白」)。

たとえば入力フォームなら、「項目名(ラベル)とその入力欄」は強く結びついているので狭く、「ある項目と次の項目」は別の内容なので広く空けます。

この考え方は、フォーム・ボタン・リストなど、どの部品の間隔を決めるときにも共通して使えます。

UIコンポーネントごとの間隔の取り方

ここからは、よく使う部品ごとに、間隔をどう取ればよいかを見ていきます。

どの部品でも「関係の近さ」と「押しやすさ」の2つを軸に考えると迷いにくくなります。

フォームの間隔

フォームでは、ラベルと入力欄のあいだを狭く、項目と項目のあいだを広くして、どのラベルがどの入力欄のものかを一目で分かるようにします。

間隔がすべて同じだと、ラベルが上の入力欄のものなのか、下の入力欄のものなのか、迷ってしまうからです。

NGの見本では、「メールアドレス」というラベルが、上の入力欄と下の入力欄のちょうど中間にあり、どちらの説明なのかがすぐには分かりません。

OKの見本では、ラベルが自分の入力欄にぴったり寄り添い、項目と項目のあいだには広めの余白があるので、「ラベル+入力欄」が1つのまとまりとして見えます。

さらに送信ボタンの前を一段広く空けると、「ここまでが入力、ここからが送信」という区切りも伝わります。

ボタンを並べるときの間隔

ボタンを横や縦に並べるときは、押し間違えないだけの間隔を空け、特に「削除」のように取り消しにくい操作のボタンは、ほかのボタンから少し離して置くと安心です。

ボタン同士が近すぎると、指の太さやちょっとした手のぶれで、隣のボタンに触れてしまうからです。

Webのアクセシビリティの国際的な基準であるWCAG 2.2でも、押す場所の大きさは原則24×24 CSSピクセル以上とされ、それより小さい場合は、周りの部品と十分な間隔を空けることが条件になっています(達成基準 2.5.8 ターゲットのサイズ(最低限)、WAICによる日本語訳)。

この基準の解説には、20×20 CSSピクセルの小さなボタンでも、互いに4 CSSピクセル以上離れていれば基準を満たす、という例が載っています(達成基準 2.5.8 を理解する)。

ただしこれは「最低限」の基準なので、実際のデザインでは、Googleのヘルプにある8dpのように、もう少し余裕を持たせておくと押しやすくなります。

ボタンの内側の余白や押せる範囲の大きさはボタンの内側の余白とは、ボタンのデザイン全体はCTAボタンとは?で解説しています。

リスト・ナビゲーションの間隔

お知らせの一覧やメニューのように、同じ種類の項目が縦に並ぶ部品では、項目同士の間隔をそろえ、1つずつの項目を押しやすい大きさにすることが大切です。

ナビゲーション(サイト内のページを移動するためのメニュー)は、指で次々と押される部品なので、項目がぎっしり詰まっていると狙った項目を押しにくくなります。

NGの見本は、文字と文字のあいだに余白がほとんどなく、押せる範囲も文字の高さぶんしかありません。

OKの見本は、項目ごとに上下の余白を取り、薄い線で区切っているので、どこからどこまでが1つの項目なのかが分かり、押しやすさも上がっています。

リストやメニューでは、項目の外側に空白を作るよりも、項目の内側の余白を広げて「押せる範囲」そのものを大きくするほうが、押し損じが起きにくくなります。
項目と項目のあいだにすき間があると、そこを押しても何も反応しないためです。
OKの見本のように文字の上下に余白を取り、その余白ごと押せる範囲にしておけば、文字の上だけでなく、線と線のあいだのどこを押してもその項目を選べます。

間隔の数値をそろえる

部品同士の間隔は、その場その場で決めるのではなく、あらかじめ使う数値を数段階に絞っておくと、画面全体に統一感が出ます。

同じ関係の部品なのに、あるところは12px、別のところは15pxとばらばらだと、ユーザーは「何か違う意味があるのかな」と感じたり、なんとなく雑な印象を受けたりするからです。

デジタル庁のデザインシステムでは、8 CSSピクセルを基準の単位とし、使う余白の大きさは3〜5段階程度にするのが一般的だと紹介されています(デジタル庁デザインシステム「余白」)。

8が基準によく選ばれるのは、半分にしても割り切れ、画面の表示倍率が変わっても半端な数値になりにくいからです。
たとえば10は半分の半分で2.5と半端になりますが、8なら4、2と整数のままです(8の倍数で余白を決める考え方は8pxグリッドとはで解説しています)。

たとえば、8の倍数から段階を選んで、部品の関係ごとに割り当てると次のようになります。

部品の関係	間隔の例	具体例
とても近い(1つのまとまりの中)	8px	ラベルと入力欄、アイコンと文字
近い(同じ種類の部品が並ぶ)	16px	並んだボタン、カード同士
区切りたい(別の項目・まとまり)	24px	フォームの項目同士
はっきり区切りたい	32px以上	入力欄と送信ボタン、ブロック同士

表の数値は一例で、サイトの文字の大きさや雰囲気に合わせて調整してかまいません。

大切なのは、「同じ関係なら同じ間隔」というルールを決めて、画面のどこでも守ることです(余白のルールの作り方は余白の間隔のルールとはで解説しています)。

CSSで部品同士の間隔を指定する

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

CSSでは、部品を並べる親の要素にgapプロパティを指定すると、中に並んだ部品同士のあいだに、決まった間隔をまとめて空けられます(MDN「gap」)。

次の例は、横に並んだボタンのあいだに16pxの間隔を空ける指定です。

.button-group {
  display: flex;
  gap: 16px; /* ボタン同士の間隔 */
}

部品1つずつに外側の余白(margin)を付けるやり方もありますが、gapなら端の部品の外側に余計な余白ができず、間隔のルールを1か所で管理できます。

デザインツールで言えば、Figmaのオートレイアウトで「間隔」に16と入れ、並んだ部品同士のあいだを一括で16pxにそろえるのと同じ考え方です。

実践のポイント

部品同士の間隔を決めるときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• パソコンの画面でマウスを使って確かめただけで間隔を決めてしまうことがあります。
  マウスのポインターは細かく狙えますが、スマートフォンの指はそうはいきません。
  スマートフォンの実機でも、隣の部品を押し間違えないかを確かめましょう。
• どの部品のあいだも同じ間隔にしてしまい、まとまりが見えなくなることがあります。
  関係の近い部品は狭く、遠い部品は広く、と差をつけましょう。
• 部品の種類ごとに間隔の数値がばらばらになり、画面ごとに雰囲気が変わってしまうことがあります。
  使う数値を数段階に絞り、どの関係にどの数値を使うかを決めておきましょう。
• 内側の余白(パディング)と外側の余白(マージン)を混同し、ボタンの中の余白を削って間隔を作ってしまうことがあります。
  部品の中の余白と、部品同士の間隔は、別々に考えましょう。

よくある質問

• Q. 部品同士の間隔は、最低何px空ければいい?
  A. すべての場面に当てはまる1つの正解はありません。
  押す部品同士なら、WCAG 2.2の基準(小さなボタンでも周りと重ならない間隔を取る)を最低限とし、Googleのヘルプにある8dp程度を目安に、押しやすさを実機で確かめるのがおすすめです。
• Q. 間隔を広くすればするほど使いやすくなる?
  A. 広すぎるのも問題です。
  関係のある部品同士が離れすぎると、まとまりに見えなくなり、かえって分かりにくくなります。
  「押し間違えない」と「まとまって見える」の両方を満たす間隔を探しましょう。
• Q. デザインツールで間隔をそろえるにはどうすればいい?
  A. Figmaなどのデザインツールには、部品を並べたときの間隔を数値で指定できる機能があります。
  Figmaなら「オートレイアウト」で部品同士の間隔(Gap)を数値で決めておくと、部品を追加しても同じ間隔が保たれます(Figma ヘルプ「Guide to auto layout in Figma」(英語))。

まとめ

UIコンポーネントの間隔とは、ボタンや入力欄などの部品同士のあいだの余白のことで、押し間違いを防ぎ、部品のまとまりを伝える役割があります。

関係の近い部品は狭く、遠い部品は広く空け、使う数値を数段階に絞って「同じ関係なら同じ間隔」をそろえると、使いやすく整った画面になります。

まずは自分のスマートフォンで、よく使うアプリやサイトのフォームを開き、ラベルと入力欄、項目同士、ボタンの前の間隔がそれぞれどう違うかを見比べてみましょう。