レイアウト・スマホ表示 / 非公式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つずつの数値を見ても判断できません。見るべきは要素どうしの差です。
- 見出しと本文の差が小さい — どこが見出しか分からなくなります
- 差が大きすぎる — 見出しだけが浮いて、本文が読まれません
- 同じ役割なのに大きさが違う — 作った日が違うと起きがちです
3番目は一覧にして初めて気づきます。使っている文字サイズを全部書き出して、種類が何個あるか数えてください。5〜6種類を超えていたら、意図せず増えています。
読めなくなる下限を決めておく
小さくすれば入りますが、読めなければ意味がありません。次を目安にしてください。
- 本文 — スマホで小さくしすぎない。長い文章ほど余裕が要ります
- 補足・注記 — 本文より小さくてよいが、読ませる必要があるなら小さくしすぎない
- 免責や条件 — 読めない大きさにしない。読ませる意図が無いと受け取られます
3番目は見え方の問題を超えます。条件や制約を極端に小さく書くのは、書いていないのと同じに扱われることがあります。入りきらないなら、文章のほうを短くしてください。
実機と印刷で確認する
画面上のサイズ指定と、実際の見え方は一致しません。用途に応じて確認してください。
- 画面向け — 実機で開いて、腕を伸ばした距離で読めるか
- 印刷向け — 実寸で出力して確認する。画面では小さく見えても紙では読めることがあります
- 投影向け — 部屋の後ろから見えるか。想定より大きく作る必要があります
3番目は特に外しやすい部分です。手元で「大きすぎる」と感じるくらいが、投影ではちょうどよくなります。
文字の太さも一緒に見る
大きさだけ揃えても、太さがばらつくと整って見えません。
- 使う太さを2〜3種類に絞る — 見出し・本文・強調で足ります
- 同じ役割には同じ太さ
- 細い文字を小さく使わない — 掛け合わせると読めなくなります
3番目が実際に読みにくさを生みます。小さくするなら太さは残す、細くするなら大きさは残すと決めておくと、破綻しません。