ワイヤーフレーム → STUDIOに配置する方法
使用ツール
→ STUDIO
STUDIOに配置する全体の流れ
まず全体像
① 新規プロジェクト
② セクション追加
③ 画像追加
④ テキスト追加
⑤ ボタン追加
⑥ 余白調整
⑦ スマホ調整
⑧ 公開
STUDIOは「箱を縦に並べる」ツールです。
ワイヤーフレームの箱
＝ STUDIOのセクション
STUDIOの構造
STUDIOはこの構造で作ります
ページ
↓
セクション（大きい箱）
↓
コンテナ
↓
画像・テキスト・ボタン
イメージ
[ セクション ]
[ コンテナ ]
文字
画像
ボタン
これ理解すると一気にできるようになります。
実際にLPを配置する手順
① 新規プロジェクト
STUDIOログイン
→ 新規プロジェクト
→ Blank
② セクションを追加（これがワイヤーフレーム）
ワイヤーフレームで作ったこれ
FV
悩み
解決
サービス
声
料金
CTA
これを全部セクションとして追加
＋ Add Section
＋ Add Section
＋ Add Section
＋ Add Section
結果
Section 1 ファーストビュー
Section 2 悩み
Section 3 解決
Section 4 サービス
Section 5 お客様の声
Section 6 料金
Section 7 CTA
これでLPの骨組み完成。
③ ファーストビュー作成
一番上のセクションに入れるもの
キャッチコピー
説明文
ボタン
画像
STUDIOでやる操作
Text追加 → キャッチコピー
Text追加 → 説明文
Button追加
Image追加
配置イメージ
┌─────────────────┐
│ キャッチコピー │
│ 説明文 │
│ [ボタン] │
│ 画像 │
└─────────────────┘
④ 悩みセクション
追加するもの
タイトル
悩み文章
Text → 「こんな悩みありませんか？」
Text → ・上達しない
Text → ・時間がない
Text → ・教えてくれる人がいない
⑤ サービス説明セクション
ここはよく使うレイアウト
画像 説明文
画像 説明文
画像 説明文
STUDIOでは
Container（横並び）
Image
Text
これを3つ作る。
⑥ 料金セクション
Text → 料金
Text → 月額9800円
Button → 申し込み
⑦ CTA（最後）
Text → 今すぐ始めよう
Button → 無料体験はこちら
LPは最後に必ずボタン。
LPセクション完成形
STUDIOでは最終的にこうなる
[ Section ]
ファーストビュー
[ Section ]
悩み
[ Section ]
解決
[ Section ]
サービス
[ Section ]
お客様の声
[ Section ]
料金
[ Section ]
CTA
＝ ワイヤーフレームと同じ構造
STUDIOでよく使うパーツ
Section（大枠）
Container（中の箱）
Text（文字）
Image（画像）
Button（ボタン）
Spacer（余白）
この5個だけでLP作れます。
LP作るときのプロの順番
これ真似してください
① Section全部作る
② 見出し全部入れる
③ 文章入れる
④ 画像入れる
⑤ ボタン入れる
⑥ 余白調整
⑦ 色・デザイン
⑧ スマホ対応
いきなりデザインしない
これ超重要。
ワイヤーフレーム ＝ 設計図
STUDIO ＝ 組み立て
デザイン ＝ 見た目
つまり
設計 → 組み立て → 見た目
の順番。
