ホワイトスペース（余白）の設計

状況: 記事ページの平均読了率が32%。コンテンツは充実していたが、テキストが画面端まで詰まり、広告との余白が狭く「読みにくい」印象だった。

適用プロセス:

1. 本文の最大幅を700pxに制限し、左右に十分なマージンを確保
2. line-heightを1.4→1.75に変更。段落間のスペースを8px→24pxに拡大
3. 広告と本文の間に32pxの余白＋薄いボーダーを追加し、コンテンツとの区別を明確に

成果: 平均読了率が32%→48%に改善。ページ滞在時間が40%増加し、「読みやすくなった」のフィードバックが増加した。

状況: 高価格帯のスキンケアECだが、商品ページが情報過多で安売りサイトと同じ印象。ブランドの世界観が伝わっていなかった。

適用プロセス:

1. 商品画像の周囲に64pxのマクロスペースを確保。画像が「額縁に入っている」ような余裕を演出
2. 商品説明と価格のセクション間を48pxに拡大。テキストのline-heightを1.8に設定
3. スペック情報をアコーディオンに格納し、ファーストビューの情報量を50%削減

成果: ブランドの「高級感」スコアが5段階中2.6→4.3に向上。CVRが1.2倍に改善し、客単価も8%増加した。

状況: 管理画面にテーブル・グラフ・フォームが詰め込まれ、「情報は多いが見つけにくい」状態。余白を増やすと「1画面で見渡せなくなる」という懸念もあった。

適用プロセス:

1. テーブルの行間を32px→40pxに拡大。セル内のパディングを8px→12pxに変更
2. ダッシュボードのウィジェット間のギャップを8px→16pxに。各ウィジェット内のパディングを16px→24pxに
3. 「コンパクト表示」と「通常表示」の切り替えオプションを追加し、ユーザーが好みの密度を選べるように

成果: テーブルのデータ読み取りエラー率が29%減少。「通常表示」を選択したユーザーが72%で、余白のある設計が多数派に支持された。