【初心者向け】FigmaでLP制作するメリットと使い方を解説

「ランディングページ（LP）を作りたい！」と思っていざ取り組んでみると、進行の手間に戸惑うことも多いのではないでしょうか。

とくに、ライター・デザイナー・広告運用担当・コーダーなど、複数人で関わるLP制作では、構成案はExcel、デザインはIllustrator、フィードバックはメールといったようにツールが分断されがち。

その結果、情報共有や修正対応が非効率になりやすいという課題があります。

そこでおすすめしたいツールが「Figma」です。構成・デザイン・フィードバックまで1つの画面で完結できるため、関係者全員が同じ画面を見ながらスピーディーにやりとりできます。

本記事では、FigmaでLPをつくるメリットと、具体的な制作手順を紹介します。

Figma（フィグマ）とは

Figmaは、アメリカ発のクラウド型UIデザインツールです。2016年に正式リリースされ、現在は世界中のデザイナーやマーケター、開発者に広く使われています。Webブラウザ上で動作するため、ソフトをインストールしなくても誰でもすぐに使い始められるのが特長です。

CanvaやIllustratorなどのデザインツールは、「完成品のビジュアルを作る」ことに特化しているのに対し、Figmaは構成の設計からデザイン制作、フィードバック対応まで、プロセス全体を一つの画面で管理できるのが大きな強みです。

そのため、Webサイトやアプリ/サービスのUI設計など、複数の工程や関係者が関わる制作に向いているツールといえます。

LP制作におけるFigmaのメリット

LP制作でFigmaを使うメリットを、3つの項目に分けて紹介します。

①構成作成・デザイン・動きの確認まで、1つのツールで完結

Figmaでは、LP制作の流れで必要な「構成（ワイヤーフレーム）作成」→「デザインカンプ作成」→「プロトタイプ確認」のすべてを1つのツールで行えます。

ツールを切り替える手間がなく、作業の流れも把握しやすいため、はじめてLPを作る方にもおすすめです。

また、FigmaはUIデザインに特化したツールなので、ボタンやフォームといったLPでよく使う要素も直感的に作成できます。

配色やフォントなどを「スタイル」としてまとめておけば、あとから一括変更できるため、全体の統一感を保ったまま作業できるのも大きなメリットです。たとえば「見出しの色をもう少し濃くしたい」といった場合、1ヶ所変えるだけで自動的に見出し全体に反映されます。

②複数人がリアルタイムで閲覧・編集できるため、修正もスムーズ

Figmaはブラウザ上で動作するため、URLを共有するだけでチームメンバーと同じ画面を見ながら作業ができます。

さらに、チーム作業を前提とした便利な機能も充実しています。

さらに、Figmaでは常に最新のデータが上書きされていくので、ファイル名に「_修正版3」「_最終版」などをつける必要はありません。修正履歴も残るため、「どこが・いつ・誰によって変更されたか」をあとから簡単に確認できます。

③基本的な機能は無料でOK

Figmaは無料プランでも、LP制作に必要な基本機能はほとんど使えます。

一方、無料プランでは1チームにつき1プロジェクト、1プロジェクトにつき3ファイル、1ファイルにつき3ページまでの上限が設けられています。プロジェクトやファイル数が多く、案件の管理が複雑なケースでは有料プランを検討しましょう。

有料プランでは、プロジェクト/ファイル/ページ数とバージョン履歴の制限がなくなり、コーディングを効率化する「開発モード」を利用できるようになります。

有料プランは、個人や小規模チーム向けの「プロフェッショナル」、大規模な組織向けの「ビジネス」「エンタープライズ」があります。

すべての有料プランに30日間の無料トライアルが用意されているので、まずは無料で使ってみて、必要に応じてアップグレードを検討するのがおすすめです。

Figmaが向かないケース

Figmaは、LPの構成を考えながら進めるようなプロジェクトに向いていますが、すべてのLP制作に最適とは限りません。制作の体制や目的によっては、Figmaを使わずに進めた方がスムーズなケースもあります。

たとえば、以下のような場合です。

こうしたケースでは、Figmaの強みである「構造設計の自由度」や「共同作業のしやすさ」が活かしにくいので、別のツールを検討しましょう。

