レイアウト・スマホ表示 / 非公式Figmaガイド
Figmaで余白確認
セクション間、カード内、見出し周辺の余白が詰まりすぎていないか見ます。
figmaguide.jp はFigma公式サイトではありません。Figmaの公式発表、料金、機能、仕様、提供範囲は必ず公式情報で確認してください。このサイトでは、FigmaをWebデザイン、LP設計、Codex連携、AIガイド群での制作確認に使うための考え方を整理しています。
このページでできること
余白、文字、カード、表、ボタン、390px前後のスマホ表示を確認します。 セクション間、カード内、見出し周辺の余白が詰まりすぎていないか見ます。
Figmaで確認すること
Figmaでは、見た目だけでなく、目的、読者、導線、余白、スマホ表示、公開前の安全注意を分けて確認します。AIに任せる前に、人間が決める範囲を整理します。
役割分担の比較表
| 確認すること | Figmaで見ること | AIサイト群での役割 |
|---|---|---|
| 目的 | 何を設計するページかを決める | ChatGPTで文章、Figmaで設計、Codexで実装へつなぐ |
| レイアウト | 見出し、余白、カード、CTA、画像配置を見る | Canva素材やCodex実装へ渡しやすくする |
| スマホ確認 | 390px前後で読めるか確認する | Codex公開前チェックへつなぐ |
| 安全注意 | 共有範囲と未公開情報を確認する | HALやGitHub Secrets注意へつなぐ |
チェックリスト
- 390px前後で確認した
- 長い語句や表がはみ出さない
- ボタンが押しやすい
- Figma公式サイトではない前提を明記している
- 個人情報、会社情報、顧客情報を入れていない
- 公式ロゴ、公式画像、公式UIスクリーンショットを使っていない
- 料金、仕様、提供範囲、成果を断定していない
安全注意
個人情報、会社情報、顧客情報、APIキー、token、Secrets、.env を掲載しないでください。Figmaファイルを外部AIへ渡すときは、伏せる情報と共有してよい情報を分けてから相談します。
AIサイト群の導線
余白は「量」ではなく「関係」
余白を確認する時、広い狭いだけを見ても判断できません。近いものは仲間、遠いものは別物という関係が伝わっているかを見てください。
- 見出しと本文の間 — 本文より見出しに近いと、どちらに属するか分かります
- 項目どうしの間 — 均等でないと、意図しないまとまりが生まれます
- 区切りの前後 — ここが同じだと、区切りとして機能しません
1番目がよくある崩れです。見出しの上下が同じ余白だと、その見出しがどちらの文章のものか分からなくなります。上を広く、下を狭くしてください。
使う値の種類を減らす
余白がばらつくのは、感覚で決めているためです。使う値をあらかじめ決めておくと揃います。
- 基準になる値を1つ決める
- その倍数だけを使う — 4〜6種類に絞る
- 途中の値を使わない — 「あと少し」で微調整しない
3番目が難しいところです。1か所だけ微調整すると、そこだけ揃わなくなり、次に触る人が基準を読み取れなくなります。収まらない場合は余白ではなく、中身の量を見直してください。
画面の端の余白を最後に見る
要素どうしの余白を整えても、画面の端との余白が合っていないと窮屈に見えます。
- スマホでの左右 — 狭すぎると読みにくく、広すぎると入る文字が減ります
- 上下の切り替わり — 節と節の間は、要素どうしより広く取る
- 指が届く範囲 — 画面の端に押すものを置かない
3番目は見た目ではなく操作の問題です。片手で持った時に届かない位置にボタンがあると、使われません。実機で片手のまま操作してみてください。
余白が足りないと感じた時
詰まって見える時、余白を広げる前に確認してください。原因が別のことがあります。
- 要素が多すぎる — 削れるものが無いか
- 文章が長い — 短くすれば余白が生まれます
- 枠線や背景色が多い — 区切りを線でなく余白で作れないか
3番目は効果が大きい部分です。線で区切るより、余白で区切るほうが落ち着いて見えます。線を減らすだけで、同じ配置のまま整理された印象になります。