これはWeb制作の実務フローそのままなので、流れを理解すると一気にできるようになります。
かなり重要なので、プロの流れで説明します。
全体の流れ（これが正解）
LP制作は基本この順番
① 構成（AI）
② ワイヤーフレーム
③ デザイン（Figma）
④ 画像書き出し
⑤ STUDIOで組み立て
⑥ 公開
AI → Figma → STUDIO
この流れが一番多いです。
① AIでLP構成を作る
AIにはこう頼むのがベスト
例：
乗馬オンラインサービスのLP構成を作ってください
・ターゲット
・キャッチコピー
・セクション構成
・CTA
出てくるLP構成例
1 ファーストビュー
2 悩み
3 解決方法
4 サービス説明
5 お客様の声
6 料金
7 CTA
これが設計図になります。
② ワイヤーフレーム
ここを飛ばす人が多いけど、プロは必ずやる
手書きでもOK
[画像]
キャッチコピー
ボタン
[悩み]
・〜
・〜
[サービス説明]
画像 文章
白黒の設計図 = ワイヤーフレーム
ツール：
Figma
Canva
PowerPoint
紙
③ デザイン制作（Figma）
LPデザインは基本 Figma
代表ツール
→ Figma
→ STUDIO
作るもの
・背景
・文字
・ボタン
・画像配置
・余白
LPデザインの基本サイズ
幅：1440px
LPデザイン構成
FV
↓
Problem
↓
Solution
↓
Service
↓
Voice
↓
Price
↓
CTA
④ Figma → 画像書き出し
Figmaで作ったら
画像
ボタン
背景
をPNGで書き出し
⑤ STUDIOに反映
STUDIOでは
セクション追加
↓
画像アップロード
↓
テキスト入力
↓
ボタン作成
↓
余白調整
重要
STUDIOは
デザインツールではなく
Web組み立てツール
なので
デザイン → Figma
組み立て → STUDIO
これが正しい使い方
制作フローまとめ
これ覚えてください
AI → 構成
↓
紙 or Figma → ワイヤー
↓
Figma → デザイン
↓
STUDIO → コーディング代わり
↓
公開
Web制作会社もほぼこの流れ
LP制作スキル順番
① LP構成作れる
② ワイヤー作れる
③ Figmaデザイン
④ STUDIO実装
⑤ マーケ知識
