Webデザインでは、色・文字・余白を1か所ずつ調整していると、部分的にはきれいでもページ全体では統一感がなくなることがあります。

大切なのは「何pxが正解」「この色数が正解」と固定することではなく、役割を決めて、同じ役割に同じルールを使うことです。

この記事では、Figmaで作ったLPやWebページの配色・文字・余白を整理する実務フローを紹介します。

情報の基準日：2026年8月12日
Figmaの機能は更新されます。最新仕様はFigma公式のStylesとAuto layoutを確認してください。可読性やコントラストは実装後もブラウザ・アクセシビリティ検証で確認します。

先に結論：数値を決める前に「役割」を決める

整える順番は次です。

  1. ページの目的とブランドトーンを確認する
  2. 色の役割を分ける
  3. 文字の階層を作る
  4. 余白の段階を決める
  5. Figma Stylesへまとめる
  6. Auto layoutでpadding・gapへ反映する
  7. 例外を減らす
  8. PC/SPで確認する
  9. 実装へ渡せる名前にする

Webデザインの配色・文字・余白を整える簡単な使い方【2026年8月時点】

Step 1：ページの目的とトーンを1行で書く

例えば、

  • 安心感を重視したBtoBサービス
  • 明るく親しみやすい個人向けサービス
  • 高級感を重視した予約サービス

のように、デザインの方向を短く言語化します。

色やフォントを選ぶときに「好きだから」だけで決めず、この目的へ戻れるようにします。

Step 2：色を役割で分ける

最低限、次のように役割を考えます。

  • text-primary：本文・見出しの主文字
  • text-muted：補足
  • surface：通常背景
  • surface-alt：区切り背景
  • brand：ブランドの主色
  • accent：CTA・強調
  • border：境界線
  • danger / success：状態表示がある場合

色数を機械的に制限するのではなく、同じ役割に別の色が増えていないかを確認します。

Step 3：文字色と背景の組み合わせを確認する

薄いグレーの文字を白背景へ置くと、見た目は軽くても読みにくくなる場合があります。

特に、

  • 本文
  • 小さい注釈
  • ボタン文字
  • リンク
  • disabled状態

は実際の画面で確認します。

ブランド色をそのまま本文色へ使う必要はありません。読みやすさを優先して役割を分けます。

Step 4：文字の階層を決める

例えば、

  • Display：ファーストビューの主見出し
  • H2：セクション見出し
  • H3：カード・小見出し
  • Body：本文
  • Small：補足
  • Button：操作ラベル

のように役割を決めます。

それぞれ、

  • font family
  • size
  • weight
  • line height
  • letter spacing

を揃えます。

Figma公式のStylesでは、Text Styleとしてfont family、size、line height、spacingなどを定義できます。

Step 5：見出しを大きさだけで差別化しない

見出し階層はサイズだけでなく、

  • weight
  • 前後余白
  • 色
  • 補助ラベル
  • レイアウト位置

も含めて区別します。

H2とH3のサイズ差を極端にしなくても、前後関係が分かれば構いません。

Step 6：余白の段階を作る

余白も、すべて別々の数値にせず段階を持たせます。

例：

xs  : アイコンと文字など
sm  : 近い要素同士
md  : カード内のまとまり
lg  : セクション内のまとまり
xl  : セクション間

数値はデザインに合わせて決めます。8px刻みなどを絶対ルールにする必要はありません。

重要なのは、同じ関係に同じ余白感を使うことです。

Step 7：近いものを近く、別のものを離す

余白は装飾ではなく、情報の関係を示します。

例えば、

見出し
↓ 小さめ
説明文
↓ 大きめ
次のセクション

とすると、見出しと説明文が同じグループだと伝わります。

Step 8：Auto layoutへ反映する

Figma公式ではAuto layoutでpadding、spacing、alignmentなどを持たせ、内容変化へ追従するレイアウトを作れます。

ボタンやカードで、毎回手動配置するのではなく、

  • button padding
  • card padding
  • card gap
  • section stack gap

などを構造として持たせます。

Step 9：Stylesへ登録する

Figma公式のStylesでは、Paint・Text・Effect・Layout guideなどを定義できます。

例えば、

Color / Text / Primary
Color / Text / Muted
Color / Brand / Primary
Text / Heading / H2
Text / Body / Default

のように「何の色か」が分かる名前にします。

Blue 500のような値名だけでなく、用途が分かるsemanticな命名も検討します。

Step 10：ページ全体を同じ条件で見直す

1セクションずつではなく、ページ全体を縮小して、

  • 強調色が多すぎないか
  • H2が同じ強さか
  • セクション間隔が急に変わっていないか
  • カードごとにpaddingが違わないか
  • 同じCTAが別デザインになっていないか

を確認します。

Step 11：SPでも同じルールが成立するか確認する

SPではすべてを単純縮小するのではなく、

  • 見出しサイズ
  • 行長
  • 左右余白
  • セクション間隔
  • ボタン幅

を調整します。

ただし、PCとSPで完全に別のデザインシステムにならないよう、色・階層・部品の役割は維持します。

PC/SP設計の具体的な流れは「FigmaでPC/SPデザインカンプを作る実践レシピ」で扱います。

Step 12：実装者へ渡せる名前とルールにする

デザイン側でルールが整理されていると、HTML/CSS側でもCSS custom propertiesや共通classへ落としやすくなります。

例えば、

:root {
  --color-text: ...;
  --color-muted: ...;
  --color-brand: ...;
  --space-sm: ...;
  --space-md: ...;
  --space-lg: ...;
}

のような設計へ翻訳できます。

FigmaからHTML/CSSへ渡す実務フローは「FigmaデザインからHTML・CSSへ実装する方法」へ進んでください。

よくある失敗

色を増やして区別する

情報の優先順位が曖昧なとき、色を追加して解決しようとするとページが散らかることがあります。

まず見出し階層・余白・配置で区別できないか確認します。

余白を目分量で微調整し続ける

32px、30px、34pxのように近い値が増えた場合、意図的な差か確認します。

必要な例外なら残し、理由のない差は統一します。

SPだけ別物になる

PCを作ったあとSPでゼロから組み直すと、部品名・色・階層が分断されることがあります。

先に共通ルールを作り、SPではレイアウトの変化を中心に判断します。

LP制作の中で使う

このレシピは単独で色選びをするためではなく、LP制作の途中で使うと効果的です。

まず「FigmaでLPデザインを1ページ作る基本」で構成とワイヤーを作り、その後にこのレシピで見た目を整えます。

次に「FigmaでPC/SPデザインカンプを作る実践レシピ」で画面幅ごとの変化を整理し、最後に「Figma→HTML/CSSの実装レシピ」へ渡します。

まとめ

配色・文字・余白は、絶対的な正解の数値を探すより、役割を定義し、同じ役割へ同じルールを使い、PC/SPと実装まで一貫させることが重要です。

次に読む記事

今のテーマから次の行動へ進むときは、以下の記事も参考にしてください。