「デザインの話になると、急に蚊帳の外になる」──その状況、Figmaで変えられます
こんな経験はありませんか？
新しいWebサイトやアプリの画面について、デザイナーから「Figmaのリンク送りました」と言われたけれど、開き方すら分からない。ミーティングでワイヤーフレームを見せられても、どこをどう修正してほしいのか伝える手段がなく、結局「なんか違う気がする…」としか言えない。
あるいは、サービスの改善案を思いついたのに、スケッチを描く技術がないから口頭で伝えるしかなく、完成したものを見たら「思っていたのと全然違う」と落胆する――。
実は、Figmaはデザイナー専用のツールではありません。PM（プロジェクトマネージャー）やマーケター、経営者がデザインプロセスに参加するための「共通言語」として、世界中の企業で活用されています。
・Figmaとは何か──デザイナー以外にとっての価値
・無料プランでどこまでできるのか
・非デザイナーが覚えるべき基本操作（5つだけ）
・ワイヤーフレーム作成の実践手順
・デザイナーとの連携で使える便利な機能
・導入時に押さえておきたい注意点
Figmaとは──「ブラウザで動くデザインツール」がなぜ革命的なのか
Figmaは、2016年にリリースされたクラウドベースのデザインツールです。2022年にAdobe（アドビ）が買収を試みたものの独占禁止法の懸念から撤回されたことでも大きな話題になりました。2026年現在、デザインツールのデファクトスタンダードとしての地位を確立しています。
従来のデザインツール（Adobe XDやSketchなど）は、専用アプリをインストールして、デザイナーがひとりで作業し、完成したファイルをPDFや画像で共有するのが一般的でした。
Figmaが根本的に違うのは、以下の3点です。
| 特徴 | 従来のデザインツール | Figma |
|---|---|---|
| 動作環境 | 専用アプリ（Mac/Windows） | ブラウザだけで動作（アプリ版も有） |
| 共同編集 | ファイルを送り合って交互に作業 | Googleドキュメントのようにリアルタイム共同編集 |
| 閲覧・コメント | PDFや画像に書き込み | デザイン上に直接コメント、ピン留め |
| バージョン管理 | 「最終版_v3_修正済み.pdf」 | 自動保存＋履歴で任意の時点に戻れる |
| 料金 | 月額2,000〜7,000円（個人） | 無料プランあり（個人利用なら十分） |
リンクを共有するだけで誰でも閲覧でき、権限があればその場で編集できる。コメントを残せば通知が届く。保存ボタンを押す必要もない。この「気軽さ」が、デザイナー以外の人がデザインプロセスに参加するハードルを劇的に下げました。
無料プランでどこまでできる？──非デザイナーなら十分すぎる内容
Figmaの無料プラン（Starterプラン）の内容を整理します。
| 機能 | 無料プラン（Starter） | プロフェッショナル |
|---|---|---|
| 料金 | ¥0 | 約¥1,800/月（年払い） |
| ファイル数 | 3ファイルまで | 無制限 |
| 共同編集者 | 制限あり | 無制限 |
| 閲覧・コメント | 無制限（リンク共有で誰でも） | 無制限 |
| プロトタイプ | 利用可能 | 利用可能（高度な機能付き） |
| バージョン履歴 | 30日間 | 無制限 |
| コンポーネント | ローカルのみ | チームライブラリ共有可 |
| FigJam（ホワイトボード） | 3ファイルまで | 無制限 |
非デザイナーの方にとって重要なポイント： 閲覧・コメント機能は無料プランでも無制限です。つまり、デザイナーが作成したFigmaファイルのリンクを受け取って、確認してコメントを残す——という使い方であれば、アカウント登録すら不要です。
自分でワイヤーフレームを作りたい場合でも、3ファイルまでなら無料プランで十分に対応できます。
・デザインの確認とコメント → 無料（アカウント不要）
・簡単なワイヤーフレーム作成 → 無料（Starterプラン）
・プロトタイプの閲覧と動作確認 → 無料（リンク共有）
・FigJamでブレインストーミング → 無料（3ファイルまで）
・チーム全体で本格運用 → プロフェッショナルプラン推奨
非デザイナーが覚えるべき基本操作は5つだけ
Figmaには膨大な機能がありますが、非デザイナーが実務で使うのは以下の5つの操作だけです。これだけ覚えれば、デザインプロセスへの参加には十分です。
1. フレーム（Frame）を作る
フレームは「画面の枠」です。スマートフォンやPCの画面サイズに合わせたテンプレートが用意されているので、目的に合ったサイズを選ぶだけです。
キーボードショートカット：F を押してからキャンバス上をドラッグ。右側のパネルに「iPhone 16」「Desktop」などプリセットが表示されるので、クリックで選択できます。
2. テキストを入力する
T を押してキャンバス上をクリックすると、テキスト入力モードになります。フォントサイズや色は右側のパネルで変更できます。ワイヤーフレームでは細かいデザインを気にせず、「ここにどんな文言が入るか」を書き込むのがポイントです。
3. 四角形・丸を配置する
R（四角形）または O（楕円）を押してドラッグすると、図形を配置できます。ワイヤーフレームでは、画像が入る場所を灰色の四角形で示したり、ボタンを角丸の四角形で表現したりするのに使います。
4. コメントを残す
C を押してデザイン上の任意の場所をクリックすると、コメントを残せます。「このボタンの文言を変えたい」「ここにFAQセクションを追加してほしい」など、具体的な修正依頼をデザイン上にピン留めできます。メールやチャットで「上から3番目のあの部分」と説明するよりもはるかに正確です。
5. プロトタイプを再生する
画面右上の ▶（再生ボタン） をクリックすると、デザインを実際の画面のように操作できるプレビューモードに切り替わります。ボタンをクリックしたら次の画面に遷移する、といった動きを実際に体験できます。
・F → フレーム作成
・T → テキスト入力
・R → 四角形の配置
・C → コメントの追加
この4つを覚えるだけで、Figma上での基本操作はほぼカバーできます。
実践：ワイヤーフレームを15分で作る手順
「百聞は一見にしかず」ということで、実際にFigmaで簡単なワイヤーフレームを作る手順を紹介します。ここでは「自社サービスのランディングページ」を例にします。
ステップ1：新規ファイルを作成してフレームを配置
Figmaにログインし、「New design file」をクリックして新規ファイルを開きます。F を押して、右側のパネルから「Desktop（1440×1024）」を選択します。これがページ全体の「枠」になります。
ステップ2：セクションをざっくり区切る
R を押して、画面を上から順に区切っていきます。
- ヘッダー領域（高さ80pxほど）：ロゴとナビゲーション
- ヒーロー領域（高さ500pxほど）：キャッチコピーとCTAボタン
- 特徴セクション（高さ400pxほど）：サービスの3つの強み
- CTA領域（高さ200pxほど）：申し込みボタン
- フッター（高さ100pxほど）：会社情報・リンク
それぞれの四角形を薄いグレー（#F5F5F5）で塗りつぶすと、セクションの区切りが視覚的に分かりやすくなります。
ステップ3：テキストで内容を書き込む
T を押して、各セクションに仮のテキストを入力します。
- ヘッダー：「ロゴ サービス概要 料金 お問い合わせ」
- ヒーロー：「キャッチコピーがここに入ります」「サブコピーでサービスの価値を補足」
- 特徴セクション：「特徴1：○○」「特徴2：○○」「特徴3：○○」
この段階では、文言の完成度は気にしなくて大丈夫です。大切なのは**「何をどこに配置するか」の構成を可視化すること**です。
ステップ4：コメントで意図を補足する
C を押して、各セクションに「なぜこの配置にしたか」「ここに入れたい情報」などのメモをコメントとして残します。これがデザイナーへの申し送り事項になります。
デザイナーとの連携で使える3つの便利機能
Figmaの真価は「デザイナーとのコラボレーション」で発揮されます。非デザイナーが知っておくと連携がスムーズになる機能を3つ紹介します。
1. コメント機能で「赤入れ」する
デザインの特定の箇所にピンポイントでフィードバックを残せます。「このボタンの色をもう少し目立たせてほしい」「この文言を『無料で始める』に変更してください」など、具体的な修正指示を直接デザイン上に書き込めます。
コメントにはメンション（@ユーザー名）も使えるため、複数のデザイナーがいるチームでも、誰に向けたフィードバックか明確にできます。
2. インスペクト機能でデザインの詳細を確認する
右側のパネルの「Inspect」タブを開くと、選択した要素のサイズ、色、フォント、余白の数値が一覧で表示されます。エンジニアがCSSを書くときに参考にする機能ですが、非デザイナーでも「この余白は何pxか」「このフォントサイズはいくつか」を正確に把握できます。
3. FigJam（フィグジャム）でアイデアを整理する
FigJamはFigmaに統合されたオンラインホワイトボードです。付箋を貼ったり、フローチャートを描いたり、投票機能を使ったりできます。デザインに入る前のブレインストーミングや要件整理に最適で、ここで固まったアイデアをそのままFigmaのデザインファイルに反映できます。
・新機能のアイデア出しブレインストーミング
・ユーザーフロー（画面遷移図）の作成
・ミーティングのアジェンダ整理と議事録
・チームの振り返り（KPT・レトロスペクティブ）
非デザイナーにとっては、Figma本体よりもFigJamのほうが使用頻度が高いかもしれません。
導入時に押さえておきたい3つの注意点
注意点1：無料プランの「3ファイル制限」に注意
無料プランで作成できるファイルは3つまでです。プロジェクトが増えてきたら、古いファイルをエクスポートしてからアーカイブするか、プロフェッショナルプランへの移行を検討するのが良いでしょう。
ただし、他の人から共有されたファイルの閲覧・コメントはファイル数にカウントされません。つまり、自分でファイルを作成しない限り、制限を気にする必要はありません。
注意点2：権限設定を理解しておく
Figmaには「閲覧のみ」「コメント可」「編集可」の3段階の権限があります。デザイナーから共有されたファイルで意図せずデザインを動かしてしまうトラブルを避けるため、自分の権限が何になっているかを確認してから操作するのがおすすめです。
「閲覧のみ」の状態でも、コメントは自由に残せます。フィードバックを送るだけならこの権限で十分です。
注意点3：オフラインでは使えない
Figmaはクラウドベースのツールのため、インターネット接続が必須です。デスクトップアプリ版には一部オフライン機能がありますが、基本的にはオンライン環境で使用することを前提に考えておく必要があります。出先でプレゼンする場合などは、事前にPDFとしてエクスポートしておくと安心です。
よくある質問
編集部の結論
Figmaは「デザイナーのためのツール」ではなく、「チーム全体がデザインについて会話するためのプラットフォーム」です。
非デザイナーがFigmaを使う最大のメリットは、デザインプロセスの「蚊帳の外」から「参加者」になれることです。コメント機能でフィードバックを残す、FigJamでアイデアを可視化する、ワイヤーフレームで構成案を伝える——これだけで、デザイナーとのコミュニケーションの質が大きく変わります。
無料プランで十分に始められますので、まずはチームのデザイナーに「次のプロジェクトからFigmaのリンクを共有してもらえますか」と一言伝えることから始めてみてはいかがでしょうか。デザインの専門知識がなくても、「何を作りたいか」を正確に伝えられるようになるだけで、プロジェクト全体の進行スピードが変わります。
まとめ：Figmaは「共通言語」として導入するのがポイント
- Figmaはブラウザで動くデザインツール → インストール不要、リンク共有で誰でもアクセス可能
- 閲覧・コメントは完全無料 → 非デザイナーはアカウント登録なしでも参加できる
- 覚える操作は5つだけ → フレーム、テキスト、四角形、コメント、プロトタイプ再生
- ワイヤーフレームは「構成を伝える手段」 → きれいなデザインを作る必要はない
- FigJamでブレインストーミング → デザイン前のアイデア整理に最適
- 権限設定を確認してから操作 → 意図せずデザインを変更するトラブルを防ぐ
Figmaの導入は「ツールの導入」ではなく、「デザインについてチーム全体が会話できるようになる」という文化の変化です。まずは無料プランで、デザイナーが共有してくれたファイルを開いてコメントを残すところから始めてみることをおすすめします。