基礎・初心者 / 非公式Figmaガイド
Figmaの最初の一歩
Figmaを開く前に、何を作るのか、誰に見せるのか、どこまでAIへ渡すのかを整理します。
figmaguide.jp はFigma公式サイトではありません。Figmaの公式発表、料金、機能、仕様、提供範囲は必ず公式情報で確認してください。このサイトでは、FigmaをWebデザイン、LP設計、Codex連携、AIガイド群での制作確認に使うための考え方を整理しています。
このページでできること
FigmaをWebデザインやAIガイド群で使う前の基本を整理します。 Figmaを開く前に、何を作るのか、誰に見せるのか、どこまでAIへ渡すのかを整理します。
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サイト群の導線
最初の30分で触るところ
機能を一通り覚えようとすると止まります。次の順で触ると、形になるまでが早くなります。
- フレームを1つ作る — スマホの幅で。これが土台になります
- 四角と文字を置く — 見出し、本文、ボタンのつもりで3つ
- 色と大きさを変えてみる
- 並びを整える — 揃える機能を使う
1番目でスマホの幅を選ぶのが要点です。広い画面から始めると、後で縮めた時に必ず破綻します。狭い形で成立させてから広げてください。
最初に覚えると楽になる3つ
細かい機能より、次の3つを先に覚えると作業が速くなります。
- フレーム — 画面やカードの入れ物。中に置いたものがまとまって動きます
- コンポーネント — 繰り返し使う部品。1か所直すと全部に反映されます
- 整列 — 端や中心を揃える機能。手で揃えない
3番目を手作業でやらないでください。目で揃えたものは必ずずれます。揃える機能を使えば、後から見返した時に整って見えます。
つまずきやすいところ
使い始めで止まりやすい箇所です。
- 選択できない — 別の要素の中に入っていることがあります。レイヤー一覧で位置を確認してください
- 動かすと他も動く — フレームごと掴んでいます
- 文字が入りきらない — 枠の大きさが固定されています
迷ったらレイヤー一覧を見てください。画面上では分からない入れ子の関係が、一覧では見えます。多くのつまずきはここで解決します。
作ったものを人に見せる前に
最初の1枚ができたら、細部を詰める前に一度見てもらってください。
- 説明せずに見せる — 説明が要る時点で伝わっていません
- 何のページか聞く
- 細部より、伝わったかを確認する
作り込んでから見せると、直しにくくなります。粗い段階のほうが、方向を変える判断がしやすくなります。