ホワイトスペースとは|『余白がコンテンツ』という思想の本質と意図的な空白設計4原則

『ホワイトスペース』って、デザインの世界でなんとなく「余白のこと」って理解してませんか?

株式会社Cameen 西村温裕ことおんゆーです。

近年、UI/UXデザインという言葉が一般化し、AppleやGoogleのプロダクトを見るたびに「なんでこんなに見やすいんだろう」と感じる方が増えました。LP制作・コーポレートサイト・SaaSのダッシュボード、こういうデザインの世界で「余白の取り方が上手い」という評価をよく耳にします。

でも、いざ「ホワイトスペースって何?」「余白とどう違う?」「どれくらい空けるのが正解?」と聞かれると、答えに詰まる方が多いんですよね。「空白のこと」という認識で止まって、ホワイトスペースの本質的な役割まで理解している人は意外と少ない。これ、自分だけだと思ってませんか?

うちの事業でLP・コーポレートサイト・教材ページを5年以上運用してきて、ホワイトスペースの設計を変えるだけでコンバージョン率が1.3倍以上動いた事例を何度も目撃しました。話を深掘りしていくと、業界の上位プレイヤーは全員「余白は装飾ではなく構造である」と認識して設計している、という共通パターンが見えてきたんです。

もう1つ繰り返し観察したのは、「ホワイトスペースを『デザイナーのセンス』だと思い込んで、自分で設計できない非デザイナー」が多いという事実。実際は4つの原則と数値ルールに従って機械的に設計できる領域なんですが、「センス」という言葉に阻まれて学習を諦めてしまう人が後を絶ちません。

今回はその「今さら聞けないホワイトスペース」を、表面的な「余白を空けましょう」ではなく、構造の核心と4原則・5STEPの設計手順まで深掘りしていきます。読み終わる頃には、自分のLPやコーポレートサイトで「どこに・どれだけ・なぜ余白を入れるか」を、紙に書き出せるレベルになっているはずです。

結論:ホワイトスペースの核心は「空白」ではなく「要素間の関係性とヒエラルキーを表現するデザイン言語」

ホワイトスペースの本当の正体は、「要素間の関係性とヒエラルキーを意図的な空白で表現する、視覚的なデザイン言語」のことです。単なる「何もない場所」ではなく、「ここに何も置かない」という能動的な設計判断の集合体。デザイナーが余白を空けるとき、それは「ここに何も置かないことで、隣の要素を強調する」「ここに距離を取ることで、別グループだと宣言する」という積極的な意思表示なんです。

業界の体感として、上位プレイヤーが作るデザインは「余白の量」ではなく「余白の使い分け」で差をつけています。同じ画面サイズの中で、見出し直下は16px、本文段落間は24px、セクション境界は80px、こういう数値階段を意図的に設計し、視覚的に「ここは同じグループ」「ここは別セクション」を表現しています。

ホワイトスペースには「マイクロ(Micro)」と「マクロ(Macro)」の2層があります。マイクロホワイトスペースは文字間・行間・要素間の小さな余白(2〜24px)で、可読性とグルーピングを担います。マクロホワイトスペースはセクション間・コンテナ周囲の大きな余白(48〜200px)で、ページ全体の呼吸感とブランド人格を表現します。両方を意図的に設計することで、初めて「プロのデザイン」になります。

ホワイトスペースの真の価値は「読み手の認知負荷を下げる」こと。情報が詰め込まれた画面では、脳が「どこから読むか」「何が重要か」を毎回判断する必要があり、認知コストが高くなります。一方、余白で関係性が整理された画面では、視線の流れが自動的に決まり、認知コストがゼロに近づく。Apple・Muji・Stripe、こういうブランドがプロダクト・パッケージ・WebサイトでホワイトスペースをLLO設計しているのは、ユーザーの脳を疲れさせないためです。

なぜ「White Space」と名付けられたのか

もう少し深く掘ります。なぜこの概念は「ホワイトスペース(White Space)」と名付けられたのか。命名の背景を整理します。

