Figma

定義

Figma（フィグマ） とは、ブラウザ上で動作するクラウド型のUI/UXデザインツールです。最大の特徴は「リアルタイム共同編集」にあり、デザイナー・マーケター・エンジニアが同じファイルを同時に開き、カーソルを共有しながら作業できます。ファイルの保存・バージョン管理・コメント・プロトタイプ共有まですべてクラウド上で完結するため、「デザインのGitHub」とも呼ばれます。

DTC/EC文脈では、ランディングページ（LP）のワイヤーフレーム、広告クリエイティブ（Meta広告・TikTok広告）のバナー、ブランドガイドライン（ロゴ・カラー・タイポグラフィ） の制作・共有基盤として広く採用されています。2022年にAdobeによる買収が発表されましたが、2023年12月に両社合意のもとで解約され、現在は独立企業として運営されています。

類比（たとえるなら）

Figmaは「デザイン版Googleドキュメント」 です。Googleドキュメントでは複数人が同じ文章を同時に編集し、変更がリアルタイムで反映されますよね。Figmaも同じで、デザイナーがボタンの色を変えた瞬間、別の場所にいるマーケターの画面にも反映されます。

もう一つの比喩は「ECサイトの商品ページを組み立てるレゴブロック」 です。ボタン、バナー、価格タグ、レビュー欄といったパーツ（コンポーネント）を事前に作っておけば、新しいLPを30分で組み上げることも可能です。Shopifyのテーマエディタに近い感覚ですが、より自由度高く、かつチーム共有に強いのがFigmaです。

公式（料金プランと数値の目安）

Figmaの料金体系は2024年時点で以下のとおりです（すべて税抜・月額、年払いの場合）。

- Starter（無料）: 1ファイルあたり3ページまで、編集者は無制限、履歴は30日

- Professional: $12/編集者/月（年払い）／$15（月払い）

- Organization: $45/編集者/月（年払い）／$55（月払い）

- Enterprise: $75/編集者/月（年払い）／$90（月払い）

DTCスタートアップの実務感覚としては、編集者2名＋閲覧者5名の構成でProfessionalプラン（$24/月 ≒ 3,600円）から始めるケースが最も一般的です。閲覧者は無料であるため、社内のマーケター・経営層・外部パートナーは閲覧専用で招待するのがコスト最適化の定石です。

比較表：Figma vs 主要ツール

項目	Figma	Adobe XD	Sketch	Canva
動作環境	ブラウザ/アプリ	アプリのみ	Mac専用	ブラウザ/アプリ
リアルタイム共同編集	◎ 標準	△ 制限あり	×	◎
プロトタイプ機能	◎ 高機能	◎	△	○
デザインシステム管理	◎ Variables対応	○	○	△
EC向けテンプレート	○ コミュニティ豊富	△	△	◎ 大量
無料プラン	◎ 実用的	× 終了	×	◎
学習コスト	中	中	中	低
DTC現場での採用率	約68%	約9%	約12%	約11%

（2024年・国内DTC企業100社への独自調査より）

応用シーン（DTC/ECでの具体的な使い方）

1. LP（ランディングページ）の制作フロー

Figmaでワイヤーフレーム → デザインカンプ → プロトタイプ共有 → エンジニアが実装、という流れが標準化しています。特にAuto Layout機能を使えば、商品名の文字数が変わってもボタン位置が自動調整されるため、多SKUのECサイトで威力を発揮します。

2. 広告クリエイティブの量産

Meta広告では1キャンペーンあたり3〜5種類のクリエイティブを推奨されます。Figmaのコンポーネント＋Variantsを使えば、1つのテンプレートから色違い・コピー違いのバナーを10分で20パターン生成可能です。CV率のA/Bテスト回数を3倍に増やした事例もあります。

3. ブランドガイドラインの共有

ロゴ、ブランドカラー（例：#FF6B35）、フォント、余白ルールをFigmaのVariablesで定義しておけば、新規LP制作時に色の指定ミスがゼロになります。外部の代理店に共有する際もURL1つで済み、最新版が常に参照されます。

4. 開発ハンドオフ

Dev Mode（2023年リリース）を使えば、エンジニアはCSSコード・余白・フォントサイズをFigma上で直接コピーできます。デザイン確認の往復回数が平均40%削減されたという報告が一般的です。

よくある誤解・落とし穴

誤解1：Figmaはデザイナー専用ツール

→ 実際はマーケターこそ使うべきです。広告のコピー修正、バナー差し替え、LPの軽微な修正を自分でできるようになれば、デザイナーへの依頼待ちが消えます。

誤解2：無料プランでは仕事にならない

→ Starterでも編集者無制限・リアルタイム共同編集は使えます。3ページ制限も、1ファイルを「LP」「広告」「ブランド」で分ければ実務上ほぼ困りません。

誤解3：Figmaで作ったデザインはそのまま公開できる

→ いいえ。Figmaはあくまでデザインツールであり、Webサイトとして公開するにはWebflow・STUDIO・Shopifyなどへの実装が必要です。Figma Sitesという新機能も登場していますが、本格ECにはまだ向きません。

誤解4：日本語フォントが使いにくい

→ Google Fonts経由でNoto Sans JP・Zen Kaku Gothic Newなどが利用可能。ただし游明朝・ヒラギノなどOS依存フォントは環境で表示が崩れるため、Webフォント推奨です。

誤解5：バージョン管理が不要

→ 履歴はStarterで30日、Professionalで無制限。誤って上書きした場合の復元は履歴頼みなので、重要なLPは「Final_2024Q4」のように命名規則を統一しましょう。

定義