余白の改善とフィードバックとは?窮屈・間延びの原因を見つけて直す方法

余白の改善とフィードバックの基本

まずは、余白の改善とフィードバックとは何を指すのか、そしてなぜ必要なのかを押さえましょう。

余白の改善とフィードバックとは

余白の改善とフィードバックとは、自分で作ったデザインを見直し、「なんとなく窮屈」「なんとなく間延びしている」という感覚を具体的な余白の問題として言葉にし、修正していく取り組みのことです。

余白とは、文字・画像・ボタンなどの要素の周りや、要素と要素の間にある空きのことです。

たとえば「なんとなく窮屈」を「見出しと本文の間が狭い」「画面の端の空きが足りない」のように、どこの空きが原因かまで特定してから直します。

フィードバックとは、自分の作ったものに対して、ほかの人から意見や感想をもらうことです。

つまりこの取り組みは、自分で見直すことと、人の目や公開後の反応で確かめることを組み合わせて、余白を良くしていくものです。

なぜ改善とフィードバックが必要なのか

改善とフィードバックが必要なのは、余白には唯一の正解がなく、自分ひとりの感覚だけで判断していると、同じ偏りを繰り返してしまうからです。

たとえば「空いている場所があると、つい何かで埋めたくなる」「どの間隔も同じくらいにしてしまう」といった癖は、自分ではなかなか気づけません。

また、「なんかダサい」「なんかいい」という感覚的な感想だけでは、どこをどう直せばよいかが分からず、改善につながりません。

違和感を余白の問題に置き換える力を育てることが、次の制作で同じ失敗をしないための近道になります。
余白の学び方の全体像は、デザイン初心者のための余白学習ロードマップにまとめています。

余白を改善する方法

余白の改善は、「違和感を原因に置き換える→余白だけを変えた案を比べる→自分でチェックする→人に見てもらう→公開後に確かめる」という流れで進めます。

一つずつ見ていきましょう。

「窮屈」「間延び」を余白の原因に置き換える

改善の第一歩は、「窮屈」「間延び」という感覚を、どの余白が原因なのかに置き換えることです。

原因が分からないまま全体の余白を一律に広げたり詰めたりすると、別の場所のバランスが崩れて、かえって悪くなることがあるからです。

まずは、同じカードを余白だけ変えて並べた見本を見てみましょう。

窮屈なNGの見本は、余白の「量」が全体的に足りていない状態です。

一方、間延びしたNGの見本は余白の量は十分ですが、関係のある要素の間まで広く空けてしまい、「どれとどれが仲間か」という余白の「差」がなくなっています。

OKの見本では、関係の強い見出し・説明・価格を近づけ、ボタンの前を広めに空けているので、内容とボタンの2つのまとまりがはっきり分かります(人が近くにあるものどうしを同じグループとして見る性質は「近接の原則」と呼ばれ、ゲシュタルトの法則の1つとして知られています。詳しくは近接の原則とは?で解説しています)。

このように、窮屈・間延びには「量が足りない・多すぎる」と「差がついていない」の2種類の原因があります。
よくある違和感と、疑うべき余白の対応を表にまとめました。

感じる違和感	疑うべき余白	試す調整の例
全体が息苦しい	画面の左右の余白、カードやボタンの内側の余白	画面の端やカードの枠の内側を広げる
どこからどこまでがひとまとまりか分からない	まとまりの中の距離と、まとまりの間の距離	まとまりの中を詰め、まとまりの間を広げて差をつける
見出しが前の文章にくっついて見える	見出しの上と下の余白	見出しの上を広く、下を狭くする
スカスカで、まとまりがない	関係のある要素どうしの距離	関係の強い要素の間を詰める
ボタンが目立たない	ボタンの周りの余白	ボタンの前後をほかの要素より広く空ける
なんとなく統一感がない	同じ関係なのにばらばらな間隔	同じ関係の場所は同じ間隔にそろえる
文章が詰まって読みにくい	行と行の間(行間)	本文の行間を広げる