「ホワイトスペース」は、もともと印刷時代の用紙余白に由来する用語です。書籍・新聞・雑誌のレイアウトで、文字や図版を配置していない「白い紙の部分」をホワイトスペースと呼びました。紙が白いから「白い空間」、シンプルに名付けられた業界用語が、デジタルデザインに引き継がれて現代まで使われています。

ホワイトスペースの概念が「装飾ではなく構造」として理論化されたのは、20世紀後半。情報デザインの権威Edward Tufte(エドワード・タフテ)の『情報のデザイン(The Visual Display of Quantitative Information)』が決定的な貢献を果たしました。タフテは「データ・インク・レシオ(必要な情報以外を削ぎ落とす比率)」という概念を提唱し、無駄な装飾を消すことで読み手の理解が深まることを実証しました。

同時期に、ドイツの工業デザイナーDieter Rams(ディーター・ラムス)が「Less, but better(より少なく、しかしより良く)」という設計哲学を打ち立てました。Bragdunの家電製品(計算機・ラジオ・時計)に余白を大胆に取り入れ、機能の本質だけを残すデザインを実現。これがApple創業者Steve Jobsに大きな影響を与え、現代のApple製品の余白哲学につながっています。

日本では、無印良品(MUJI)が「余白の美」を商品とパッケージで体現してきました。商品パッケージに大胆な余白を入れ、ロゴと商品名以外は何も載せない、こういう設計が「丁寧な暮らし」「シンプルな美しさ」のブランド人格を作り上げてきました。日本の伝統美術(掛け軸・庭園・茶室)に流れる「間」の思想とも通底しています。

現代のデジタルデザインで「ホワイトスペース」が再び脚光を浴びたのは、2010年代のフラットデザイン革命とモバイルファースト時代です。Appleがスキューモーフィズム(立体的な装飾)からフラットデザインへ移行し、Googleがマテリアルデザインを発表し、シンプルさが業界標準になりました。装飾を削ぎ落とした結果、残ったのは「要素」と「余白」だけ。だからこそ「余白の設計」が決定的に重要な領域になったんです。

呼び方も時代と共に進化しています。印刷時代は「余白(margin/padding)」、Webデザイン初期は「ホワイトスペース」、現代UIデザイン理論では「ネガティブスペース(Negative Space)」とも呼ばれます。ネガティブスペースは「メイン要素(ポジティブ)に対するもう一方の空間」という意味で、「空白も実は要素の一部」という考え方が反映された用語です。

ホワイトスペース設計の現場で何が起きているか

ここまで「ホワイトスペースとは何か」を整理しましたが、実際の設計現場では何が起きているのか。プロのデザイナーが画面を設計するプロセスを、5段階で見ていきましょう。

段階1: コンテンツ階層整理(情報のグルーピング)

最初の段階で、デザイナーが何をしているか。それは「画面に載せる要素を、関係性で分類する」作業です。タイトル・サブタイトル・本文・画像・CTAボタン、こういう要素を並べたとき、「これとこれは同じグループ」「これは別のセクション」と関係性を整理します。

この段階で読み手の頭の中では、まだ「情報のかたまり」が認識されていません。デザイナーは「読み手が画面を見たとき、どの順番で・どのグループ単位で・どの優先度で情報を受け取るか」を先回りして設計する必要があります。ホワイトスペース設計の成否はこの段階の解像度で7割決まる、というのが業界の通説です。

段階2: 余白規則設計(数値階段の決定)

次の段階で、デザイナーは「余白の数値階段」を決定します。「同一グループ内は8px、関連グループ間は16px、セクション間は24〜48px、ページ余白は80〜120px」というように、4の倍数や8の倍数で階段状の余白ルールを設計します。

読み手の頭の中では「近いものは関係がある、遠いものは関係がない」という認識が無意識に動きます。これはゲシュタルトの法則(近接の原則)と呼ばれる心理現象。8pxと24pxの余白差は、実は「同じグループ」と「別グループ」を視覚的に宣言しています。読み手は意識しないまま、余白の数値で情報を分類しているんです。

段階3: グリッド設定(横軸の整列ルール)

