「Figmaを始めてみたが、何から覚えればよいか分からない」
「フレームとグループの違いが分からなくて止まった」
「自分はWebデザインに使いたいが、どの機能を優先すべきか」
——Figmaは機能が多く、調べると情報が多すぎて「自分の目的なら何から触ればよいか」が見えにくいのが詰まりやすい理由です。
FigmaはWebサイト、アプリ画面、ワイヤーフレーム、プロトタイプを作れるデザインツールです。初心者はまずフレーム・図形・テキスト・レイヤー・共有を覚え、次に目的に応じてオートレイアウト、コンポーネント、プロトタイプへ進みます。
この記事でわかること
✅Figmaでできることと向いている人
✅アカウント作成・始め方の手順
✅基本画面の見方
✅初心者が最初に覚えるべき基本操作
✅オートレイアウト・コンポーネント・プロトタイプの概要
✅目的別（Web/UI/ワイヤーフレーム/共有/エンジニア連携）の使い方
✅初心者向け練習課題と7日間練習メニュー
✅よくあるつまずきと対処
監修者 三上 功太 / アドネス株式会社 代表取締役
“本質のSNSマーケター みかみ“として
2020年からSNSで活動を開始
現在はアドネス株式会社 代表取締役として、
300名以上のメンバーを束ねる
教育のDXを実現し、累計生徒数5,000名を突破した
スキル習得プログラム「スキルプラス」を運営
最新AIを活用し、組織マネジメントに特化したサービス
「VisionToDo」を独自開発
SNS総フォロワー数は30万人を突破し、
Abemaや、朝日新聞、テレビなど多数のメディアに掲載
渋谷、新宿など主要駅でブランド広告を配信
▼ 2025-2026年の主な実績
- Amazonランキング1位獲得
(2026/1発売 新著『賢く生きる習慣』) - 特許を2件取得
(教育の属人性を解消する動的カリキュラム技術) - 東京大学・大阪教育大学にて特別講義
- 東北大学医学部と共同研究を開始
- 堀江貴文氏とラジオ対談出演 (CROSS FM)
- 渋谷・新宿・JR西日本にてブランド広告ジャック
Figmaとは何か
FigmaはブラウザとデスクトップアプリでWebデザイン・UIデザイン・プロトタイプを作れる共同編集ツールです。
インストールなしでブラウザから使い始めることができ、チームで同じファイルをリアルタイムに編集・確認できます。
Figmaでできること
- Webサイトのデザイン（LP・コーポレートサイト・バナー）
- アプリ画面のUIデザイン
- ワイヤーフレームの作成
- プロトタイプ（画面遷移・クリック操作の確認）
- チームでの共同編集とコメントによるレビュー
- エンジニアへのデザイン共有（寸法・アセットを確認できる）
- FigJamでのアイデア整理・ワークショップ
Figmaが向いている人
- Webデザインを学びたい人
- UI/UXデザインを学びたい人
- ノンデザイナーで画面イメージをチームに共有したい人
- デザインをチームでレビューしたい人
- エンジニアにデザインを渡したい人
Figmaの始め方
FigmaのアカウントはメールアドレスまたはGoogleアカウントで作成できます。
無料プランで基本的な機能を試せます。
アカウントを作成する
- https://www.figma.com/ にアクセスする
- 「Get started for free」または「Sign up」からアカウントを作成する
- ダッシュボードが開いたら「New design file」で空のファイルを作成する
- まず基本操作を練習する
料金・プランは公式で確認する
Figmaは料金体系・シート数・プラン名が変更されやすいため、本記事では料金の詳細を断定しません。
Figmaの基本画面の見方
Figmaの画面は「左のレイヤーパネル・中央のキャンバス・右のデザイン設定パネル」の3つで構成されています。
この3つの役割を理解すれば、基本操作で迷わなくなります。
左側｜レイヤーとAssets
- レイヤー｜ファイル内の要素（フレーム・図形・テキスト）の一覧と重なり順
- Assets｜コンポーネント・スタイル・外部ライブラリの管理
要素を選択できないときは、まずレイヤーパネルで選択対象を確認します。
中央｜キャンバス
実際にデザインを作る場所です。フレームを配置して、その中に図形・テキスト・画像を並べます。スクロールまたはCtrl/⌘＋スクロールで拡大・縮小できます。
右側｜デザイン設定パネル
選択した要素の設定を変更します。
- デザインタブ｜サイズ・位置・色・角丸・余白・オートレイアウト
- プロトタイプタブ｜画面遷移の接続
- Dev Modeまたは基本インスペクション｜実装者向けの寸法・プロパティ・アセット情報を確認できます。利用できる範囲はプラン・シート種別によって異なります（詳細は後述）
初心者が最初に覚えるべき基本操作
最初に覚えるべき操作は5つです。 この5つが使えれば、シンプルなワイヤーフレームや画面イメージを作れるようになります。
Figma基本操作マップ
| 操作 | できるようになること | 優先度 |
|---|---|---|
| フレーム | 画面・ページの土台を作る | 高 |
| 図形 | ボタン・カード・画像枠を作る | 高 |
| テキスト | 見出しや説明文を配置する | 高 |
| レイヤー | 要素の重なりを整理・選択する | 高 |
| 共有・コメント | チームに見せてレビューを受ける | 高 |
| オートレイアウト | 余白と整列を保つ | 次のステップ |
| コンポーネント | パーツを再利用する | 次のステップ |
| プロトタイプ | 画面遷移を確認する | 次のステップ |
| Dev Mode | 実装者に情報を渡す（有料プラン） | 目的次第 |
フレームの使い方
フレームは画面やページの土台になる要素です。
FキーまたはツールバーのFrame（#アイコン）を選択し、キャンバス上にドラッグして作成します。
右のパネルでiPhone・Desktop・Tabletなどのサイズを選択できます。Web制作では最初にDesktopまたはカスタムサイズのフレームを作成します。
◎フレームとグループの違い
フレームはレイアウトやプロトタイプ設定の基点になります。単純にまとめるだけならグループ、画面単位や部品の土台にするならフレームを使います。
図形・テキスト・画像の使い方
- 図形：Rキーで長方形、Oキーで楕円、ショートカットまたはツールバーから選択して描く
- テキスト：Tキーでテキストツールを選択、クリックして入力
- 画像：メニューの「File > Place image」またはドラッグ&ドロップで配置
レイヤーの考え方
レイヤーは要素の重なり順を管理する仕組みです。
上にあるレイヤーが前面に表示されます。
- 名前を付けると選択・管理がしやすくなる（ダブルクリックで名前を変更）
- 要素が増えてきたらグループ化またはフレーム化して整理する
- レイヤーパネルで直接クリックすれば、キャンバス上で見えにくい要素も選択できる
共有・コメントの基本
右上の「Share」ボタンで共有リンクを発行できます。
- 閲覧のみ/コメント可/編集可の権限を設定できる
- Cキーでコメントモードになり、任意の場所にコメントできます
- チームが同じファイルを見ながらリアルタイムでレビューできる
Figmaが使えるようになると何ができるか
Figmaを使えるようになると、口頭説明だけでは伝えにくいデザインイメージを画面で共有できるようになります。
作れる制作物が増える
| 目的 | 作れるもの |
|---|---|
| Webデザイン | LP・コーポレートサイト・バナー・ワイヤーフレーム |
| UI/UX | アプリ画面・管理画面・UIコンポーネント |
| プロトタイプ | 画面遷移・クリック後の動き |
| チーム共有 | レビュー用ファイル・コメント付き提案 |
| エンジニア共有 | 実装前の画面仕様・寸法・アセット |
仕事・学習で変わること
- 「こんな画面にしたい」をイメージではなく画面で伝えられる
- 修正指示をデザイン上にコメントで残せる（認識ズレが減る）
- 学習成果物をポートフォリオとして共有しやすくなる
- エンジニアとの仕様確認にかかる往復を減らせる
副業・転職に活かす場合の現実的な見方
Figmaを触れるだけで案件獲得・転職できるわけではありません。
Figmaは制作ツールの一つで、Web/UIの基礎・余白・配色・情報設計の理解、そして実績作りが別途必要です。
まずは練習課題で制作物を作り、ポートフォリオとして見せられる状態にすることが最初の一歩です。
目的別に見るFigmaの使い方
Figmaで最初に優先すべき機能は、目的によって変わります。
自分の目的を先に確認してから、次に練習する機能を決めてください。
目的別Figma学習ロードマップ
| 目的 | 最初に覚える | 次に覚える | 後でよい |
|---|---|---|---|
| Webデザイン | フレーム・テキスト・図形 | オートレイアウト・コンポーネント | Dev Mode詳細 |
| UI/UXデザイン | フレーム・コンポーネント | プロトタイプ・バリアント | 高度な変数 |
| ワイヤーフレーム | フレーム・図形・テキスト | コメント・共有 | 細かい装飾 |
| チーム共有・レビュー | 共有・コメント | プロトタイプ・権限設定 | デザインシステム |
| エンジニアへの引き継ぎ | 共有・書き出し | Dev Mode（有料） | FigJam |
Webデザインで使う場合
フレームでDesktopサイズの土台を作り、グリッド設定でレイアウトを整えます。テキスト・図形・画像を配置したら、オートレイアウトで余白を整えます。ボタン・カードなど繰り返し使うパーツはコンポーネント化すると修正が楽になります。
UI/UXデザインで使う場合
iPhoneまたはAndroidサイズのフレームで始めます。UIパーツをコンポーネント化し、画面間をプロトタイプで接続することで、クライアントや開発者に操作感を確認させられます。
ワイヤーフレームで使う場合
装飾は最小限にして、フレーム・図形（グレーで塗り）・テキストだけで画面の構造を作ります。FigJamでユーザーフローを整理してからFigmaでワイヤーを作る流れが効率的です。
チーム共有・エンジニア共有で使う場合
共有リンクの権限設定（閲覧・コメント・編集）を使い分けます。エンジニアへの引き継ぎにはDev Modeが有効ですが、Dev Modeの利用条件は有料プランが必要です（詳細は後述）。
基本操作は分かった。ただ、自分の目的では何から練習し、どの機能を優先すべきか整理できていない方へ。
「生成AIチェックシート」でFigmaを使いたい目的・作りたいもの・学習時間を確認すると、最初に覚える機能と次の1週間の練習順を整理できます。公式LINEで無料配布中。目的が決まっていれば3分で確認できます。
【手順】
①上記ボタンをクリック➡︎②「スキルプラス公式LINE」が開く➡︎③「追加」を押すだけ（30秒）
※30秒で無料で登録完了！いつでもブロックOK
※ 他のプレゼント（プロンプトチェックシート・SNSマーケ基礎など）もLINEで受け取れます。
オートレイアウトの使い方
オートレイアウトは余白・整列・要素のサイズ調整を自動で保つ機能です。
手動で並び替えていた作業が、テキスト量が変わっても自動で整います。初心者はボタン作成から練習します。
オートレイアウトでできること
- 要素の自動整列（横並び・縦並び）
- 余白（Padding・Gap）の一括管理
- テキスト量が増えても崩れないレイアウト
- レスポンシブな配置の設定
最初の練習はボタンから
- テキスト（例：「送信」）を配置する
- テキストを選択した状態でShift + Aを押す（オートレイアウト化）
- 右パネルでPadding（内側の余白）を設定する
- テキストを変更しても形が崩れないことを確認する
この練習でオートレイアウトの仕組みが体感できます。
コンポーネントの使い方
コンポーネントは繰り返し使うパーツを1か所で管理する仕組みです。
ボタンやカードをコンポーネント化すると、1か所を変更するだけで全体に反映できます。
コンポーネントでできること
- ボタンを複数の画面で再利用する
- ヘッダー・フッターを統一する
- メインコンポーネントを変更すると全インスタンスに自動反映
- デザインのズレを防げる
初心者が覚える順番
- ボタンを1つ作る
- 右クリック→「Create component」でコンポーネント化する
- Alt/Optionキーを押しながらドラッグして複製（インスタンスを作る）
- メインコンポーネントのテキスト・色を変更して全体に反映されることを確認する
プロトタイプの作り方
プロトタイプは画面遷移やクリック後の動きを確認する機能です。
右パネルの「Prototype」タブでフレーム同士を接続します。
プロトタイプでできること
- ボタンを押したら別の画面に移動する
- モーダルウィンドウを表示する
- 画面遷移のアニメーションを確認する
- クライアントや開発者に操作感を見せる
最初に作るべきプロトタイプ
- トップ画面と詳細画面の2フレームを作る
- Prototypeタブを開く
- トップ画面のボタンから詳細画面へ矢印をドラッグする
- 右上の「Present」（▶ボタン）で確認する
共有・コメント・エンジニアへの引き継ぎ
作ったデザインをチームやエンジニアに共有する方法は3つあります。
「共有リンク」「コメント」「Dev Mode（または基本インスペクション）」を目的に応じて使い分けます。
共有リンクと権限設定
右上の「Share」から共有リンクを発行し、権限を設定します。
| 権限 | できること |
|---|---|
| 閲覧のみ | デザインを見るだけ |
| コメント可 | デザインへのコメントを残せる |
| 編集可 | ファイルの編集ができる |
チームへの共有は「コメント可」で渡すのが一般的です。
コメントでレビューする
Cキーでコメントモードになり、デザイン上の任意の場所にコメントできます。修正対応後に「Resolve（解決済み）」にします。チームで修正箇所の認識を揃えるのに便利です。
Dev Modeと基本インスペクション
Dev Modeは開発者がデザインの寸法・プロパティ・アセット・コード関連情報を確認し、実装に引き継ぐための開発者向けモードです。
FigJamとFigma Designの違い
FigmaにはFigma Design（デザイン用）とFigJam（アイデア整理用）の2種類があります。
| 項目 | Figma Design | FigJam |
|---|---|---|
| 主な用途 | UI・Webデザイン・プロトタイプ | アイデア出し・ワークショップ・フロー整理 |
| 向いている作業 | ピクセル精度のデザイン・エンジニア共有 | 付箋・図・会議メモ・ユーザーフロー |
| 主な使い手 | デザイナー・開発者 | 全職種（デザイナー以外も使いやすい） |
初心者がデザインを作りたい場合は「Figma Design」を使います。FigJamはワイヤーフレームの前段でユーザーフローやアイデアを整理するときに便利です。
初心者がつまずきやすいポイントと対処
Figmaでつまずきやすい箇所はパターンが決まっています。
| つまずきポイント | 原因 | 対処法 |
|---|---|---|
| 要素を選択できない | レイヤーが重なっている・フレーム内の要素 | レイヤーパネルで直接クリックする |
| フレームとグループの違いが分からない | 概念が似ている | 画面単位→フレーム、まとめるだけ→グループ |
| オートレイアウトで崩れる | Padding/Gap/Resizingの設定ミス | まずボタンなど小さい単位で練習する |
| テキストが編集できない | コンポーネントのインスタンスを触っている | メインコンポーネントで編集する |
| レイヤーが増えすぎて分からない | 名前未設定・グループ化不足 | 作業のたびに名前をつけ・グループ化する |
| 共有したのに相手が編集できない | 権限設定が「閲覧のみ」になっている | 共有設定で権限を「編集可」に変更する |
Figmaの練習方法
Figmaは見て覚えるより、手を動かして覚える方が定着します。
初心者向け練習課題10選
- 名刺サイズのカードを作る（図形+テキスト）
- ボタンを3種類作る（塗り/アウトライン/テキストのみ）
- スマホ画面のログインUIを作る（フレーム+フォーム）
- LPのファーストビューを作る（フレーム+テキスト+画像）
- Webサイトのワイヤーフレームを作る（図形+テキストのみ）
- カード一覧をオートレイアウトで作る（自動整列の練習）
- ボタンをコンポーネント化する（再利用の練習）
- 2画面のプロトタイプを作る（遷移の練習）
- コメント付きで他者に共有する（共有フローの練習）
- 共有前チェックリストで確認する（公開前品質確認）
7日間の練習メニュー
| 日数 | 練習内容 |
|---|---|
| 1日目 | 基本画面の確認・フレーム・図形・テキストの配置 |
| 2日目 | レイヤー整理・色・フォント・画像の配置 |
| 3日目 | ワイヤーフレームを1画面作る |
| 4日目 | オートレイアウトでボタン・カードを作る |
| 5日目 | コンポーネントを作って複製する |
| 6日目 | 2画面のプロトタイプを作る |
| 7日目 | 共有・コメント・チェックリストで公開前確認 |
使い方は分かった。今日から何を作って練習すればよいか決めたい方へ。
「ロードマップ・チェックリスト」では7日間の練習メニュー、オートレイアウト・コンポーネント・プロトタイプの課題、共有前に確認する項目をまとめています。公式LINEで無料配布。必要な課題だけ取り組めます。
【手順】
①上記ボタンをクリック➡︎②「スキルプラス公式LINE」が開く➡︎③「追加」を押すだけ（30秒）
※30秒で無料で登録完了！いつでもブロックOK
※ 他のプレゼント（プロンプトチェックシート・SNSマーケ基礎など）もLINEで受け取れます。
共有・公開前チェックリスト
完成したデザインを共有する前に以下を確認します。
初心者が最初に覚えるべき機能チェックリスト
- フレームを作れる
- テキストを入れられる
- 図形を配置できる
- 画像を入れられる
- レイヤーを選択・並び替えできる
- 色・フォント・余白を変更できる
- 共有リンクを作れる
- コメントを残せる
- 1つの画面遷移を作れる
共有前チェックリスト
- レイヤーに名前が付いているか
- 不要な要素・テキストが残っていないか
- フレームのサイズが正しいか
- 共有権限が目的通りに設定されているか（閲覧のみ/コメント/編集）
- コメントで伝えたい意図が書かれているか
- プロトタイプの接続が正しいか（プロトタイプを渡す場合）
まとめ
Figmaを使えるようになる順番は以下のとおりです。
- まず基本操作を覚える：フレーム・図形・テキスト・レイヤー・共有
- 次に目的に合った機能へ進む：Web→オートレイアウト、UI→コンポーネント/プロトタイプ
- 練習課題で手を動かす：7日間メニューで制作物を作る
FAQ
Q1. Figmaは無料で使えますか？
無料で始められるプランがあります。ファイル数・機能・シートの制限はプランによって異なります。最新情報はFigma公式Pricingでご確認ください。
Q2. デザイン未経験でも使えますか？
基本操作は未経験でも学べます。ただし良いデザインを作るには余白・配色・情報設計など、ツール操作以外の学習も必要です。まず練習課題で手を動かすことを優先してください。
Q3. 最初に覚えるべき機能は何ですか？
フレーム・図形・テキスト・レイヤー・共有の5つです。次にオートレイアウト・コンポーネント・プロトタイプの順で進みます。
Q4. Figmaは日本語で使えますか？
【公式情報】Figmaは日本語UIに対応しています。日本語のヘルプやドキュメントも整備されています。UIや対応範囲の最新状況はFigma Help Centerでご確認ください。
Q5. Dev Modeは無料で使えますか？
【公式情報】Figma公式HelpによるとDev ModeはStarterプランでは利用できず、有料プランのFullシートまたはDevシートで利用できると案内されています。View/Collabシートでは基本的な寸法確認など一部の基本インスペクションのみ可能です。最新の利用条件はFigma Help Centerでご確認ください。
Q6. FigmaとAdobe XDはどちらがよいですか？
現在はFigmaが主流になっています。Adobe XDはメンテナンスモードで、新機能開発への投資は行われていないとされています。最新状況はAdobe公式情報をご確認ください。これからデザインを学ぶ場合はFigmaを選ぶのが現実的です。
参照した公式情報・一次情報の一覧
- Figma公式サイト https://www.figma.com/
- Figma Help Center https://help.figma.com/
- Figma公式Learn（初心者コース） https://help.figma.com/hc/en-us/articles/30848209492887-Course-overview-Figma-Design-for-beginners-2025
- Figma公式Pricing https://www.figma.com/pricing/
- Figma Help：Guide to Dev Mode https://help.figma.com/hc/en-us/articles/15023124644247-Guide-to-Dev-Mode
- Figma Help：Guide to billing https://help.figma.com/hc/en-us/articles/29717597009431-Guide-to-billing-at-Figma
Figmaの機能・料金・プラン名は変更される場合があります。本記事は2026年6月時点の情報をもとに記載しています。最新情報は公式ページでご確認ください。
