Webデザイン・LP設計 / 非公式Figmaガイド
Figmaでヒーローセクション設計
最初の画面で伝えること、CTA、画像、次セクションの見え方を整理します。
figmaguide.jp はFigma公式サイトではありません。Figmaの公式発表、料金、機能、仕様、提供範囲は必ず公式情報で確認してください。このサイトでは、FigmaをWebデザイン、LP設計、Codex連携、AIガイド群での制作確認に使うための考え方を整理しています。
このページでできること
WebページやLPの構成をFigmaで設計し、Codexへ渡す前に確認します。 最初の画面で伝えること、CTA、画像、次セクションの見え方を整理します。
Figmaで確認すること
Figmaでは、見た目だけでなく、目的、読者、導線、余白、スマホ表示、公開前の安全注意を分けて確認します。AIに任せる前に、人間が決める範囲を整理します。
役割分担の比較表
| 確認すること | Figmaで見ること | AIサイト群での役割 |
|---|---|---|
| 目的 | 何を設計するページかを決める | ChatGPTで文章、Figmaで設計、Codexで実装へつなぐ |
| レイアウト | 見出し、余白、カード、CTA、画像配置を見る | Canva素材やCodex実装へ渡しやすくする |
| スマホ確認 | 390px前後で読めるか確認する | Codex公開前チェックへつなぐ |
| 安全注意 | 共有範囲と未公開情報を確認する | HALやGitHub Secrets注意へつなぐ |
チェックリスト
- ページ目的、読者、CTAを決めた
- スマホ表示で読めるか確認した
- Codexへ渡す構造を整理した
- Figma公式サイトではない前提を明記している
- 個人情報、会社情報、顧客情報を入れていない
- 公式ロゴ、公式画像、公式UIスクリーンショットを使っていない
- 料金、仕様、提供範囲、成果を断定していない
安全注意
個人情報、会社情報、顧客情報、APIキー、token、Secrets、.env を掲載しないでください。Figmaファイルを外部AIへ渡すときは、伏せる情報と共有してよい情報を分けてから相談します。
AIサイト群の導線
最初の1画面に入れる3つ
最初に見える範囲で判断が決まります。詰め込むと何も伝わらないので、次に絞ってください。
- 何のページか — サービス名ではなく、何ができるか
- 誰向けか — 当てはまらない人がすぐ離脱できる
- 次にすること — ボタン1つ
2番目を省かないでください。当てはまらない人に長く読ませても成果になりません。早く離脱してもらうほうが、残った人の数字が正確になります。
画像より文字を先に決める
大きな写真から作り始めると、文字が入る場所が残りません。
- 先に見出しの文言を決める — 15〜25字
- その文字が読める場所を確保する
- 写真はその制約の中で選ぶ
写真の上に文字を置く場合、明暗の差が足りないと読めません。薄い膜をかけるか、無地に近い部分に置いてください。写真を選ぶ段階で「文字を置く余白があるか」を見ると、後の加工が減ります。
スマホでの見え方から作る
広い画面で作ってから縮めると、必ず破綻します。
- 狭い幅で1画面に何が入るか決める
- ブラウザの枠の分だけ狭くなることを見込む
- ボタンが指の届く位置にあるか確認する
2番目は実機でしか分かりません。デザインツールで1画面目に見えていても、実機ではボタンが画面の外に出ていることがあります。
作った後に削る
最初の画面は、足すより削るほうが効きます。
- 装飾を1つ外してみる — 無くても成立するなら外す
- ボタンが2つ以上あるなら減らす — 迷わせます
- 実績や受賞は下に回す — 最初の判断には要りません
2番目が効きます。選択肢が増えるほど、押される率は下がります。最初の画面のボタンは1つに絞ってください。