3段階目で、デザイナーは横方向の整列ルール(グリッド)を設定します。PCなら12カラム、モバイルなら4カラム、というように画面を縦に等分し、要素を整列させる軸を作ります。グリッドはホワイトスペースの「縦軸の規則」と「横軸の規則」を両立させる骨格です。

読み手の頭の中では「整列している=信頼できる」「ガタガタ=雑」という認識が動きます。グリッドに沿って要素が並んでいると、読み手は無意識に「丁寧に設計されたコンテンツ」だと判断し、内容への信頼が高まります。逆に、グリッドが崩れていると「素人っぽい」「雑な情報」と判断し、内容を信用しなくなります。

段階4: 適用(個別要素への余白配置)

4段階目で、デザイナーは具体的な画面に余白規則を適用していきます。見出し直下のmargin-top、本文段落間のmargin-bottom、カードコンポーネントのpadding、セクション境界のmargin-y、こういう個別要素に決定済みの数値階段を当てはめます。

読み手の頭の中では、ここで初めて「画面の構造」が見え始めます。タイトルと本文の距離、本文と画像の距離、画像とCTAボタンの距離、こういう個別の余白が組み合わさって「画面の呼吸感」を作り上げます。読み手は意識しないまま「読みやすい」「目が疲れない」「重要な要素がわかる」と感じるようになります。

段階5: 可読性検証(実機での確認とAB調整)

最後の段階で、デザイナーは実機(PC・スマホ・タブレット)で表示確認を行い、可読性を検証します。「スマホでは余白が多すぎてスクロールが長すぎないか」「PCでは余白が少なすぎて窮屈に見えないか」を実機目線で確認します。

読み手の頭の中では、最終的に「全体として違和感がない」状態が完成します。一つ一つの余白は意識されませんが、全体として「整っている」「プロの仕事だ」という印象が残ります。これがホワイトスペース設計のゴール。読み手が余白の存在に気づかないまま、認知負荷ゼロで情報を受け取れる状態を作るのが、デザイナーの最終目標です。

身近な話で全体像をつかむ

ここまでデザインの話をしてきましたが、ちょっと身近な話で全体像を掴み直しましょう。デザインの世界の話だと「自分には関係ない」と感じやすいんですが、実はホワイトスペースの本質は日常のあらゆる場所に潜んでいます。

高級寿司屋のカウンターを思い浮かべてください。寿司職人が握った1貫の寿司が、白い長皿の中央にポツンと置かれている。皿の両側には何もなく、ただ広い白い空間が広がっています。これ、まさにホワイトスペース設計そのものなんです。

同じ寿司を、安い回転寿司の小さな皿に3貫ぎゅうぎゅうに詰めて出されたら、どう感じるか。「あ、これは大衆向けの料理だな」と無意識に判断します。逆に、広い皿に1貫だけ置かれた寿司は、「これは1貫1貫を味わうべき高級料理だ」と無意識に判断します。料理そのものの味は同じでも、皿の上の余白(=ホワイトスペース)が、料理の格と価値を決定しているんです。

美術館の作品配置も同じです。ルーブル美術館やMoMAのような世界トップクラスの美術館では、絵画と絵画の間に2〜3メートルの距離を取って展示します。1点1点の作品が、広い壁の中で「呼吸している」状態を作るんです。狭い空間にぎゅうぎゅうに絵画を詰め込んだら、それは美術館ではなく倉庫になってしまいます。

もうひとつ、高級ブランドショップを思い浮かべてください。エルメスやルイ・ヴィトンの店舗では、店内のスペースに対して商品の数が極端に少ない。1つのバッグが、広い棚の中央にライトを浴びて置かれているだけ。これに対して、ファストファッションの店舗では、棚にぎっしり商品が詰め込まれています。ブランドの価値・客単価・客層が、まさに「店内のホワイトスペース量」で表現されているんです。

つまり、ホワイトスペースは「装飾」ではなく「価値の宣言」。広い余白は「これは重要だ」「丁寧に作られている」「ゆっくり味わってほしい」というメッセージを、無意識のうちに読み手・観客・顧客に伝えています。これがLPやコーポレートサイトでも全く同じ構造で機能しているんです。

