Figmaは無料のStarterプランで今日から使い始められ、Frame・Text・Auto Layoutの3つを覚えれば初心者でもワイヤーフレームが作れます。フリーランスの提案資料や簡単なモック作成にも対応できる最初の学習順序を、実務視点でまとめました。
▶ 3日で初案件PR
この記事でわかること
3つの基本操作（Frame・Text・Auto Layout）でワイヤーフレームを作る手順を解説します。無料のStarterプランで今日から始められる導入ステップも紹介します。フリーランス案件に使えるポートフォリオ用モックの作り方まで解説します。
今の仕事について、一番近いものは？
この記事の結論
Figma初心者がまず身につけるべきは、Frameで画面の土台を作り、Textで文字を置き、Auto Layoutで余白を整える3つの操作です。この3つを1ページ分だけ実際に手を動かして覚えれば、フリーランス案件で求められる基本的なワイヤーフレームを納品できる水準に到達できます。無料のStarterプランで始められるため、ツール導入のコストはかかりません。
最初に確認すること
Figma公式サイトでアカウントを作成し、Starterプランを選択します。アカウント作成は数分で完了し、ブラウザ上で即座に操作を開始できます（約5分）。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| アカウントをまだ作っていない | Figmaは無料のStarterプランで今日から始められる | 5分 |
| Frameの使い方が分からない | Figma初心者が最初に覚える3つの基本操作 | 10分 |
| ワイヤーフレームの作り方を知りたい | ワイヤーフレームは1ページから作る | 10分 |
| 学習の進め方を整理したい | Figma初心者向け5つの学習ハック | 15分 |
| よくある疑問を確認したい | Figma初心者に関するよくある質問 | 5分 |
Figmaは無料のStarterプランで今日から始められる
Figmaには無料のStarterプランがあり、Frame・Text・Auto Layoutを覚えてワイヤーフレームを作る用途であれば、このプランの範囲で操作を十分に試せます。「有料なのでは」「専門知識がないと無理では」と感じて導入を後回しにする必要はありません。今日アカウントを作ればすぐに操作を開始できます。
Starterプランの範囲で初心者が必要な操作は十分まかなえる
Figma公式サイトでは、無料のStarterプランを提供しています。「無料のStarterプランを選べば基本操作を試せる」という点は利用者の間で広く確認されており（Figmaの使い方入門｜SkillHub）、初学者が有料プランを検討するのは複数のチームメンバーと本格的に共同編集を始める段階で十分です。
アカウント作成はブラウザ版から始めるのが手間が少ない
Figmaにはブラウザ版とデスクトップアプリ版があります。最初はブラウザ版で始めると、アプリのインストールなしにアカウントを作成してすぐに操作できます。「まず触ってみる」段階ではブラウザ版が向いており、操作に慣れてきた段階でデスクトップアプリを検討すれば移行の手間もかかりません。
デスクトップアプリはフォントの扱いや動作の安定性で優れる場面がありますが、初心者段階でその差を気にする必要はほぼありません。「アカウント作成は数分で完了し、無料プランでも主要機能は利用できる」という点も確認されており（初心者向け使い方・導入体験｜depart-inc）、まずブラウザ版で始めて操作感をつかむのが現実的な進め方です。なお、Figmaと合わせてポートフォリオサイトの作り方を整備しておくと、クライアントへの実績提示がスムーズになります。
新規デザインファイルを作成して操作を開始する
アカウントを作成したら、ホーム画面の「新規デザインファイル」から白紙のファイルを作成します。この空のキャンバスが、以降のすべての操作の出発点です。「まずデザインファイルを作成してから始める」という進め方は実務現場でも広く取られており（初めての利用者向け基本編解説｜nijibox）、チュートリアルや動画を先に見るよりも、先に空のファイルを開いて実際に手を動かす方が定着が早くなります。
CHECK
▶ 今すぐやること: Figma公式サイトでアカウントを作成し、新規デザインファイルを1つ開く（5分）
Q: FigmaはPhotoshopやIllustratorと何が違いますか？
A： Figmaはブラウザやアプリからリアルタイムで共同編集できるUIデザイン・ワイヤーフレーム向けのツールです。PhotoshopやIllustratorは画像加工や印刷物に強みがありますが、Figmaは画面設計と関係者共有に特化した構造を持っています。フリーランスがWeb制作やアプリ設計の提案資料を作る場面では、Figmaの共有機能が特に役立ちます。
Q： Webデザインの経験がまったくなくても使えますか？
A： 使えます。Figmaは直感的な操作でFrame・Text・図形を置けるため、Webデザイン未経験でも基本的なワイヤーフレームを作ることは十分できます。レイアウトの基本的な考え方（余白・コンテンツ幅・見出し階層）を並行して学ぶと、見た目が崩れる問題を早期に解消できます。
Figma初心者が最初に覚える3つの基本操作
Figmaには機能が多数ありますが、最初に覚えるべきはFrame・Text・Auto Layoutの3つだけです。この3つを繰り返し使って体に染み込ませることが、遠回りせずに実力をつける進め方です。「用語が多くて最初の1歩で止まった」という経験をする人は珍しくありませんが、それはFigma全体を覚えようとしたことが原因です。3つに絞れば今日中に動かせます。
Frame：画面の土台を作る最初のステップ
Frameは、画面サイズの土台を作るための要素です。初心者がよくやる間違いとして、最初からRectangle（長方形）で画面を作ろうとするケースがあります。実務では最初からFrameを使うことが推奨されており（初心者が最初にやるべき実践記事｜b-risk）、FrameはAuto Layoutや制約（Constraints）と連携する設計になっているため、最初からFrameを使う習慣をつけた方がスムーズです。
PC向けのUI設計では、横幅1440〜1920px程度のFrameを使い、コンテンツ幅は1200px前後に設定するのが実務上の目安です。最初の1ページ目は「横幅1440px」のFrameを1つ作り、その中にコンテンツを配置するところから始めると、サイズ感の感覚がつかみやすくなります。Figmaを使ったUX設計の考え方については、フリーランスのUXデザイナーの仕事内容も参考になります。
Text：見出しと本文を置いて情報構造を作る
Frameを1つ作ったら、次にTextツールで見出しと本文テキストを置きます。Figmaのテキスト配置は、Tキーを押してキャンバス上をクリックするだけで入力を始められます。最初の段階では、フォントサイズや色にこだわる必要はありません。見出し・本文・補足テキストの3種類を置いてみることで、情報の構造がキャンバス上で視覚的に把握できるようになります。
「Figmaで最初から装飾を頑張る必要はない」という指摘は実務現場でも広く共有されており（初心者が最初にやるべき実践記事｜b-risk）、テキストの内容と配置を整えることに集中する段階では、色・フォント・アイコンなどの装飾は後回しにして問題ありません。
Auto Layout：余白と並びを数値で整える仕組み
Auto Layoutは、複数の要素の間隔や余白を一定のルールで自動的に整える機能です。手動で1つ1つ位置を調整すると、要素を追加したときに崩れが生じやすくなります。Auto Layoutを使えば、要素が増えても間隔を一定に保てます。
設定方法は、整列させたい複数の要素を選択してShift+Aを押すだけです。縦並び・横並びと間隔の数値を決めれば、以降は要素を追加・削除しても自動で整列します。ボタン・カード・ナビゲーションバーなど、複数の要素が繰り返し並ぶ箇所には積極的に使うと、見た目の崩れが大幅に減ります。
CHECK
▶ 今すぐやること: 横幅1440pxのFrameを1つ作り、その中にTextで見出し・本文・補足の3種類のテキストを置いてみる（10分）
Q: FrameとRectangleはどう使い分ければいいですか？
A： 基本的には、画面やセクションの土台にはFrameを使います。RectangleはFrameの中に置く単純な図形（ボタン背景・区切り線・画像プレースホルダーなど）に向いています。FrameはAuto Layoutや制約と連携できる構造を持っているため、初心者の段階からFrameを使う習慣をつけると後の操作がスムーズです。
Q： Auto Layoutはどのタイミングで使い始めればいいですか？
A： Frame内に2つ以上の要素を並べるタイミングから使い始めるのが現実的です。ボタンのラベル位置やカードの余白など、複数の要素が一定の間隔で繰り返す箇所に適用すると効果が分かりやすくなります。最初から全箇所に使おうとするより、「崩れが気になった箇所」から順に適用するのが挫折しない進め方です。
自分はどこから始めるべきか：3分で判定する診断
Figmaの使い方は経験によって、効果的な入り口が変わります。どこから手をつければよいかを下の質問で確認してください。
Q1: Figmaのアカウントをすでに作成していますか？
Yesの場合はQ2へ進みます。Noの場合はまずFigma公式サイトでアカウントを作成し、Starterプランを選んで新規デザインファイルを開いてから戻ってきてください。
Q2: Frameを使って画面の土台を作ったことがありますか？
Yesの場合はQ3へ進みます。Noの場合はResult Aに進んでください。
Q3: Auto Layoutを使って余白や並びを整えたことがありますか？
Yesの場合はQ4へ進みます。Noの場合はResult Bに進んでください。
Q4: 1ページ分のワイヤーフレームを完成させたことがありますか？
Yesの場合はResult D、Noの場合はResult Cに進んでください。
Result A: まずFrameとTextの基本操作から始める
横幅1440pxのFrameを作り、その中にTextで見出し・本文を置く練習を10分間おこなってください。この1セットを3回繰り返すと、基本的な配置感覚が身につきます。
Result B: Auto Layoutを2〜3箇所に適用する練習をする
Frame・Textはすでに使えている状態です。ナビゲーションバーやボタン群など「同じ要素が横並びになっている箇所」を選択してShift+Aを押し、Auto Layoutを適用する練習を進めてください。
Result C: 1ページのワイヤーフレームを最後まで作り切る
3つの基本操作は習得済みです。ヘッダー・メインビジュアル・本文・フッターの4構成で1ページのワイヤーフレームを1つ完成させることを目標にしてください。
Result D: コミュニティファイルを複製して構造を観察する段階へ進む
1ページのワイヤーフレームが作れている状態です。FigmaコミュニティのFigma Basicsファイルを複製し、ComponentsやStylesの使われ方を観察すると次の段階が見えてきます。
Q： 判断フローで「Result A」と出ましたが、どのくらいで次のステップに進めますか？
A： Frame・Textの基本操作であれば、集中して1〜2時間練習すれば「置く・移動する・サイズを変える」の感覚はつかめます。「完全に理解してから進む」より「とりあえず動かしてみる」を繰り返す方が習得が早くなります。
Q： ワイヤーフレームとデザインカンプの違いを教えてください。
A: ワイヤーフレームは情報の配置と構造を示すもので、色・フォント・写真などの装飾は含みません。デザインカンプは実際の色・フォント・画像を使って仕上げた見た目の最終案です。フリーランスが提案段階で使うのはワイヤーフレームが中心で、受注後の実制作でデザインカンプを作るという流れが多くあります。
PR提供: 日本デザインスクール（デザスク）
ワイヤーフレームは1ページから作る
情報配置を先に決め、装飾は後回しにするのがFigmaで作業を進める基本的な考え方です。ワイヤーフレームとデザインの違いが曖昧なまま作業を進めると、最初から装飾に時間を使ってしまい、情報構造が後からバラバラになりやすくなります。
ヘッダーから始めて4構成でページを作る
1ページのワイヤーフレームを作るときは、ヘッダー・メインビジュアル・コンテンツ・フッターの4つを1つずつ順番に作るのが手戻りの少ない進め方です。それぞれをFrameで作り、Auto Layoutで余白を整え、Textで見出しと本文を置く、という3操作のサイクルを4回繰り返します。最初の1ページを完成させる過程で、3つの基本操作の使い方が一通り身につきます。
「アカウント作成→画面構成理解→デザイン作成→プロトタイプ→出力→共有」という学習順が実務現場でも提示されており（導入から基本操作までの体験的解説｜profuture）、ページ1枚を最後まで作り切る体験が次のステップへの基準点になります。Figmaで作ったワイヤーフレームはフリーランスのポートフォリオとして活用でき、案件獲得にも直結します。
コンテンツ幅1200px前後を基準に余白を設定する
PC向けのWebページでは、コンテンツ幅を1200px前後に設定し、左右の余白で残りを埋める構成が実務上よく使われます。Frameの横幅は1440pxとしつつ、内側のコンテンツをまとめるFrameを1200pxで作れば、実際の画面での見え方に近い状態で設計できます。
最初から幅を細かく調整しようとすると時間が消えます。コンテンツ幅1200px・左右余白120pxを基準として固定し、コンテンツの配置を優先して作業を進めると効率よく形になります。
テンプレートを複製して構造を観察する練習も効果的
自分でゼロから作る練習と並行して、Figmaコミュニティで公開されているFigma Basicsのファイルを複製し、どのようなFrameの構成になっているかを観察する練習も理解を深めます。Frames・Constraints・Components・Styles・Smart Selectionといった基礎概念が学べる日本語版のファイルが公開されており、自分で作ったファイルと見比べることで「なぜこう作られているのか」が体感としてつかみやすくなります。
Q： ワイヤーフレームを作るとき、画像はどう扱えばいいですか？
A： ワイヤーフレームの段階では、画像の代わりにグレーの長方形（Rectangle）を置いておくのが一般的です。実際の画像を用意する必要がないため、情報配置の確認に集中できます。長方形の上に「メインビジュアル」「商品写真」などのTextを置けば、どこに何が入るかをクライアントに伝えやすくなります。
Q： ワイヤーフレームをクライアントに共有するにはどうすればいいですか？
A： FigmaのShareボタンから「リンクを共有」を選ぶと、ブラウザ上でファイルを閲覧できるURLを発行できます。クライアントがFigmaのアカウントを持っていなくてもリンクから閲覧できるため、メールやチャットにURLを貼るだけで共有が完了します。編集権限ではなく閲覧権限で共有することで、意図せず変更されるリスクも防げます。
Figma初心者向け5つの学習ハック
【対象】: Frame・Textを触ったことはあるが、ワイヤーフレームを一度も完成させたことがない初心者。
【手順】: 新規デザインファイルを開き、横幅1440pxのFrameを1つ作ります（5分）。次に、ヘッダー・メインビジュアル・コンテンツ・フッターの4つのFrameを縦に並べ、それぞれにTextで見出しを置きます（15分）。最後に、コンテンツ幅を1200pxに設定し、Auto Layoutで各セクションの余白を整えて完成とします（10分）。
【コツと理由】: 1ページを最後まで作り切ることで手に残るものが大きくなります。部品だけ作って止まると「何を学んだのか」が曖昧になりますが、1ページ完成させると「ここが迷った」「ここが崩れた」という具体的な課題が見えます。課題が具体的になれば、次に何を調べればよいかが自然に決まります。
【注意点】: 1ページを作る中で色やフォントの選択に時間を使わないようにしてください。ワイヤーフレームの段階では黒・白・グレーのみで作り切るのが正解です。「フォントを選んでいたら2時間経っていた」という経験をする人は珍しくないため、最初は「システムフォント・黒・余白のみ」と制約を決めてしまうのが現実的です。
ハック2: 小さなUI要素の模写で基本操作を反復する
【対象】: Frame・Textの操作を覚えたが、Auto Layoutの使い方に自信がない初心者。
【手順】: 実在するWebサイトのナビゲーションバーをスクリーンショットで手元に用意します（3分）。FigmaでFrameを1つ作り、Textでナビゲーション項目を横並びに置きます（10分）。全項目を選択してShift+Aを押し、Auto Layoutで間隔を統一します（5分）。
【コツと理由】: 小さなUI要素（ナビゲーション・ボタン・カード）を1つ完成させる繰り返しがAuto Layoutの使い方を体感として覚えやすくします。全体を作ろうとすると途中でつまずいた箇所の原因が特定しにくくなりますが、部品単位で作れば「どこで崩れたか」が即座に分かります。
【注意点】: 模写対象をピクセル単位で完全再現しようとしなくて大丈夫です。「間隔が揃っている」「Auto Layoutが正しく設定されている」の2点を確認できれば十分です。完全再現を目指すと模写が目的になってしまい、Auto Layoutの習得が後回しになります。
ハック3: Figma Basicsの日本語版を複製して順番に読む
【対象】: 基本操作の反復に慣れてきたが、ComponentsやConstraintsの使い方がまだあいまいな人。
【手順】: Figma Basics 日本語版をコミュニティから複製して自分のドラフトに保存します（3分）。Frames → Constraints → Components → Styles の順に1概念ずつ開き、解説テキストを読んで自分で操作を試します（1概念あたり15〜20分）。試した操作を別の新規ファイルで再現してみます（1概念あたり10分）。
【コツと理由】: Figmaが自ら提供する学習素材を使うことで、操作と解説を同一のファイル内で確認できます。外部記事を読むと「記事を読む時間」と「Figmaを操作する時間」が分離しがちですが、Basicsファイルはその2つが1つのキャンバス上で完結します。理解の確認を「再現できたか」で測れる点も、手応えが分かりやすい理由です。
【注意点】: Basicsファイルの全項目を完璧にこなそうとすると学習が長期化します。フリーランスの初期段階で実務的に必要なのはFrames・Constraints・Componentsの3つが中心です。StylesとSmart Selectionは複数ページの案件を扱う段階で改めて学ぶのが無理のない順序です。
ハック4: ショートカットよりも3つの基本操作の反復を優先する
【対象】: 「Figmaを使いこなしたい」と感じて、早い段階からショートカットを覚えようとしている初心者。
【手順】: Frame（Fキー）・Text（Tキー）・移動（Vキー）の3つのショートカットだけを最初の1週間で覚えます（5分）。この3つを使いながら、1日15〜30分間キャンバスで自由に要素を作る時間を設けます（毎日）。「もっと早くしたい」と感じた操作が出てきた段階でそのショートカットだけを追加で覚えます（都度）。
【コツと理由】: 3つの基本操作を繰り返して手に馴染ませる方が、実務で使えるスピードへの到達が早くなります。ショートカットはキャンバスを触る中で「ここをもっと早くしたい」という場面から覚えると記憶に定着しやすく、必要ない操作のショートカットを先に覚えても実務ではほとんど使いません。
【注意点】: Frame・Text・Auto Layoutの3操作であれば、マウス操作だけでも1ページのワイヤーフレームを完成させることは十分できます。「まずショートカット表を印刷した」という人は珍しくありませんが、使わない操作を先に覚えても使わなければ忘れるだけです。
ハック5: 提案用モックを1つ作ってポートフォリオに使う
【対象】: ワイヤーフレームを作れるようになり、フリーランス案件の提案に使えるアウトプットを用意したい人。
【手順】: 自分が提案したいジャンル（飲食・EC・医療など）の実在するサイトを1つ選び、トップページをワイヤーフレームで再現します（30〜60分）。Figmaの共有URLを発行し、ブラウザで閲覧できる状態にして手元に保存しておきます（5分）。提案時にURLを送付し、「ワイヤーフレームを使って進行する」ことを提案書または見積もりの説明に含めます（都度）。
【コツと理由】: Figmaの基本操作が一通り使えるようになった段階でアウトプットを1つ作ってポートフォリオに使うと、案件獲得までの距離が縮まります。「何ができるか」を説明するよりも「このように作れます」という共有URLを示す方が、クライアントの理解が早く、受注の可否が素早く決まる場面が多くあります。フリーランスの見積書の書き方とセットで準備しておくと、提案フローが整います。
【注意点】: ポートフォリオ用のモックはピクセル完璧でなくて構いません。「情報配置が整っていて、フレームが崩れていない」状態であれば提案資料として機能します。「完璧になってから使おう」と後回しにすると使えるタイミングが訪れないため、70〜80%の完成度で共有URLを持っておくことを優先してください。「もう少し整えてから」と3ヶ月後回しにしてしまうケースは珍しくありませんが、未完成のまま共有して「ここはこれから詰めます」と伝える方が実際の仕事の流れに近い進め方です。
CHECK
▶ 今すぐやること: Figma Basics日本語版をコミュニティから複製し、Framesのページだけ開いて解説を読んでみる（10分）
Q: Figmaの操作を勉強するのに良い教材はありますか？
A： Figma公式の学習リソースとFigma Basics日本語版は、操作しながら概念を確認できる公式の学習素材です。外部の解説ブログや動画と組み合わせるより、まずこの2つで基礎を固める方が操作と理解が連動しやすくなります。
Q： Components（コンポーネント）はいつ覚えれば良いですか？
A： 1ページのワイヤーフレームを完成させた後が現実的なタイミングです。同じボタンやカードを複数箇所で使い回すようになった段階で、Componentsの管理が便利に感じられ始めます。最初からComponentsを意識して作ろうとすると、配置の練習より構造の設計に時間を使うことになり、最初のハードルが上がります。
Figma初心者はFrame・Text・Auto Layoutの3操作から始める
Figma初心者がまず覚えるべきは、Frame・Text・Auto Layoutの3つの操作です。この3つを使って1ページのワイヤーフレームを完成させることが、フリーランスとしてFigmaを実務で使えるようになる最初の到達点です。無料のStarterプランでブラウザから始められるため、ツールの導入コストはかかりません。
3操作を覚えてから悩むことで「何を次に学べばいいか」が具体的になります。全体を網羅しようとして止まるより、今日1ページ作り切ることを目標にするとFigmaとの距離が縮まります。フリーランスとして案件を獲得するための全体的な流れについては、フリーランスの営業方法も合わせて参考にしてください。
| 状況 | 次の一歩 | 所要時間 |
| アカウント未作成 | Figma公式でアカウント作成・Starterプラン選択 | 5分 |
| Frame未経験 | 1440pxのFrameを1つ作ってTextを置く | 10分 |
| Auto Layout未経験 | ナビゲーションバーをShift+Aで整列させる | 15分 |
| ワイヤーフレーム未完成 | 4構成（ヘッダー・MV・コンテンツ・フッター）で1ページ完成 | 30〜60分 |
| 1ページ完成済み | Figma Basicsファイルを複製してConstraints・Componentsを確認 | 20〜30分 |
Figma初心者に関するよくある質問
Q: FigmaはMacとWindowsのどちらで使えますか？
A： Figmaはブラウザ版であればMac・Windows・Chromebookを問わず利用できます。デスクトップアプリはMac版・Windows版どちらも提供されています。初心者の段階ではOSを問わずブラウザ版で始めると導入がスムーズです。
Q： Figmaで作ったワイヤーフレームをPDFやPNGに書き出すにはどうすればいいですか？
A： Figmaのメニューから「File → Export」または、書き出したい要素を選択して右パネルの「Export」セクションから形式を選べます。PDF・PNG・SVG・JPGなどの形式に対応しており、クライアントへの納品形式に合わせて選択できます。
Q： Figmaを使い始めたばかりで、案件を受注してから覚えることはできますか？
A： Frame・Text・Auto Layoutの3操作が使えれば、ワイヤーフレームを中心とした案件であれば受注後に覚えながら進めることは可能です。作業中に基本操作で止まると納期が厳しくなるため、受注前に1ページのワイヤーフレームを1本完成させておくことを強くお勧めします。