Figmaの利用方法

Figmaを利用するにあたって、まずはアカウント登録とファイルの準備をします。

① アカウント登録をする

Figma公式サイトの「無料で始める」ボタンを選択し、ユーザー登録を行います。

②新しいデザインファイルを作成する

登録が完了するとファイル一覧の画面に移るので、右上の「＋新規作成」→「デザインファイル」を選択します。

すると、作成したデザインファイルの編集画面が表示されます。これで準備が完了です。

Figmaを使ったLP制作のフロー

はじめに、LP制作全体のおおまかな流れを確認しておきましょう。

このうち、Figmaを使うのは「ワイヤーフレーム制作」「デザインカンプ制作」の工程です。

ここからは、PC向けのLPを制作するケースを想定して、Figmaを使った具体的な作業フローをご紹介していきます。

STEP1：下準備：フレームとガイドで土台をつくる

構成案やデザインを作成する前に、まずはデザインの土台となるフレーム（作業領域）とガイド（目安の線）を準備します。

フレームを挿入する

テキストや画像などのデザイン要素を載せる土台として、フレームを作成します。

横幅に明確な決まりはないものの、以下を目安に設定しましょう。

①画面下のツールバー左から2番目の「フレーム」を選択する
②画面右のメニューから、デバイスサイズを選択して挿入する（今回はPC向けなので横幅が1440pxの「ワイヤーフレーム」を選択）

ガイドを挿入する

次に、余白を取ったり配置を考えたりする際に基準となる、ガイドを挿入します。これを入れておくことで、見た目のバランスが取りやすくなります。

①Shift+Rで「ルーラー（定規）」を表示する

②定規からドラッグして、フレーム内にガイドを引く

両端の余白についても明確な幅の指定はありませんが、公式サイトや別のLPがある場合はそのページの余白に合わせるようにすると統一感が出ます。

STEP2：ワイヤーフレームの作成

ワイヤーフレームは、LPの構成要素やレイアウトを視覚的にわかりやすく見せるための「設計図」です。デザインの前段階で作成する、いわゆる“ラフ”のような役割を果たします。

この段階では、フォントや色など細かなデザインにはこだわらず、各要素の位置関係や情報の流れを意識して配置していきましょう。

図形を挿入する

画像やCTAボタンの位置を示したり、セクションごとに構成を区切るために図形を挿入します。

①画面下のツールバーから「長方形」を選択します
②カーソルが「＋」マークになったら、配置したい場所でドラッグすると図形を挿入できます

画像を挿入する

写真やロゴ、イラストなどを挿入します。

画像はファイルをドラッグ&ドロップ、またはコピー&ペーストすることで、簡単に挿入できます。

テキストを挿入する

原稿をもとに、メインコピーや本文を挿入します。

①画面下のツールバーから「テキスト」を選択
②＋マークのカーソルでクリック → テキスト入力モードになる
③配置したいコピーを入力する

必要な要素をすべて挿入し、配置を整えたらワイヤーフレームの完成です。

STEP3：デザインカンプの作成

ワイヤーフレームで大まかな構成が固まったら、実際の配色やフォントなどの見た目を整えて、完成時のLPのデザインを作っていきます。

なお、Figmaでは「ワイヤーフレームモード」「デザインカンプモード」のような切り替えはありません。構成からデザインまで、同じ画面・同じファイル上で作業を進めていきます。

たとえばワイヤーフレームで作った図形やテキストをそのまま活用しながら、色をつけたり画像を配置して“本番の見た目”に近づけていくイメージです。

人によっては、ワイヤーフレーム用のファイルとデザイン用のファイルを分けて作成したり、別々のフレームで管理するケースもありますが、作業しやすい方法でOKです。今回は、先ほど作ったワイヤーフレームを整えていく形で進めていきます。

デザインに必要なサイズの調整や、エフェクト（効果）の追加、色の指定などは、基本的に右のメニューから設定していきます。

色を変更する

テキスト、図形、線などの色は、以下の手順で変更できます。