逆も真。情報をぎゅうぎゅうに詰め込んだLPは「とにかく数で押す薄利多売型」のブランドメッセージを伝えてしまいます。広い余白を持つLPは「1つ1つの言葉に重みがある高単価・専門特化型」のブランドメッセージを伝えます。どちらが良い悪いではなく、自分のビジネスがどちらの人格を表現したいかで余白量を設計する、という考え方です。

ホワイトスペース設計の4原則

業界の上位プレイヤーが共通して採用している、ホワイトスペース設計の4原則を整理します。1つずつ独立した原則として理解し、自分の設計に1つずつ落とし込んでいくのが正攻法です。

原則1: 要素間の関係性を余白で表現する(近接の原則)

第1の原則は「近いものは仲間、遠いものは別人」というシンプルなルールです。同じグループに属する要素は近く配置し、別グループの要素は遠く配置することで、読み手に「ここは同じ話」「ここから別の話」を視覚的に伝えます。

具体例: 見出し直下の本文は8〜12pxの近距離、本文段落間は16〜24pxの中距離、セクション境界は48〜80pxの遠距離、こういう階段状の余白ルールを設計します。8pxと80pxの違いは10倍ですが、これが「ここは同じグループ」「ここから別セクション」という視覚言語になります。

この原則を無視すると、関連する情報がバラバラに見え、関係ない情報が同じグループに見えてしまいます。読み手は「どこからどこまでが1つの話なのか」を毎回判断する必要があり、認知コストが跳ね上がります。逆に、近接の原則に従って余白を設計すれば、読み手は無意識に「グループ」を認識し、すいすいと情報を消化できます。

原則2: 優先度ヒエラルキーを余白量で表現する

第2の原則は「重要なものほど周囲に大きな余白を取る」というルール。CTAボタン・キャッチコピー・メインビジュアル、こういう「絶対に見てほしい要素」の周囲には、他の要素より広い余白を確保します。

具体例: LPのファーストビューで、メインキャッチコピーの上下に120〜200pxの余白を取り、その他のセクションは48〜80pxにする。視覚的に「ここが一番重要」というメッセージが、文字を読まなくても伝わります。これは美術館で重要な作品を広い壁の中央に1点だけ展示するのと同じ仕組みです。

この原則を無視すると、画面上の全ての要素が均等な余白を持ち、優先度がフラットに見えてしまいます。読み手は「どこに注目すれば良いかわからない」状態になり、最終的に何も覚えていない・何のアクションも起こさない結果になります。優先度をヒエラルキーで設計することで、読み手の視線を意図的にコントロールできるんです。

原則3: 呼吸スペースで読み手の疲労を低減する

第3の原則は「画面に余白を入れることで読み手の脳を休ませる」というルール。長文記事・LP・教材ページなど、情報量の多いコンテンツでは、定期的に「視覚的な休憩スペース」を入れることで読み手の認知疲労を防ぎます。

具体例: ブログ記事で、3〜4段落ごとに画像や見出しを入れて視覚的なリズムを作る。LPで、セクション間に48〜80pxの余白を取り、ユーザーが「ここまでが1セット」と無意識に区切れるようにする。教材ページで、章末に大きな余白を入れて「ここで一旦考える時間を取って」というメッセージを送る。

この原則を無視して情報を詰め込みすぎると、読み手の脳はパンクします。情報密度が高すぎるページは、最後まで読まれることが極端に減ります。業界の体感では、適切な呼吸スペースを設計したページは、詰め込みすぎたページに比べて読了率が1.5〜2倍以上動く、と言われています。読み手を「疲れさせない」設計が、最終的にコンバージョン率に直結するんです。

原則4: ブランドの人格を余白量で表現する

第4の原則は「余白の総量で、ブランドが伝えたい人格を表現する」というルール。高級・専門・落ち着いたブランドは余白を大胆に取り、親しみやすい・賑やか・大衆向けブランドは余白を少なめにする。余白量そのものが、ブランドメッセージになります。

