このガイドのゴール
読み終えると、FigmaでLPのワイヤーフレーム（設計図）を作れます。題材は作り方ガイドと同じ架空カフェ「陽だまり珈琲」。所要時間の目安：30〜60分。デザインセンスは不要です（むしろ装飾はしません）。情報は2026年6月時点のものです。
前提（無料でOK）：Figmaの無料アカウント。これは 1日で作るLP制作 のSTEP2を深掘りした個別ガイドで、できたワイヤーは v0 に渡して実装します。
目次
- ワイヤーフレームとは（なぜ先に作るのか）
- Figmaの最低限（フレーム・テキスト・整列）
- STEP 1｜フレームを置く（Desktop / Mobile）
- STEP 2｜ブロックを積む（実際の文章で）
- STEP 3｜余白・整列・階層を整える
- STEP 4｜参考を横に置く（盗む≠丸写し）
- STEP 5｜v0に渡す（1フレーム＝1セクション）
- ワイヤーの「やる/やらない」
- つまずき
- 完成チェックリスト
- FAQ
ワイヤーフレームとは（なぜ先に作るのか）
ワイヤーフレームは、色や装飾を入れる前の「配置と文章だけの設計図」です。いきなり見た目を作ると、構成で迷子になり手戻りが増えます。先に骨組みを固めることで、AI（v0）への指示も明確になり、結果が安定します。
- 色を使わない（グレースケール）。装飾は後工程。
- 本物の文章を入れる（ダミーの「あいうえお」は使わない）。
- 並び順と各ブロックの役割を決めるのが目的。
Figmaの最低限（フレーム・テキスト・整列）
ワイヤーに必要なFigma機能は3つだけです。
- フレーム（F）：ページの枠。Desktop/Mobileのサイズを選べる。
- テキスト（T）：見出し・本文を置く。
- 長方形（R）：写真枠・ボタン・区切りをグレーの四角で表す。
あとは整列（Shift＋選択 → 上の整列ボタン）と余白が分かれば十分です。
STEP 1｜フレームを置く（Desktop / Mobile）
- 新規ファイルを作成。Fキーを押し、右パネルから「Desktop」フレームを配置。
- スマホ優先で考えるなら「iPhone」など Mobileフレームも横に1枚置く（2026年はスマホ表示が主役）。
STEP 2｜ブロックを積む（実際の文章で）
上から順に、各セクションをテキスト＋グレーの四角で積みます。陽だまり珈琲なら：
- ヒーロー：見出し「日常に、ひと息の陽だまりを。」＋サブコピー＋［席を予約する］ボタン（グレーの四角）＋写真枠。
- こだわり3点：見出し＋3カラム（アイコン枠＋短文）。
- メニュー3点：写真枠＋名前＋価格 を3つ。
- お客様の声：引用文を2〜3個。
- アクセス：地図枠（グレーの四角）＋住所・営業時間。
- 再CTA：もう一度［席を予約する］。
- フッター：店名・SNS・コピーライト。
ポイント：ここで本物の文言を書いておくと、後でv0が出す結果がそのまま使えます。
STEP 3｜余白・整列・階層を整える
- 整列：要素を選んで上の整列ボタンで左/中央を揃える。バラつきは素人っぽさの元。
- 余白：ブロック間はたっぷり空ける（8の倍数＝8/16/24/32pxを目安に）。
- 階層（段差）：見出しは大きく太く、本文は小さく。サイズの差で「ここが大事」を伝える。
- フォントは仮でNoto Sans JPに。色はまだ付けない。
STEP 4｜参考を横に置く（盗む≠丸写し）
鉄則：良いお手本を横に開いて、レイアウト・余白・フォントの"雰囲気"を参考にする。気に入ったカフェLPを見ながら、構成の良さを取り入れます。ただしデザインやコピーの丸写しは禁止（参考に留める）。これは著作権・信頼の両面で大切です。
STEP 5｜v0に渡す（1フレーム＝1セクション）
ワイヤーが固まったら、v0に渡して実装します。精度を上げるコツ：
- 1フレーム＝1 UIセクションに分けておく（ヒーロー／メニュー 等）。1枚に詰め込みすぎると生成品質が落ちる。
- v0はFigmaリンク添付が高精度（スクショより色・余白まで解析）。※Figma取り込みはv0の有料機能。
- 渡す時のプロンプト例：
このFigmaのワイヤーをNext.js + Tailwindで実装して。アイボリー基調、フォントはNoto Sans JP、スマホ優先で。
ワイヤーの「やる/やらない」
| やる | やらない |
|---|---|
| 本物の文章を入れる | ダミー文章（あいうえお） |
| グレースケールで配置に集中 | この段階で色・装飾を作り込む |
| 余白を広く・整列を揃える | 要素を詰め込む／バラ置き |
| 並び順と役割を決める | 細かいピクセル調整に時間を使う |
つまずき
- 何から置くか迷う→ 上のブロック順（FV→こだわり→メニュー→声→アクセス→再CTA→フッター）をテンプレとして使う。
- ごちゃごちゃに見える→ 余白を増やし、整列を揃えるだけで大半は解決。
- 作り込みすぎる→ ワイヤーは設計図。装飾はv0以降。30分で抜ける。
完成チェックリスト
- ☐ 上から下までセクションの並びが決まっている
- ☐ 各ブロックに本物の文言が入っている
- ☐ ［予約/問い合わせ］などCTAボタンがFVと末尾にある
- ☐ 余白・整列が整っている（バラつきが無い）
- ☐ Mobileフレームでも1画面の収まりを確認した
FAQ
デザインが苦手でも作れる？
ワイヤーは装飾しない設計図なので、センスは不要です。配置と文章を決めるだけ。見た目はv0が担います。
Figmaは無料で足りる？
ワイヤー作成は無料プランで十分です。v0のFigma取り込み機能だけ、v0側の有料が要ります。
いきなりv0に書いてはダメ？
急ぎなら可ですが、構成が固まっていないと修正が増えます。30分のワイヤーが結果的に近道です。
情報はいつのもの？
2026年6月時点です。FigmaのUIは変わることがあります。
まとめ：次の一歩
設計図ができたら、見た目は v0の使い方 で実装し、Vercelで公開します。全体の流れは 1日で作るLP制作、構成そのものの作り込みは 成果が出るLP構成の型 へ。情報は2026年6月時点のものです。