Figmaは、無料のStarterプランのままでも初心者の練習には十分使えます。最初に覚える操作はフレーム・図形・テキスト・オートレイアウトの4つだけ。まずバナーを1枚作り、書き出すところまで通すのが最短ルートです。
この記事でわかること
- 無料のStarterプランでできること・できないこと（2026年9月時点の公式情報で確認）
- アカウント作成から最初のファイルを開くまでの手順
- 最初に覚える操作と、フレームとグループの違いなどつまずきやすい点
- 制作の現場で最初の1か月に使う機能・後回しでいい機能の線引き
- クライアントやコーダーへデータを渡すときの作法
独学でFigmaの操作は覚えたものの、作ったデザインが仕事の水準に届いているか判断できない方へ。作品の添削つきで学べるスクールの無料カウンセリングもあります。
先に押さえる要点
- Figmaはブラウザで動くデザインツール。インストールなしで始められ、共同編集とコメントが標準で使える
- 無料のStarterでもドラフトは無制限。チームで扱うファイルは3個まで、履歴は30日
- 最初の1か月はフレーム・図形・テキスト・オートレイアウト・書き出しで足りる
- 練習はバナー1枚→LPのファーストビューの順。いきなりサイト全体を作らない
Figmaとは？初心者が最初に知っておくこと
Figmaは、Webサイトやアプリの画面をデザインするためのツールです。ブラウザ上で動き、同じファイルを複数人で同時に編集できるのが一番の特徴になります。
デスクトップアプリもありますが、中身はブラウザ版と同じです。ファイルはクラウドに保存されるので、PCを替えても続きから作業できます。
制作の現場では、Webサイトのデザインカンプ（完成見本）やワイヤーフレーム（骨組み）をFigmaで作る場面が増えました。クライアントにURLを送れば、相手はアカウントがなくても画面を確認できます。
Photoshop・Illustratorとの分担
Figmaを覚えれば、PhotoshopやIllustratorが要らなくなるわけではありません。役割がそれぞれ違います。
3つのツールの役割
| ツール | 得意なこと | Web制作での主な出番 |
|---|---|---|
| Figma | 画面のレイアウト・共同編集・プロトタイプ | サイトやLPのデザインカンプ、ワイヤーフレーム |
| Photoshop | 写真の加工・合成 | バナーの写真補正、メインビジュアルの合成 |
| Illustrator | ロゴ・アイコンなどの図形 | ロゴ作成、細かいイラスト |
画面の設計はFigma、写真の加工はPhotoshop、ロゴはIllustratorという分担が一般的です。学ぶ順番に迷う場合はPhotoshopとIllustratorどっちを先に学ぶかもあわせてご覧ください。
無料プランでどこまで使える？料金を公式情報で確認
練習用途なら、無料のStarterプランで困る場面はほとんどありません。制限が効いてくるのは、チームで複数の案件ファイルを並行して持つようになってからです。
Starter（無料）の主な範囲（2026年9月29日 公式ページで確認）
| 項目 | Starter（無料）の扱い |
|---|---|
| ドラフト（個人の下書きファイル） | 無制限 |
| チームのファイル | 1チームにつき3個まで |
| バージョン履歴 | 30日分 |
| プロトタイプ | 使える |
| Dev Mode・共有ライブラリなど | 使えない（有料プラン） |
有料のProfessionalプランは、デザインを編集できるフルシートが月16ドル、開発者向けのDevシートが月12ドルです。公式の料金ページは米ドル表示のため、円での請求額は為替と支払い方法で変わります。
学生と教職員は、教育プランで有料機能を無料で使えます。学校のメールアドレスで登録し、資格確認を済ませるのが条件です。
出典: Figma「料金プラン」（参照）／Figma Learn「Figmaのプランと特徴」（参照）／Figma「教育機関向け」（参照）。いずれも2026年9月29日に確認。
Figmaの始め方：アカウント作成から最初のファイルまで
始め方はシンプルで、10分もあれば最初のファイルを開けます。
- 公式サイトでアカウントを作る：メールアドレスかGoogleアカウントで登録する
- プランはStarter（無料）を選ぶ：練習の段階で有料プランは要らない
- 新規デザインファイルを作る：ホーム画面の「新規作成」からデザインファイルを選ぶ
- フレームを置く：右側のパネルでサイズのプリセット（デスクトップ・スマホなど）を選ぶ
- ファイル名を付ける：「練習_バナー_0929」のように日付入りにしておくと後で探しやすい
ブラウザ版で困らなければ、アプリを入れる必要はありません。PCに入っている日本語フォントを使いたい場合だけ、デスクトップアプリかフォント用の補助ソフトを入れます。
画面の見方と、最初に覚える操作
画面は大きく3つに分かれます。左がレイヤーの一覧、中央が作業するキャンバス、右が選んだ要素の設定パネルです。
最初から全部の機能を覚えようとすると、手が止まります。よく使う操作は10個ほどなので、ショートカットと一緒に覚えるのが近道です。
最初に覚える操作とショートカット
| 操作 | ショートカット（Windows／Mac） | 使う場面 |
|---|---|---|
| フレームを作る | F | 画面や部品の外枠を作る |
| 長方形を描く | R | ボタンや背景の土台 |
| テキストを入れる | T | 見出し・本文・ボタンの文字 |
| グループにする | Ctrl+G／⌘+G | 複数の要素をまとめて動かす |
| 複製する | Ctrl+D／⌘+D | 同じ部品を並べる |
| オートレイアウトを付ける | Shift+A | 余白を保ったまま中身を増減させる |
| 画面全体を表示する | Shift+1 | 迷子になったとき |
フレームとグループの違い
初心者が最初に混乱するのが、フレームとグループの違いです。どちらも要素をまとめますが、性質がまったく違います。
フレームとグループの使い分け
- 性質
- 自分のサイズを持つ「箱」
- できること
- 背景色・角丸・はみ出しの切り取り・オートレイアウト
- 使う場面
- 画面全体、ボタン、カードなど部品の外枠
- 性質
- 中身に合わせて大きさが決まる「束」
- できること
- まとめて移動・拡大縮小
- 使う場面
- アイコンと文字を一緒に動かしたいだけのとき
図：迷ったらフレームを選ぶ。グループは「一緒に動かすだけ」のときに使う。
迷ったら、まずフレームを使うと覚えておけば困りません。ボタンやカードをグループで作ると、あとで余白を整えたりオートレイアウトを付けたりするときに作り直しになります。
最初の1枚はバナーで練習する
操作を覚えたら、何か1つを最後まで作ります。最初の題材はバナーが向いています。サイズが小さく、配置・文字・色・書き出しまで一通り練習できるからです。
バナー1枚を仕上げる流れ
- 1お手本を決める実在の広告バナーを1枚選び、サイズを合わせたフレームを作る
- 2配置をなぞる背景・写真・キャッチコピー・ボタンの位置を長方形で置いてみる
- 3文字と色を合わせる文字の大きさの差と、色の数（3色前後）をお手本に近づける
- 4比べて直すお手本と並べ、ずれている余白を1つずつ直す
- 5書き出すフレームを選び、右パネルの書き出しからPNG・2倍で出力する
書き出しまで通すと、実務と同じ一連の流れを体験できる。
図：最初の題材はバナー。作る→比べて直す→書き出すまでを1周する。
いちばん力がつくのは、4番の「比べて直す」工程です。お手本と自分のデザインを横に並べると、余白の広さや文字の大きさの差がはっきり見えます。
バナーを2〜3枚作れたら、次の題材はLPのファーストビュー（最初に見える画面）です。模写の進め方はバナー模写の練習法で詳しく解説しています。
初心者がつまずきやすい4つのポイント
操作は覚えたのに、作業が思うように進まない。そんなときは、次の4点のどれかで止まっていることが多いです。
- オートレイアウトの向きが思った方向にならない：右パネルで縦並び・横並びを切り替える。付けた直後にFigmaが自動で判断するので、違えば選び直す
- 要素が勝手に伸び縮みする：オートレイアウト内の「幅を固定／中身に合わせる／親に合わせる」の設定を確認する
- レイヤーが増えて目的のものを選べない：意味のある名前（「btn_申し込み」など）を付け、フレームで区切る
- 書き出した画像がぼやける：書き出しの倍率を2倍にする。写真は元の画像の解像度も確かめる
中でもオートレイアウトは、使いこなせるかどうかで作業の速さが大きく変わる機能です。Shift+Aで付けたあと、中身の間隔（ギャップ）と外側の余白（パディング）を数値で決めるところから慣れていきます。
出典: Figma Learn「オートレイアウトのガイド」（参照・2026年9月29日確認）
現場で最初の1か月に使う機能・後回しでいい機能
解説記事には「基本の27機能」のように、たくさんの機能が同じ重さで並んでいます。ただ、制作の現場で毎日使うのはそのうち一部です。全部を覚えてから作り始める必要はありません。
覚える順番の目安
- 形を作る
- フレーム・図形・テキスト・画像の配置
- 整える
- 整列・オートレイアウト・カラーとテキストのスタイル
- 渡す
- 書き出し・共有リンク・コメント
- 部品化
- コンポーネントとバリアント
- 動き
- プロトタイプの細かいアニメーション
- 仕組み化
- バリアブル・ライブラリ・Dev Mode
図：まず「作る・整える・渡す」を回せるようにし、部品化や仕組み化は案件が増えてから足す。
コンポーネントは、ボタンなどの部品を1か所で管理する機能です。元の部品（メインコンポーネント）を直すと、使っている箇所（インスタンス）すべてに反映されます。
ページ数の多いサイトでは欠かせない機能ですが、バナー1枚の段階では出番がありません。同じボタンを3か所以上で使うようになったら覚える、くらいの順番で十分です。
出典: Figma Learn「Figmaのコンポーネントについてのガイド」（参照・2026年9月29日確認）
Figmaの操作は独学で覚えられます。時間がかかるのは「このデザインで仕事になるか」の判断です。作品に第三者の目を入れたいなら、添削つきのスクールで相談できます。
デジタルハリウッドSTUDIOの無料カウンセリングを予約する（PR）詳細はリンク先をご確認ください
仕事で使うときの共有と受け渡しの作法
案件でFigmaを使うようになると、操作の上手さより「相手が迷わないデータか」が見られます。レイヤー名が「長方形 23」のままのデータを渡すと、コーダーからの質問が何往復も続きがちです。
受け渡し前のチェック
| 確認すること | 理由 |
|---|---|
| レイヤー名とフレーム名を付けた | コーダーが目的の部品をすぐ探せる |
| 使わない案・没デザインを別ページに移した | どれが最終版か迷わせない |
| 共有リンクの権限を「閲覧」にした | クライアントの誤操作で崩れるのを防ぐ |
| 修正点をコメントで残した | メールより経緯を追いやすい |
| 色と文字サイズをスタイルに登録した | 実装時の数値の食い違いを減らす |
共有リンクを送る相手が「編集」権限を持つと、うっかり要素を動かされることがあります。クライアントには閲覧とコメントだけ許可しておくのが安全です。
デザインを作品としてまとめる段階に入ったら、Webデザインのポートフォリオの作り方も参考にしてください。
Figmaの使い方でよくある質問
Q1：Figmaは無料のままで仕事に使えますか？
個人で1〜2件の案件を回す程度なら、無料のStarterでも対応できます。チームで扱うファイルが3個を超える、1か月以上前の版に戻したい、コーダーにDev Modeで渡したい、といった場面が出てきたら有料プランを検討する時期です。
Q2：Figmaの前にPhotoshopやIllustratorを覚えるべきですか？
Webサイトの画面を作りたいなら、Figmaから始めて問題ありません。写真の加工やロゴ作りが必要になった段階で、PhotoshopやIllustratorを足すのが無理のない順番です。
Q3：日本語フォントが一覧に出てきません。
ブラウザ版でPCのフォントを使うには、デスクトップアプリかフォント用の補助ソフトが必要です。Googleフォントの日本語書体（Noto Sans JPなど）は、そのままでも使えます。
Q4：どのくらい練習すれば仕事で使えるようになりますか？
操作そのものは、毎日触れば2〜3週間で一通り慣れるはずです。仕事で通用するかは、操作より余白や文字の大きさの判断で決まります。まずはバナーを10枚ほど、お手本と比べながら直してみてください。
Q5：学生ですが、有料機能を無料で使えますか？
学生と教職員なら、教育プランで有料機能が無料になります。学校のメールアドレスで登録し、公式ページの手順で資格確認を済ませてください。
まとめ：まずバナー1枚を書き出すところまで
Figmaは、機能を全部覚えるより「作る・整える・渡す」を1周するほうが早く上達します。
この記事のまとめ
- 練習は無料のStarterプランで足りる。制限はチームのファイル3個・履歴30日など
- 最初に覚えるのはフレーム・図形・テキスト・オートレイアウト・書き出し
- 迷ったらグループよりフレーム。あとで余白を整えやすい
- 最初の題材はバナー。お手本と並べて直す工程で力がつく
- 仕事で使うときはレイヤー名・閲覧権限・コメントで相手の手間を減らす
学習の全体の順番はWebデザイン独学ロードマップにまとめています。Figmaはその中の「手を動かす段階」の道具です。
Figmaで作ったデザインを、仕事で通用する水準まで引き上げたい方へ。デジタルハリウッドSTUDIOのWebデザイナー専攻はFigmaを含むカリキュラムで、作品の添削を受けながら学べます。まずは無料カウンセリングで、今の作品と学び方を相談できます。
無料カウンセリングで学び方を相談する（PR）詳細はリンク先をご確認ください
- PhotoshopとIllustratorどっち？Webデザイン初心者がまず学ぶべき方を現場視点で解説
- バナー模写の練習法｜伸びる人の進め方と数だけこなして上達しない人の違い
- Webデザイン独学ロードマップ｜何から始めて仕事になるまでの順番
- Adobe CCの料金を年額で比較する方法
免責事項
※本記事はFigmaの公式情報（2026年9月29日時点）と制作実務をもとにした整理です。料金・プラン内容・機能は変更されることがあるため、最新の情報は公式サイトでご確認ください。スクールのカリキュラムや受講料も各公式サイトでご確認ください。