具体例: Apple・Stripe・MUJIのWebサイトは、画面の60〜70%が余白で占められている。「丁寧」「上質」「専門性」というブランド人格を、余白量で表現しています。一方、楽天・Amazon・Yahooのトップページは、情報密度が高く余白が少ない。「親しみやすい」「探しやすい」「何でも揃う」という大衆向け人格を、情報密度で表現しています。

この原則は「正解」がないので、自分のビジネスがどんな人格を表現したいかを最初に決める必要があります。高単価・専門特化を狙うなら余白を大胆に、薄利多売・大衆向けを狙うなら余白を最小に。中間のブランドはどっち付かずで失敗するので、明確に振り切るのが正攻法です。

わかりますか?ホワイトスペース設計は、4つの原則を組み合わせて成立しています。1原則ずつ理解して、自分の画面で実践していけば、非デザイナーでもプロレベルの余白設計が可能です。「センス」という言葉に騙されず、「原則の組み合わせ」として認識するのが第一歩です。

ホワイトスペース設計で失敗する典型3パターン

うちの事業で受講生のLPやコーポレートサイトを5年以上見てきた中で、ホワイトスペース設計の失敗はほぼこの3パターンに集約されます。1つずつ整理します。

典型例: ファーストビューに「キャッチコピー・サブコピー・実績数字3つ・お客様の声・CTAボタン・注意書き・プロフィール」を全部詰め込む。結果、読み手は「どこから読めば良いのかわからない」状態になり、3秒で離脱します。本来は「キャッチコピー」と「CTAボタン」の2つだけに絞り、他の要素は下のセクションに展開すべきです。

対策: 1画面1メッセージのルールを徹底する。1つのファーストビュー・1つのセクションでは、1つのメッセージだけを伝える。複数のメッセージを伝えたいときは、複数のセクションに分割する。余白を増やすことで読了率が上がり、結果的に滞在時間とコンバージョン率が改善します。

典型例: ブログ記事で「見出し-本文-画像-本文-見出し-本文」全ての要素が均等な16pxで並んでいる。結果、見出しと本文の関係性が見えず、画像が本文のどちらに属するかわからず、読み手は文脈を読み解く労力を強いられます。本来は「見出し直下の本文は8px(密接)」「次の見出しまでは48px(離す)」と階段状の余白で関係性を表現すべきです。

対策: 余白の数値階段(8/16/24/48/80px)を事前に決めて、要素間の関係性に応じて使い分ける。同一グループ内は8px、関連グループ間は16px、別セクションは48〜80pxという階段ルールを徹底します。均等ではなく階段状にすることで、読み手の脳が無意識にグループを認識し、認知負荷が劇的に下がります。

典型例: モバイルLPで、CTAボタンと「キャンセル」リンクが8pxの間隔で並んでいる。指の太さ(8〜10mm)を考えると、誤タップで「キャンセル」を押してしまうユーザーが続出します。Material Designでは最小タッチターゲット48×48pxを推奨し、隣接要素間は最低8px(理想は16px以上)を確保するルールがあります。

対策: モバイルの最小タッチターゲットは48×48px以上、隣接ボタン間は16px以上を確保する。CTAボタンは画面下部の親指届く範囲(下から1/3エリア)に配置する。スクロールしながらタップする動作を想定し、誤タップしにくい余白設計を徹底します。視覚デザインだけでなく、指の操作性を含めた「物理ホワイトスペース」を意識するのが正解です。

うちの事業で運用してわかった本音

うちの事業でLP・コーポレートサイト・教材ページを5年以上運用してきて、ホワイトスペースについてわかった本音をお伝えします。理論ではなく、実際に運用して見えてきた現場の真実です。

本音1: LP余白を1.5倍にしただけでCVが1.3倍になる事例が頻発する

これが一番大きな発見です。LPのコピーやデザインを変えずに、セクション間の余白を1.5倍に増やしただけで、コンバージョン率が1.3倍以上動いた事例を、うちの事業でも複数回観察してきました。文章も画像も変わっていないのに、余白量だけでCVが動く。これは業界の上位プレイヤーが言う「余白は装飾ではなく構造」という主張を、数字で実感した瞬間でした。

