Figmaで作る基本レイアウト：余白・整列・配置の基礎ルール

Posted on by

── UIの“見やすさ・使いやすさ”を決める最重要ポイントを徹底解説

WebデザインやアプリUIを作るときに、
初心者が最もつまずきやすいのが レイアウト（配置と余白） です。

  • デザインがなぜか整って見えない
  • プロの作品と比較すると“素人感”が出てしまう
  • 情報がごちゃつく
  • テキストと画像のバランスが悪い

こうした問題のほとんどは 余白と整列が適切に使えていない ことが原因。

実は、デザインのクオリティは「配色」よりも「フォント」よりも、
余白と整列で決まる と言っても過言ではありません。

この記事では、Figmaを使いながら理解できる
レイアウトの基礎ルール（余白・整列・配置）をわかりやすく解説 します。

レイアウトの基礎は「余白」がすべてを整える

まず覚えるべきことがあります。

余白は“空白”ではなく、デザインの一部である。

余白が足りないと、どれだけ綺麗な色や写真を使っても
“ぎゅうぎゅう・読みにくい・安っぽい” と感じられてしまいます。

① 余白の基本ルール「同じ間隔を繰り返す」

プロのUIが整って見える理由は、余白に一貫性があるから。

Figmaでは、以下の数値がよく使われます

  • 8px
  • 16px
  • 24px
  • 32px
  • 40px

これは 8の倍数（8ptグリッド） と呼ばれる考え方。
この8単位で余白を設定すると、視覚的に最も心地よく見えます。

例：カードUIの余白

  • 上下左右の内側余白：24px
  • タイトルと本文の間：16px
  • 画像とテキストの間：24px

このように 同じ数値を繰り返す だけで一気に整います。

② 要素の“関係性”で余白を決める

次の2つを意識すると、プロっぽさが増します。

  • 近い関係の要素 → 余白を狭く
  • 違うグループの要素 → 余白を広く

例

✔ タイトルと本文 → 近い関係 → 余白を狭める（16px）
✔ セクション同士 → 遠い関係 → 大きく区切る（40〜80px）

これを「近接（Proximity）」と呼びます。

③ Auto Layoutで余白を自動化する

Figmaの Auto Layout を使うと：

  • 要素が増えても整う
  • 余白の統一が一瞬でできる
  • 手動調整による崩れがなくなる

特に初心者にとっては救世主機能。

Auto Layout の Padding（内側余白） を設定して、
数値だけでレイアウトが組み立つようにしましょう。

綺麗なデザインを作る「整列ルール」を理解する

① 基本の整列は6種類だけでOK

Figmaの Align（整列）はこんな種類があります

  • 左揃え
  • 中央揃え
  • 右揃え
  • 上揃え
  • 縦中央揃え
  • 下揃え

特によく使うのは 左右中央揃え と 中央揃え。

この2つが使えるだけで、見た目の安定感が格段に上がります。

② 整列は「どこを基準にするか」が重要

Figmaでは、整列ボタンを押すと
選択した複数のオブジェクト同士の中心を揃える 仕組みです。

よくある失敗：

  • 背景の長方形と文字を揃えているのに、微妙にズレている
  • どのオブジェクトが基準かわからない

解決策

基準にしたいオブジェクトを最後に選択する（Shiftクリック）

これで思った通りに整列できます。

③ 分布（Distribute）で等間隔が一瞬

複数の要素を 同じ間隔 に並べたいときは
「分布（Distribute）」を使います。

例

  • カードUIが3つある
  • SNSアイコンを横に並べる
  • バナーのリストを等間隔にする

手動で間隔を調整する必要はありません。

視線誘導を意識した「配置の基本」

デザインの印象を決めるのは“配置”です。

① 左上から読み始める前提で配置する

日本語も英語も、読み始めは左上。
UIも左上が「スタート地点」になります。

だから

  • 左上にタイトル
  • 右上にボタン
  • 左側に重要情報
  • 右側に装飾やイメージ

という配置が自然になります。

② 情報の優先度を「大きさ × 位置 × 余白」で示す

優先度の高い情報を：

  • 大きく
  • 太く
  • 余白を広めに
  • 上側に配置

すると、人は自然にその情報に目が行きます。

③ “揃っている” だけでプロっぽく見える

大きくズレてはいなくても、
少しのズレで「素人感」が出てしまうのがデザイン。

対策

✔ グリッド表示
✔ 整列ツール
✔ Auto Layout
✔ マージン・パディングの数値化

“なんとなくの調整” をやめるだけで劇的に変わります。

Figmaでレイアウトが劇的に良くなるテクニック

① 余白は 8／16／24／40 を基準にする

これだけでデザインが引き締まる。

② Text Style（文字スタイル）を早めに作る

  • H1
  • H2
  • H3
  • Body
  • Small

として登録しておくと、レイアウトが崩れにくい。

③ カードUIを練習するとレイアウトが上達する

カードの中に：

  • 画像
  • タイトル
  • テキスト
  • ボタン

などを配置するため、余白・配置の基礎がすべて身に付きます。

④ 模写で“プロの余白感”を盗む

Figmaでどれだけ数値を揃えても、
プロの感覚を知るには模写が最適。

特におすすめ

  • Airbnb
  • Apple
  • Pinterest
  • SaaS系サービスLP

まとめ：レイアウトの基礎は“数値化×一貫性”がすべて

最後に重要なポイントをまとめます。

良いレイアウトは「余白の一貫性」で決まる

  • 8の倍数を基準
  • 近い要素＝狭く
  • 遠い要素＝広く

整列はツールに任せるのが正解

  • 中央揃え
  • 左揃え
  • 分布

配置は「優先度」で決める

  • 大きさ
  • 位置
  • 余白

この3つを理解すれば、あなたのFigmaデザインは確実に“プロに近づきます”。

さらにレイアウト練習をしたい場合は、
カードUI・LPのヘッダー再現・アプリのログイン画面などが最適です。

#Figma #Webデザイン #UIデザイン #デザイン初心者 #Figma学習 #デザイン勉強 #レイアウトデザイン #余白の取り方 #整列テクニック #今日の積み上げ #学習記録 #毎日デザイン #UXデザイン #UIUX #AutoLayout #FigmaTutorial #DesignTips