「なんとなく窮屈」と感じたら、表の上から順に、要素の間・まとまりの間・画面の端のどれが原因かを一つずつ確かめていきましょう。

ボタンの周りの余白で視線を集める考え方はCTAボタンとは?、行間の決め方は「行間と行長」の黄金ルールで解説しています。

余白を1か所だけ変えた案を並べて比べる

原因の見当がついたら、その余白だけを変えた案をいくつか作り、並べて比べましょう。

1つの案だけを見ていると良し悪しを判断しにくいですが、並べると違いがはっきり分かるからです。

ポイントは、1回の比較で変える余白は1か所だけにすることです。
いくつもの余白を一度に変えると、どの変更が効いたのか分からなくなります。

たとえば、見出しの上下の余白だけを変えた2つの案を比べてみましょう。

A案は、「お届けについて」という見出しが、上の文章と下の文章のどちらに属するのかが分かりにくくなっています。

B案は、見出しの上を広く、下を狭くしたので、見出しとその下の文章が1つのまとまりに見え、話題の切り替わりがはっきりしています。

変えたのは見出しの上下の余白だけなので、「良くなった理由は見出しの上下の差だ」と自信を持って言えます。

極端に狭い案や広い案もあえて作って並べると、「ちょうどいい」範囲がつかみやすくなります。

Figmaで作るなら、オートレイアウト(並べた要素どうしの「間隔」や枠の内側の「パディング」を数値で指定できる機能)で組んでおくと、フレームを複製して数値を打ち替えるだけで、余白を1か所だけ変えた案を手早く作れます(Figma Learn「オートレイアウトのガイド」)。

自分でできる余白のチェック方法

人に見せる前に、自分ひとりでもできる見直し方があります。

作っている最中は細部ばかり見てしまうため、意識的に見方を変えることで、余白の問題に気づきやすくなります。

• 文字を読まずに「かたまり」だけを見る:画面を縮小したり、目を細めたりして文字を読めない状態にすると、要素のかたまりと空きの配置だけが見えてきます。
  伝えたいまとまりの数と、見えたかたまりの数が一致しているかを確かめましょう。
• 間隔を数値で書き出す:見出しと本文、カードどうし、セクションどうしなどの間隔を書き出し、同じ関係の場所が違う数値になっていないかを確かめます。
  「16pxのはずが、ここだけ13px」のような、目では気づきにくいずれが見つかります。
• 実際の画面で見る:デザインツールの中で見るのと、スマートフォンで見るのとでは、画面の端の空きの感じ方が変わります。
  画像として書き出して自分のスマートフォンに送り、全画面で表示してみると手軽に確かめられます。
  スマートフォンでは、ボタンやリンクの周りを詰めすぎると、見た目が窍屈になるだけでなく、指で押し間違えやすくなります(押せるものどうしの間隔はUIコンポーネントの間隔とは?、押しやすい大きさの目安はボタンの内側の余白とは?で解説しています)。
• 時間を置いて見る:作った直後は目が慣れてしまっています。
  一晩置くなど時間を空けてから見ると、初めて見る人に近い目で確認できます。

文字組みの見直し方も含めた自分でのチェック方法は、文字組みの改善とフィードバックとはでも紹介しています。

第三者からフィードバックをもらう

自分でのチェックが終わったら、ほかの人に見てもらいましょう。

作った本人は内容を知っているため、初めて見る人がどこで迷うかに気づきにくいからです。

余白についての意見をもらうコツは、「良い・悪い」の感想ではなく、「どう見えたか」を答えてもらう質問をすることです。

漠然とした聞き方	余白の問題が分かる聞き方の例
このデザイン、どう?	どこからどこまでが、ひとまとまりに見えた?
見やすい?	最初に目に入ったのはどこ?次はどこを見た?
おかしいところある?	窮屈に感じた場所、スカスカに感じた場所はある?
ボタン、分かる?	次に何をすればいいか、すぐ分かった?

