文字と画像の間隔とは?近すぎ・離れすぎにならない余白の取り方を初心者向けに解説

文字と画像の間隔の基本

まずは、文字と画像の間隔が何を指すのかと、近すぎるとき・離れすぎるときに何が起きるのかを押さえましょう。

間隔の決め方の土台は、「関係の近いものは近くに置く」という考え方です。

文字と画像の間隔とは

文字と画像の間隔とは、Webページやバナーの中で、文字(見出し・説明文・キャッチコピーなど)と画像を組み合わせて置くときに、両者のあいだに取る余白のことです。

画像の下に説明文を置く、画像の横に文章を並べる、といった配置では、この間隔が「文字と画像がどのくらい結びついているか」を伝えます。

画像の上に文字を重ねる配置では間隔はゼロになるので、代わりに文字と背景の明るさの差(コントラスト)や、画像の端からの距離が大切になります。

近すぎても離れすぎても伝わりにくい

文字と画像の間隔は、近すぎず離れすぎず、「セットに見えるけれど、くっついてはいない」距離にするのが基本です。

近すぎると文字と画像の境目があいまいになって窮屈に見え、離れすぎると別々の情報のように見えてしまうからです。

次の見本は、写真と説明文の組み合わせを、間隔だけ変えて3つ並べたものです。

見本Aは、文字が写真の下端にくっついていて、どこまでが写真でどこからが文章なのかが一瞬分かりにくく、窮屈な印象です。

見本Cは、写真と文字のあいだが大きく空いているため、文字が写真の説明なのか、別の話題の見出しなのか迷ってしまいます。

見本Bのように、写真と文字のあいだに少しだけ余白を取ると、1つのまとまりとして自然に読めます。

関係の近さで距離を決める

文字と画像の距離は、「その文字が、どの画像の説明なのか」がはっきり伝わるように決めます。

人は、近くにあるもの同士を同じグループだと感じやすいからです。
デザインではこれを「近接」(関係のあるものを近くに置くこと)と呼びます。
写真のすぐ下に説明文を置くだけで「この写真の説明だ」と伝わるのは、この働きのおかげです(近接の考え方は近接の原則とはで詳しく解説しています)。

特に、写真と説明文の組み合わせを縦に繰り返し並べるときは、説明文と自分の写真との距離を、次の写真との距離よりはっきり狭くすることが大切です。

NGの見本では、「いちごジャム(春限定)」という文字が、黄色い写真と緑の写真のちょうど中間にあり、どちらの写真の説明なのかがすぐには分かりません。

OKの見本では、説明文が自分の写真に8pxで寄り添い、次の組み合わせとのあいだには28pxの広めの余白があるので、「写真+説明文」が1組ずつのまとまりに見えます。

このように、文字と画像の間隔は単独で決めるのではなく、周りのまとまり同士の間隔と比べて決めると失敗しにくくなります。

配置ごとの文字と画像の間隔の取り方

文字と画像の組み合わせ方には、画像の下に文字を置く、横に並べる、上に重ねる、という主に3つのパターンがあります。

パターンごとに、間隔の取り方のコツを見ていきましょう。

画像の下に文字を置くとき

画像の下に見出しや説明文を置くときは、画像と文字のあいだを、文字の行と行のあいだより少し広く取るのが目安です。

画像と文字の間隔が文字の行間より狭いと、画像と文字がくっついて見え、反対に広すぎると、見本Cのように別々の情報に見えてしまうからです。

よく紹介される目安に、「本文の1行分の高さ(文字の大きさ×行間)くらい空ける」というものがあり、最初の基準として試しやすい考え方です。

行間1.5とは、文字の大きさの1.5倍の高さを1行ぶんに使う設定のことです。
たとえば16pxの文字を行間1.5で組んでいるなら、1行の高さは16px×1.5=24pxなので、24px前後から試して、まとまりに見えるかを確かめます。

写真の補足として小さく添える一言(キャプション)の場合は、写真との結びつきをより強く見せたいので、これより狭めにしてもかまいません。

画像と文字を横に並べるとき

画像と文章を横に並べるときは、画像と文字のあいだに、文字が画像に押しつけられて見えないだけの余白を取り、画像の上端と文字の上端の位置をそろえます。

横並びでは、文字の行の始まりが画像のすぐ横にくるため、間隔が狭いと、どの行も画像に貼りついているように見えて読みにくくなるからです。

また、上端の位置がずれていると、画像と文字が別々に置かれたように見え、まとまりが弱くなります。

