Figmaで学ぶUIデザインの基本原則：余白・配色・タイポグラフィ

Posted on by

UIデザインの「見た目」には理由がある

「なんとなくきれい」「おしゃれに見える」
デザインを見たとき、そう感じる裏には明確なルールがあります。

それが UIデザインの3原則、すなわち「余白」「配色」「タイポグラフィ」です。

これらを理解して使いこなすことで、誰でも“見やすく、心地よい”デザインが作れるようになります。

この記事では、Figmaを使いながらUIデザインの基礎3要素を具体的に学んでいきましょう。

まずはFigmaで「整える」練習をしよう

Figmaはデザインツールであると同時に、デザインの原則を体感できる学習ツールでもあります。

「配置」「余白」「文字」「色」を数値でコントロールできるため、
感覚ではなくロジックで整える力が身につきます。

Figmaで学ぶメリット

  • ガイド・グリッド・スナップで“正確な配置”ができる
  • 色やフォントの統一を「スタイル」で管理できる
  • プレビューでUI全体の見やすさを確認できる

【原則①】余白：呼吸するデザインをつくる

余白があるデザイン＝情報が整理されているデザイン

初心者が最初に崩しやすいのが「余白」です。
詰め込みすぎると、どんなに良い色やフォントを使っても見づらくなります。

ポイント1：要素の間に“リズム”をつくる

Figmaでは、オートレイアウト（Shift + A） を使えば
要素間の余白（Padding / Gap）を数値で設定できます。

例

  • セクション間隔：80px〜120px
  • テキスト間隔：16px〜24px
  • カード内の余白：20px

このように数値を統一すると、ページ全体が自然に整います。

ポイント2：近い情報は近くに、違う情報は離して

「近接・整列・反復・対比」というデザイン4原則の中でも、“近接”と“整列”は余白に直結します。

見出しと本文は近く
セクション間は大きく空ける

これだけで“グループ化”され、情報がすっきり見えるようになります。

【原則②】配色：印象と視線をコントロールする

色の使い方次第で、印象も可読性も変わる

Figmaでは、右側の Fill（塗り）パネルで簡単に配色を管理できます。
ここで「明度」「彩度」「コントラスト」を意識すると、見る人の印象をコントロールできるようになります。

ポイント1：ベース・メイン・アクセントの3色ルール

配色は3色で構成するのが基本です。

色の役割使い方例
ベースカラー背景・余白に使う白・淡いグレー
メインカラーブランドや見出しなどの主役色ブルー・ネイビーなど
アクセントカラーボタンや強調箇所オレンジ・グリーンなど

例：ブルーをメインにするなら
背景を白、CTAボタンをオレンジなどで対比をつける

Figmaでは、Color Styles（右クリック→Create Style）でブランドカラーを一元管理できます。

ポイント2：コントラスト比を意識する

文字色と背景色のコントラストが弱いと、どんなにおしゃれでも「読みにくい」デザインになります。

Figmaには 「Contrast Checker」プラグイン があり、
WCAG（Webアクセシビリティ基準）に基づいて文字の読みやすさを数値で確認できます。

基準

  • 一般テキスト：4.5 : 1 以上
  • 見出しなど大きな文字：3 : 1 以上

ポイント3：感情を伝える色の心理効果

色印象使われやすい業界例
青信頼・安心・清潔感IT・金融・医療
赤情熱・行動・緊張飲食・イベント
緑安心・自然・安定環境・健康
黄明るい・元気・注意教育・子ども向け
黒高級・重厚・モダンファッション・企業サイト

色は「雰囲気」を作るだけでなく、ユーザーに“感情の方向性”を伝えるツールでもあります。

【原則③】タイポグラフィ：文字がデザインの印象を決める

「フォント選び」は印象操作そのもの

タイポグラフィとは、文字のデザイン・配置・読みやすさの設計を指します。
Figmaでは、フォント設定・行間・字間などを細かく制御できます。

ポイント1：フォントの種類を絞る

使うフォントは2種類までが基本。

種類用途例
サンセリフ体（ゴシック）Webやアプリに最適Noto Sans JP / Inter
セリフ体（明朝）雰囲気・ストーリー性重視Noto Serif JP / Playfair Display

見出し：太め（Bold）
本文：標準（Regular）
ボタン：中間（Medium）

ポイント2：行間・字間で可読性を上げる

文字はフォントだけでなく、余白（間隔）が読みやすさを決めます。

項目推奨設定
行間（Line height）フォントサイズの1.4〜1.6倍
字間（Letter spacing）-1%〜+2%程度で微調整
段落間隔24〜32px程度空ける

Figmaでは右側の「Typography」欄でリアルタイム調整が可能。
見出し・本文・キャプションの階層ごとに設定を分けておきましょう。

ポイント3：視線誘導のための文字サイズ階層

レベルサイズ用途
H132〜48pxページタイトル
H224〜32pxセクション見出し
H318〜22px小見出し
Body14〜16px本文
Caption12〜13px補足説明

このように段階を明確にすると、自然と“読む順番”ができ、ユーザーが迷わなくなります。

Figmaで練習する方法：UI基本3原則を身につけるワーク

練習テーマ例

  1. 余白の練習
    　→ オートレイアウトでカードやセクションを等間隔に配置
  2. 配色の練習
    　→ 3色ルールを使ってブランド感のある配色を作成
  3. タイポグラフィの練習
    　→ 見出し・本文・補足の階層を設定して読みやすさを比較

チェックポイント

  • 余白のバランスは一定か？
  • 色のコントラストは十分か？
  • 見出しと本文の違いが明確か？

Figmaでは、「Component」機能で練習用のテンプレートを作っておくのもおすすめです。

まとめ：Figmaは“美しさの理由”を学べるツール

「なんとなく整っている」ではなく、「なぜ整っているのか」を理解するのがデザインの第一歩です。

  • 余白：空間で情報を整理する
  • 配色：印象と導線を作る
  • タイポグラフィ：文字で信頼を伝える

この3つを意識するだけで、
どんなデザインも一気に「プロっぽく」なります。

Figmaは、“感覚を数値化できるツール”。
感性ではなく、ロジックで整えるデザインを今日から練習してみましょう。

#Figma #UIデザイン #Figma初心者 #Webデザイン #UXデザイン #デザイン勉強 #タイポグラフィ #配色デザイン #余白デザイン #Figma学習 #Webデザイン学習 #デザイン基礎