目次
はじめに
Webデザインを学び始めると、まず「Photoshop や Illustrator でデザインを作るのかな？」と考える人が多いですよね。
ですが、いま現場で急速に広がっているのが 「Figma」 というクラウドベースのデザインツールです。
インストール不要でブラウザから使え、チームでの共同作業も得意。
しかも無料プランでも多くの機能を利用できるので、初心者が最初に触れるにはぴったりのツールです。
今回は、Figma をまったく使ったことがない 方向けに「基本の仕組み」と「コンポーネント活用の第一歩」を解説します。
あと2024年10月にFigmaのUIが「UI２」から「UI３」に変更されたため、書籍や動画を購入する際は注意してください。（よくわからないやーって人は2025年に発売された本を買えば間違いはないぐらいの感覚でOKです。）
何が変わったかというまとめは、一番下に補足説明つけときますね。
1. Figmaってどんなツール？
- ブラウザで動くデザインツール：パソコンにソフトを入れなくてもOK
- 共同作業がしやすい：Google ドキュメントのように複数人で同時編集可能
- 無料でも十分使える：基本操作・保存・共有までカバー
これまで Photoshop や Illustrator に慣れている人でも、直感的に触れるインターフェースなので安心です。
と言っても、最初はやっぱり覚えるのがしんどかったです。
なにげにWeb制作でプロトタイプまで作れる優れものです。
VScodeとも連携できますしね。
2. まずは知っておきたい基本用語
初心者が最初につまずきやすいポイントを整理しました。
- フレーム（Frame）：キャンバスの中で作業領域を区切る枠。Web ページの「画面サイズ」に合わせて設定するのが基本。
- コンポーネント（Component）：再利用できるパーツ。ボタンやヘッダーなど、一度作ればコピーして使い回せる。
- インスタンス（Instance）：コンポーネントを使って作られたコピー。元のデザインを直すと、コピー側も自動で更新される。
メニュー系
- レイヤーパネル（赤い枠のところ）：「Assets」に変わったときには「アセットパネル」と呼びます。
- キャンバス（中央の青いところ）：キャンバスはデザインを作成する画面になります。
- デザインパネル（緑の枠のところ）：デザインパネル内のそれぞれの枠で囲った部分を「セクション」と呼びます。
ツールバー
左から順に「移動」「フレーム」「長方形」「ペン」「テキスト」「コメント」「アクション」です。
右端の３つは、左から「Figma Draw」「［デザイン］ツール」「Dev Mode」です。
Figmaツールバーの説明一覧
| ツール | 説明 | ショートカットキー |
|---|---|---|
| 移動（Move） | オブジェクトやフレームを選択・移動するための基本ツール。 デザイン作業の起点になるツール。 | Ｖ |
| フレーム（Frame） | ページ全体のレイアウトを構成する枠（アートボード）を作成する。 レスポンシブデザインやコンポーネント配置の土台。 | F |
| 長方形（Rectangle） | 四角形を描画できるツール。 ボタンや背景、画像配置用の枠など幅広く利用。 他にも楕円・直線などの図形ツールをここから選択可能。 | R |
| ペン（Pen） | 自由にパスを引けるツール。 複雑な図形の作成に使用。 Illustratorのペンツールに近い感覚。 | P |
| テキスト（Text） | テキストを入力するツール。 フォントや文字サイズ、カラーなどを設定して見出しや本文を作成。 | T |
| コメント（Comment） | デザイン上に付箋のようにコメントを残せる機能。 チームでのフィードバックや修正依頼に便利。 共同作業向け。 | C |
| アクション（Main Menu / その他のアクション） | 追加機能にアクセス可能。 ワークフローを広げる中心的なメニュー。 | ctrl+K |
3.なにはともあれ、まずはフレーム
フレームとは下のパネルの左から2番目のものです。
下の画像のようにクリックすると、右側のデザインパネルが変化します。
拡大するとこんな感じで、ベースとなるフレームが選べます。
この画像ではスマホのフレームを選択していますが、他にもタブレットやデスクトップなどもあります。
基本は用紙の中にあるA4を選んでいればよいと思います。
ちなみにフレームのサイズは後からでも変更できるの何を選んでも問題ないです。
4. コンポーネントが便利
Web デザインでは、ボタンや見出しなど「同じパーツ」を何度も使います。
もし 50 ページにボタンを置いたあとで「角を丸くしたい」と思ったら、1 個ずつ直すのは大変…。
そこでコンポーネントを使えば、元デザインを修正するだけで、すべてのページに反映されます。
つまり「作業時間を短縮できる」＋「デザインの統一感を保てる」＝一石二鳥というわけです。
5. Figmaでコンポーネントを作ってみよう
ステップ① ボタンを作る
長方形ツールで四角を描く
長方形ツールは下のツールバーの左から3番目の「▢」をクリックします。
ちなみに「▢」の横の▿をクリックすると、線や矢印、星などが選択できます。
その後、ドラッグして思った形になった所で手を離すと長方形が作れます。
ちなみに大抵のソフトで（Excelやillustratorなどでも）、shiftキーを押しながらドラッグすると正方形が作れたり、正円、直線が引けたりする（15度ずつ回転した直線を描くことも可能）ので覚えておきましょう。
図形をクリックして選択した状態で、サイズ変更が可能です。
四方の□をドラッグすると広がるし、上下左右の面をドラッグしても広がります。
また、中側の四方にある〇をドラッグすると4隅が丸くなります（角丸）
右側にあるデザインパネルでも、細かな調整ができます。
レイアウト項目にある「サイズ」で大きさを選択。
デザインカンプ（完成見本）がある場合のサイズ合わせに有効です。
「外見」の項目に、「角の半径」があります。
ここをイジっても角丸にできます。
「塗り」はそのまんまですが、色を指定できます。
「位置」にある「回転」は斜めにしたり、反転させたり便利です。
とりあえず図形を描写したとき（や、何かしらアクションを起こした時）に、ここに細かい調整の一覧が表示されるという事を覚えておいてください。
最初は適当に触って練習するのが一番なので楽しんでください。
テキストを配置（入力）
下のツールバーの「T」でテキストを入力できます。
ステップ② コンポーネント化する
- そのボタンを選択 → 右クリック → 「Create Component（コンポーネント作成）」
- アセットパネルに登録され、何度でも使える状態になる
ステップ③ コピーして使う
作ったコンポーネントをドラッグして配置（ドロップ）。
（左のメニューを「ファイル」から「アセット」に変更したら下の画面になります。）
インスタンスのテキストだけ変更して「送信」「キャンセル」など用途に合わせる。
6. バリエーションを増やしてみる（Variants）
ボタンには「通常」「ホバー」「無効」などの状態がありますよね。
Figma では「Variants（バリアント）」を使うと、それらをまとめて管理できます。
- Primary（メインカラーのボタン）
- Secondary（サブカラーのボタン）
- Disabled（クリックできないボタン）
これらをひとつのグループにまとめておくと、インスタンス側で状態を切り替えるだけで使い分けられます。
このような感じでプロパティの項目を「バリアント２」にすると送信バージョンが登録されているため、一回一回テキストを変えなくても良くなります。
ボタンが増えてくると便利な機能なので、ぜひ有効利用してください。
7. 初心者がつまずきやすいポイントと対策
- コピーとインスタンスの違いが分からない
→ 「右クリック → コンポーネント作成」したものが“原本”、そこから使うのが“インスタンス”。 - デザインがぐちゃぐちゃになる
→ 専用ページを作って「コンポーネント置き場」を整理しておくと混乱しにくい。 - 英語UIで迷う
→ Figma は日本語化できるので、まずは設定から「言語＝日本語」に変えておくのがおすすめ。
まとめ
- Figma は初心者でもすぐに始められるデザインツール
- コンポーネントを使うことで「効率」と「統一感」がアップ
- バリアントを使えば、ボタンなどのパターンもラクに管理できる
まずは 小さなボタンや見出しからコンポーネントを作る練習 をしてみましょう。
それができれば、Web サイト全体のデザインもずっと扱いやすくなります。
最初は動画を見るより、本を見ながらのほうがわかりやすいと思います。
デザインシステムって何？
さて、駆け出しWeb デザイナーが「Figma の基本 → コンポーネント → 次のステップ」ときたら、その先にあるのが デザインシステム です。
ここを理解しておくと「プロっぽさ」が一気に出て、就職や案件対応でも強みになります。
デザインシステムとは、Webサイトやアプリのデザインを「統一」して作るためのルールや部品の集合体のことです。
たとえば「ボタンの色」「見出しのサイズ」「余白のとり方」がページごとにバラバラだと、ユーザーは違和感を覚えてしまいますよね。
そこで「このサイトは見出しは必ず24px、ボタンは青ベース、余白は16px単位」といった 共通ルールをまとめて、誰が作っても同じ仕上がりになるようにしたものがデザインシステムです。
デザインシステムに含まれる主な要素
初心者でもイメージしやすいように、代表的なパーツを整理しました。
| 項目 | 内容 | 例 |
|---|---|---|
| カラー（Color Palette） | サイト全体で使う色のルール | メインカラー、サブカラー、アクセントカラー |
| タイポグラフィ（Typography） | フォントの種類・サイズ・太さのルール | 見出し H1=24px、本文=16px |
| スペーシング（Spacing） | 余白・マージン・パディングの基準 | 8px / 16px / 24px 単位で統一 |
| コンポーネント（Components） | ボタン、入力フォーム、カードなど | Primary ボタン、検索バー |
| アイコンや画像のスタイル | 形・サイズ・色調などの統一ルール | 24px の単色アイコン、角丸 4px |
ポイントは「なんとなく作る」ではなく 「最初にルールを決めて、それを Figma 上で部品化する」 ことです。
Figmaで作るデザインシステムの始め方
Step 1. カラーとフォントをスタイル化する
- Figma の 「スタイル（Style）」機能を使って、色やフォントを登録
- 例：
Primary/Blue、Text/Bodyなど名前をつけておく
Step 2. よく使うパーツをコンポーネント化
- ボタン、見出し、カードなどを コンポーネントにまとめる
- 例：
Button/Primary、Card/Product
Step 3. ライブラリ化して共有
- 作ったコンポーネントを 「Assets」→「Publish」 でライブラリに登録
- 他のデザインファイルでも呼び出して使えるようにする
デザインシステムを使うメリット
- デザインがバラつかない → 統一感のある仕上がりに
- 作業が速くなる → 部品を置くだけで画面が完成
- チーム作業に強い → 誰が作っても同じルールで進められる
- 修正がラク → 色やフォントを変えたら、全画面に一括反映
初心者が実践しやすいミニ・デザインシステム例
最初から大きなシステムを作ろうとすると挫折します。
おすすめは 「ボタン・カラー・フォント」だけに絞ったミニ版デザインシステム です。
- カラー：メイン青 (#1E90FF)、アクセント赤 (#FF4D4D)、背景グレー (#F5F5F5)
- フォント：見出し 24px / 太字、本文 16px / レギュラー
- コンポーネント：Primary ボタン、Secondary ボタン
これだけでも「自分のデザインルール」ができて、一歩前進です。
まとめ
- デザインシステムとは「デザインのルールブック＋部品箱」
- Figma では スタイル登録 → コンポーネント化 → ライブラリ化 の流れで構築できる
- 初心者はまず「色・文字・ボタン」の3つから始めるのがおすすめ
👉 デザインシステムを作れると、就活ポートフォリオや案件実務で「デザインの再現性」を示せる強力な武器になります。
ここで無料の初回カウンセリング受けた後、会員登録すると無料でFigmaの基本操作コースがついてくるのでおススメです。これからのデザイン業界はFigmaに移行していくと思うので今のうちに勉強しておきましょう。この無料コースでも30分ぐらいの動画と長いテキスト（図と余白が多くて見やすいです）ついているので、普通にFigmaが使えるようになるボリュームでした。まったく勧誘もないです。メールが一通くる程度。
補足説明：UI2 → UI3 主な変更点まとめ
1. 全体デザインの刷新
- よりシンプルでモダンな見た目
UI2に比べて余白や階層が整理され、アイコンもフラットで見やすくなった。 - ダークモードの強化
配色やコントラストが改善され、長時間作業でも目が疲れにくい。
2. ツールバーとナビゲーションの統合
- 左上のメニューとツールバーが整理
UI2ではアイコンが分散していたが、UI3では「移動」「フレーム」「図形」などがコンパクトに並び、迷いにくくなった。 - 新しい「アクションバー」
よく使う機能（コピー、整列、オートレイアウト、コメントなど）が文脈に応じて表示されるように。
3. プロパティパネルの再設計
- 右側パネルがタブ式から一元化
デザイン・プロトタイプ・コードが同じフローで切り替えやすくなった。 - レスポンシブ対応がわかりやすい
コンテナやレイアウトグリッドの設定がUI上で視覚的に理解しやすく改善。
4. コラボレーション機能の強化
- コメントの扱いが向上
UI2では別ボタンから呼び出していたが、UI3ではスムーズに切替可能。 - ステータス表示の追加
他のメンバーがどの要素を見ているか、より明確に確認できる。
5. アクセシビリティと操作性
- キーボードショートカットの体系化
操作体系が整理され、学習コストが下がった。 - スクリーンリーダー対応
色覚サポートやコントラスト強調モードなど、よりアクセシブルに。
変更点をざっくり表にすると
| 項目 | UI2 | UI3 |
|---|---|---|
| 全体デザイン | やや複雑、余白少なめ | シンプルで余白多め、モダン |
| ツールバー | アイコンが分散 | 統合・整理、文脈に応じたアクションバー |
| プロパティパネル | タブ切替式 | 一元化、視覚的に操作しやすい |
| コメント | 独立ボタンから利用 | 切替しやすくUIに統合 |
| コラボ表示 | 基本的なカーソル表示 | 他人の操作・視点が見やすい |
| アクセシビリティ | 限定的 | 強化、スクリーンリーダー対応 |
※UI3は「UIを刷新して作業効率と直感性を上げる」という方向性で設計されており、特に新規ユーザーの学習コストが下がったことが大きな特徴です。
デイトラさんはFigmaを使っているので〇ッとスキルが身に付きます。