「どこからどこまでがひとまとまりに見えたか」を聞くと、相手が感じたまとまりと、自分が意図したまとまりのずれが分かります。
ずれていた場所は、まとまりの中と間の余白の差が足りない可能性が高いと考えられます。

「最初に目に入ったのはどこか」は、余白による視線の流れが狙いどおりかを確かめる質問です(視線の流れの考え方は視線誘導とはで解説しています)。

相手から「なんか窮屈」という感覚的な答えが返ってきたら、「どのあたりで?」と聞き返し、教えてもらった場所を上の表と照らし合わせて原因に置き換えましょう。

なお、意見をもらったら、その場で言い返したり説明したりせず、まずは最後まで聞くことが大切です。
フィードバックはあなた自身ではなくデザインに向けられた、より良くするための情報なので、取り入れるかどうかは後で落ち着いて判断しましょう。

公開後も反応を確かめ、次の制作に活かす

余白の改善は、デザインを公開したら終わりではありません。

実際の案件では、公開後にボタンのクリック数や問い合わせの数、ページを途中で閉じた人の割合などから、狙いどおりに情報が伝わっているかを確かめましょう。

ただし、こうした数値は余白だけでなく、文章の内容や色、時期などの影響も受けます。
数値の変化をそのまま余白のせいと決めつけず、「余白を変えたあとに変化があったか」を一つの手がかりとして見ましょう。

余白だけを変えた2つの案を同じ期間に表示して比べる「A/Bテスト」という方法もあります(進め方は文字組みの改善とフィードバックとはで解説しています)。

分かったことを「カードの内側は広めのほうが読まれた」のようにメモしておくと、次の制作で同じ迷いをせずに済みます。

実践のポイント

余白の改善とフィードバックで陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 窮屈だからといって、すべての余白を同じだけ広げてしまうことがあります。
  余白の量は増えても差がつかないので、間延びした印象に変わるだけになりがちです。
  広げる場所と、むしろ詰める場所を分けて考えましょう。
• 空いている場所を見ると、文字や飾りで埋めたくなることがあります。
  その空きが、まとまりを区切ったり大事な要素を目立たせたりしている場合もあるので、埋める前に「この空きは何のためにあるか」を考えましょう。
• 「なんか窮屈」という感覚的な指摘で止まってしまい、どの余白の問題かまで掘り下げないことがあります。
  原因の場所まで特定しないと、次の制作に活かせません。
• フィードバックを「自分を否定された」と受け止めてしまうことがあります。
  デザインをより良くするための情報として受け取りましょう。

よくある質問

• Q. 余白は何pxにすれば正解?
  A. どんなデザインにも当てはまる正解の数値はありません。
  大切なのは数値そのものより、「関係の強いものは近く、弱いものは遠く」という差がついているかどうかです。
  迷ったら、まとまりの間の余白を、まとまりの中の余白よりはっきり広くした案をいくつか作り、並べて比べるところから始めましょう。
• Q. フィードバックをくれる人が周りにいない。
  A. まずはこの記事で紹介した、かたまりだけを見る・間隔を書き出すなどの自分でできるチェックから始めましょう。
  家族や友人など、デザインに詳しくない人に「どこからどこまでがひとまとまりに見えた?」と聞くだけでも、十分なフィードバックになります。
• Q. 余白を広げたら、情報が入りきらなくなった。
  A. 余白を削って詰め込む前に、載せる情報を減らせないかを考えましょう。
  本当に伝えたいことに絞ると、余白を保ったまま大事な情報を目立たせられます。

まとめ

余白の改善とフィードバックとは、「なんとなく窮屈」「なんとなく間延び」という感覚を具体的な余白の問題に置き換え、自分の見直しと人の目、公開後の反応で確かめながら余白を良くしていく取り組みです。

違和感を「量の過不足」か「差がついていないか」に分けて原因の余白を探し、1か所だけ変えた案を並べて比べ、「どこがひとまとまりに見えたか」を人に聞くことがポイントです。

まずは最近作ったデザインを1つ選び、見出しの上下やカードの内側など1か所の余白だけを変えた案を作って、元の案と並べて見比べてみてください。