なぜCVが上がるのか。仮説は「読み手の認知負荷が下がるから」です。情報密度が高いLPは、読み手が途中で疲れて離脱します。余白を増やしたLPは、読み手が最後まで読み切れる確率が上がる。最後まで読まれたLPは、CTAボタンを押される確率が当然上がる。シンプルな因果関係ですが、これが現場で何度も再現される真実です。

具体的にどう増やすか。セクション間のmargin-y(上下余白)を48px→80pxに、ファーストビュー内の余白を120px→200pxに、CTAボタン周辺の余白を24px→48pxに。こういう小さな数値変更を10箇所ほど行うだけで、画面全体の「呼吸感」が劇的に変わります。コピーを書き直す10倍以上のインパクトを、余白調整だけで生み出せるんです。

本音2: 日本語サイトは欧文サイトより余白多めが正解

2つ目の本音は、海外デザインの数値ルールをそのまま使うと失敗する、という事実です。Apple・Stripe・Notion、こういう欧文中心のサイトの数値ルール(line-height 1.5、letter-spacing 0)をそのまま日本語サイトに適用すると、「窮屈で読みづらい」という印象になります。

理由は、日本語の文字構造です。漢字・ひらがな・カタカナが混在する日本語は、欧文より1文字あたりの情報密度が高く、視覚的な圧迫感が強い。これを欧文と同じ余白で組むと、画面全体が「ぎゅっと詰まった印象」になります。日本語サイトでは、line-heightを1.7〜1.8、letter-spacingを0.04em、段落間marginを欧文の1.2倍に設定する、というのが業界の経験則です。

うちの事業でも、最初は海外デザインの数値をそのまま使っていましたが、ユーザーから「読みづらい」というフィードバックが続いたため、日本語専用の数値階段に切り替えました。それ以降、読了率と滞在時間が明確に改善しました。海外デザインの「見た目」だけ真似て「数値ルール」を真似ないのが、日本語サイトの正解です。

本音3: 余白設計は『削るデザイン』、足し算より引き算が難しい

3つ目の本音は、ホワイトスペース設計の最大の難所は「足し算」ではなく「引き算」だ、という事実です。デザイン初心者は「もっと要素を入れたい」「もっと情報を載せたい」と思いがちですが、プロは逆。「ここに本当にこの要素は必要か」「この見出しはなくても伝わるか」と削る方向で考えます。

具体例: LPのファーストビューで、最初に8つあった要素を3つに削った。サブコピーを2行から1行に削った。プロフィール画像を削除した。実績数字を3つから1つに削った。結果、画面全体に余白が生まれ、「キャッチコピー」と「CTAボタン」の2要素だけが目立つ構造になりました。CVは1.4倍以上動きました。

削る勇気を持てるかどうかが、ホワイトスペース設計の本質的な分かれ目です。「あった方が良さそう」という曖昧な理由で要素を残すと、画面全体の情報密度が上がり、結果的にどの要素も目立たなくなります。「絶対に必要か?なくても伝わらないか?」という問いを徹底し、迷ったら削る。これがプロの余白設計の核心です。

Dieter Ramsの『Less, but better』、Steve Jobsの「1000のものに対してNoを言うこと」、こういう設計哲学が、現代のデザイン界の通底テーマです。情報を足すのは簡単、削るのが難しい。だからこそ「削れる人」が業界の上位プレイヤーになるんです。

ホワイトスペース設計の5STEP

ここまで読んでくださった方、お疲れさまです。ホワイトスペース設計の本質と4原則を理解した今、実際に自分のLPやコーポレートサイトに落とし込む手順を、5STEPで整理します。

シンプルですが機能するホワイトスペース設計の骨格が完成します。「センス」ではなく「手順」として整理することで、非デザイナーでもプロレベルの余白設計が可能になります。最初の1〜2回は時間がかかりますが、3回目以降は数値階段を使い回せるので、設計時間は劇的に短縮されます。

よくある質問(FAQ)

ホワイトスペースの理想的な比率はどれくらいですか?

