基礎・初心者 / 非公式Figmaガイド
Web初心者のためのFigma
Web制作初心者がFigmaでページ構成、余白、見出し、スマホ表示を考える流れを整理します。
figmaguide.jp はFigma公式サイトではありません。Figmaの公式発表、料金、機能、仕様、提供範囲は必ず公式情報で確認してください。このサイトでは、FigmaをWebデザイン、LP設計、Codex連携、AIガイド群での制作確認に使うための考え方を整理しています。
このページでできること
FigmaをWebデザインやAIガイド群で使う前の基本を整理します。 Web制作初心者がFigmaでページ構成、余白、見出し、スマホ表示を考える流れを整理します。
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サイト群の導線
Webページを作る時の順番
いきなり画面を描き始めると、途中で行き詰まります。次の順で進めてください。
- そのページで何をしてほしいか決める — 問い合わせ、購入、理解
- 載せる要素を書き出す — 文章で。まだ配置しない
- スマホの幅で並べる
- 広い画面に広げる
2番目を飛ばさないでください。配置しながら内容を考えると、収まりを優先して言いたいことが削れます。
最初に覚える3つ
機能は多いですが、次の3つで大半の作業ができます。
- フレーム — 画面やカードの入れ物
- コンポーネント — 繰り返す部品。1か所直すと全部に反映される
- 整列 — 端や中心を揃える機能
3番目を手作業でやらないでください。目で揃えたものは必ずずれます。揃える機能を使えば、後から見返した時に整って見えます。
実装に渡すことを前提に作る
自分だけで完結しない場合、渡した先で困らない作り方があります。
- 色と文字サイズの種類を減らす — 感覚で変えた値は、実装では全部別の定義になります
- レイヤーに意味のある名前を付ける
- 文字が長くなった時の扱いを決めておく
描いていない状態は、実装側が決めることになります。データが無い時、押した後、エラー時——これらを描いておくと、意図どおりになります。
最初のうちは真似から入る
ゼロから考えるより、良いと思ったページを分解するほうが早く身につきます。
- 要素の順番を書き出す — 何が上から並んでいるか
- 余白の取り方を見る — どこが広く、どこが狭いか
- 文字の種類が何個あるか数える
3番目をやると驚きます。整って見えるページほど、使っている文字の種類が少ないことが分かります。増やすほど散らかります。