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は多機能なツールなので、最初からすべてを覚えようとすると大変です。
基本操作を細かく暗記するよりも、実際の画面制作につながる順番で学んでいくことが大切です。
STEP1：基本操作と作業環境に慣れる
まずは、Figmaの基本操作と作業環境に慣れましょう。
複雑なデザインを作る必要はなく、ファイルを作成し、フレームの中に図形や文字を配置し、位置やサイズを調整できる状態を目指します。
まず覚えたい操作は以下の通りです。
- 新規ファイルを作成する
- フレームを作成する
- 選択ツールで要素を動かす
- 図形や文字を配置する
- 画像を配置する
- 拡大・縮小する
- レイヤーで要素を管理する
- 作成したデザインを保存・共有する
Figmaでは、フレームという単位で画面を作ります。
フレームは、Webサイトの1ページや、スマホアプリの1画面のようなものです。
「フレームの中に文字や図形を配置して画面を作る」と考えると、最初はわかりやすいです。
STEP2：図形・文字・色で簡単な画面を作る
次に、図形・文字・色を使って、簡単な画面を作る練習をします。
長方形、円、線、テキスト、画像などを組み合わせて画面を作ります。
まず覚えたい操作は以下の通りです。
- 見出しを置く
- 本文を置く
- ボタンを作る
- 画像を配置する
- 背景色を変える
- 余白を整える
- 要素を整列させる
- グリッドを使って配置をそろえる
操作に慣れてきたら、Webサイトのファーストビュー、ログイン画面、簡単なカード型レイアウトなどで練習すると理解が深まります。
この段階では、きれいな装飾よりも、文字が読みやすいか、要素がそろっているか、余白が極端に狭くないかを意識しましょう。
Figmaの操作と並行して、余白、文字サイズ、行間、グリッドといったレイアウトやタイポグラフィの基本も意識すると、画面の完成度が上がりやすくなります。
STEP3：オートレイアウト・コンポーネントに慣れる
基本的な画面作成に慣れてきたら、オートレイアウトとコンポーネントを学んでいきましょう。
オートレイアウトとは、要素同士の間隔や並び方を管理しやすくする機能です。
ボタンの中の文字が変わったときにボタンの幅も自然に調整されるようにしたり、カードを一定の間隔で並べたりできます。
コンポーネントは、何度も使うデザインパーツを部品化する機能で、ボタン、カード、ヘッダーなどを管理できます。
まず覚えたい操作は以下の通りです。
- ボタンにオートレイアウトを設定する
- カードの余白をオートレイアウトで管理する
- 同じパーツをコンポーネント化する
- ボタンやカードを複数画面で使い回す
- 色や文字サイズをスタイルとして登録する
- 通常状態・ホバー状態などをバリアントで管理する
どちらも初心者がつまずきやすい機能です。
最初から複雑なレイアウトに使おうとせず、ボタンやカードなどシンプルなパーツから試してみると理解しやすくなります。
STEP4：制作物を作りながら共有・プロトタイプ・開発連携を学ぶ
最後は、実際に制作物を作りながら、共有、プロトタイプ、開発連携などの実務向けの知識を学んでいきます。
制作物として練習したいものは以下の通りです。
- Webサイトのファーストビューを作る
- LPのワイヤーフレームを作る
- スマホアプリの1画面を作る
- PC版とスマホ版のデザインを作る
- 簡単なプロトタイプを作る
制作とあわせて覚えたい実務向けの知識は以下の通りです。
- 画面同士をプロトタイプでつなげる
- 共有リンクを発行する
- コメント機能を使う
- 画面名やレイヤー名を整理する
- Dev Modeで確認される情報を意識する
- PNG、SVG、PDFなど用途に合わせて書き出す
- よく使うショートカットを覚える
練習として既存サイトやアプリを模写するのもおすすめです。
余白の取り方、文字サイズ、ボタンの大きさ、画像の配置、色の使い方などを観察できます。
ただし、模写は学習目的で行うものです。
既存サイトやアプリをそのまま真似したデザインをオリジナル作品として公開するのは避けましょう。
形をなぞるだけでなく、「なぜこの余白なのか」「なぜこの順番で情報が並んでいるのか」を考えながら模写することが、理解を深める近道です。
Figmaを学ぶときの注意点
Figmaを学ぶときは、便利な機能を一気に覚えようとするより、画面設計の基本を少しずつ身につけることが大切です。
最初から高度な機能を完璧にしようとしない
Figmaには、オートレイアウト、コンポーネント、バリアント、スタイル、プロトタイプなど、便利な機能がたくさんあります。
どれも実務で役立ちますが、最初からすべてを完璧に使おうとすると、何から学べばいいかわからなくなりやすいです。
初心者のうちは、基本操作と簡単な画面作成を優先しましょう。
必要になったタイミングでオートレイアウトやコンポーネントを学ぶと、理解しやすくなります。
オートレイアウトやコンポーネントはつまずきやすい部分でもあるので、まずは小さなパーツから少しずつ慣れていきましょう。
見た目だけでなく、使う流れも考える
きれいな画面を作ることに集中しすぎると、ユーザーがどこを見て、どこを押して、次にどの画面へ進むかという流れが抜け落ちることがあります。
ボタンは目立っているか、重要な情報は見つけやすいか、次の行動が伝わるかといった視点も、デザインの大切な要素です。
Figmaは、見た目だけでなく、使いやすい流れと管理しやすいデザインルールを考えるためのツールでもあります。
機能を覚えるより、実際に画面を作りながら覚える
Figmaは、機能をひとつずつ暗記するより、実際に画面を作りながら覚える方が身につきやすいツールです。
ログイン画面を作る、ボタンをコンポーネント化する、プロトタイプで画面をつなげるといった練習をすると、必要な機能が自然と見えてきます。
最初は完成度が高くなくても問題ありません。
手を動かしながら「この機能はこういう場面で使うんだ」と理解していくことが、上達の近道です。
まとめ：FigmaはWeb・UIデザインに強い定番デザインツール
Figmaは、Webサイトやアプリの画面設計、ワイヤーフレーム、UIデザイン、プロトタイプ制作などに役立つ定番のデザインツールです。
見た目を作るだけでなく、画面の流れを確認したり、チームで共有したり、開発へつなげたりしやすいことが大きな特徴です。
大切なのは、目的に合わせてツールを使い分けることです。似た用途のAdobe XDは現在新規プランが終了しているためFigmaが選ばれやすく、公開まで進めたい場合はFramerのようなツールも選択肢になります。
Figmaを学ぶときは、まずフレーム、図形、文字、色を使って簡単な画面を作るところから始め、少しずつオートレイアウト、コンポーネント、プロトタイプ、開発連携へと広げていくと無理なく身につきます。
WebデザインやUI/UXデザインを学びたい人にとって、最初に押さえておきたいツールです。
