Figmaとは？
Figmaは、Webサイトやアプリの画面設計を中心に、プロトタイプ制作、共有、開発連携まで行えるデザインツールです。
特にWebデザインやUIデザインでよく使われており、画面の見た目を整えるだけでなく、情報の配置、ボタンやメニューの設計、画面遷移の確認にも役立ちます。
Figmaには、画面デザインを作るFigma Designのほか、ホワイトボードとして使えるFigJam、開発連携に使うDev Mode、プレゼン資料を作るFigma Slidesなどもあります。
初心者は、まずFigma DesignでWebサイトやアプリの画面を作るところから始めるのがおすすめです。
FigmaはWebサイトやアプリの画面設計に強いデザインツール
（Webサイトやアプリの画面を並べて設計している画像）
Figmaの中心的な役割は、Webサイトやアプリの画面設計です。
Webサイトでは、ヘッダー、メインビジュアル、ボタン、カード、フォーム、フッターなどを配置しながら、ページ全体の見た目を作れます。
アプリの場合も、ログイン画面、ホーム画面、一覧画面、詳細画面など、複数の画面を並べて設計できます。
WebデザインやUIデザインでは、一枚の画像をきれいに作るだけでなく、複数の画面を整理し、使う人が迷わない流れを考えることが大切です。
Figmaは、こうした画面設計を起点に、共有、確認、プロトタイプ、開発連携まで進めやすいツールです。
Figmaの特徴はワイヤーフレームからプロトタイプまで作れること
（ワイヤーフレームから完成画面、プロトタイプまで流れが伝わる画像）
Figmaでは、完成デザインだけでなく、制作途中の設計も作ることができます。
最初にワイヤーフレームで情報の配置やページ構成を整理し、その後、色、文字、画像、ボタンなどを整えてUIデザインへ進めていきます。
さらに、画面同士をつなげてプロトタイプを作ることもできます。
プロトタイプとは、クリックやタップをしたときの画面遷移や操作の流れを確認するための簡易的な見本です。
「ボタンを押したらどの画面に進むのか」「ユーザーが迷わず操作できるか」を、実装前に確認できます。
共同編集や共有がしやすい
（複数人のカーソルやコメントが表示されているFigma画面の画像）
Figmaは、ブラウザでもデスクトップアプリでも使えます。
作業環境に合わせて使い分けられるほか、複数人で同じファイルを見ながら作業できることも大きな特徴です。
たとえば、デザイナーが画面を作り、ディレクターがコメントを入れ、エンジニアがサイズや余白を確認し、クライアントが共有リンクからデザインを確認する、といった使い方ができます。
同じデータ上でやり取りできるため、修正指示を別資料にまとめる手間を減らせます。
Figmaでできること・作れるもの一覧
Figmaでは、Webサイトやアプリの画面設計を中心に、ワイヤーフレーム、プロトタイプ、デザイン管理、チーム共有などができます。
ここでは、代表的な用途を紹介します。
Webサイトのデザインを作れる
（WebサイトのPC版とスマホ版を並べている画像）
Figmaでは、さまざまなWebサイトのデザインを作れます。
見出し、本文、画像、ボタン、ナビゲーション、カード、問い合わせフォームなどを画面上に並べながら、ページ全体の見た目や情報の流れを確認できます。
PC版とスマホ版を同じファイル内で管理できる点も便利です。
画面サイズごとの見え方を並べて確認できるため、レスポンシブデザインの設計にも役立ちます。
ただし、FigmaはWebサイトの見た目や構成を設計するツールです。実際にWebサイトとして公開するには、HTML、CSS、WordPressなどでの実装が必要になります。
アプリのUIデザインを作れる
（スマホアプリの複数画面を並べている画像）
Figmaでは、スマホアプリやWebアプリのUIデザインも作れます。
UIとは、ユーザーが操作する画面、ボタン、メニュー、フォームなどのことです。
ログイン、検索、商品一覧、予約、設定といった画面を設計できます。
アプリのデザインでは、見た目のきれいさだけでなく、操作のしやすさも大切です。
たとえば、ボタンは押しやすいか、情報は見つけやすいか、次に何をすればいいかが伝わるかといった視点が求められます。
複数の画面を並べながら設計できるFigmaは、こうした流れを考えるうえでも使いやすいツールです。
ワイヤーフレームを作れる
（シンプルなワイヤーフレームの画像）
Figmaでは、ワイヤーフレームを作ることもできます。
ワイヤーフレームとは、色や装飾を作り込む前に、見出し、画像、ボタン、本文などをどこに配置するかを整理した設計図のようなものです。
最初から完成デザインを作ろうとすると、見た目に意識が向きすぎて情報の整理が曖昧になることがあります。
ワイヤーフレームを先に作ることで、「何を、どの順番で、どう見せるか」を落ち着いて考えられます。
プロトタイプを作れる
（画面同士が線でつながっているプロトタイプの画像）
Figmaでは、画面同士をつなげてプロトタイプを作ることができます。
トップページのボタンを押したら詳細ページへ移動する、ログインボタンを押したらホーム画面に移動する、といった操作の流れを確認できる簡易的な見本です。
静止画だけではわかりにくい「使う流れ」を確認できるため、実装前に導線のわかりにくさや操作の違和感に気づきやすくなります。
コンポーネントやスタイルでデザインを管理できる
（ボタンやカードがコンポーネント化されている画像）
Figmaでは、コンポーネントやスタイルを使ってデザインパーツやルールを管理できます。
コンポーネントとは、ボタン、カード、ヘッダーなど、何度も使うパーツを部品として登録する機能です。
複数のページで同じボタンを使う場合も、コンポーネント化しておくとサイズや色をそろえやすくなります。
文字サイズや色をスタイルとして登録しておくと、デザイン全体の統一感も保ちやすくなります。
チームで共有しながら制作を進められる
（コメントや共有リンクのイメージ画像）
Figmaでは、作ったデザインを共有し、コメントをもらいながら制作を進められます。
共有リンクを発行すれば他の人にデザインを見てもらえますし、デザイン上の特定の場所にコメントを残せるため、修正したい箇所を画面上で直接やり取りできます。
Dev Modeを使うと、エンジニアがサイズ、余白、色などの情報を確認しやすくなります。
ディレクター、エンジニア、マーケター、クライアントなど、複数人で確認しながら進める制作にも向いているツールです。
Figmaの得意なこと・苦手なこと
Figmaは便利なツールですが、何でも得意なわけではありません。
得意なことと苦手なことを知っておくと、他のツールとの使い分けもしやすくなります。
得意なのは「画面設計」と「チームでのデザイン制作」
Figmaが得意なのは、Webサイトやアプリの画面設計と、チームで進めるデザイン制作です。
複数画面を整理しながら作れること、プロトタイプで使う流れを確認できること、コメントや共有機能でチーム内のやり取りを進めやすいことが大きな強みです。
Web制作やアプリ開発では、ディレクター、エンジニア、クライアントなど複数の人が関わります。
Figmaは、デザインを共有し、確認し、修正していく流れに向いています。
苦手なのは本格的な写真加工や複雑な画像合成
Figmaでも、画像を配置したり簡単な調整をしたりすることはできます。
プラグインを使えば、背景除去や画像補正のような作業を補助できる場合もあります。
ただし、写真を細かくレタッチしたり、複数の画像を自然に合成したりする作業には向いていません。
Figmaはあくまで、写真やテキスト、ボタン、図形などを配置しながら画面を設計するツールです。
Figmaと他ツールの違い
Figmaを理解するには、似た役割を持つツールとの違いを知っておくと整理しやすくなります。ここでは、Adobe XD、Framerとの違いを簡単に紹介します。
Adobe XDとの違い
FigmaとAdobe XDは、どちらもWebサイトやアプリの画面設計、UIデザイン、プロトタイプ制作に使われるツールです。
Adobe XDもUIデザインツールとして使われてきましたが、現在はFigmaの方が実務で使われる場面が多く、FigJamやDev Modeなどの周辺機能、プラグイン、学習情報も充実しています。
そのため、これからWebデザインやUIデザインを学ぶ初心者は、まずFigmaから始めるのがおすすめです。
Framerとの違い
FigmaとFramerの大きな違いは、Webサイトとして公開できるかどうかです。
Figmaは、Webサイトやアプリの画面を設計するツールです。見た目や構成、UIパーツ、画面遷移などを作れますが、FigmaだけでWebサイトとして公開するわけではありません。一方、Framerはデザインしたページをそのまま公開できるノーコード系のWeb制作ツールです。LP、サービスサイト、ポートフォリオサイトなど、デザインから公開まで進めたいときに向いています。
簡単に言うと、Figmaは「画面を設計するツール」、Framerは「Webサイトとして公開するところまで進めやすいツール」です。Webデザインを学ぶ場合は、まずFigmaでレイアウトやUI設計を学び、必要に応じてFramerで公開まで試してみる流れも考えられます。
Figmaが向いている人
Figmaは、Webサイトやアプリの画面を作りたい人はもちろん、プロトタイプやチーム共有まで含めてデザインを進めたい人にも向いています。
Webデザインを学びたい人
Webサイトのトップページ、下層ページ、LP、スマホ版デザインなどを作るときに使いやすいため、Webデザインを学びたい人にはFigmaが向いています。
情報を整理し、見出し、本文、画像、ボタンなどを見やすく配置する練習を通じて、余白、文字サイズ、色、情報の優先順位といったWebデザインの基本も身につけやすくなります。
UI/UXデザインを学びたい人
UIデザインでは、ボタン、フォーム、メニュー、カード、タブなど、ユーザーが操作する画面の要素を設計します。
UXデザインでは、ユーザーが目的を達成するまでの流れや、使いやすさ、迷いにくさを考えます。
Figmaは、そうした考え方を画面として形にし、試し、共有するために役立つツールです。
ただし、Figmaを使えばUI/UXデザインがすべて身につくわけではありません。
ユーザー調査、課題整理、情報設計、ユーザビリティ検証など、ツール操作以外の考え方もあわせて学ぶことが大切です。
チームでデザインを進めたい人
共有リンク、コメント、複数人での同時確認など、Figmaはチームで制作を進めやすい機能を持っています。
Web制作やアプリ開発では、デザイナーだけでなく、ディレクター、エンジニア、クライアントなどさまざまな人が関わります。
画面上に直接コメントを残せるため、修正したい箇所が伝わりやすく、やり取りをスムーズに進められます。
デザインを効率よく管理したい人
Webサイトやアプリでは、同じボタン、カード、見出しスタイルなどを何度も使います。
そのたびに手作業で作っていると、少しずつデザインがズレてしまうことがあります。
Figmaのコンポーネントやスタイルを使ってパーツやルールを管理しておくと、ページ数や画面数が増えても統一感を保ちやすくなります。
Figma初心者向け学習ロードマップ
Figmaは多機能なツールなので、最初からすべてを覚えようとすると大変です。
初心者のうちは、機能を一つずつ暗記するよりも、実際に画面を作りながら、必要な機能を順番に身につけていくことが大切です。
ここでは、Figmaを学ぶ流れを5つのステップで紹介します。
STEP1：模写やチュートリアルで基本操作を身につける
まずは、模写やチュートリアルを通して、Figmaの基本操作に慣れましょう。
最初からオリジナルで作ろうとすると、何を作るかに意識が向き、ツール操作の習得が進みにくくなることがあります。最初は見本をもとに作ることで、Figma上で画面を作る流れをつかみやすくなります。
練習する題材は、以下のようなものがおすすめです。
- Webサイトのファーストビュー
- スマホアプリのログイン画面
- カード型の一覧レイアウト
- LPの1セクション
ファーストビューでは画像やボタンの配置、ログイン画面ではフォームやUIパーツ、カード型レイアウトでは同じパーツを並べる操作、LPの1セクションでは画像と文章を組み合わせる練習ができます。
この段階では、難しい機能よりも、基本的な要素を迷わず配置・調整できる状態を目指しましょう。
STEP2：ツールの仕組みと使い方を理解する
基本操作に慣れてきたら、Figmaの仕組みを理解していきましょう。
Figmaには、画面を作りやすく、修正しやすく、チームで共有しやすくするための機能があります。
特に押さえておきたいのは、以下のような機能です。
- フレーム・レイヤー・グリッド
- オートレイアウト
- コンポーネント・スタイル
- プロトタイプ・共有リンク
グリッドは要素の位置をそろえるとき、オートレイアウトは余白を管理するとき、コンポーネントは同じパーツを使い回すときに役立ちます。
この段階では、機能名だけでなく「どの場面で使う機能なのか」を理解することが大切です。
STEP3：実制作で使い込み、応用力を身につける
Figmaの基本的な仕組みがわかってきたら、実際の制作に近い形で使い込んでいきましょう。
チュートリアル通りに作るだけでなく、自分で条件を決めて制作すると、状況に合わせて機能を使う力が身につきやすくなります。
たとえば、以下のような制作物で練習してみましょう。
- LPのワイヤーフレーム
- PC版とスマホ版のWebデザイン
- スマホアプリの複数画面
- 簡単なプロトタイプ
この段階では、情報の優先順位、余白、文字サイズ、ボタンの目立たせ方、画面の流れを意識しながら作ることが大切です。
あわせて、画面名やレイヤー名の整理、共有リンク、コメント機能なども使うと、実務に近いFigmaの使い方に慣れていけます。
STEP4：上級者のテクニックを取り入れ、表現の幅と効率を高める
基本的な制作に慣れてきたら、上級者の作り方を参考にして、表現の幅と作業効率を高めていきましょう。
Figmaに慣れている人は、見た目だけでなく、修正しやすいデータの作り方や効率よく作業する方法も意識しています。
特に、以下のような点を観察すると勉強になります。
- オートレイアウトの組み方
- コンポーネントやスタイルの管理方法
- レイヤー名やページ構成の整理
- プラグインやショートカットの使い方
上級者のデータや制作動画を見ると、完成した見た目だけでなく、どのような手順で作っているのかも学べます。
STEP5｜知識を整理し、人に説明できるようになる
最後は、学んだ内容を整理し、人に説明できるようにしていきましょう。
Figmaは機能が多いため、使えるようになっても、なぜその機能を使うのかを説明できないことがあります。
たとえば、以下のようなことを自分の言葉で説明できると、理解が深まります。
- なぜワイヤーフレームを先に作るのか
- なぜコンポーネントを使うのか
- なぜプロトタイプで画面遷移を確認するのか
- なぜPC版とスマホ版を並べて確認するのか
自分で作ったデザインを見返し、「どこを工夫したのか」「なぜその機能を使ったのか」「次に改善するならどこか」を言葉にしてみましょう。
人に説明できるようになると、操作を覚えただけでなく、Figmaの使い方をきちんと理解できている状態に近づきます。
Figmaを学ぶときの注意点
Figmaを学ぶときは、便利な機能を一気に覚えようとするより、画面設計の基本を少しずつ身につけることが大切です。
最初から高度な機能を完璧にしようとしない
Figmaには、オートレイアウト、コンポーネント、バリアント、スタイル、プロトタイプなど、便利な機能がたくさんあります。
どれも実務で役立ちますが、最初からすべてを完璧に使おうとすると、何から学べばいいかわからなくなりやすいです。
初心者のうちは、基本操作と簡単な画面作成を優先しましょう。
必要になったタイミングでオートレイアウトやコンポーネントを学ぶと、理解しやすくなります。
オートレイアウトやコンポーネントはつまずきやすい部分でもあるので、まずは小さなパーツから少しずつ慣れていきましょう。
見た目だけでなく、使う流れも考える
きれいな画面を作ることに集中しすぎると、ユーザーがどこを見て、どこを押して、次にどの画面へ進むかという流れが抜け落ちることがあります。
ボタンは目立っているか、重要な情報は見つけやすいか、次の行動が伝わるかといった視点も、デザインの大切な要素です。
Figmaは、見た目だけでなく、使いやすい流れと管理しやすいデザインルールを考えるためのツールでもあります。
機能を覚えるより、実際に画面を作りながら覚える
Figmaは、機能をひとつずつ暗記するより、実際に画面を作りながら覚える方が身につきやすいツールです。
ログイン画面を作る、ボタンをコンポーネント化する、プロトタイプで画面をつなげるといった練習をすると、必要な機能が自然と見えてきます。
最初は完成度が高くなくても問題ありません。
手を動かしながら「この機能はこういう場面で使うんだ」と理解していくことが、上達の近道です。
まとめ：FigmaはWeb・UIデザインに強い定番デザインツール
Figmaは、Webサイトやアプリの画面設計、ワイヤーフレーム、UIデザイン、プロトタイプ制作などに役立つ定番のデザインツールです。
見た目を作るだけでなく、画面の流れを確認したり、チームで共有したり、開発へつなげたりしやすいことが大きな特徴です。
大切なのは、目的に合わせてツールを使い分けることです。似た用途のAdobe XDは現在新規プランが終了しているためFigmaが選ばれやすく、公開まで進めたい場合はFramerのようなツールも選択肢になります。
Figmaを学ぶときは、まずフレーム、図形、文字、色を使って簡単な画面を作るところから始め、少しずつオートレイアウト、コンポーネント、プロトタイプ、開発連携へと広げていくと無理なく身につきます。
WebデザインやUI/UXデザインを学びたい人にとって、最初に押さえておきたいツールです。
