レイアウト・スマホ表示 / 非公式Figmaガイド
Figmaで390px表示確認
390px前後の画面幅で、文字、ボタン、表、カードが読めるか確認します。
figmaguide.jp はFigma公式サイトではありません。Figmaの公式発表、料金、機能、仕様、提供範囲は必ず公式情報で確認してください。このサイトでは、FigmaをWebデザイン、LP設計、Codex連携、AIガイド群での制作確認に使うための考え方を整理しています。
このページでできること
余白、文字、カード、表、ボタン、390px前後のスマホ表示を確認します。 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サイト群の導線
狭い幅から作る理由
スマホの幅で作り始めるのは、入る情報量が先に決まるためです。
- 狭い幅から作る — 何を載せるかを絞り込める
- 広い幅から作る — 詰め込んだものを削ることになり、判断が難しくなります
広げる時に「何を足すか」を決めるほうが、狭める時に「何を削るか」を決めるより簡単です。削る作業は、作った本人ほど決められません。
幅を変えながら確認する
スマホと広い画面だけ見て終わらせないでください。
- 一番狭い幅 — 文字が折り返して崩れないか
- 中間の幅 — 最も崩れやすい範囲です
- 広い幅 — 間延びしていないか
2番目が抜けやすい部分です。タブレット程度の幅で崩れる例が多くあります。幅を連続的に変えながら見てください。
実機で見ないと分からないこと
作成画面のプレビューでは分からない点があります。
- ブラウザの枠 — 上下が想定より狭くなります
- 指が届く範囲 — 片手で持った時に押せない位置がある
- 文字の実際の大きさ
2番目は見た目ではなく操作の問題です。画面の上端にボタンを置くと、片手では押せません。実機で片手のまま操作してみてください。
文字の量から決める
狭い幅で崩れる原因は、たいてい文字の量です。
- 見出しは15〜25字 — 折り返して3行になると読みにくくなります
- ボタンの文言は10字前後
- 本文は行間を広めに
入りきらない時は文字を小さくせず、文章を短くしてください。小さくすると読めなくなり、載せた意味が無くなります。