---
title: センスはいらない。資料が見違える4つのルール（C.R.A.P.）
tags: 
author: [ifukazoo](https://image.docswell.com/user/ifukazoo)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/D7Y45246EM.jpg?width=480
description: 資料がなんとなくダサくなる原因は、センスではなく「ルールを知らないだけ」だったりします。  デザインの基本ルール C.R.A.P.（近接・整列・反復・コントラスト）を中心に、フォント・色（70:25:5）・余白・視線誘導まで、専門  知識ゼロでも分かるように例え話でまとめました。ノンデザイナー向けです。    参考文献：平本久美子『デザイナーじゃないのに！』 制作：文章生成 Claude（Opus 4.7）／イラスト生成 Gemini 3 Pro Image
published: May 28, 26
canonical: https://image.docswell.com/s/ifukazoo/5PRWYL-2026-05-28-061612
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/D7Y45246EM.jpg)

デザイナーじゃなくてもできる資料作成
〜センスゼロでも「伝わる」スライドが作れる理由〜


# Page. 2

![Page Image](https://bcdn.docswell.com/page/VENYN861J8.jpg)

はじめに
自己紹介
• 名前・所属・役職
※ご自身の情報をここに入れてください
• 「デザイン＝センス」という思い込みを解くのが今日の使命
1


# Page. 3

![Page Image](https://bcdn.docswell.com/page/Y79PRKLYE3.jpg)

はじめに
今日のゴール
この場を出るときに、あなたには…
① ダサくなる「理由」がわかる
② センスに頼らない「ルール」を4つ持ち帰れる
③ 明日からすぐ使える「ワークフロー」が手に入る
2


# Page. 4

![Page Image](https://bcdn.docswell.com/page/G78DWRXK7D.jpg)

導入_ジョシュアツリーの法則
「センスがない」せいじゃない。
「ルールを知らない」だけ。
3


# Page. 5

![Page Image](https://bcdn.docswell.com/page/L7LMNK8PJR.jpg)

導入_ジョシュアツリーの法則
ジョシュアツリーの法則
名前を知ると、見え方が変わる
• 植物図鑑で「ジョシュアツリー」を知った人が
• 翌日、近所にその木が「当たり前のようにある」ことに気づいた
• ━━ 名前（概念）を知ると、初めて目に見えるようになる
• デザインも同じ。「近接」「整列」という名前を知れば
ダサさの「原因」が見えてくる
4


# Page. 6

![Page Image](https://bcdn.docswell.com/page/4EMYX262EW.jpg)

4大原則
4大原則（C.R.A.P.）
センスなしでもプロっぽく見せる「4つのルール」
C — Contrast
コントラスト
圧倒的な差をつける
R — Repetition
反復
ルールをくりかえす
A — Alignment
整列
ビシッとそろえる
P — Proximity
近接
仲間をあつめる
5


# Page. 7

![Page Image](https://bcdn.docswell.com/page/PER9NMP5J9.jpg)

4大原則
原則①：近接（Proximity）— 仲間をあつめる
Before
After
情報がページ全体に散らばって、グループが見えない
関連する情報をギュッとまとめ、グループ間に余白を作る
「関係があるものはくっつける。関係ないものは離す」
6


# Page. 8

![Page Image](https://bcdn.docswell.com/page/P7XQNV3XEX.jpg)

4大原則
原則②：整列（Alignment）— ビシッとそろえる
Before
After
文字や図形が「なんとなく」置かれていて、端がガタガタ
見えない1本の線に沿って、すべての要素がそろっている
「なんとなく置くのは禁止。全要素を見えない背骨に揃える」
7


# Page. 9

![Page Image](https://bcdn.docswell.com/page/37K9NQY97D.jpg)

4大原則
原則③：反復（Repetition）— ルールをくりかえす
決めたルールを、最初から最後まで繰り返す
• 見出しのデザインを全ページで統一する
• 箇条書きの記号・色・フォントを変えない
• 新しい話題に入るたびに同じパターンで始める
繰り返すだけで、バラバラのページが「一作品」になる
8


# Page. 10

![Page Image](https://bcdn.docswell.com/page/LJ3WVP99J5.jpg)

4大原則
原則④：コントラスト（Contrast）— 圧倒的な差をつける
Before
After
全部が同じくらいの大きさ・同じくらいの色 → 「主役」がわか
らない
主役だけを2〜3倍の大きさ・強いアクセントカラーで際立たせ
る
「弱気になるな」
9


# Page. 11

![Page Image](https://bcdn.docswell.com/page/8JDK8LG8EG.jpg)

視覚的要素の選び方
フォント — ゴシック体 vs 明朝体
文字の「形」が感情に直接うったえかける
ゴシック体（メイリオ・游ゴシック）
→ 力強く・読みやすい
スライド・Web・プレゼン向き
明朝体（游明朝・ Times）
→ 上品で・信頼感がある
長文・印刷物向き
【裏技】游ゴシック を使えば
Windows でも Mac でも同じきれいさで表示される
10


# Page. 12

![Page Image](https://bcdn.docswell.com/page/VEPK823W78.jpg)

視覚的要素の選び方
色 — 70：25：5 の魔法の比率
色を「たくさん使う」のではなく「絞って使う」
70 ％
ベースカラー
背景・大部分の地色（白・薄いグレーなど）
25 ％
メインカラー
ヘッダー・図・アクセント帯（ブランドカラーなど）
5％
アクセントカラー
最重要ポイントのみ（赤・オレンジなど強い色）
★ この比率は、このスライド自体がお手本になっています
11


# Page. 13

![Page Image](https://bcdn.docswell.com/page/27VVND497Q.jpg)

視覚的要素の選び方
余白は「もったいない空き地」ではない。
情報を引き立て、読み手をリラックスさせる
「呼吸スペース」だ。
12


# Page. 14

![Page Image](https://bcdn.docswell.com/page/5JGLKY147L.jpg)

視覚的要素の選び方
視線誘導 — Z型・F型の法則
人間の目には「読む順番のクセ」がある
Z型（紙・スライド）
左上 → 右上 → 左下 → 右下 の順に視線が流れる
F型（スマホ・Web・長文）
上から横に読み、下に行くほど左端だけを拾う
★ 「一番伝えたいこと」を左上 or 視線の入口に置く
→ フォーカルポイントをそこに作る
13


# Page. 15

![Page Image](https://bcdn.docswell.com/page/47QYNMDREP.jpg)

実践ワークフロー
5つのステップで仕上げる
整理 → 整列 → 強調 の順番を守る
Step 1
いきなりパソコンを開かない
まず紙に「誰に・何を」を書き出す
Step 2
情報を「島」に分ける
（近接）
関係があるもの同士をグループにまとめる
Step 3
一本の「背骨」を通す
（整列）
整列機能で 1 ミリのズレもなくそろえる
Step 4
主役を「2倍以上」にする
（コントラスト）
弱気になるな。思い切った差をつける
Step 5
目を細めてチェック
（スクイントテスト）
3〜5 個のまとまりが見えれば合格
14


# Page. 16

![Page Image](https://bcdn.docswell.com/page/KE4WGVZQJ1.jpg)

まとめ
デザイン＝センスではなく、誠実さ
今日、持ち帰ってほしい3つのこと
① ダサくなる「理由」がわかった
→ センスではなく、C.R.A.P. というルールの問題
② センスに頼らない「ルール」が4つ手に入った
→ 近接・整列・反復・コントラスト
③ 明日から使える「ワークフロー」が手に入った
→ 整理 → 整列 → 強調 → スクイントテスト
デザインとは、読み手の時間とエネルギーを奪わないための「誠実さ」だ
15


# Page. 17

![Page Image](https://bcdn.docswell.com/page/L71YD3RLJG.jpg)

「弱気になるな。」
ジョシュアツリーの名前を、あなたはもう知っている。
あとは使うだけ。


# Page. 18

![Page Image](https://bcdn.docswell.com/page/G7WGYP1QE2.jpg)

クレジット
参考文献・使用ツール
本資料の参考文献と制作ツール
【参考文献】
• 平本久美子（著）よしだゆうこ（まんが）『デザイナーじゃないのに！』ソシム, 2020
【使用ツール】
• 資料生成：Claude（Opus 4.7）
• イラスト生成：Gemini 3 Pro Image（Nano Banana Pro）
16