お問い合わせ

ホワイトスペース

英語表記
White Space
読み
ほわいとすぺーす
別名
余白/ネガティブスペース

要素の周囲に意図的に取る、何も置かない余白。

解説

ホワイトスペースは、ページ内のコンテンツや要素の周囲にある、何も置かれていない領域を指します。埋め残した隙間ではなく、読みやすさのために意図して確保する領域です。「ホワイト」と呼ばれますが、白色である必要はなく、背景が何色であっても、要素が置かれていない部分をホワイトスペースと呼びます。情報を詰め込みすぎると、読む側はどこを見ればよいのか分かりにくくなります。

種類

ホワイトスペースは、大きく次の2種類に分けられます。

  • マクロのホワイトスペース:ページ全体のレイアウトにおける、段落やブロックの間の大きな余白
  • ミクロのホワイトスペース:行間や字間、ボタンの内側の余白など、要素の中の細かい間隔

実務での使われ方

FAQや手順書では、見出しや手順の間に余白を取ります。たとえば、見出しの上を空ける、手順のステップ間を空ける、表のセル内に余白を確保するといった扱いによって、どこからどこまでが一つのまとまりかが目で分かります。ただし、見出しの上下を同じ幅にすると、見出しがどちらの文章に属するのか読み取りにくくなります。そのため、見出しの上を広く、下を狭く取るのが基本の形です。

さらに、余白は読み飛ばしを防ぐ助けになります。画面いっぱいに文字が詰まっていると、顧客は必要な箇所を探す前に読むのをやめることがあります。一方で、手順を1ステップずつ離して置けば、顧客は、いま自分がどの手順を実行しているかを見失いません。たしかに、余白を取ると、1画面に載る情報量は減ります。ただし、問い合わせにつながりやすいのは、スクロールの手間よりも、情報を探せないことのほうだと考えられます。

注意点

余白を削って詰め込みたいという要望には、数字で応じます。「空きがもったいない」「1ページに収めたい」という要望は、社内から出ることがあります。しかし、余白を削って詰め込んだページが読まれず、結局は電話がかかってくれば、費用は別の場所で発生します。したがって、FAQの閲覧数や、記事を見た後の問い合わせ率を見ながら判断すると、見た目の好みではなく結果で話ができます。