スマートフォンなどの狭い画面では、横に並べていた画像と文字を縦に積むことが多いので、そのときは「画像の下に文字を置く」場合の間隔に切り替えます。

配置	間隔の考え方	気をつけること
画像の下に文字	行間より少し広く(1行分の高さが目安)	次のまとまりとの間隔より狭くする
画像の横に文字	文字が画像に押しつけられない程度に空ける	画像と文字の上端をそろえる
画像の上に文字	間隔はゼロ	コントラストと、画像の端からの距離で読みやすさを確保する

画像の上に文字を重ねるとき

画像の上に文字を重ねるときは、文字と背景の明るさの差(コントラスト)を十分に取り、文字を画像の端に寄せすぎないことが大切です。

重ねる配置では文字と画像の距離がゼロになるので、写真の明るい部分や細かい模様の上に文字がのると、背景に溶け込んで読めなくなるからです。

Webのアクセシビリティの国際的な基準であるWCAG 2.2では、本文の文字と背景のコントラスト比を4.5:1以上にすることが求められています(達成基準 1.4.3 コントラスト(最低限)、WAICによる日本語訳)。

コントラスト比とは、文字の色と背景の色の明るさがどれだけ違うかを、1:1(同じ色どうし)から21:1(白地に黒い文字)までの数値で表したもので、数値が大きいほど文字がくっきり読めます。
写真は場所によって明るさが違うので、文字が重なるいちばん明るい部分で確かめるのがコツです(コントラスト比の確かめ方は色のアクセシビリティとはで解説しています)。

次の見本は、写真に見立てた背景の上に、同じ文字を重ねたものです。
NGの見本は、読みにくさを見せるために、あえてコントラストの基準を満たさない組み合わせにしています。

NGの見本は、白い文字が明るい背景に溶け込んでいるうえ、画像の角に詰まっていて、窮屈で読みにくくなっています。

OKの見本は、写真の上に半透明の暗い膜(オーバーレイ)を重ねて文字との明るさの差を広げ、文字を画像の端から離して置いているので、すっきり読めます(バナーの端からどれだけ離すかはバナーの外側の余白とはで解説しています)。

文字を重ねる位置や色の選び方は、写真と文字色の組み合わせとは?で詳しく解説しています。

実践のポイント

文字と画像の間隔で陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• 画像を大きく見せたくて、文字とのあいだの余白を削りすぎてしまうことがあります。
  文字が画像に埋もれて見えるので、画像を少し小さくしてでも余白を残しましょう。
• 余白をたっぷり取ろうとして、文字と画像を離しすぎてしまうことがあります。
  関係のある文字と画像は、ほかのまとまりとの間隔より近くに置きましょう。
• 画像の説明文が、上下の画像のちょうど真ん中に置かれ、どちらの説明か分からなくなることがあります。
  説明文は、説明している画像のほうへはっきり寄せましょう。
• 画像の上に文字を重ねるとき、パソコンの画面では読めたのに、スマートフォンでは写真の明るい部分に文字が重なって読めなくなることがあります。
  画面の幅が変わると写真の見える範囲や文字の位置も変わるので、スマートフォンでも確かめましょう。

よくある質問

• Q. 文字と画像の間隔は、何pxにすればいい?
  A. 決まった正解はありません。
  画像の下に文字を置くなら、本文の1行分の高さを目安に試し、次のまとまりとの間隔より狭くなっているかを確かめるのがおすすめです。
• Q. キャッチコピーと商品画像の間隔は、どう決めればいい?
  A. 伝えたい順番に合わせて決めます。
  キャッチコピーと商品画像を1つのメッセージとして見せたいなら近づけ、キャッチコピーをまず単独で読ませたいなら、少し広めに空けて目立たせます。
• Q. 画像に文字を重ねるのと、分けて置くのはどちらがいい?
  A. 読みやすさを優先するなら、分けて置くほうが失敗しにくい方法です。
  重ねるとインパクトのある見せ方ができますが、コントラストの確保が必要になるので、写真の落ち着いた部分を選んで文字を置きましょう。

まとめ

文字と画像の間隔とは、文字と画像を組み合わせて置くときに両者のあいだに取る余白のことで、近すぎると窮屈に、離れすぎると別々の情報に見えてしまいます。

関係のある文字と画像はほかのまとまりより近くに置き、画像の下・横・上という配置に合わせて、間隔やコントラストを調整するのが基本です。

まずは、よく見るネットショップやニュースサイトを開き、写真と説明文のあいだの距離が、次の写真との距離と比べてどう違うかを見比べてみましょう。