Figmaを使ってWebサイトを作ってみたい。
しかし、料金ページを見ると「Starter」「Professional」「Organization」「Enterprise」があり、さらに「Full」「Dev」「Collab」というシートまで出てきます。
初心者からすると、
「結局、どれを契約すればいいの？」
となりやすい仕組みです。
そこで、最初に結論を出します。
WordPressのWeb制作をこれから学ぶ人なら、最初は無料のStarterで十分です。
そして、Figmaを使ったWeb制作に慣れ、実際のサイト制作や仕事で継続的に使うようになったらProfessionalへ進みます。
さらにチームで仕事をするようになっても、いきなりOrganizationへ上げる必要はありません。
まずはProfessionalの中で、デザイナーにはFull、開発者にはDev、打ち合わせ中心の人にはCollab、確認するだけの人には無料のViewを割り当てるほうが、料金をかなり抑えられます。
つまり、Figmaは最初から高いプランを契約するのではなく、自分のWeb制作レベルに合わせて少しずつ課金を増やす使い方が向いています。
この記事では、WordPressでオリジナルのWebサイトを作れるようになることを目標に、初心者から仕事で使うレベルまで段階的に解説します。
※料金・機能は2026年9月6日時点です。Figmaの料金は米ドル表記で、変更される可能性があります。
- 忙しい人向け｜Figmaのおすすめ成長ルート
- そもそもFigmaをWordPressで何に使うのか
- FigmaからWordPress用コードが全部出てくるわけではない
- レベル1｜まずはStarterで無料学習する
- レベル2｜無料のまま自分のWordPressサイトを設計する
- レベル3｜本格的に作り始めたらProfessionalを検討する
- レベル4｜毎月使うならProfessionalを年払いへ
- Figmaの料金を段階的にシミュレーションしてみる
- レベル5｜開発者と組むようになったらシートを分ける
- レベル6｜Organizationへ上げるのは会社として管理したくなってから
- レベル7｜Enterpriseは大企業向けと考えていい
- ケース別｜あなたならどのプラン？
- 初心者がやってはいけない契約方法
- おすすめのレベルアップ順
- Figmaを使えるだけではWeb制作者にはならない
- まず挑戦するなら「自分のWordPressトップページ」を作ってみよう
- 契約前チェックリスト
- FAQ
- 一次情報
- まとめ｜無料から始めて必要になった機能にだけお金を払えばいい
- まとめ：この記事から学べること
忙しい人向け｜Figmaのおすすめ成長ルート
| レベル | 使い方 | おすすめ |
|---|---|---|
| レベル1 | Figmaを覚える | Starter |
| レベル2 | 自分のWordPressサイトをデザインする | Starter |
| レベル3 | 本格的なWeb制作・案件を始める | Professional Full・月払い |
| レベル4 | 毎月使うようになる | Professional Full・年払い |
| レベル5 | デザイナーと開発者で仕事を分ける | Professional＋シート分け |
| レベル6 | 複数チームを会社で管理する | Organization |
| レベル7 | 大企業・複数ブランドで運用する | Enterprise |
個人でWordPressサイトを作る人なら、Professionalまでで長期間困らない可能性が高いです。
OrganizationやEnterpriseは、単純に「高性能版Figmaが欲しいから契約する」というより、会社として人・権限・デザイン資産を管理する必要が出てきたときのプランです。Figma公式でも、Professionalは個人のプロや小規模チーム、Organizationは組織全体でデザインする企業、Enterpriseは複数製品やブランドを扱う企業向けとして整理されています。
そもそもFigmaをWordPressで何に使うのか
まず、ここを理解しておきましょう。
FigmaはWordPressを直接編集するソフトではありません。
WordPressでページを作る前に、
「完成したWebサイトはこういう見た目にする」
という設計図を作るために使います。
たとえば、企業サイトのトップページなら、
ヘッダー
↓
メイン画像
↓
サービス紹介
↓
実績
↓
料金
↓
FAQ
↓
問い合わせボタン
↓
フッター
というページ全体をFigma上で先に作ります。
そして、PC版だけではなくスマートフォン版も作ります。
そのあとWordPress側で、
Figmaのデザインを見ながら実装する
という流れです。
実装には、WordPressのブロックエディター、テーマ、HTML、CSS、JavaScript、PHPなどを使います。
つまり、
Figma＝設計
WordPress＝実際に動かす場所
と考えるとわかりやすいでしょう。
FigmaからWordPress用コードが全部出てくるわけではない
ここは誤解しやすいポイントです。
Figmaには、デザインした要素からCSSなどの情報を確認する機能があります。
Dev Modeでは、選択したパーツについて、余白、サイズ、フォント、レイアウトなどを確認し、コードスニペットをコピーできます。
たとえば、
ボタンの横幅
高さ
背景色
角丸
文字サイズ
余白
などをFigmaから確認できます。
しかし、
「Figmaでデザイン完成 → WordPressテーマ完成」
とはなりません。
WordPressには、記事一覧、カテゴリー、投稿ページ、検索、管理画面、PHPテンプレートなど独自の仕組みがあります。
そのため、
Figmaのコード情報を参考にしながらWordPress向けに実装する
という考え方が正確です。
そして、ここまでできるようになると、既製のWordPressテーマを使うだけではなく、かなり自由度の高いオリジナルサイトを作れるようになります。
レベル1｜まずはStarterで無料学習する
初心者はStarterから始めましょう。
料金は0ドルです。
Starterではドラフトを無制限に作成でき、UIキットやテンプレートも利用できます。
また、無料プランでも月500 AIクレジットまで利用でき、1日150クレジットの上限があります。
さらに、Starterでは共同編集できるファイルに制限があり、最大3ファイル、各ファイル3ページまでという制限があります。個人のドラフトについては無制限です。
しかし、初心者には十分です。
最初にやること
おすすめは、いきなり架空のサービスを作ることではありません。
自分がすでに持っているWordPressサイトをFigmaで再現してみるとわかりやすいです。
まず、
ヘッダー
記事タイトル
本文
画像
サイドバー
関連記事
フッター
などを配置します。
そして、次は「今のサイトより見やすくするならどうするか」を考えます。
たとえば、
本文を少し広くする。
CTAを目立たせる。
関連記事をカード型にする。
スマートフォンではサイドバーを消す。
こうした変更をFigma上で試します。
WordPress本体を触っていないため、失敗してもサイトは壊れません。
これがFigmaを使う大きなメリットです。
レベル1で覚えておきたい機能
初心者なら、最初からFigmaの全機能を覚える必要はありません。
まず重要なのは、
Frame
Auto Layout
Component
Text Style
Color Style
あたりです。
特にAuto Layoutは重要です。
Webサイトでは、画面サイズが変わればレイアウトも変化します。
Auto Layoutを理解すると、
「PCでは横並び」
「スマホでは縦並び」
というWebらしい設計がしやすくなります。
この段階では、まだ有料プランはいりません。
レベル2｜無料のまま自分のWordPressサイトを設計する
Figmaの基本操作に慣れたら、次は実際のサイトを作ります。
ここでも、まだStarterで構いません。
たとえば、
- ブログのトップページ
- 記事ページ
- カテゴリーページ
- プロフィール
- 問い合わせページ
- 比較ページ
- 商品紹介ページ
- LP
などを1つずつFigmaで作ってみます。
ここで大切なのは、デザインだけで終わらせないことです。
Figmaで作ったものをWordPress側でも再現します。
つまり、
Figmaで作る
↓
WordPressで実装する
↓
Figmaと見比べる
↓
CSSを修正する
↓
スマホ表示を確認する
という練習を繰り返します。
この段階まで来ると、
「Figmaを使える」
だけではなく、
「Figmaで設計したものをWebサイトにできる」
という実務に近い能力になります。
レベル3｜本格的に作り始めたらProfessionalを検討する
ここから有料化を考えます。
Professionalでは、1つのチームでファイルやフォルダを無制限に管理でき、チームライブラリ、高度なプロトタイプ、Dev Modeなどが強化されます。
Professionalには3種類の有料シートがあります。
| シート | 年払い換算 | 主な利用者 |
|---|---|---|
| Full | 16ドル/月 | デザイナー・制作者 |
| Dev | 12ドル/月 | 開発者 |
| Collab | 3ドル/月 | FigJam・Slides中心 |
| View | 無料 | 確認・コメント中心 |
公式料金ページでは、Professionalの年払い価格としてFullが月16ドル、Devが12ドル、Collabが3ドルと表示されています。
Professionalでは月払いも選べます。
2026年9月時点では、月払いはおおむね、
Full：20ドル/月
Dev：15ドル/月
Collab：5ドル/月
です。
契約前にはFigma公式料金ページの「Monthly / Annual」を切り替えて、最終料金を確認してください。Professionalでは月払いと年払いの両方を選択できることが公式ヘルプでも案内されています。
初めて課金するならFullシート1人分でいい
WordPressサイトを自分でデザインするなら、基本的に必要なのはFullシートです。
FullにはFigma Designを含む主要な制作機能が含まれています。
Professional Fullを月払いすると、
20ドル/月
です。
2026年9月6日時点の参考レートである1ドル約156.3円で計算すると、
約3,125円/月
です。
まず1か月だけ使ってみる。
翌月も使う。
さらに案件でも使う。
このように利用頻度を見ながら判断できます。
レベル4｜毎月使うならProfessionalを年払いへ
Figmaを仕事や自分のWebサイト制作で毎月使うようになったら、年払いを検討します。
Professional Fullの場合、
月払い：20ドル × 12か月
＝240ドル
年払い：16ドル × 12か月
＝192ドル
差額は、
年間48ドル
です。
1ドル156.3円で計算すると、
約37,500円
↓
約30,000円
となります。
年間約7,500円の差です。
何か月使うなら年払いが得なのか
20ドルの月払いを続ける場合、
9か月なら180ドル。
10か月なら200ドル。
一方、年払いは192ドルです。
つまり、
1年間のうち10か月以上使う可能性が高いなら、年払いのほうが安くなります。
反対に、
「2か月だけ案件がある」
「Web制作を続けるかわからない」
という段階なら、月払いのほうが合理的です。
安いからという理由だけで、初心者が最初から1年間契約する必要はありません。
Figmaの料金を段階的にシミュレーションしてみる
ここから、実際にレベルアップしていく場合の料金を見てみましょう。
円換算は1ドル約156.3円で計算しています。
ステージ1｜完全初心者
Starter
年間料金：
0円
まずはここでFigmaを覚えます。
ステージ2｜初めて本格的なWebサイトを作る
Professional Full
月払い1人
20ドル/月
約3,125円/月
3か月利用した場合、
60ドル
＝約9,375円
です。
この程度なら、Web制作ソフトを本格的に試す費用としても比較的小さいでしょう。
ステージ3｜Figmaを1年間使う
Professional Full
年払い1人
16ドル × 12か月
＝192ドル/年
＝約30,000円/年
月平均では約2,500円です。
個人でWordPressサイトを継続的に設計するなら、このあたりが非常に使いやすいポジションです。
レベル5｜開発者と組むようになったらシートを分ける
ここからFigmaの料金体系で重要になるのが「シート」です。
たとえば、
自分：デザイン担当
別の人：WordPress実装担当
クライアント：確認だけ
という3人で仕事をするとします。
全員にFullシートを与える必要はありません。
デザイン担当
→ Full
WordPress開発者
→ Dev
クライアント
→ View
という分け方ができます。
Figmaでは有料プランでも、閲覧とコメントだけなら無料のViewシートを利用できます。
料金シミュレーション
Full：16ドル
Dev：12ドル
View：0ドル
合計：
28ドル/月相当
年間では、
336ドル
約52,500円です。
2人で本格的なWeb制作環境を使っても、年間5万円程度に抑えられます。
打ち合わせ担当が加わった場合
さらに、企画担当者がFigJamやSlidesを編集するとします。
その人にはCollabシートを割り当てます。
Full：16ドル
Dev：12ドル
Collab：3ドル
View：0ドル
合計31ドル/月相当。
年間372ドル。
約58,100円です。
このように、役割ごとにシートを分けることがFigmaの料金を抑えるコツです。
6人チームになった場合はどうなる？
もう少し本格的に考えてみましょう。
6人のWeb制作チームを想定します。
デザイナー2人
開発者2人
企画・進行2人
必要なシートを、
Full × 2
Dev × 2
Collab × 2
とします。
Professional年払いなら、
Full
16ドル × 2
＝32ドル
Dev
12ドル × 2
＝24ドル
Collab
3ドル × 2
＝6ドル
合計、
62ドル/月相当
年間では、
744ドル
約116,300円です。
全員Fullにするといくらになる？
6人全員をFullにすると、
16ドル × 6人
＝96ドル/月相当
年間1,152ドル
約180,000円です。
適切にシートを分けた場合は約116,300円なので、
年間408ドル、約63,700円の差が出ます。
人数が増えるほど、この違いは大きくなります。
だから、チームを作ったときに最初に考えるべきなのは「上位プランへ行くか」ではありません。
まず、
誰が本当にFullを必要としているのか
を確認するほうが重要です。
DevシートはWordPress開発者と相性がいい
Devシートは、名前の通り開発者向けです。
Dev Modeでは、デザインの寸法、余白、スタイルなどを確認し、コード情報を取得できます。
有料プランではFullまたはDevシートでDev Modeを利用できます。
たとえばデザイナーが、
「このカードは横幅360px」
「余白は24px」
「角丸は12px」
「見出しは32px」
と設計したとします。
WordPress開発者は、それを確認しながらCSSに落とし込めます。
そのため、
デザイナー＝Full
WordPress実装担当＝Dev
という役割分担はかなり自然です。
AIを使いたくなったときもプラン差が出てくる
現在のFigmaではAI機能も増えています。
Figma Makeでは、文章による指示から動くプロトタイプやWebアプリを生成できます。
また、画像生成、背景除去、画像編集などにもAIクレジットが利用されます。
AIクレジットは、主に次のようになっています。
| プラン・シート | AIクレジット/月 |
|---|---|
| Starter | 500 |
| Professional Full | 3,000 |
| Professional Dev・Collab | 500 |
| Organization Full | 3,500 |
| Enterprise Full | 4,250 |
StarterとViewには1日150クレジットの上限もあります。
ただし、AIを少し使いたいだけでProfessionalへ上げる必要はありません。
まず無料で触ってみます。
そして、
「毎日のようにFigma Makeを使う」
「AIで大量に試作品を作る」
という段階になってから課金を考えれば十分です。
なお、AIクレジットは毎月リセットされ、翌月へ繰り越すことはできません。
レベル6｜Organizationへ上げるのは会社として管理したくなってから
Professionalの次がOrganizationです。
日本語のFigma料金ページでは「ビジネス」と表示されることもあります。
Organizationは年払いです。
料金は、
Full：55ドル/月相当
Dev：25ドル/月相当
Collab：5ドル/月相当
です。
Professionalと比べると、一気に高くなります。
しかし、Organizationの価値は単純なデザイン機能ではありません。
複数チームでライブラリを共有したり、フォントやデザイン資産を会社として管理したり、管理者がユーザーを統括したりする機能が重要になります。
つまり、
個人クリエイターがもっと便利にFigmaを使うための上位プランではない
と考えたほうがわかりやすいでしょう。
同じ6人チームをOrganizationにするとどうなる？
先ほどと同じ、
Full × 2
Dev × 2
Collab × 2
で計算します。
Full
55ドル × 2
＝110ドル
Dev
25ドル × 2
＝50ドル
Collab
5ドル × 2
＝10ドル
合計、
170ドル/月相当。
年間では、
2,040ドル。
約318,800円です。
Professionalなら約116,300円でした。
つまり、Organizationへ移行すると年間費用はかなり増えます。
そのため、
「Professionalより上だから」
という理由だけで契約するものではありません。
会社として複数チームを管理する必要があり、その管理機能に年間数十万円を払う価値が出てきたときに検討します。
レベル7｜Enterpriseは大企業向けと考えていい
Enterpriseはさらに上です。
料金は年払いで、
Full：90ドル/月相当
Dev：35ドル/月相当
Collab：5ドル/月相当
です。
Enterpriseでは、ワークスペース管理、複数ブランド向けのデザインシステム、API、SCIMによるシート管理など、大規模組織向けの機能が強くなります。
SCIMとは、会社の社員アカウントなどを自動で追加・削除するための仕組みです。
つまり、数人でWordPressサイトを作るために必要なものではありません。
数十人、数百人規模でデザインと開発を管理するときに意味が出てきます。
WordPress制作者ならどこまでグレードアップすればいい？
実際には、多くの個人制作者や小規模Web制作なら、
Starter → Professional
までで十分でしょう。
そしてProfessionalの中で、
Full
Dev
Collab
View
を使い分けます。
Organizationへ上げるのは、
「サイト制作能力を上げたいから」
ではなく、
「組織管理が必要になったから」
です。
ここを間違えなければ、必要以上に料金を払わずに済みます。
ケース別｜あなたならどのプラン？
| 状況 | 選択 |
|---|---|
| Figmaを初めて触る | Starter |
| WordPressブログのデザインを考える | Starter |
| 自分のサイトを1つ作る | Starterから開始 |
| 本格的にWeb制作を勉強する | Starter → Professional |
| 初案件を受けた | Professional月払い |
| 1年中Web制作する | Professional年払い |
| デザイナー1人＋開発者1人 | Full＋Dev |
| クライアントに確認してもらう | View |
| FigJamを編集する企画担当 | Collab |
| 小規模制作会社 | Professionalをまず検討 |
| 複数の制作チームを会社で統括 | Organization |
| 大企業・複数ブランド | Enterprise |
初心者がやってはいけない契約方法
一番避けたいのは、Figmaをまだ使ったことがないのに、最初からProfessionalを年払いすることです。
まず無料版を使いましょう。
次に避けたいのが、チームメンバー全員をFullにすることです。
確認だけならViewで無料です。
開発中心ならDevがあります。
打ち合わせ中心ならCollabがあります。
そして、OrganizationやEnterpriseも「上位だから良い」という理由だけで選ぶべきではありません。
Figmaは、必要な機能だけに料金を払うように設計されています。
おすすめのレベルアップ順
この記事でおすすめする成長ルートは次の通りです。
STEP 1
StarterでFigmaの操作を覚える。
↓
STEP 2
自分のWordPressサイトをFigmaで再現する。
↓
STEP 3
Figmaでデザインを変更し、WordPressへ実装する。
↓
STEP 4
PC版とスマホ版を作り分ける。
↓
STEP 5
実際の案件や本格的な制作を始めたらProfessional Fullを月払いする。
↓
STEP 6
10か月以上継続して使いそうなら年払いへ変更する。
↓
STEP 7
開発者が加わったらDevシートを使う。
↓
STEP 8
クライアントには無料Viewを使う。
↓
STEP 9
制作チームが増えて会社全体の管理が必要になったらOrganizationを検討する。
↓
STEP 10
大規模なブランド・社員・デザインシステム管理が必要になったらEnterpriseを検討する。
この順番なら、Web制作能力が上がるにつれてFigmaへの支払いも増えていきます。
無駄が少なく、初心者にもわかりやすい成長方法です。
Figmaを使えるだけではWeb制作者にはならない
ここも重要です。
Figmaは非常に便利ですが、Figmaだけ覚えてもWordPressサイトは完成しません。
WordPressでオリジナルサイトを作りたいなら、
Figma
＋
HTML
＋
CSS
＋
WordPress
という組み合わせをまず覚えるとよいでしょう。
さらに、
JavaScript
PHP
Git
などを覚えていけば、できることは増えていきます。
そして最終的には、
既製WordPressテーマを選ぶ人
から、
Webサイトそのものを設計して作れる人
へ進めます。
Figmaは、その入り口として非常に使いやすいツールです。
まず挑戦するなら「自分のWordPressトップページ」を作ってみよう
最初の練習としておすすめなのは、自分のWordPressサイトのトップページです。
現在のトップページをスクリーンショットで確認します。
そしてFigma上で再現します。
そのあと、
「もっと見やすくするには？」
「もっと記事を読んでもらうには？」
「スマホならどう配置する？」
と考えながら改造します。
完成したらWordPressで再現します。
これだけでも、
デザイン
UI
CSS
レスポンシブ
WordPress
をまとめて練習できます。
架空の課題をこなすより、自分のサイトが実際に改善されるので成果も残ります。
契約前チェックリスト
Figmaを有料化する前に、次を確認してみてください。
□ 無料版の制限で本当に困っているか
□ Figmaを毎月使っているか
□ 実際にWordPressへデザインを実装しているか
□ Dev Modeを使う必要があるか
□ AI機能を継続的に使っているか
□ 10か月以上利用する予定があるか
□ Fullが必要な人は誰か
□ Devで足りる人はいないか
□ Collabで足りる人はいないか
□ Viewで無料にできる人はいないか
□ Organizationの管理機能が本当に必要か
この質問に答えてから契約すれば、必要以上のプランを選びにくくなります。
FAQ
Figmaは無料だけでもWebデザインできますか？
できます。
初心者がWebデザインを勉強したり、自分のサイトを設計したりする程度なら、まずStarterで十分です。
WordPressを使うならProfessionalは必須ですか？
必須ではありません。
FigmaとWordPressは別のサービスです。
まずStarterでデザインし、WordPressへ実装できます。
FigmaからWordPress用コードをそのまま出せますか？
完全なWordPressテーマをそのまま生成するものではありません。
ただし、CSSなどのコード情報を取得できるため、実装をかなり助けてくれます。
1人で使うならどのプランがおすすめですか？
最初はStarterです。
仕事や本格的なWeb制作で毎月使うようになったらProfessional Fullを検討します。
Professionalは月払いと年払いのどちらがいいですか？
最初は月払いが使いやすいでしょう。
1年間のうち10か月以上Fullシートを使う可能性が高ければ、現在の価格では年払いのほうが安くなります。
WordPress開発者にもFullシートが必要ですか？
必ずしも必要ありません。
Figma上でデザインを作らず、主に実装を担当するならDevシートを検討できます。
クライアントにも料金がかかりますか？
見るだけ、コメントするだけなら無料のViewシートを利用できます。
Organizationへ上げるタイミングは？
単にWeb制作が上達しただけでは必要ありません。
複数チームのデザイン資産やユーザーを会社としてまとめて管理したくなった段階が一つの目安です。
一次情報
料金や機能は変更される可能性があります。
契約前には、以下のFigma公式情報を確認してください。
Figma公式「Plans & Pricing」
Figma公式料金ページ
Figma公式「Guide to billing at Figma」
Figma請求ガイド
Figma公式「Manage seats in Figma」
Figmaのシート管理
Figma公式「Use code snippets in Dev Mode」
Dev Modeのコードスニペット
Figma公式「How AI credits work」
Figma AIクレジットの仕組み
まとめ｜無料から始めて必要になった機能にだけお金を払えばいい
Figmaを始めるときに、最初から料金プランを難しく考える必要はありません。
まずStarterを使います。
そして、自分のWordPressサイトをデザインしてみます。
次に、そのデザインを実際のWordPressへ組み込みます。
ここまで無料で練習できます。
そして、Figmaを継続的に使うようになったらProfessionalへ進みます。
仕事が増れれば、FullとDevを分けます。
チームが増えればCollabやViewを使います。
さらに会社全体で管理する必要が出てきたときに、初めてOrganizationを検討します。
つまり、
Starter → Professional → Professionalのシート最適化 → Organization → Enterprise
という順番です。
Figmaの料金を「高いプランほど良い」と考える必要はありません。
重要なのは、自分のWeb制作レベルが上がったときに、そのレベルで必要になった機能へ課金することです。
この方法なら、初心者は0円から始められます。
そして、将来的にはFigmaで設計し、WordPressで実装し、HTMLやCSSまで自分で調整するところまで進めます。
Figmaを覚えること自体が目的ではありません。
最終的な目標は、
自分が頭の中で考えたWebサイトを、自分で設計し、自分で形にできるようになることです。
まとめ：この記事から学べること
FigmaはWordPressを直接編集するツールではなく、Webサイトの設計に使えること。
初心者は無料のStarterから始めればよいこと。
本格的に使うようになったらProfessional Fullを検討すること。
Professional Fullを10か月以上使うなら、現在の料金では年払いが有利になりやすいこと。
開発者にはDev、企画担当にはCollab、確認だけなら無料Viewを利用できること。
チーム全員をFullにする必要はないこと。
OrganizationやEnterpriseは、Web制作能力を上げるためというより、会社としてFigmaを管理する必要が出たときに検討するプランであること。
そして、Figma・WordPress・HTML・CSSを組み合わせることで、既製テーマに頼るだけではないオリジナルのWeb制作へ進めること。
まずは無料のStarterで、自分のWordPressサイトのトップページをFigma上に再現するところから始めてみるとよいでしょう。
コメント