── 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
- SaaS系サービスLP
まとめ：レイアウトの基礎は“数値化×一貫性”がすべて
最後に重要なポイントをまとめます。
良いレイアウトは「余白の一貫性」で決まる
- 8の倍数を基準
- 近い要素＝狭く
- 遠い要素＝広く
整列はツールに任せるのが正解
- 中央揃え
- 左揃え
- 分布
配置は「優先度」で決める
- 大きさ
- 位置
- 余白
この3つを理解すれば、あなたのFigmaデザインは確実に“プロに近づきます”。
さらにレイアウト練習をしたい場合は、
カードUI・LPのヘッダー再現・アプリのログイン画面などが最適です。
#Figma #Webデザイン #UIデザイン #デザイン初心者 #Figma学習 #デザイン勉強 #レイアウトデザイン #余白の取り方 #整列テクニック #今日の積み上げ #学習記録 #毎日デザイン #UXデザイン #UIUX #AutoLayout #FigmaTutorial #DesignTips