①色を変更したいオブジェクト（図形や文字など）、またはレイヤーを選択する
②画面右側の「フィル」から好きな色を選択する。カラーピッカーやカラーコードを使えば細かい色指定も可能。

フォントを指定する

フォントを指定したいテキストを選択すると、右のメニュー「タイポグラフィー」からフォントが変更できます。他にもフォントウェイト（太さ）、サイズ、行間などが指定できます。

余白を調節する

デザインが一通り完成したら、最後に余白を調節しましょう。

基本的には、以下のように同じ種類の要素は同じ余白幅にそろえるのがポイントです。

Figmaでは、以下の操作で余白を簡単に確認できます。

選択中のオブジェクトと、周囲の他のオブジェクトとの距離が数値で表示されます。

STEP4：プロトタイプで見え方を確認する

デザインが完成したら、「このままコーディングに移っても問題ないか？」を事前にチェックしておきましょう。

Figmaには、完成したデザインを実際の画面のように表示できる「プロトタイプ」機能があります。フォントサイズや余白の見え方、画面遷移なども含めて確認できるのが特徴です。

プロトタイプで、CTAのページ遷移を見たい場合は以下のように設定します。

①動作のトリガーとなるレイヤーを選択する
②右のメニューから「プロトタイプ」を選択
③「インタラクション」右にある＋ボタンを選択
④追加されたインタラクションをクリックし、以下を指定する。
トリガー：「クリック時」、アクション：「次に移動」、移動先：遷移後のページ

プロトタイプ再生前に、デバイスを指定しましょう。

実機に近い状態で確認するため、何も選択していない状態で、右サイドバーのプロトタイプ設定から「デバイスがありません」ボタンを選択します。その中で、確認したいデバイスを選択しましょう。

プロトタイプの再生は、画面右上の▶︎マークを選択することで再生できます。

STEP5：デザインをメンバーに共有＆画像として書き出す

デザインが完成したら、必要に応じて関係者に共有したり、画像として書き出したり、コーディングに向けた準備をしましょう。

チームメンバーに共有する

共有方法は、画面右上の「共有」ボタンから、ファイルのURLを送るだけです。閲覧のみ・コメント可・編集可など、必要に応じて権限も設定できます。

ワイヤーフレームやデザイン案を作成している途中でも、URLを共有すればいつでもフィードバックを受けられます。こまめに共有することで、フィードバックの精度も上がり、手戻りの防止にもつながります。

画像として書き出す

Figmaで作成したデザインを画像として書き出す目的は、大きく分けて2つです。

ここまでで、Figma上での作業は完了です！

デザインが仕上がったら、次は「コーディング」と呼ばれる工程に移ります。コーディングとは、Webサイトの見た目や動きを実際にブラウザ上で再現するために、HTMLやCSSといったコードを書いていく作業のことです。

Figmaで作ったデザインはそのままでは使えないため、ボタンや見出し、レイアウトなどをHTML・CSSで一つひとつ再現していく必要があります。

なお、Figmaの有料プランには「開発モード」という機能があります。開発モードを使うと、各要素の色やフォント、余白などのCSS情報を自動で確認・コピーできるため、コーディングがぐっと楽になります。

HTML・CSSの基本については、以下の記事で紹介しています。

デザイナーやWeb担当者も知っておきたい、HTML・CSSの基礎知識

まとめ

「構成ってどうやって作ればいいの？」「ツールは何を使えばいい？」と迷いがちなLP制作も、Figmaひとつあれば、構成づくりからデザイン・フィードバックまでスムーズに進められます。この記事を読んで興味をもっていただけた方は、ぜひチャレンジしてみてくださいね。

今回はワイヤーフレーム作成やデザインの工程を解説しましたが、LP制作を円滑に進めるためには、手を動かす前の準備がとても大切です。

制作に入るまでの流れとディレクションのコツは、こちらの記事で解説しています。

LP制作を円滑に進めるための情報整理術とディレクションのコツ

LPにどんな情報を盛り込むか、構成のポイントを知りたい方はこちらの記事もぜひご参照ください。

成果を上げるLPの構成とは？「ファーストビュー」「ボディ」「クロージング」の各パートで押さえるべきポイントを解説