Zenn
🎨

FigmaはなぜPayload CMSを買収したのか

に公開
Figma
CMS
Headless CMS
Payload
idea

2025年6月17日、FigmaはPayloadというCMSを提供する企業を買収しました。Figmaは、なぜCMSを買収したのか、なぜCMSの中でもPayloadなのかについて考察してみたいと思います。

Figmaのアナウンスはこちら
https://www.figma.com/blog/payload-joins-figma/

Payloadのアナウンスはこちら
https://payloadcms.com/posts/blog/payload-is-joining-figma

最近のFigmaの動向

Figmaは、2025年5月7日に開かれたConfig 2025で、Figma Sitesという新しい機能を発表しました。Figma Sitesとは、Figma上でデザインしたWebサイトをそのまま公開できる機能で、従来行なってきたデザインをもとにフロントエンドのコーディングを行ないWebサイトを実装するという一連の作業が不要になります。Figmaは単なるデザインツールではなく、ノーコード開発ツールへと進化を遂げようとしているわけです。

ただし、Webサイト開発と一口に言ってもその規模は大小様々です。LPなどの小規模なWebサイトであればFigma Sitesでも十分事足りますが、コーポレートサイトなどの大規模なWebサイトであればまだ難しいのが現状です。なぜならば、大規模なWebサイトはWordpress等のCMSを用いた開発が主流であり、Figma Sitesは現時点ではCMS機能を提供していないためです。将来CMS機能を提供する予定であることが語られてはいますが、具体的なことは何も言及されていませんでした。

そして、Figma Sitesの発表から1ヶ月経過した今、Payloadの買収というCMS関連の動きが見られました。CMS機能をどう提供したら良いか模索しているように見受けられます。

Payloadとは

Payloadとは、2025年6月現在GitHubで35kのスターを集めている、近年注目されつつあるCMSです。

https://github.com/payloadcms/payload

特徴としては下記が挙げられます。

  • オープンソースでありセルフホスティングが可能である
  • Next.js App Routerで構築されたアプリケーションである
  • 設定はTypeScriptで記述する
  • コンテンツ管理とページが紐づいていないヘッドレスCMSである

オープンソースでありセルフホスティングが可能である

Payloadは、オープンソースのため誰でも無償で使用できます。また、セルフホスティングも可能です。では今回買収されたPayloadという会社は何で儲けているかというと、Payloadで構築したWebサイトを簡単にホスティングできるPaaSのサービスを提供しています。このサービスをPayload Cloudと言います。

VercelがNext.jsを開発しオープンソースとして公開しつつ、ホスティングサービスでビジネスをしているのと同じと思って良いでしょう。

Next.js App Routerで構築されたアプリケーションである

Payloadは、2024年11月にリリースされたVersion 3からNext.js App Routerが採用されました。Version 3のリリースを機に一気に注目を集め始めています。オープンソースのCMSの多くは拡張機能を独自に開発することが可能ですが、Payloadでも拡張機能の開発が可能です。Next.js, Reactに慣れ親しんでいる開発者であれば、Payloadの拡張機能開発も容易に取り組めるのではないかと思います。

設定はTypeScriptで記述する

Payloadの設定はTypeScriptで記述する仕様になっています。設定とは、データモデルの定義や多言語設定などCMSの設定全般を指しています。CMSの多くは管理画面で設定を行い、その設定はデータベースに保存されます。一方、PayloadではTypeScriptで設定を記述し、設定の記述が変更された際は自動検知してデータベースに反映する仕組みになっています。

この仕組みのメリットは、開発者体験が良いこと、そしてAIエージェントによる開発が容易になることです。管理画面のGUIで設定を行うことができるのは初心者の時はありがたく感じますが、開発に慣れてくるとGUIを操作することが面倒に感じコードで設定できる方が楽に感じる人も多いはずです。コードでの設定であればGitで管理でき、デプロイも容易です。また、昨今AIエージェントによる開発が普及しつつありますが、開発作業の途中でGUIの操作が必要だとAIエージェントだけで開発を進めるのは困難でしょう。コードでの設定であればAIエージェントだけで開発を進めることができます。

さらにはTypeScriptの型機能により、設定ミスがあった場合は型エラーになるため、人間にとってもAIエージェントにとっても開発体験が良いです。

コンテンツ管理とページ描画が紐づいていないヘッドレスCMSである

Payloadは、コンテンツ管理とページ描画が紐づいていないヘッドレスCMSです。Payloadはコンテンツ管理機能だけを提供するシンプルなアプリケーションで、ページ描画の部分はNext.jsが担います。つまり、Payload独自のページ描画機能はなく、Next.jsの知識のみでページ描画を実装できるということです。

また、一般的なヘッドレスCMSの場合、バックエンドの管理画面機能とフロントエンドのページ描画機能で2つのアプリケーション構成になるのが一般的ですが、Payloadの場合は違います。Payloadで構築したWebサイトはWordpressなどと同じように、一つのアプリケーションで管理画面機能とページ描画機能を提供できます。もちろん、一般的なヘッドレスCMSのようにWeb APIとして稼働させることも可能です。

整理すると下記のような構成パターンが考えられます。

  • ページ描画機能をNext.jsで構築したい
    → 管理画面機能とページ描画機能を兼ねた単一のアプリケーションとして構築
  • ページ描画機能をNext.js以外で構築したい
    → 管理画面機能をPayloadで構築し、ページ描画機能を別のアプリケーションとして構築

なぜFigmaはPayloadを選んだのかについて考察

以上を踏まえ、FigmaがPayloadを選んだ理由は下記といったところでしょうか。

  • CMSベースのWebサイトをホスティングする環境やノウハウがある
  • Figmaのデザインデータからコード生成することを考えるとReact, Next.jsという技術スタックは親和性が高い
  • CMSの設定をコードで行えるためFigmaからCMS設定のコードを生成しやすい
  • コンテンツ管理だけを担うヘッドレスCMSであるためFigmaが生成するフロントエンドのアプリケーションとの結合が容易

まとめ

Figmaの最近の動向とPayloadの特徴をもとに、なぜFigmaがPayloadを買収したのか考察してみました。

FigmaとPayloadのコラボレーションがうまくいくのかは不透明ですが、今後どのように発展していくのか楽しみです。Figma SitesのなかのCMS機能として組み込まれるのか、それともFigma CMSなどといった別機能として提供されることになるのか、それともこのコラボレーションはいつのまにかなくなってしまうのか... 今後の動きに注目していきたいと思います。

Discussion