この記事でわかること
- Figmaの基本と無料プランでできること
- Web/アプリデザインの基本操作
- コンポーネント・オートレイアウトの使い方
- プロトタイプ作成とデザインの共有方法
- 非デザイナーでもFigmaを活用する方法
Figmaとは
Figmaは世界で最も使われているUI/UXデザインツールです。ブラウザ上で動作するため、インストール不要で、Windows/Mac/Linuxの全OSで使えます。複数人での同時編集（Google Docsのように）が最大の特徴です。
料金プラン
| プラン | 月額 | 主な機能 |
|---|---|---|
| Starter（無料） | 0円 | 3プロジェクト、無制限ファイル、共有・コメント |
| Professional | $15/人 | 無制限プロジェクト、チームライブラリ |
| Organization | $45/人 | SSO、管理者機能、分析 |
| Enterprise | $75/人 | 高度なセキュリティ・管理 |
無料プランで十分なケース: 個人利用、小規模チーム（〜3名）、ワイヤーフレーム作成、プロトタイプ共有
Figma vs その他のデザインツール
| 比較項目 | Figma | Adobe XD | Sketch | Canva |
|---|---|---|---|---|
| OS | 全OS（ブラウザ） | Windows/Mac | macOS専用 | 全OS |
| 共同編集 | ◎（リアルタイム） | △ | △ | ○ |
| プロトタイプ | ◎ | ◎ | ○ | △ |
| 学習コスト | 低〜中 | 中 | 中 | 最低 |
| 非デザイナー | ○ | △ | △ | ◎ |
| 無料プラン | ◎（実用的） | △（制限多い） | × | ○ |
基本操作（初心者向け）
画面構成
- 左パネル: レイヤー（要素の階層構造）、ページ
- 中央: キャンバス（デザイン作業エリア）
- 右パネル: デザインプロパティ（色、サイズ、フォント等）
- 上部: ツールバー（図形、テキスト、フレーム等）
覚えるべき基本操作5つ
①フレーム（F）: デザインの「画面」を作成。iPhone/iPad/Webなどのプリセットから選択
②テキスト（T）: テキストを配置。フォント、サイズ、色、行間を右パネルで調整
③図形（R/O/L）: 四角形（R）、楕円（O）、線（L）。角丸、色、枠線を設定
④コンポーネント: 再利用可能なUI部品（ボタン、カード、ヘッダー等）を定義。一箇所変更すると全インスタンスに反映
⑤オートレイアウト（Shift+A）: 要素を自動的に整列。パディング・間隔を設定すると、要素の追加/削除に自動対応
Figma初心者が最初にやるべきことは「Community（コミュニティ）からテンプレートをコピーする」ことです。ゼロからデザインするのではなく、プロが作ったテンプレートを自社用にカスタマイズする方が100倍速い。Figma Communityで「dashboard」「landing page」「mobile app」等で検索し、気に入ったものを「Duplicate」してください。
コンポーネントの活用
コンポーネントとは
コンポーネントは再利用可能なUI部品です。ボタン、カード、フォーム要素、ナビゲーションなどをコンポーネント化しておくと、デザインの一貫性を保ちながら効率的に作業できます。
作り方
- ボタンなどのUIパーツをデザイン
- 選択して「Create Component」（Ctrl/Cmd + Alt + K）
- インスタンス（コピー）を配置して使用
- メインコンポーネントを変更すると、全インスタンスに反映
バリアント
1つのコンポーネントに複数のバリエーション（状態）を持たせる機能。
例：ボタンコンポーネントのバリアント
- Size: Small / Medium / Large
- State: Default / Hover / Disabled
- Type: Primary / Secondary / Outline
プロトタイプ作成
インタラクションの設定
- 右パネルで「Prototype」タブに切り替え
- ボタン等の要素を選択 → 遷移先のフレームにドラッグ
- トリガー（On Click、On Hover等）を選択
- アニメーション（Dissolve、Smart Animate等）を設定
プロトタイプの共有
- 右上の「Share」→「Share Prototype」
- URLを関係者に共有
- コメント機能でフィードバックを収集
プレゼンテーション
- 右上の再生ボタンでプレゼンモードを開始
- 実際のアプリのように操作して確認
- クライアントへのデモに最適
非デザイナーのFigma活用法
エンジニア
- デザインの確認: 開発に必要な色コード、フォントサイズ、余白を直接確認
- Dev Mode: コード用のCSS/Swift/XML等を自動生成
- コメント: デザイナーへの質問・確認をFigma上で完結
PM/ディレクター
- ワイヤーフレーム作成: 要件定義時の画面イメージ共有
- フィードバック: コメント機能でデザインへのフィードバック
- プレゼンテーション: クライアントへのデモ
経営者
- 資料作成: スライド作成にFigmaを使用（PowerPoint代替）
- 承認フロー: デザイン確認→コメントで承認
非デザイナーにFigmaを勧める一番の理由は「デザイナーとのコミュニケーションが圧倒的にスムーズになる」ことです。「ここのボタンをもう少し大きく」を口頭やテキストで伝えるより、Figma上で直接コメントした方が10倍正確に伝わります。無料プランで十分なので、まずアカウントを作ってみてください。
まとめ
- Figmaは無料でUI/UXデザイン・プロトタイプが作れる最強ツール
- ブラウザ上で動作し、リアルタイム共同編集が可能
- コミュニティのテンプレートを活用すれば、非デザイナーでもワイヤーフレームが作れる
- コンポーネント・オートレイアウトで効率的なデザイン
- エンジニア・PM・経営者もFigmaを使うことでチームの生産性向上
Figmaを活用したUI/UXデザインのご相談は、お問い合わせからお気軽にどうぞ。
よくある質問
UI/UXの改善効果はどのくらいありますか？
業務システムのUI改善では、操作時間の20〜40%短縮やミス率の大幅減少が見られるケースがあります。ECサイトではコンバージョン率の向上に直結するため、投資対効果が高い施策です。
UI/UXの改善はどこから始めるべき？
まずはユーザーの声を集めることから始めましょう。実際に使っている人の不満や困りごとを把握し、影響度の大きい箇所から改善していくのが効果的です。
UI/UXデザインの外注費用は？
画面デザインのリニューアルで50〜200万円、ユーザビリティテストの実施で30〜100万円が目安です。改善の範囲や対象画面数によって変わるため、まずは現状の課題を整理してから見積もりを取りましょう。
この記事をシェア