“なんとなく作るデザイン” から卒業するための基礎知識
Figmaを使い始めると、デザインツールの使い方や機能が気になりがちです。
しかし、本当に大事なのは 「どんなデザインを作るべきか」 を理解すること。
Figmaはあくまで“デザインを形にする道具”にすぎません。
ツールがいくら使えても、UIの基礎原則を知らないままでは、
- 情報が読みにくい
- なんとなく素人っぽい
- ユーザーが迷う
- 使いにくいUIになってしまう
といった問題が起こります。
そこで本記事では、Figmaを使う前に絶対に知っておきたい
UIデザインの5つの原則（基本のキ） をわかりやすく解説します。
UIデザインの原則は「5つ」を押さえるだけでいい
UIデザインの基礎は、次の5つです。
- 近接（Proximity）
- 整列（Alignment）
- 反復（Repetition）
- 対比（Contrast）
- 明確性（Clarity）
これは「ノンデザイナーズデザインブック」でお馴染みの4原則をベースに、
UIデザイン向けに最適化したもの。
この5つが理解できていれば、
Figma操作に進んだときにも“迷わないデザイン”が作れるようになります。
1. 近接（Proximity）── 関連情報は「まとめる」
UIにおける「近接」とは、
関係のある要素を近くに配置し、関係のない要素は離す というルール。
この原則ができていないと、
どれだけ色やフォントを整えても「散らかった印象」になります。
● 具体例
✔ タイトルと説明文は近く
✔ セクション間には大きめの余白
✔ ボタンと説明文は距離を詰める
✔ フッターと本文は距離を広めに
● Figmaでのポイント
- Auto Layout でまとめる
- Frame ごとに余白（Padding）を設定
- 16px / 24px / 40px など一定の数値を使う
近接は「情報の仲良し度」を視覚化する作業 と覚えると理解しやすくなります。
2. 整列（Alignment）── “揃っている” だけで美しくなる
整列は、UIデザインの見た目の90%を決めます。
揃っているかどうかで、素人感とプロ感が一瞬で決まる と言ってもいいほど重要。
よくある整列の失敗
- アイコンと文字の位置が微妙にズレる
- カードがバラバラに見える
- セクションの左右ラインが揃っていない
- “なんとなく” の位置調整をしてしまう
Figmaでのポイント
- 整列ボタン（中央揃え・左揃え）を必ず使う
- 最後にクリックしたオブジェクトが基準になる
- 分布（Distribute）で等間隔を自動化
- ガイドライン（Shift押しながらドラッグ）を活用する
整列のルールを理解すると、
“理由のある配置” ができるようになり、一気にデザインが整います。
3. 反復（Repetition）── 規則をつくるとUIは強くなる
反復とは、
繰り返し同じ要素を使用することで、デザインに統一性と「安心感」を生む こと。
UIデザインでは特に重要で、
反復が欠けるとユーザーが戸惑いやすくなります。
反復すべき要素
- フォントの種類
- 色（カラーパレット）
- 文字サイズ
- アイコンのスタイル
- コンポーネント（ボタン・入力欄など）
- 余白の値
Figmaでのポイント
✔ Text Style
✔ Color Style
✔ コンポーネント化
✔ Auto Layoutで規則化
反復は「毎回同じルールで作る」ということ。
これだけで UI の品質が劇的に向上します。
4. 対比（Contrast）── “違い” をつけると情報が伝わる
対比とは、
重要な情報とそれ以外に“差”をつけること。
UIデザインは情報の優先順位が命。
対比を適切に使うことで、ユーザーは迷わず必要な情報に目を向けられます。
よくある対比の対象
- 文字の大きさ
- 太さ（Bold / Regular）
- 色（強調色 vs 基本文字色）
- 余白
- ボタンの色と背景のコントラスト
特に守るべきルール：文字の対比
- タイトル
- 小見出し
- 本文
- 補足
この4段階をはっきり分けるだけで読みやすさが大きく変わります。
Figmaでのポイント
- H1 / H2 / H3 / Body / Small を Text Style で管理
- コントラストチェック（WCAG）で十分な差を確保
- 大事な部分は色 or サイズで迷いなく強調
「目立たせたいなら思い切って差をつける」が合言葉です。
5. 明確性（Clarity）── “迷わないUI” にするための原則
UIデザインの最大の目的は「迷わせないこと」。
明確性はそのための重要な原則です。
明確性を高めるポイント
✔ 情報を詰め込みすぎない
✔ アイコンと文字の意味が一致している
✔ クリックできる部分は“押せそう”な見た目に
✔ 文字を詰めない・余白を広くする
✔ 複雑な表現を避ける（シンプルに）
Figmaでのポイント
- padding を広めに取る
- line-height をゆったり
- 1画面に情報を詰め込みすぎない
- コンポーネントは統一したスタイルで作る
- プロトタイプで実際の操作感を確認する
シンプルにする勇気が、明確で使いやすいUIを作ります。
UIデザインの5原則を守るだけでFigmaが“扱いやすく”なる
UIデザインの5原則は、
Figma操作とも強く結びついています。
- 近接 → Auto Layout の余白設定
- 整列 → Align / Distribute
- 反復 → Component / Style
- 対比 → Text Style / 色の設定
- 明確性 → 要素のシンプル化・情報設計
つまり、
原則を理解していれば、Figma操作の迷いが激減する ということ。
まとめ：良いUIは「ルール」で作る
UIデザインは“センス”ではなく“理論”で作るもの。
そしてその理論はとてもシンプルです。
UIデザインの5つの原則
- 近接
- 整列
- 反復
- 対比
- 明確性
この5つの原則を理解していれば、
あなたのFigmaデザインは確実に「迷わせない・伝わる・整った」ものになります。
Figmaを触る前の基礎知識として、ぜひ何度も読み返してみてください。
