図と地の関係（デザイン）

状況: アパレルECサイト（月間PV 50万）。商品詳細ページの「カートに入れる」ボタンのクリック率が 2.1% と業界平均（3.5%）を下回っていた。

問題の分析:

• ボタンの色がグレー（背景と同系色）で図として認識されにくい
• ボタンの周囲にサイズ表・レビュー・関連商品が密集し、余白がゼロ
• 商品画像6枚が同サイズで並び、視線の着地点がない

改善策（図と地の原則を適用）:

改善後、CTAクリック率は 2.1% → 4.8% に向上。ボタンの色と余白を変えただけで、ユーザーの視線が自然にCTAへ誘導されるようになった。

状況: 従業員管理SaaS（利用企業200社）。ダッシュボードに 18個 のウィジェットが並び、「どこを見ればいいかわからない」というフィードバックがCSチームに月 15件 届いていた。

問題: すべてのウィジェットが同じサイズ・同じ色・同じ余白で配置されており、図と地の区別がつかない。すべてが「図」=何も目立たない状態。

改善策:

• 重要KPI 3つ（売上・利用率・NPS）をカードサイズ 2倍 にし、ページ上部に配置
• 重要KPIの背景を白、その他のウィジェットの背景をライトグレー (#F5F5F5) に変更
• 重要KPIの周囲余白を 32px、その他は 12px に設定
• 最重要指標（売上）のみ朱色のアクセントラインを追加

CSへの「見方がわからない」問い合わせは月 15件 → 3件 に減少。ユーザーヒアリングでは「パッと見て今日の状態がわかるようになった」との声が多数あがった。

状況: 人口8万人の市が作成した防災ポスター。避難所マップ・連絡先・持ち物リスト・注意事項がA3用紙に詰め込まれ、住民アンケートで「情報が多すぎて読む気にならない」が 62%。

問題の本質: すべての情報を同じ扱いで配置した結果、図と地の区別がなく「情報のフラット化」が起きていた。

改善:

• 避難所マップを用紙の 60% の面積に拡大し、圧倒的な「図」にした
• マップの背景を淡い青、その他の情報エリアを白背景に分離
• 最寄り避難所の名前を 赤い吹き出し で強調（サイズ＋色のダブルコントラスト）
• 連絡先・持ち物リストは裏面に移動し、表面の情報量を 40%削減

改修後の住民アンケートで「避難所の場所がすぐわかる」と回答した割合は 31% → 84% に改善。デザイナーではなく防災担当の職員が、図と地の原則だけで作り替えた事例として庁内で共有された。