Figmaで効率よくワイヤーフレームを作る方法｜初心者向けに手順とコツを解説
Webサイトやアプリを作るとき、いきなり完成デザインから作り始めていませんか？
もちろん、頭の中に完成イメージがある場合は、そのままデザインを進めたくなることもあります。
しかし、実務ではいきなり細かい色や装飾を作り込むよりも、まずは「ワイヤーフレーム」を作ることがとても大切です。
ワイヤーフレームとは、Webページやアプリ画面の設計図のようなものです。
どこに見出しを置くのか、どこに画像を配置するのか、ボタンはどこに必要なのか、
ユーザーにどの順番で情報を見せるのかを整理するために作ります。
Figmaを使えば、このワイヤーフレームを効率よく作成できます。
Figmaは共同編集に強く、フレーム、コンポーネント、Auto Layout、
コメント機能など、ワイヤーフレーム作成に役立つ機能が揃っています。
また、Figma公式でも、FigJamはチームでアイデアを出したり整理したりするためのオンライン共同作業ツールとして紹介されており、初期段階の情報整理にも使いやすいツールです。
この記事では、Figmaで効率よくワイヤーフレームを作る方法について、初心者向けにわかりやすく解説します。
ワイヤーフレームとは？
ワイヤーフレームとは、Webサイトやアプリの「骨組み」を表した設計図です。
完成デザインのように、色や写真、細かい装飾を作り込むものではありません。
主な目的は、ページの構成や情報の優先順位を整理することです。
例えば、コーポレートサイトのトップページであれば、
メインビジュアル
お知らせ
サービス紹介
選ばれる理由
実績
お客様の声
よくある質問
お問い合わせ導線
といった要素を、どの順番で配置するかを決めます。
この段階で大切なのは、見た目の美しさよりも
「情報が伝わるか」「ユーザーが迷わないか」「目的の行動につながるか」です。
色や装飾は後から調整できますが、構成が悪いと、どれだけ見た目を整えても成果につながりにくくなります。
そのため、ワイヤーフレームはWeb制作の土台となる重要な工程です。
Figmaでワイヤーフレームを作るメリット
ワイヤーフレームは、紙やホワイトボード、Excel、PowerPointなどでも作れます。
しかし、Web制作やアプリ制作ではFigmaを使うメリットが大きいです。
共同編集がしやすい
Figmaは複数人で同時に編集できるため、デザイナー、ディレクター、コーダー、
クライアントが同じ画面を見ながら確認できます。
例えば、打ち合わせ中に構成を変更したり、コメントを残したりできます。
「このセクションを上に移動した方がよい」
「ここにCTAを追加したい」
「この文章量だと少し長い」
といった意見をすぐに反映できるため、確認作業がスムーズになります。
完成デザインに移行しやすい
Figmaでワイヤーフレームを作っておけば、そのまま完成デザインへ発展させやすくなります。
紙やPowerPointで作った場合、最終的にはFigmaやPhotoshopなどに作り直す必要があります。
しかし、最初からFigmaで作っておけば、フレームサイズや要素の配置を活かしたまま、色や画像、装飾を追加できます。
作業の二度手間を減らせる点は大きなメリットです。
コンポーネント化できる
ワイヤーフレームでも、同じパーツが何度も出てきます。
例えば、
ヘッダー
フッター
ボタン
カード
お知らせ一覧
CTA
フォーム項目
などです。
これらをコンポーネント化しておけば、複数ページで使い回せます。
後から修正が入った場合も、元のコンポーネントを編集するだけで反映できるため、作業効率が上がります。
Figma公式サイトでも、再利用できるコンポーネントやVariables、
ブランドアセットを活用して、同じビジュアルルールで制作できることが紹介されています。
まずは目的を整理する
Figmaを開く前に、まずはページの目的を整理しましょう。
ワイヤーフレーム作成でよくある失敗が、目的を決めないまま画面を作り始めることです。
例えば、LPを作る場合でも、目的によって構成は変わります。
お問い合わせを増やしたい
資料請求を増やしたい
商品購入につなげたい
サービス内容を理解してもらいたい
採用応募を増やしたい
目的が違えば、必要な情報や導線も変わります。
お問い合わせを増やしたいページなら、サービスの魅力、
信頼できる実績、よくある不安の解消、問い合わせボタンの配置が重要になります。
採用ページなら、会社の雰囲気、仕事内容、社員の声、福利厚生、応募までの流れなどが重要になります。
まずは、
「このページでユーザーに何をしてほしいのか」
を明確にしましょう。
掲載する情報を洗い出す
次に、ページに載せる情報を洗い出します。
いきなりFigma上で配置を考えるのではなく、まずは必要な要素を書き出すのがおすすめです。
例えば、サービス紹介ページなら、
サービス名
サービスの概要
解決できる悩み
特徴
メリット
導入実績
料金
よくある質問
お問い合わせボタン
などが考えられます。
この段階では、順番を気にしすぎる必要はありません。
まずは必要そうな情報をすべて出します。
その後で、
「最初に見せるべき情報は何か」
「不安を解消する情報はどこに置くか」
「問い合わせボタンは何回出すか」
という流れで整理していきます。
Figmaだけでなく、FigJamを使って付箋のように情報を出し、
グループ分けしてからFigma Designに落とし込む方法も便利です。
FigJamはブレインストーミングやアイデア整理に使える共同作業ツールとして公式にも案内されています。
ページ構成を決める
情報を洗い出したら、ページ構成を決めます。
Webサイトでは、ユーザーが上から下へ順番に情報を見ていきます。
そのため、どの順番で情報を見せるかが非常に重要です。
例えば、サービスLPの場合は、次のような構成が考えられます。
1. メインビジュアル
2. 課題・悩みの提示
3. サービスの概要
4. 選ばれる理由
5. 実績・事例
6. 料金
7. よくある質問
8. お問い合わせこの構成なら、最初に興味を引き、次に悩みに共感し、サービスの内容を理解してもらい、
信頼材料を見せてから問い合わせにつなげる流れになります。
ワイヤーフレームでは、このような流れを視覚的に整理します。
デザインの美しさよりも、情報の流れが自然かどうかを重視しましょう。
フレームサイズを決める
Figmaでワイヤーフレームを作るときは、最初にフレームサイズを決めます。
Webサイトの場合、PCデザインなら1440px幅や1366px幅、
スマホデザインなら375px幅や390px幅などを使うことが多いです。
ただし、案件や制作会社によって基準は異なります。
最初から細かく悩みすぎる必要はありません。
初心者の方は、まずPC用に1440px幅、スマホ用に390px幅で作ってみるとよいでしょう。
重要なのは、同じ案件内でサイズを統一することです。
ページごとにフレーム幅がバラバラだと、後からデザインやコーディングがしづらくなります。
グリッドを設定する
ワイヤーフレームを効率よく作るためには、グリッドを使うのがおすすめです。
グリッドとは、画面上に表示する補助線のようなものです。
Figma公式でも、レイアウトガイドはフレームに追加できる視覚的な補助であり、
オブジェクトを正確に整列させ、論理的で一貫した構造を保つために役立つと説明されています。
Webデザインでは、要素の位置や幅を揃えることが大切です。
グリッドを設定しておくと、
見出しの開始位置
画像の幅
カードの横並び
ボタンの位置
余白
などを整えやすくなります。
例えば、PCデザインでは12カラムのグリッドを使うことが多いです。
カラムに合わせて要素を配置すると、バランスの取れたレイアウトを作りやすくなります。
初心者の方は、まずは以下のようなルールを決めるとよいでしょう。
PC：コンテンツ幅 1100px〜1200px
スマホ：左右余白 20px
セクション上下余白：80px〜120px
カード間の余白：24px〜32pxこのように余白の基準を決めておくと、ワイヤーフレーム全体に統一感が出ます。
低精度ワイヤーフレームから始める
初心者の方は、最初からきれいに作り込もうとしがちです。
しかし、ワイヤーフレームでは最初から完成度を高める必要はありません。
まずは、低精度のワイヤーフレームから始めましょう。
低精度ワイヤーフレームとは、色や写真、細かい装飾を入れずに、四角形やテキストだけで構成を表すものです。
例えば、
画像はグレーの四角
見出しは太めのテキスト
本文はダミーテキスト
ボタンはシンプルな長方形
で十分です。
この段階では、ビジュアルの完成度よりも、情報の順番やレイアウトの妥当性を確認することが目的です。
クライアントやチームからの確認も、装飾が少ない方が構成に集中してもらいやすくなります。
よく使うパーツをコンポーネント化する
Figmaでワイヤーフレームを効率よく作るなら、よく使うパーツは早めにコンポーネント化しましょう。
例えば、
ボタン
見出し
カード
CTA
ヘッダー
フッター
フォーム項目
FAQ
などです。
ワイヤーフレームの段階では、見た目を作り込みすぎる必要はありません。
しかし、構造として何度も使うパーツはコンポーネント化しておくと便利です。
例えば、CTAを複数ページに配置している場合、文言やボタン位置を変更したくなったときに、
元のコンポーネントを修正するだけで更新できます。
これはページ数が多い案件ほど効果を発揮します。
Auto Layoutを使って崩れにくくする
ワイヤーフレーム作成でも、Auto Layoutは非常に便利です。
Figma公式では、Auto Layoutはフレームに適用でき、コンテンツの変更に応じてデザインを動的に調整し、
レスポンシブで適応しやすいデザインにできる機能として説明されています。
例えば、カードの中に、
画像
見出し
本文
ボタン
を配置する場合、Auto Layoutを使えば、文章量が変わっても要素同士の間隔を保ちやすくなります。
また、ボタンもAuto Layoutで作っておくと、文言が変わっても左右の余白を維持できます。
ワイヤーフレームでは、後から文章量が変わることがよくあります。
そのため、Auto Layoutを使っておくと修正に強いデータになります。
初心者の方は、まず以下のパーツからAuto Layoutを使ってみるのがおすすめです。
ボタン
カード
FAQ
フォーム項目
横並びのメニュー
CTAエリアテキスト量を意識する
ワイヤーフレームでは、テキスト量をある程度想定しておくことが大切です。
よくある失敗が、短いダミーテキストだけで作ってしまい、実際の原稿を入れたときにレイアウトが崩れるケースです。
例えば、カードの説明文を1行だけで想定していたのに、実際には3行になることがあります。
ボタンの文言も、
「詳細を見る」
の予定が、
「無料で資料請求する」
になることがあります。
このように、実際の文言が入るとサイズや余白が変わります。
そのため、ワイヤーフレームの段階でも、できるだけ実際に近い文字量で作るのがおすすめです。
すべての原稿が決まっていない場合でも、
見出しは20文字程度
本文は2〜3行程度
ボタンは長めの文言も想定
というように、余裕を持った設計にしておくと安心です。
スマホ表示を早めに考える
PCデザインだけを先に作り、後からスマホ対応を考えると、レイアウトが大きく崩れることがあります。
特に現在のWebサイトでは、スマホから閲覧されることが多いため、スマホ表示を早い段階で考えることが重要です。
ワイヤーフレームの段階で、PCとスマホの両方を作っておくと、後のデザイン作業がスムーズになります。
例えば、PCでは3カラムのカード一覧にしていても、スマホでは1カラムになります。
PCでは横並びのナビゲーションでも、スマホではハンバーガーメニューにするかもしれません。
このような違いを早めに整理しておくことで、後から大きな手戻りを防げます。
コメント機能で確認をスムーズにする
Figmaの便利な機能のひとつがコメント機能です。
ワイヤーフレームを共有するとき、Figma上で直接コメントを付けてもらえば、修正箇所が明確になります。
例えば、
「このセクションは上に移動したい」
「ここに事例を追加したい」
「このボタンの文言を変えたい」
「FAQをもう少し増やしたい」
といった内容を、該当箇所にコメントできます。
メールやチャットだけでやり取りすると、「どこの話をしているのか」がわかりにくくなることがあります。
Figma上にコメントを残せば、確認漏れや認識違いを減らせます。
ワイヤーフレームで作り込みすぎない
ワイヤーフレーム作成で注意したいのが、作り込みすぎないことです。
つい色や写真、細かい装飾を入れたくなるかもしれません。
しかし、ワイヤーフレームの目的は完成デザインを作ることではありません。
目的は、構成や情報設計を確認することです。
この段階でデザインを作り込みすぎると、確認する人が色や見た目に意識を取られてしまい、
本来確認すべき構成の話ができなくなることがあります。
例えば、
「この色はもっと明るくしたい」
「写真の雰囲気が違う」
「ボタンの角丸が気になる」
といった話になり、肝心の情報設計の確認が後回しになる場合があります。
そのため、ワイヤーフレームではあえてシンプルに作ることが大切です。
実務で使いやすいワイヤーフレームの作成手順
ここで、Figmaでワイヤーフレームを作る流れを整理します。
まず、ページの目的を決めます。
次に、必要な情報を洗い出します。
その後、情報の順番を整理してページ構成を作ります。
Figmaでフレームを作成し、グリッドを設定します。
低精度のワイヤーフレームとして、四角形やテキストで大まかに配置します。
よく使うパーツはコンポーネント化し、Auto Layoutを使って崩れにくくします。
PC版とスマホ版を作り、レスポンシブ時の見え方を確認します。
最後に、コメント機能を使ってチームやクライアントに確認してもらいます。
この流れで進めると、効率よくワイヤーフレームを作成できます。
ワイヤーフレーム作成時のチェックポイント
ワイヤーフレームができたら、以下の点を確認しましょう。
まず、ページの目的に合っているか確認します。
問い合わせを増やしたいページなのに、問い合わせボタンが少なすぎる場合は改善が必要です。
次に、情報の順番が自然か確認します。
ユーザーが知りたい情報が後回しになっていないか、最初に伝えるべき内容が見えているかを確認しましょう。
また、余白や配置に統一感があるかも大切です。
グリッドやAuto Layoutを使って、要素の位置が揃っているか確認します。
さらに、スマホ表示で無理がないかも確認しましょう。
PCでは見やすくても、スマホでは情報が詰まりすぎることがあります。
最後に、コーディングしやすい構造になっているかも見ておくとよいです。
要素のまとまりが明確で、セクションごとに整理されているワイヤーフレームは、後工程でも扱いやすくなります。
Figmaで効率化するコツ
Figmaでワイヤーフレームを効率よく作るためには、いくつかのコツがあります。
まず、よく使うパーツをテンプレート化しましょう。
毎回ゼロから作るのではなく、ヘッダー、フッター、
CTA、カード、フォームなどをあらかじめ用意しておくと、次の案件でも使い回せます。
次に、ショートカットを覚えることも大切です。
例えば、Auto Layoutの追加はShift + Aで行えます。
フレーム作成、複製、整列などのショートカットを覚えるだけでも、作業スピードはかなり変わります。
また、テキストスタイルやカラーを最低限整えておくと、見やすいワイヤーフレームになります。
完全なデザインではなくても、見出し、本文、補足テキストの違いがわかるようにしておくと、
確認する人にも伝わりやすくなります。
まとめ
ワイヤーフレームは、Webサイトやアプリの設計図です。
完成デザインを作る前に、情報の順番やレイアウト、導線を整理することで、後からの手戻りを減らせます。
Figmaを使えば、ワイヤーフレーム作成を効率よく進められます。
フレーム、グリッド、コンポーネント、Auto Layout、コメント機能などを活用することで、
見やすく、修正しやすく、共有しやすいワイヤーフレームを作ることができます。
初心者の方は、まず次の流れで進めるのがおすすめです。
ページの目的を決める。
必要な情報を洗い出す。
ページ構成を考える。
Figmaで低精度ワイヤーフレームを作る。
よく使うパーツをコンポーネント化する。
Auto Layoutで崩れにくくする。
PCとスマホの両方を確認する。
この流れを習慣化すれば、Figmaでのワイヤーフレーム作成はかなり効率的になります。
ワイヤーフレームは、見た目を作り込む工程ではなく、情報設計を整理する工程です。
だからこそ、最初から細部にこだわりすぎず、まずはシンプルに作ることが大切です。
Figmaを活用して、修正しやすく、チームでも共有しやすいワイヤーフレームを作っていきましょう