第2章 Figmaの基本操作──まず30分で「触れる」ようになる
連載：PMのためのFigma入門 ＃02
2026年4月版
🚀 このnoteで何が変わるか
この章では、Figmaを「なんとなく開いて閉じる」から「使えるツール」に変えます。
目標はシンプルです。30分のハンズオン（実際に触ること）でFigmaの基本操作を習得する。
具体的には4つのことができるようになります。
キャンバスをスムーズに操作できる（迷わず画面を動かせる）
テキストを編集できる（簡単な修正を自分でできる）
コメントを追加できる（デザイナーへのフィードバックを的確に伝えられる）
プロトタイプを操作できる（ユーザー体験を本番に近い形で確認できる）
「Figmaって難しそう」という先入観を、今日の夜30分で完全に取り除きましょう。
⚙️ 2-1 まずFigmaを開く前に──環境を整える5分
アカウント作成とログイン
Figmaはブラウザで動くツールです。インストールは不要です。
まずfigma.comにアクセスして「Sign up」でアカウントを作りましょう。Googleアカウントがあれば30秒で登録できます。
プランはどれを選べばいいか。答えは簡単です。
最初は Starter（無料）で十分です。
Starterプランでは、Figma Designファイルを3つまで無料で作れます。今日の練習には十分すぎるくらいです。なお、ファイル内のページ数に制限はありません。
デザイナーからファイルのリンクが送られてくる場合は、アカウントを作るだけでOKです。View席（閲覧のみ・無料）で、コメントの追加やプロトタイプの操作ができます。
Figmaを開く2つの方法
Figmaには「ブラウザ版」と「デスクトップアプリ版」があります。
| 方法 | メリット | 向いている場面 |
|------|---------|--------------|
| ブラウザ（Chrome推奨） | インストール不要・すぐ使える | 初めて試すとき |
| デスクトップアプリ | 動作が安定・オフライン対応 | 日常的に使うとき |
最初はブラウザ版で試してみましょう。動作が重いと感じたらデスクトップアプリをインストールしてください。
「練習用ファイル」を用意する
操作を練習するには、触れるファイルが必要です。2つの方法があります。
方法A：デザイナーに頼む（最速）
「練習用にファイルリンクをもらえますか？」とデザイナーに連絡する。多くのデザイナーは快く共有してくれます。
方法B：自分で作る
「New design file」から新規ファイルを作り、テキストや図形を置いて練習する。
この章では「デザイナーから共有されたファイルを見る」ことを前提に説明しますが、自分のファイルで練習しても同じ手順です。
🖥️ 2-2 Figmaの画面構成──4つのエリアを覚えるだけでいい
Figmaを開いて最初に感じることは「情報が多い」という圧迫感かもしれません。でも安心してください。PMとして最初に覚えるべきエリアは4つだけです。
┌──────────────────────────────────────┐
│ ツールバー（上部） │
├────────────┬───────────────┬──────────┤
│ │ │ │
│ 左サイド │ キャンバス │ 右サイド │
│ バー │ （中央） │ バー │
│ （左端） │ │ （右端） │
│ │ │ │
└────────────┴───────────────┴──────────┘① キャンバス（中央の広い領域）
デザインが並んでいる作業スペースです。白い背景の上に、画面のモックアップ（デザイン）が並んでいます。
ここを「Figmaの地図」だと思ってください。あなたはこの地図の上を動き回りながら、各デザインを確認します。
② 左サイドバー（左端）
2つのタブがあります。
レイヤー（Layers）タブ：ページ内のデザイン要素が階層で並んでいる「目次」です
アセット（Assets）タブ：ボタンやアイコンなど、再利用できる部品（コンポーネント）の一覧です
最初はほぼ見なくて大丈夫です。デザイナーから「このコンポーネントを確認して」と言われたとき以外は無視してOKです。
③ 右サイドバー（右端）
選択した要素の情報が表示されます。
Designタブ：色・サイズ・フォントなどの仕様
Prototypeタブ：画面間の遷移設定
View席（無料）では読み取り専用で確認できます。「このボタンは何色ですか？」という確認はここで行います。
④ ツールバー（上部）
ファイルの操作、共有ボタン、モード切り替えなどがあります。最初に覚えるべき場所は2つ。
Shareボタン（右上）：ファイルをチームメンバーに共有するときに使います
「▶ 再生」ボタン（右上付近）：プロトタイプをプレビューするときに使います
🖱️ 2-3 キャンバスを自在に動かす──ナビゲーションの3つの操作
Figmaで最初に躓くのがキャンバスの操作です。「どこかをクリックしたら画面が動いてしまった」「ズームしすぎて元に戻せない」という経験をした人は多いはずです。
この3つを覚えれば、もう迷いません。
操作① ズームの調整
一番使うショートカット：
| 操作 | Windows | Mac |
|------|---------|-----|
| 全体を画面に収める | `Shift + 1` | `Shift + 1` |
| 選択中の要素にフォーカス | `Shift + 2` | `Shift + 2` |
| 100%サイズ表示 | `Shift + 0` | `Shift + 0` |
| ズームイン | `Ctrl + +` | `Cmd + +` |
| ズームアウト | `Ctrl + -` | `Cmd + -` |
「迷子になったときは `Shift + 1`」 を最初に覚えてください。これだけでキャンバス全体が画面に収まります。
操作② パン（画面をスクロールする）
パンとは、キャンバスをスライドさせて見ている位置を動かすことです。
最も直感的な方法：
スペースバーを押したまま、マウスをドラッグする。
これを「スペースバーパン」と覚えてください。スペースバーを押している間だけ手のひらアイコンに変わり、キャンバスを自由に動かせます。離したら元のツールに戻ります。
操作③ 要素の選択と選択解除
クリック：その要素を選択する
別の場所をクリック or Escキー：選択を解除する
キャンバスの空白部分をクリック：何も選択されていない状態に戻る
「なぜかうまく選択できない」場合は、フレーム（画面全体）を選択していることが多いです。その場合、もう一度クリックすると中の要素を選択できます。
⌨️ 2-4 テキストを編集する──自分でできる「小さな修正」
PMとしてFigmaで最初にできるようになりたい操作の一つが、テキストの編集です。
「ボタンの文言を『登録する』から『今すぐ始める』に変えたい」──このくらいの修正は、デザイナーに頼む前に自分でやってみましょう。
テキストを編集する手順
編集したいテキストにカーソルを合わせる
ダブルクリックする（1回クリックでは「選択」、ダブルクリックで「編集モード」に入る）
テキストが青い枠で囲まれ、カーソルが点滅したら編集モードです
`Cmd + A`（Mac）/ `Ctrl + A`（Win）で全選択してから、新しいテキストを入力する
`Esc` キーで確定して編集モードを終了する
うまくいかないときのチェック：
1回クリックしかしていない → ダブルクリックが必要
フレーム全体が選択されている（青い外枠が大きい）→ もう一度クリックしてからダブルクリック
View席でファイルを閲覧している → View席はテキスト編集不可。Full席が必要
重要：変更を保存しなくて大丈夫です。 Figmaは自動保存なので、Escで確定すればそのまま保存されます。「保存し忘れた」という事故は起きません。
💬 2-5 コメントを書く──デザイナーとの対話を変える機能
コメントはPMが最もよく使うFigma機能です。View席（無料）でもコメントの追加・返信ができます。
コメントを上手に使えるようになると、Slackで「このデザインの件なんですが、えーと、あの画面の右上のボタンなんですけど…」と文字で説明していた時代が懐かしくなります。
コメントを追加する手順
画面上部のツールバーで「コメントツール」を選択する（吹き出しアイコン、ショートカット：`C`）
コメントしたい箇所をクリックする（ピンが刺さります）
表示されたテキストボックスにコメントを入力する
Enterキーで投稿する
コメントモードから通常モードに戻るには： `Esc` キーを押すか、ツールバーの「選択ツール」（矢印アイコン）をクリックします。
コメントを返信する手順
キャンバス上のコメントアイコン（ピン）をクリックする
右サイドバーにコメントスレッドが展開される
「Reply」をクリックして返信を入力する
Enterキーで投稿する
「いいコメント」と「悪いコメント」の違い
Figmaのコメントは「どの箇所に対して言っているか」が一目でわかります。これを活かすと、コミュニケーションの質が上がります。
悪いコメントの例：
「全体的に色が暗い気がします。もう少し明るくしてください。」
→ どの要素に対して言っているかわからない
良いコメントの例（Figmaのコメントを活かした書き方）：
「このCTAボタン（画面の中央の大きなボタン）の色を、ブランドカラーの青に変更してほしいです。ユーザーインタビューで『目立たなかった』という意見が多かったため。」
→ ピンを刺した場所で「どこか」が特定済み。理由も明確。
コメントには画像やGIF（動画）を添付することもできます。「こんなUIにしたい」という参考画像を貼り付けると、言葉だけでは伝わりにくいニュアンスも伝えられます。
📱 2-6 プロトタイプを操作する──「動く画面」でUXを確認する
プロトタイプ（Prototype）とは、実際に動くように見せた画面モックです。ボタンをクリックすると次の画面に遷移したり、フォームを入力したりできます。開発前に「こういうユーザー体験を作りたい」を確認するために使います。
PMとしてプロトタイプを確認する場面は多くあります。
ユーザーインタビューの前に「これで体験の流れを確認してほしい」とデザイナーから共有される
スプリントレビュー（アジャイル開発の各サイクルの振り返り会）で「今回作ったものを見てください」と見せられる
ステークホルダーへのプレゼンで「実際に触ってもらう」
プロトタイプを再生する2つの方法
方法A：プレゼンテーションビュー（おすすめ）
右上の「▶ 再生」ボタンをクリックすると、新しいタブでプロトタイプが全画面表示されます。実際のアプリに近い形で体験できます。
方法B：インラインプレビュー
右サイドバーのPrototypeタブで「▶」ボタンをクリックすると、Figmaのキャンバス内でそのままプレイできます。デザインと照らし合わせながら確認したいときに便利です。
プロトタイプ操作の基本
プレゼンテーションビューを開いたら、普通のWebサイトと同じように操作します。
クリック：ボタンや画像をクリックして画面を遷移させる
ブラウザの「戻る」ボタン：前の画面に戻る（プロトタイプの遷移とは別）
R キー（再生中）：最初の画面にリセットする
「どこがクリックできるかわからない」を解決する：ホットスポット表示
プロトタイプを初めて触ったとき、「どこがボタンでどこがただの画像か」がわからなくて困ることがあります。
解決方法は、プレゼンテーションビューの画面左下や設定メニューに「Highlight hotspots（ホットスポットを表示する）」というオプションがあります。これをオンにすると、クリックできる場所が青くハイライト表示されます。
「見えないボタンを探す」ストレスが一瞬でなくなります。
🔑 2-7 最初に覚えるショートカット7選
Figmaを使いはじめると、ショートカットを覚えることで操作が一気に快適になります。全部一気に覚える必要はありません。まずこの7つだけ使ってみてください。
| # | 操作 | Windows | Mac | 使う場面 |
|---|------|---------|-----|---------|
| 1 | 全体フィット | `Shift + 1` | `Shift + 1` | 迷子になったとき |
| 2 | 選択にズーム | `Shift + 2` | `Shift + 2` | 細部を確認するとき |
| 3 | パン操作 | `スペース+ドラッグ` | `スペース+ドラッグ` | キャンバスを移動するとき |
| 4 | コメントツール | `C` | `C` | コメントを書くとき |
| 5 | 選択解除 | `Esc` | `Esc` | 何も選択されていない状態に戻るとき |
| 6 | ショートカット一覧 | `Ctrl + Shift + ?` | `Cmd + Shift + ?` | ショートカットを調べるとき |
| 7 | クイックアクション | `Ctrl + /` | `Cmd + /` | 操作方法がわからなくなったとき |
7番の「クイックアクション」は特に便利です。 `Cmd + /`（Macの場合）を押すと、Figmaのすべての機能を検索できるコマンドパレットが開きます。「あの機能、どこにあったっけ」というときは、まずここで検索してみてください。
📊 2-8 View席（無料）でできること・できないことを整理する
第1章で説明した通り、FigmaにはView席（無料）とFull席（有料）があります。PMがFigmaを使いはじめるにあたって、自分のアカウントで「何ができて何ができないか」を把握しておきましょう。
| 操作 | View席（無料） | Full席（有料） |
|------|:---:|:---:|
| デザインの閲覧 | ✅ | ✅ |
| プロトタイプの操作 | ✅ | ✅ |
| コメントの追加・返信 | ✅ | ✅ |
| 仕様の確認（色・サイズ・フォント） | ✅ | ✅ |
| テキストの編集 | ❌ | ✅ |
| 新規デザインの作成 | ❌ | ✅ |
| プロトタイプの作成・編集 | ❌ | ✅ |
| Figma Make（AIプロトタイプ生成） | ❌ | ✅ |
| Dev Mode（開発者向けモード）の詳細 | ❌ | ✅ |
「まずコメントとプロトタイプ確認ができれば十分」なら、View席（無料）でOKです。
「テキスト修正を自分でやりたい」「Figma Makeを使ってみたい」という場合はFull席が必要になります。
✅ 2-9 今日の30分でやること──実践チェックリスト
理論はここまでです。今日の夜30分、実際に手を動かしましょう。
以下のチェックリストを順番にやってみてください。
準備（5分）
[ ] figma.comにアクセスしてアカウントを作成（またはログイン）
[ ] デザイナーにファイルリンクをもらう（or 新規ファイルを作る）
[ ] ファイルを開いてFigmaの画面を確認する
ナビゲーション（5分）
[ ] `Shift + 1` で全体を表示する
[ ] スペースバーを押しながらドラッグして画面を動かす
[ ] 気になるデザインをクリックして `Shift + 2` でズームする
[ ] `Esc` で選択を解除して元の状態に戻す
コメント（10分）
[ ] `C` キーを押してコメントツールに切り替える
[ ] デザインの気になる箇所をクリックしてコメントを入力する
[ ] Enterで投稿し、ピンが刺さったことを確認する
[ ] `Esc` キーで選択ツールに戻る
[ ] 自分が書いたコメントをクリックして確認する
プロトタイプ（10分）
[ ] 右上の「▶」ボタンをクリックしてプロトタイプを開く
[ ] 「Highlight hotspots」をオンにしてクリックできる場所を確認する
[ ] ボタンをクリックして画面遷移を確認する
[ ] `R キー` で最初の画面に戻る
これをやり終えたとき、あなたはFigmaを「怖くないツール」だと感じているはずです。
📝 第2章のまとめ
Figmaはブラウザで動く。インストール不要、アカウント作成5分で始められる
画面は4エリア（キャンバス・左サイドバー・右サイドバー・ツールバー）。最初は「キャンバス」と「右サイドバー」だけ意識すればいい
迷子になったら `Shift + 1` ひとつで全体が見渡せる
コメントはView席（無料）でも使える。ピンを刺した場所で「どこか」が一目瞭然になる
プロトタイプは「Highlight hotspots」でクリックできる場所が可視化される
まず無料のView席から始め、編集やFigma Makeが必要になったらFull席へ
📚 第2章 用語集
この章で出てきた専門用語をまとめます。
キャンバス（Canvas）
Figmaのメインワークスペース。デザインが並んでいる中央の白い領域。Illustratorやスライドツールの「作業エリア」に相当する。
フレーム（Frame）
Figmaでデザインを配置するための「画面の枠」。スマートフォン画面サイズ、PCブラウザサイズなど、様々なサイズで作られる。
プロトタイプ（Prototype）
実際に動くように見せた画面モック。ボタンをクリックすると次の画面に遷移するなど、ユーザーがどんな体験をするかを開発前に確認できる。
コメントツール（Comment Tool）
Figmaで特定の場所に紐付けてフィードバックを書く機能。ピンを刺した場所と紐付けられるため、「どこに対するコメントか」が一目瞭然。
ホットスポット（Hotspot）
プロトタイプ内でクリック可能な領域のこと。インタラクション（画面遷移など）が設定されている要素のこと。
パン（Pan）
キャンバスを左右・上下にスライドさせる操作。マップのドラッグ移動に相当する。スペースバーを押しながらドラッグで実行できる。
レイヤー（Layer）
デザインを構成する各要素（テキスト・図形・画像など）のこと。左サイドバーのレイヤーパネルで階層構造を確認できる。
View席（Viewer Seat）
閲覧のみができるFigmaの無料アカウント権限。コメントの追加・返信、プロトタイプ操作、仕様の確認ができる。テキスト編集や新規デザイン作成はできない。
Full席（Full Seat）
Figmaの有料アカウント権限。デザイン編集、Figma Make、Dev Modeなどすべての機能が使える。
クイックアクション（Quick Actions）
`Cmd + /`（Mac）/ `Ctrl + /`（Win）で呼び出せるFigmaのコマンドパレット。機能の名前で検索してすぐに実行できる。
スプリントレビュー（Sprint Review）
アジャイル開発（短いサイクルで開発・改善を繰り返す開発スタイル）で、各サイクルの終わりに行う成果物の確認会。PM・デザイナー・開発者・ステークホルダーが集まって実際に動くものを確認する。
次回予告
第3章「デザインレビューとフィードバックの実践」
コメントの書き方をさらに一歩進めます。「何を確認すべきか」「デザイナーに何を聞けばいいか」「フィードバックが届かない理由」。Figmaを使って、チームの意思決定を加速させるレビューの技術を学びます。
「デザインレビューがいつも曖昧で終わる」と感じているPMは、ぜひ続けて読んでみてください。
このnoteは2026年4月の情報をもとに執筆しています。Figmaは頻繁にアップデートされるため、最新情報はFigma公式サイト（figma.com）でご確認ください。
スキ・フォローをいただけると連載の励みになります。次回もお楽しみに。
