FigmaでLPを作る基本フローは、フレーム設定 → ワイヤーフレーム → デザインカンプ → プロトタイプ → 共有・書き出しの5ステップです。PC向けの標準は1440px幅で、オートレイアウトとコンポーネントを使うと修正効率が大きく変わります。
▶ 3日で初案件PR
この記事でわかること
FigmaでLP制作を始める5ステップの全体フローと、各段階で完成させるものの違いを把握できます。1440pxのフレーム設定からワイヤーフレーム・デザインカンプまで、詰まりやすいポイントと具体的な対処法がわかります。オートレイアウト・コンポーネント・スタイル登録など、修正効率を上げる7つの実務コツを習得できます。
今の仕事について、一番近いものは？
この記事の結論
FigmaでLPを作る場合、まず1440pxのフレームとガイドで土台を整え、色や装飾を入れない状態でワイヤーフレームを完成させることが先決です。情報設計が固まった段階でデザインカンプに進み、CTAボタンの配置とオートレイアウトによる可変性を確保すると、クライアントへの共有からコーディング連携まで一本の流れで完結します。フリーランスとして案件に通用するLPを仕上げるには、5ステップのフローを一度手で通しておくことが、最も確実に実力につながります。
最初に確認すること
Figmaにログインし、新規ファイルを作成してフレーム（1440px）を1枚配置します。この作業自体は3分以内に終わるため、記事を読みながら画面を開いて並行して進めると手が覚えます。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| まず全体の流れを把握したい | FigmaのLP制作は5ステップが基本 | 5分 |
| フレームやガイドの設定で迷っている | LP制作の下準備は1440pxとガイドで固める | 7分 |
| ワイヤーとデザインカンプの違いが曖昧 | ワイヤーフレームとデザインカンプは段階が違う | 8分 |
| オートレイアウトの使いどころを知りたい | 修正効率を上げる7つのFigma実務コツ | 10分 |
| フリーランス案件への接続を知りたい | FigmaのLP制作スキルを案件につなげる3つの判断軸 | 6分 |
FigmaのLP制作は5ステップが基本
FigmaでのLP制作フローは、下準備（フレーム・ガイド設定）→ ワイヤーフレーム → デザインカンプ → プロトタイプ確認 → 共有・書き出しの5段階です（FigmaでLP制作する手順解説｜anagrams）。この順番を守らずにいきなりデザインカンプから始めると、情報の優先順位が曖昧なまま見た目の調整だけが進み、クライアントから「構成を変えたい」と言われたときに大幅な作業戻しが発生します。「先に構造を固め、後から色をつける」という順序は、ツールの問題ではなく制作物の品質管理の問題です。
各ステップで完成させるものが明確に違う
下準備で完成させるのは「作業環境」です。ワイヤーフレームで完成させるのは「情報設計」であり、デザインカンプで完成させるのは「視覚表現」です。プロトタイプは「動線の検証」、共有・書き出しは「納品物の確認」です。この5つはそれぞれ目的が異なるため、前の段階が未完成のまま次へ進むと手戻りが増えます。実際には「ワイヤーを作りながらデザインも入れたくなる」という誘惑が何度か来ます。そこで一度立ち止まり、「今どの段階か」を意識する習慣をつけると、制作時間が短くなります。
FigmaはWebブラウザでもアプリでも使える
FigmaはGoogleアカウントまたはメールアドレスで登録して使い始められます（Figma初心者向け基本操作｜atsoho）。無料プランでもLP制作に必要な機能のほとんどは使えます。ブラウザ版で始めた場合、後からデスクトップアプリに切り替えても作業データはクラウド上に保存されているため、環境移行のコストはほぼありません。ただし、フォントをローカルに追加している場合は、アプリ版のみで反映されることがあるため、フリーランスとして複数環境で作業する人は早めに確認しておくと後が楽です。
CHECK
▶ 今すぐやること: FigmaにログインしてLP用の新規ファイルを1つ作成する（3分）
Q: FigmaでLP制作を始める前にインストールが必要ですか？
A： ブラウザ版があるため、インストールなしで始められます。https://figma.com にアクセスし、Googleアカウントでサインインすればすぐに使えます。デスクトップアプリは必須ではありません。
Q： 無料プランでLPは作れますか？
A： 作れます。無料プラン（スターター）では、フレーム・ガイド・オートレイアウト・コンポーネント・プロトタイプのすべてが使えます。有料プランが必要になるのは、主にチーム共有の人数制限を超えた場合や、高度なブランドライブラリを複数人で管理する場合です。
LP制作の下準備は1440pxとガイドで固める
フレームサイズに迷ったまま作業を始めると、後からサイズ変更のたびにレイアウトが崩れる原因になります。土台を正しく設定することが、スムーズな制作の前提です。
PC向けLPの標準フレームは1440px幅が目安
PC向けのLP制作では1440px幅のフレームが目安として使われています（FigmaでLP制作する手順解説｜anagrams、Figma初心者向け基本操作｜atsoho）。Figmaのフレームツール（Fキー）でフレームを作成し、右パネルの幅を1440pxに設定します。高さはLPの内容に応じて縦に伸ばすため、最初は1000〜1200px程度を目安にしておき、セクションを追加しながら下に伸ばす方法が作業しやすいです。フレームの縦は後から自由に変えられるため、最初から完璧な高さを決める必要はありません。
ルーラーとガイドで余白と配置の基準を作る
ルーラーはShift+Rで表示できます（FigmaでLP制作する手順解説｜anagrams）。ルーラーが表示された状態でキャンバスにドラッグすると、縦または横のガイドラインが引けます。LP制作では左右の余白を統一するために、左右にそれぞれガイドを引く作業から始めると、後のセクション制作で「どこに要素を揃えるか」の基準が明確になります。余白の幅は、1440px幅の場合は左右各80〜120px程度を設定している事例が多くあります。クライアントのデザインガイドラインがある場合は、そちらの値を優先します。
グリッドを設定するとセクション間の整合が取りやすい
Figmaではフレームにレイアウトグリッドを設定できます。右パネルの「レイアウトグリッド」から列グリッドを追加し、12カラムグリッドを設定すると、Webデザインの標準的な構造に揃えながら要素を配置できます。グリッドはあくまで配置の補助であり、必須ではありません。初めてLP制作をする段階ではグリッドなしで作り始め、「カラムが揃わなくて困る」と感じたときに後から追加するのも選択肢の1つです。最初から細かくグリッドを設定しようとして、準備だけで時間が取られる経験は実務でもよく起きます。
Q： スマートフォン向けのフレームサイズはどう設定しますか？
A： スマートフォン向けは390px幅（iPhone 14基準）が多く使われています。レスポンシブ対応が必要な案件では、PCとスマートフォンのフレームを別々に作成し、同一ファイル内で並べて管理する方法が一般的です。
Q： ガイドを削除したい場合はどうすればよいですか？
A： ルーラーが表示されている状態でガイドをクリックして選択し、Deleteキーで削除できます。全ガイドを一括削除したい場合は、メニューの「表示」→「ガイドを消去」から実行できます。
ワイヤーフレームとデザインカンプは段階が違う
ワイヤーフレームとデザインカンプの区別が曖昧なまま進むと、情報設計とビジュアル調整を同時に行うことになり、どちらも中途半端な状態が続きます。この2つを明確に分けることが、LP制作の手戻りを防ぐ最も確実な方法です。
ワイヤーフレームは情報設計のための骨格図
ワイヤーフレームは、色や装飾を入れずに情報の配置と優先順位だけを決める段階です（FigmaでLP制作する手順解説｜anagrams）。Figmaでは長方形（Rキー）とテキスト（Tキー）だけを使い、グレーのブロックで要素の大きさと位置を表現します。見出しにあたる部分は大きめのテキストブロック、画像にあたる部分はグレーの四角、ボタンにあたる部分は角丸の長方形で示します。この段階で「ファーストビューに何を置くか」「CTAボタンは何箇所必要か」「セクションの順番はどうするか」を固めます。構成に迷うなら、参考にしたいLPをスクリーンショットで並べ、構造を書き写す方法が手っ取り早いです。
デザインカンプは視覚表現の完成形を作る段階
デザインカンプは、ワイヤーフレームの骨格に色・フォント・画像・余白を加えて、実際の見え方に近い状態を作る段階です（FigmaでLP制作する手順解説｜anagrams、Figma初心者向け基本操作｜atsoho）。フォントはGoogle Fontsをそのまま使えるほか、Figmaのプラグインからフォントを追加する方法もあります。見出し・本文・ボタンのテキストサイズ比を決め、コントラスト比を確認しながらカラーを設定します。PC向けLPでは本文14〜16px、見出し32〜48px程度が実務でよく使われる範囲ですが、ブランドのトーンや読ませたい対象によって変わります。
ファーストビューから順番にセクションを構成する
LPの構成順は、ファーストビュー → 課題提示 → 解決策・特徴 → 実績・お客様の声 → CTA → FAQの順が多くのLPで採用されています。Figmaでは各セクションをフレーム内に縦に積み重ねながら作業を進めます。CTAボタンはファーストビュー・中間・最下部の3箇所程度に配置すると、読み進めた段階のユーザーが別の場所に戻らなくてもアクションを取れる動線が生まれます。CTAが1箇所しかなく、フォールドの下に行ったときに読者を迷わせてしまうのは、LP制作で起こりやすい失敗です。なお、ポートフォリオとして掲載するLPを作成する場合は、制作物の著作権や掲載許諾についても事前に確認しておくとトラブルを防げます。
Q: ワイヤーフレームはクライアントに見せるべきですか？
A： 見せてください。クライアントが情報の順番に納得してからデザインカンプに進むと、「やっぱりこのセクションを前に移したい」という要望が減り、大幅な手戻りを防げます。ワイヤー段階でのレビューは、Figmaの共有リンクから簡単に行えます。
Q： Figmaのワイヤーフレームに使えるプラグインはありますか？
A： Wireframe（Figmaプラグイン）やMaterial Designのコンポーネントライブラリを活用する方法があります。初めてのLP制作では、プラグインを探す前に長方形とテキストだけで作る練習を先に行うと、後でテンプレートの構造を理解しやすくなります。
PR提供: 日本デザインスクール（デザスク）
FigmaのLP制作フローを3段階で自己診断
「今自分はどの段階で詰まっているのか」を特定すると、次に何をすべきかが具体的になります。以下の質問で現状を確認してください。
Q1: フレームを作成し、ガイドと余白の設定は終わっていますか？
Yesの場合はQ2へ進んでください。Noの場合は「LP制作の下準備は1440pxとガイドで固める」セクションから始めてください。所要時間は20〜30分です。
Q2: ワイヤーフレームを使って、セクションの構成と要素の配置を決めましたか？
Yesの場合はQ3へ進んでください。Noの場合は「ワイヤーフレームとデザインカンプは段階が違う」セクションに戻り、グレーのブロックのみで骨格を作ってください。デザインは後です。
Q3: デザインカンプが完成し、プロトタイプでのボタン遷移を確認しましたか？
Yesの場合は、共有リンクをクライアントまたは自分のスマートフォンに送り、実際の画面サイズで見え方を確認してください。Noの場合は「修正効率を上げる7つのFigma実務コツ」セクションのコツ4・5を参照してください。
Q： ワイヤーフレームなしでいきなりデザインカンプを作ってもよいですか？
A： 作ること自体は可能ですが、情報の優先順位が固まっていない状態で色やフォントを決め始めると、後から構成変更を求められたときの手戻りが大きくなります。グレーのブロックで骨格を5〜10分作るだけで手戻りを減らせます。
Q： FigmaのLP制作を独学で習得するのにどのくらい時間がかかりますか？
A： Figmaの基本操作を覚えながら進める場合、1枚のLPを自力で完成させるまでの目安は10〜20時間程度です。既存LPのトレース（模写）を2〜3枚行うと、セクション構成の感覚が身につき、その後の制作速度が上がります。
修正効率を上げる7つのFigma実務コツ
Figmaを使う上で、知らないと手作業が増え続ける7つのポイントを整理します。制作フローを一度通した後に戻ってくると、それぞれの意味が理解しやすくなります。
コツ1: オートレイアウトでヘッダーの可変性を確保する
【対象】: ヘッダーやナビゲーションを作っていて、要素を追加するたびにずれる問題が起きている人
【手順】: ヘッダーの要素（ロゴ・ナビテキスト・ボタン）をまとめて選択し、Shift+Aでオートレイアウトを適用します（2分）。右パネルで方向（横）・余白・要素間の間隔を設定します（3分）。ナビゲーション項目を追加・削除しても自動的に並び替えられることを確認します（1分）。
【ポイントと理由】: 手動で要素を並べると、テキストの文字数が変わるたびに間隔がずれて調整が必要になります。オートレイアウトを使うと、要素が増減しても定義した余白を保ったまま自動的に再配置されるため、変更のたびに手で位置を直す作業がなくなります。コードを書かずにFlexbox相当の挙動を確認できる点がFigmaの利点です。
【注意点】: オートレイアウトを設定した後に要素を個別に移動しようとすると、設定が崩れる場合があります。オートレイアウトの枠内で位置を変えたい場合は、要素の順番をドラッグで入れ替える操作が正しく、個別に座標を変える操作は避けます。要素の外に出したい場合は、オートレイアウトを一度解除してから作業します。
コツ2: コンポーネント化でCTAボタンを一括管理する
【対象】: CTAボタンを3箇所に配置しているが、デザインを変えるたびに3箇所それぞれを修正している人
【手順】: CTAボタンのデザインを1つ完成させ、Ctrl+Alt+K（Mac: Command+Option+K）でコンポーネント化します（2分）。コンポーネントをコピーしてLP上の3箇所に配置します（3分）。メインコンポーネントのテキストや色を変更し、3箇所すべてに変更が反映されることを確認します（2分）。
【ポイントと理由】: コンポーネント化はショートカット1つで作れます。コンポーネント化しておくと、クライアントからボタンの色変更を求められたときに1箇所だけ修正すれば全体に反映されるため、「どこか変え忘れた」というミスが起きません。修正が多い案件ほど効果が出る機能です。
【注意点】: コンポーネントのインスタンスごとに個別のテキストを書き換えることは可能ですが、形（サイズ・色）の個別変更はメインコンポーネントへの影響の範囲を理解した上で行う必要があります。「インスタンスで色だけ変えたつもりが、メインも変わっていた」という事態は、Figmaを始めたばかりのときによく起きます。
コツ3: プロトタイプで実際の遷移を確認する
【対象】: デザインカンプが完成したが、実際の画面で見たときの印象を確認していない人
【手順】: Figmaの上部メニューから「プロトタイプ」タブに切り替え、CTAボタンから次のフレーム（確認ページなど）へのリンクを設定します（3分）。右上の「再生」ボタンからプロトタイププレビューを起動します（1分）。スマートフォンのブラウザでFigmaの共有リンクを開き、実際の画面サイズでの見え方を確認します（5分）。
【ポイントと理由】: デザインカンプを画面上で見ているだけでは、実際のスクロール感やファーストビューの情報量が適切かどうかを確認できません。プロトタイプで一度「ユーザーとして操作してみる」と、「ボタンが小さすぎる」「テキストが多すぎてスクロール前に離脱されそう」という問題が見えてきます。自分のスマートフォンで確認するのが手っ取り早く、追加のツールも不要です。
【注意点】: プロトタイプはあくまで見え方の確認ツールです。実際のHTMLとCSSで実装したときの挙動とは異なります。特にアニメーションや複雑なホバー表現は、Figmaのプロトタイプで動いても実装で再現できないケースがあります。コーダーや開発者に渡す前に、どこまでがFigmaで表現したデザイン意図かを明示するメモを添えると、確認コストが減ります。
コツ4: スタイルを登録してカラーとフォントを統一管理する
【対象】: LPの途中でカラーコードが微妙にずれたり、フォントサイズがセクションごとに変わってしまう問題が起きている人
【手順】: 使うカラーを1色ずつ決め、右パネルの塗りから「スタイルに登録」を選んで名前をつけて保存します（5分）。本文・見出し・ボタンのフォントセットをテキストスタイルとして同様に登録します（10分）。全セクションでこのスタイルを使い、色やフォントを直接入力しない運用に切り替えます（随時）。
【ポイントと理由】: 直接カラーコードを入力し続けると、同じつもりで少しずつ値がずれていき、後から「微妙にグレーの色味が違う」という状態になります。スタイルを使うと、変更が必要になったときに登録した1箇所を直すだけで全体が更新されます。カラーの命名を「Primary」「Text / Body」のように役割ベースにしておくと、クライアントへの説明がしやすくなります。
【注意点】: スタイルはファイル単位で管理されます。別のプロジェクトファイルに同じスタイルを持ち込みたい場合は、チームライブラリ機能（有料プランが必要）か、スタイルが設定されたコンポーネントをコピーする方法を使います。無料プランでは都度再設定が必要になる場合があります。
コツ5: Figma Makeで叩き台を作ってから手直しする
【対象】: LP制作のゼロからの立ち上げに時間がかかっており、最初の構成案を素早く作りたい人
【手順】: FigmaのMakeパネルを開き、「サービス名・ターゲット・訴求内容」を自然言語で入力してLPの叩き台を生成します（5〜10分）。生成されたレイアウトを確認し、不要なセクションを削除・順番を入れ替えます（20〜30分）。テキストと画像を自社の素材に差し替え、カラーとフォントをブランドに合わせます（随時）。
【ポイントと理由】: Figma Makeは、自然言語でUIを作成・編集できる生成AIツールです。「生成AIで作ったものをそのまま使う」のではなく、「構成の叩き台を短時間で作り、手直しに集中する」という使い方が実務で有効です。Figma Makeを使ってLP制作を行ったユーザーは「ゼロから構成を考える時間を省いて、デザインの調整に集中できた」と述べています（Figma Makeで半日LPを作った体験談｜lifeischallenge）。
【注意点】: Figma Makeが生成するレイアウトは、クライアントのブランドや要件と合わない場合があります。生成物をそのまま納品物として渡すのではなく、あくまで叩き台として使い、必ず内容・デザイン・情報量を自分で判断してから進めます。Figma Makeの機能は更新が続いているため、生成品質は使用時期によって異なります（本記事は2025年時点の情報をもとに記述しています）。
コツ6: 共有リンクでクライアントレビューを効率化する
【対象】: デザインの確認をスクリーンショットやPDFで共有しており、フィードバックのやり取りに時間がかかっている人
【手順】: Figmaの右上「共有」ボタンをクリックし、「リンクを知っている人全員が閲覧可能」に設定します（1分）。生成されたリンクをクライアントに送り、コメント機能で気になった箇所に直接メモしてもらいます（随時）。コメントを確認しながら修正し、同じリンクで最新版を確認してもらいます（随時）。
【ポイントと理由】: 「PDFで共有して、メールでフィードバックをもらい、どの箇所の話か確認する」というやり取りは、案件の途中で1往復につき半日以上かかることがあります。Figmaの共有リンクではクライアントが直接デザイン上にコメントを付けられるため、「左から3番目のボタン」という説明なしに修正箇所が特定できます。操作に慣れていないクライアントには、「リンクを開いてコメントしてください」と一言伝えるだけで使えます。なお、クライアントとのやり取りで確認メールや修正依頼のメール例文を用意しておくと、コミュニケーションがさらに円滑になります。
【注意点】: 共有リンクを設定すると、リンクを知っている人全員が閲覧できる状態になります。制作中の未完成デザインや、クライアントの機密情報が含まれる段階では、共有の範囲を「招待したユーザーのみ」に絞る設定を使います。
コツ7: 書き出し前に余白と解像度を確認する
【対象】: デザインを書き出したとき、画像が粗くなったり余白がズレたりした経験がある人
【手順】: 書き出したい要素またはフレームを選択し、右パネル下部の「書き出し」セクションに書き出し設定を追加します（2分）。倍率を「2x」または「3x」に設定し、形式をPNG・JPG・SVGのいずれかに選びます（1分）。プレビューで拡大して確認し、問題がなければ「書き出し」を実行します（2分）。
【ポイントと理由】: 書き出し倍率が「1x」のまま画像を使うと、Retina（高解像度）ディスプレイで表示したときにぼやけて見えます。LP上の画像素材は2x以上で書き出しておくと、環境を問わず鮮明に表示されます。フレームをそのまま書き出すと余白ごと含まれる場合があります。「クリップコンテンツ」オプションの設定と、フレーム外にはみ出した要素がないかを事前に確認しておくと、書き出し後のトリミング作業がなくなります。
【注意点】: SVG形式は、写真や複雑なラスター画像には向きません。SVGはアイコンやロゴなどのベクター要素に使い、写真やスクリーンショットはPNG・JPGで書き出す使い分けが基本です。倍率を高くするほどファイルサイズが大きくなるため、Web用途では2xを基準にして、必要があれば画像圧縮ツールで最適化します。
CHECK
▶ 今すぐやること: 今作っているLPのCTAボタンを1つ選んでコンポーネント化し、3箇所に配置してみる（10分）
Q: オートレイアウトとフレームはどう使い分けますか？
A： フレームはキャンバス上の「区切り」であり、オートレイアウトはその中の要素の並び方を自動化する設定です。フレームの中でオートレイアウトを使う形が基本で、排他的な選択ではありません。
Q： コンポーネントのバリアントとはどう使うものですか？
A： 同じコンポーネントの複数のパターン（例: ボタンの通常状態・ホバー状態・非アクティブ状態）を1つのコンポーネントにまとめる機能です。LP制作の入門段階では必須ではありませんが、複数の状態を表現するUIが増えたタイミングで覚えると、管理のコストが下がります。
FigmaのLP制作スキルを案件につなげる3つの判断軸
Figmaの使い方を覚えた後、「これでフリーランス案件を取れるレベルか」という判断が難しいと感じる人は多くいます。3つの軸で自己診断してください。
判断軸1: LP1枚を自分でゼロから完成させているか
フリーランス向けのFigma案件ではLP制作・バナー制作・UI作成が主な業務です（Figma案件の報酬・経験別傾向｜remogu）。案件に応募するポートフォリオとして最低限必要なのは、「自分でゼロから作ったLP1枚」です。トレース（既存LPの模写）で練習した後、オリジナルのサービスや架空のブランドを想定してフルでLP1枚を作り上げる経験が、応募時の説得力につながります。制作したデータはFigmaの共有リンクでポートフォリオに掲載できます。ポートフォリオを充実させてクライアントからの信頼を獲得するコツも合わせて確認しておくとよいでしょう。
判断軸2: 修正依頼を想定した作り方をしているか
案件でクライアントから最も多く来るのは、「テキストを変えたい」「ボタンの色を変えたい」「このセクションの順番を変えたい」という修正です。コンポーネント・スタイル・オートレイアウトを使っていない状態のFigmaファイルは、修正のたびに手作業が増え、対応に時間がかかります。案件で使えるレベルとは「完成したデザインが美しいこと」だけでなく、「修正が来たときに素早く対応できる構造になっていること」も含まれます。自分のLPデータを見て、「ボタンを一括で色変更できるか」「セクションを移動しても崩れないか」を確認してみることが、実務レベルの自己診断になります。
判断軸3: 共有リンクでクライアントに見せられる状態か
ポートフォリオを用意する段階で、「印刷してPDFにした」「スクリーンショットをJPGで送った」という方法では、クライアントがデザインの細部を確認しにくい状態です。FigmaのリンクをポートフォリオURLとして記載できる状態にしておくと、「ファイルの管理方法も含めて実務の流れが分かっている人」という印象につながります。実際のFigma案件では、ファイル管理・共有・コメント対応もデザイン業務の一部として求められます（Figma Webデザイナー案件例｜freelance-board）。
CHECK
▶ 今すぐやること: 作ったLPのFigmaファイルで「閲覧リンク」を発行し、自分のスマートフォンでアクセスして実際の表示を確認する（5分）
Q: Figmaの案件に応募するとき、必要なスキルセットは何ですか？
A： LP・バナー・UIデザインのいずれかの実績があることが応募条件として多く挙げられています（Figma案件の報酬・経験別傾向｜remogu）。Figma自体の操作スキルに加えて、クライアントとのコミュニケーションでレビューやフィードバック対応の経験があると、案件の幅が広がります。
Q： ポートフォリオにトレース作品を含めてもよいですか？
A： 含めても構いませんが、「トレースした作品です」と明記することが必要です。トレースは練習として有効ですが、ポートフォリオの主役はオリジナルのLP・バナーのデザインです。トレース1〜2枚に対してオリジナル1枚以上を用意してください。
FigmaのLP制作は5ステップとコツ7つで通せる
FigmaでLPを作る基本フローは、フレーム設定 → ワイヤーフレーム → デザインカンプ → プロトタイプ → 共有・書き出しの5ステップです。この順番を守ることで、情報設計とビジュアル表現を切り分けた作業ができ、クライアントからの修正依頼が来たときの対応コストが下がります。オートレイアウト・コンポーネント・スタイルの3つは早めに手を動かして慣れておいてください。
Figmaの操作に慣れてきた段階で「Figma Makeで叩き台を作り、手直しに集中する」という流れを試してみると、制作の入り口の迷いが減ります。完成したLPは必ず自分のスマートフォンで実際に表示を確認し、共有リンクをポートフォリオとして使える状態を整えておくと、次の案件への準備が自然に進みます。
| 状況 | 次の一歩 | 所要時間 |
| フローを把握したが手が動いていない | 1440pxフレームを1枚作り、グレーのブロックで骨格を作る | 20〜30分 |
| ワイヤーが完成したがデザインに迷っている | フォントと3色のカラーパレットだけ先に決めてスタイルに登録する | 15分 |
| LPが完成したがレベル感が分からない | Figmaの共有リンクを自分のスマートフォンで開き、ファーストビューに3秒で何を伝えているかを確認する | 5分 |
| フリーランス案件への応募を検討している | 作成したLPのFigmaリンクをポートフォリオに記載できる状態に整える | 30分 |
※本記事で紹介した情報は2025年時点のものです。
FigmaのLP制作に関するよくある質問
Q: FigmaでLPを作る場合、1枚のLPを完成させるのにどのくらい時間がかかりますか？
A： Figmaの基本操作に慣れた状態であれば、シンプルなLP1枚（5〜7セクション）のデザインカンプを完成させるのに8〜16時間程度が目安です。ワイヤーフレームの段階で構成を固めておくと、デザインカンプへの移行がスムーズになり、全体の作業時間を短くできます。
Q： 1440px以外のサイズで作ることはありますか？
A： あります。1280pxや1920pxを指定するクライアントもいるため、案件開始前に「どのサイズで制作するか」を確認してください。スマートフォン向けのレスポンシブ対応が必要な場合は、390pxのフレームを別途作成します。
Q： FigmaのLPデザインをそのままコーディングに渡せますか？
A： FigmaのDev Mode（デベロッパーモード）を使うと、コーダーがデザインからCSSプロパティや画像素材を直接確認できます。ただし、自動的にHTMLとCSSが生成されるわけではありません。Figmaのデータをそのままコードに変換するには別のツールや手作業が必要です。
【出典・参照元】
Figma Makeで半日LPを作った体験談｜lifeischallenge