FigmaでLPを作ろうとすると、最初に写真・色・フォントを選びたくなります。

しかしLPは、見た目を作る前に**「誰に、何を伝えて、最終的に何をしてほしいか」**を決めないと、セクションが増えるほど軸がぶれます。

この記事では、架空のサービスLPを例に、Figmaで1ページを完成させる基本の流れを整理します。

情報の基準日：2026年8月12日
Figmaの画面や機能は更新されます。最新仕様はFigma公式のFrames、Auto layout、Styles、Prototypingを確認してください。

先に結論：装飾の前に「目的・構成・ワイヤー」を固める

基本の順番は次です。

  1. LPの目的を決める
  2. 想定読者を決める
  3. CTAを決める
  4. 必要な情報を書き出す
  5. セクション順を決める
  6. ワイヤーフレームを作る
  7. PCデザインを作る
  8. 配色・文字・余白を整える
  9. SPデザインを作る
  10. Prototypeで流れを確認する
  11. 実装者へ渡す情報を整理する

FigmaでLPデザインを1ページ作る基本の流れ【2026年8月時点】

Step 1：LPの目的を1つに絞る

例えば、

  • 無料体験へ申し込んでもらう
  • 資料請求してもらう
  • 問い合わせしてもらう
  • 商品を購入してもらう

のように、主目的を1つ決めます。

CTAが複数必要な場合でも、ページ全体の主目的は曖昧にしないようにします。

Step 2：想定読者と悩みを書く

デザインに入る前に、

  • 誰が読むか
  • 何に困っているか
  • 何を不安に感じるか
  • 何が分かれば行動できるか

を短く書きます。

これが、ファーストビュー・比較・実績・FAQなどの必要性を判断する基準になります。

Step 3：必要な情報を箇条書きにする

例：

  • サービス名
  • 一言で分かる価値
  • 主な特徴3つ
  • 利用の流れ
  • 実績・事例
  • 料金
  • FAQ
  • CTA

この時点ではFigmaで細かく作り込まなくても構いません。

Step 4：セクション順を決める

例えば、

hero
problem
benefits
features
how-it-works
case-study
pricing
faq
cta
footer

のように並べます。

順番は商品・読者・検討段階によって変わるので、テンプレートを絶対ルールにしません。

Step 5：FigmaでFrameを作る

Figma公式では、Frameはテキスト・画像・図形などをまとめるコンテナとして使え、Auto layout、constraints、layout guides、prototypingなどの機能を利用できます。

まずPC用のトップレベルFrameを作り、各セクションを子Frameとして整理します。

レイヤー名も、Frame 123のままではなく、hero、features、pricingなど意味が分かる名前にしておくと引き渡しやすくなります。

Step 6：ワイヤーフレームを作る

ワイヤーでは色や写真を作り込みすぎず、

  • 見出し
  • 本文
  • 画像位置
  • ボタン
  • カード数
  • セクション間の関係

を確認します。

ここで「何をどこに置くか」が固まっていないのに装飾へ進むと、後で大きく戻りやすくなります。

Step 7：コンテンツ幅とグリッドを決める

ページ全体で使うコンテンツ幅や左右余白の基準を決めます。

FigmaのFrameではlayout guidesを使って列やグリッドを設定できます。

重要なのは特定の数値そのものではなく、複数セクションで同じ基準を使うことです。

Step 8：ファーストビューを作る

最初の画面では、

  • 何のサービスか
  • 誰向けか
  • 何が得られるか
  • 次に何をすればよいか

が分かるか確認します。

装飾の強さより、情報の優先順位を先に整えます。

Step 9：Auto layoutで繰り返し部品を作る

Figma公式ではAuto layoutを使うと、direction、spacing、padding、alignmentなどを持つFrameが内容変化へ追従します。

例えば、

  • ボタン
  • 特徴カード
  • FAQ項目
  • 料金カード
  • CTAブロック

などに使えます。

固定座標で見た目だけを合わせるより、文字が増減しても崩れにくい部品になります。

Step 10：Stylesで色・文字を揃える

FigmaのStylesでは、paint/color、text、effects、layout guidesなどを定義できます。

見出しや本文、ブランド色、背景色をStylesとして整理すると、後で変更したときも揃えやすくなります。

配色・文字・余白の整え方は「Webデザインの配色・文字・余白を整える実践レシピ」で詳しく扱います。

Step 11：PC版を最後までつなげる

1セクションだけ完成度を上げすぎず、まず全体を最後まで作ります。

確認するのは、

  • 同じ説明を繰り返していないか
  • CTAまでの流れが急すぎないか
  • セクションの強弱があるか
  • 画像ばかり・文章ばかりになっていないか

です。

Step 12：SP版を作る

PCを縮小コピーするのではなく、スマートフォン向けに再判断します。

  • 横並びを縦にする
  • 順番を変える
  • 文字の大きさと行長を調整する
  • 画像の見せ方を変える
  • CTAを押しやすくする
  • 装飾を減らす

などを確認します。

具体的な進め方は「FigmaでPC/SPデザインカンプを作る実践レシピ」へ進んでください。

Step 13：Prototypeで主要導線を確認する

Figma公式ではPrototypeを使って、Frame同士を接続し、ユーザーの操作フローを確認できます。

LPなら複雑な画面遷移がなくても、

  • ヘッダーCTA
  • ファーストビューCTA
  • 最終CTA
  • FAQやモーダル

など、操作がある部分を確認できます。

Step 14：実装へ渡す準備をする

完成後は、実装者が迷わないように、

  • PC/SPのFrame
  • コンテンツ幅
  • 余白ルール
  • 色・文字Styles
  • 使用画像
  • hover / open / activeなどの状態
  • CTA遷移先
  • 非表示・並び替えルール

を整理します。

Figmaからコードへ落とす工程は「FigmaデザインからHTML・CSSへ実装する方法」で確認できます。

学習サービスは1本作ってから判断する

Figmaの使い方だけでなく、情報設計・デザイン・コーディングまで体系的に学びたい場合はスクールも選択肢です。

2026年8月時点で、デジハリ・オンラインスクール公式にはWebデザイナー向けの複数コースがあり、Webサイトのデザイン・企画、グラフィックソフト、コーディングなどを扱っています。

ただし、まず自分でLPを1本作ると「どこで止まるか」が分かります。そのうえでWeb制作・Webデザインのオンラインスクール比較を見るほうが、必要な学習支援を判断しやすくなります。

次は実装側へつなげる

デザインが完成したら、次は「見た目を作った」状態から「ブラウザで動く」状態へ移します。

まとめ

FigmaでLPを作るときは、装飾から始めず、目的 → 情報 → ワイヤー → PC → SP → Prototype → 実装引き渡しの順に進めると、制作物としてまとまりやすくなります。

次に読む記事

今のテーマから次の行動へ進むときは、以下の記事も参考にしてください。