フレームワーク活用ガイド
押さえておきたい用語
- Contrast（対比）: 異なる要素を明確に区別するために、サイズ・色・太さなどの差を大きくすること
- Repetition（反復）: 色、フォント、レイアウトパターンなどの視覚要素を繰り返し使い一貫性を生む
- Alignment（整列）: すべての要素をページ上の見えない線で揃え、秩序を与えること
- Proximity（近接）: 関連する情報を物理的に近くに配置し、グループであることを視覚的に示す
1
現状レビュー
対象の画面・資料をCRAP 4原則で診断 → 対比の強化
こんな悩みに効く#
- 「プレゼン資料がなんとなく素人っぽいが何を直せばいいか分からない」
- 「Webページの情報がバラバラに見えてまとまりがない」
- 「デザインの基礎知識がないがレイアウトを改善したい」
使い方#
対比を強化する
見出しと本文のサイズ差を明確にする。16pxと18pxの差はユーザーに伝わらないが、16pxと28pxなら一目で階層が分かる。色も同様に、薄いグレーと濃いグレーではなく、白と濃紺のように対比を大きくする。
反復で一貫性をつくる
見出しのスタイル、色、アイコン、余白のルールを決めて全ページで統一する。「h2は常にこの色・このサイズ」「CTAボタンは常にこの形」という反復が、全体の統一感を生み出す。
整列で秩序を与える
すべての要素を見えない線で揃える。テキストは左揃え、画像は端をグリッドに合わせる。1つの画面で左揃えと中央揃えを混在させない。整列を崩す場合は、意図的な対比として大きく崩す。
近接で関係性を示す
関連する情報（ラベルと入力欄、商品画像と価格）は物理的に近づける。逆に無関係な要素は余白で離す。余白の「近い/遠い」がユーザーに情報のグルーピングを直感的に伝える。
具体例#
営業チーム — 提案資料の品質統一
状況: 営業8名がそれぞれ独自フォーマットで提案資料を作成しており、ブランドイメージが統一されていなかった。受注率にも個人差が大きかった。
適用プロセス:
- 対比: 見出し28pt太字/本文14pt標準の階層ルールを策定
- 反復: ブランドカラー3色、指定フォント、統一ヘッダーのテンプレートを作成
- 整列: スライド内は左揃え統一、図表はグリッドに配置するルールを明示
- 近接: 数値とその説明テキスト、グラフとキャプションの距離ルールを設定
成果: 提案資料の作成時間が平均4時間→2時間に短縮。クライアントからの「資料が見やすい」という評価が増え、チーム全体の受注率が12ポイント向上した。
ECサイト — 商品一覧ページの改善
状況: 商品一覧ページの離脱率が68%。商品情報が均一に並び、どれを見ればいいか分からないと指摘されていた。
適用プロセス:
- 対比: セール品の価格を赤字・大サイズにし、通常価格との差を視覚的に強調
- 反復: すべての商品カードを同じ構成（画像→商品名→価格→レビュー星）で統一
- 整列: カードのグリッドを4列に統一し、画像の高さ・テキストの開始位置を揃えた
- 近接: 商品名と価格の間隔を詰め（4px）、レビューとの間を広げ（16px）てグルーピング
成果: 一覧ページの離脱率が68%→47%に改善。セール品のクリック率が2.3倍に向上し、ページ滞在時間も38%延びた。
社内ポータル — ダッシュボードの可読性向上
状況: 社内ポータルのダッシュボードに業績データ、通知、タスクが混在表示され、社員から「見づらい」との声が常態化。
適用プロセス:
- 近接: 業績データ、通知、タスクの3グループを明確に分離し、グループ間に24pxの余白を設定
- 対比: 各グループの見出しを20pt太字に、本文を13pt標準にして階層を明確化
- 反復: 3グループすべてで「見出し→サマリー数値→詳細リンク」の構成パターンを統一
- 整列: 数値データは右揃え、テキストは左揃えに統一
成果: 「必要な情報を見つけるのにかかる時間」が社員アンケートで平均42秒→15秒に短縮。ポータルの日次アクセス率が55%→78%に向上した。
うまくいかないパターン#
| パターン | 問題点 | 対処法 |
|---|---|---|
| 対比が弱すぎる | 「少しだけ違う」は意図が伝わらずミスに見える | 差は大きくつける。中途半端なら同じにする |
| 反復の過剰適用 | 全要素が同じに見え、メリハリがなくなる | 反復の中に対比を仕込んで変化をつける |
| 中央揃えの多用 | フォーマルに見えるが可読性が低下する | 基本は左揃え。中央揃えは短いテキストに限定 |
| 近接を余白なしで実現 | 罫線や背景色に頼りすぎてビジュアルが重くなる | 余白だけでグルーピングを表現する |
まとめ#
CRAP原則はデザインの専門教育を受けていなくても即日実践できる4つのルールだ。対比で階層を作り、反復で一貫性を保ち、整列で秩序を生み、近接で意味のグループ化を実現する。この4原則を意識するだけで、提案資料・Webページ・社内ツールなど、あらゆる情報の「伝わりやすさ」が格段に向上する。