基礎・初心者 / 非公式Figmaガイド
Figmaでセクション設計をする
Webページをセクション単位で分け、見出し、本文、ボタン、画像の役割を決めます。
figmaguide.jp はFigma公式サイトではありません。Figmaの公式発表、料金、機能、仕様、提供範囲は必ず公式情報で確認してください。このサイトでは、FigmaをWebデザイン、LP設計、Codex連携、AIガイド群での制作確認に使うための考え方を整理しています。
このページでできること
FigmaをWebデザインやAIガイド群で使う前の基本を整理します。 Webページをセクション単位で分け、見出し、本文、ボタン、画像の役割を決めます。
Figmaで確認すること
Figmaでは、見た目だけでなく、目的、読者、導線、余白、スマホ表示、公開前の安全注意を分けて確認します。AIに任せる前に、人間が決める範囲を整理します。
役割分担の比較表
| 確認すること | Figmaで見ること | AIサイト群での役割 |
|---|---|---|
| 目的 | 何を設計するページかを決める | ChatGPTで文章、Figmaで設計、Codexで実装へつなぐ |
| レイアウト | 見出し、余白、カード、CTA、画像配置を見る | Canva素材やCodex実装へ渡しやすくする |
| スマホ確認 | 390px前後で読めるか確認する | Codex公開前チェックへつなぐ |
| 安全注意 | 共有範囲と未公開情報を確認する | HALやGitHub Secrets注意へつなぐ |
チェックリスト
- 作りたいものを決めた
- 親ページへ戻れる
- 次に読むページを決めた
- Figma公式サイトではない前提を明記している
- 個人情報、会社情報、顧客情報を入れていない
- 公式ロゴ、公式画像、公式UIスクリーンショットを使っていない
- 料金、仕様、提供範囲、成果を断定していない
安全注意
個人情報、会社情報、顧客情報、APIキー、token、Secrets、.env を掲載しないでください。Figmaファイルを外部AIへ渡すときは、伏せる情報と共有してよい情報を分けてから相談します。
AIサイト群の導線
1つの節に入れるもの
ページを節に分ける時、1つの節には1つのことだけを入れてください。
- 伝えたいこと1つ
- それを支える要素 — 文章、画像、または箇条書き
- 次にしてほしいこと — 必要な節だけ
1つの節に2つの主張を入れると、どちらも印象に残りません。入れたいことが2つあるなら、節を分けてください。
節の区切り方
区切りは線で作るより、余白で作るほうが落ち着いて見えます。
- 節と節の間を、要素どうしの間より広く取る
- 背景色を変えるのは2〜3種類まで
- 線を使うのは最小限に
1番目だけで、たいていの区切りは成立します。線や背景色を増やすほど、画面が騒がしくなります。まず余白で試してください。
節の順番を決める
並べる順番は、読む人が知りたい順です。
- 何のページか — 最初の1画面で分かるように
- 自分に関係あるか — 誰向けかを早めに
- 詳しい説明
- 次にしてほしいこと
2番目を早めに置いてください。当てはまらない人に長く読ませても成果になりません。早く離脱してもらうほうが、読んでいる人の数字が正確になります。
作った後に削れないか見る
節が多すぎるページは、どこも読まれません。完成したら一度削る側で見直してください。
- 同じことを言っている節が無いか
- 無くても意味が通る節が無いか
- 最初の1画面で目的が伝わるか
足すより削るほうが効くことが多くあります。読む人の時間は限られています。