Figmaを触る前に知りたいUIデザインの5つの原則

Posted on by

“なんとなく作るデザイン” から卒業するための基礎知識

Figmaを使い始めると、デザインツールの使い方や機能が気になりがちです。
しかし、本当に大事なのは 「どんなデザインを作るべきか」 を理解すること。

Figmaはあくまで“デザインを形にする道具”にすぎません。
ツールがいくら使えても、UIの基礎原則を知らないままでは、

  • 情報が読みにくい
  • なんとなく素人っぽい
  • ユーザーが迷う
  • 使いにくいUIになってしまう

といった問題が起こります。

そこで本記事では、Figmaを使う前に絶対に知っておきたい
UIデザインの5つの原則（基本のキ） をわかりやすく解説します。

UIデザインの原則は「5つ」を押さえるだけでいい

UIデザインの基礎は、次の5つです。

  1. 近接（Proximity）
  2. 整列（Alignment）
  3. 反復（Repetition）
  4. 対比（Contrast）
  5. 明確性（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つの原則

  1. 近接
  2. 整列
  3. 反復
  4. 対比
  5. 明確性

この5つの原則を理解していれば、
あなたのFigmaデザインは確実に「迷わせない・伝わる・整った」ものになります。

Figmaを触る前の基礎知識として、ぜひ何度も読み返してみてください。