画面全体に対して50〜70%が余白になるのが、上位プレイヤーの平均的な数値です。Apple・Stripe・MUJIのような高級・専門ブランドは60〜70%、楽天・Amazonのような情報集約型は30〜40%。自分のブランド人格に応じて選択します。ただし「余白を増やしたい」だけで決めるのではなく、4原則(関係性表現・優先度ヒエラルキー・呼吸スペース・ブランド人格)を踏まえた結果として余白量が決まる、という順序を守るのが重要です。

モバイルとPCで余白量は変えるべきですか?

変えるべきです。一般的には、モバイルの方が画面が小さいため余白量を抑えますが、要素間の関係性ルール(8/16/24px)は同じものを使います。具体例: PCのセクション境界は80〜120px、モバイルは48〜64px。PCのコンテナpaddingは32〜48px、モバイルは16〜24px。比率は維持しつつ、絶対値を画面サイズに合わせて圧縮するのが基本です。

コンテンツ密度が高いサイト(ECやニュース)では余白を取れません。どうすれば?

情報密度が必須のサイトでは、マクロホワイトスペース(セクション間の大きな余白)を諦め、マイクロホワイトスペース(要素内の小さな余白)に集中するのが正攻法です。商品カード内のpadding、価格と商品名の間隔、ボタン周辺の余白、こういう細部の余白を整えるだけで、情報密度は維持しつつ「ガチャガチャ感」を消せます。Amazon・楽天もよく見ると、商品カード内部の余白設計は非常に精密です。

余白量はA/Bテストで決めるべきですか?

大規模サイト(月間PV10万以上)なら、必ずA/Bテストで決めるべきです。余白量を1.5倍/2倍に変えた2バージョンを比較すると、CV差が明確に見えます。ただし、小規模サイトではテストするほどのトラフィックがないため、業界ベンチマーク(Apple・Stripe等の数値)を参考に設計し、結果を見て微調整する方が現実的。最初から完璧を狙わず、5STEPで設計→運用→改善のサイクルを回すのが正解です。

業界別の余白量の目安はありますか?

あります。業界別の余白量目安(画面全体に対する余白率の体感数値)を整理します。

業界・サイトタイプ	余白率の目安	代表例
高級ブランド・専門特化	60〜70%	Apple, MUJI, Hermes
SaaSプロダクト・テック企業	55〜65%	Stripe, Notion, Linear
コーポレートサイト	50〜60%	大手日系企業の公式サイト
メディア・ブログ	40〜55%	note, Medium, Stylo blog
EC・マーケットプレイス	30〜45%	Amazon, 楽天, メルカリ
ニュース・情報サイト	25〜40%	Yahoo, NHK, 日経新聞

まとめ

で、結局ホワイトスペースとは、こういうことです。

• ホワイトスペースの核心は「空白」ではなく「要素間の関係性とヒエラルキーを表現するデザイン言語」。単なる何もない場所ではなく、「ここに何も置かない」という積極的な設計判断の集合体
• 設計の正解は「センス」ではなく「4原則(関係性表現・優先度ヒエラルキー・呼吸スペース・ブランド人格表現)の組み合わせ」。非デザイナーでも原則を理解すれば設計可能
• 失敗パターンは「詰め込み過ぎ」「均等余白」「モバイル余白不足」の3つ。コンテンツ階層整理→余白規則設計→グリッド設定→適用→可読性検証の5STEPで機械的に解決できる

ホワイトスペース設計は、デザイナーだけの専門領域だと誤解されがちですが、実は4つの原則と数値ルールで構成された、再現可能な技術領域です。「センス」という曖昧な言葉に騙されず、原則と数値階段で機械的に設計していけば、必ずプロレベルの余白設計に到達できます。

うちの事業でLP・コーポレートサイト・教材ページを5年以上運用してきて、ホワイトスペースの設計を変えるだけでCVが1.3倍以上動いた事例を何度も観察してきました。コピーを書き直す10倍以上のインパクトを、余白調整だけで生み出せる領域です。最初の1〜2回は時間がかかりますが、数値階段を一度作れば、その後の設計時間は劇的に短縮されます。

ではでは。