デザインツールのFigmaが2025年6月、オープンソースのTypeScript製CMSを買収した。なぜFigmaがCMSを必要とするのか。その鍵を握るのがPayload CMSです。
この記事でわかること：
- Payload CMSが解決する「デザインとコードのギャップ」
- Next.jsネイティブCMSとして提供する主な機能
- セットアップと一般的な使い方
- FigmaがPayload CMSに投資した戦略的背景
Payload CMSとは
Payload CMSは、TypeScriptで書かれたオープンソースのNext.jsネイティブCMS兼アプリフレームワークです。GitHubスター数は4.2万を超え、Fortune 100企業も採用しています。
最大の特徴は、既存のNext.jsアプリの/appフォルダに直接インストールできる点です。CMSとフロントエンドを別々のリポジトリで管理する必要がなく、1つのコードベースで完結します。ライセンスはMITで、商用利用も無料です。
従来のCMSが抱える課題
Webアプリ開発では長年、CMSをめぐる摩擦が続いてきました。
WordPressはPHP製で、カスタマイズにはテンプレートシステムの理解が必要です。Contentful・SanityといったヘッドレスSaaSはTypeScriptと相性が良い一方、データの所有権は提供側にあり、ベンダーロックインのリスクがあります。
さらに共通の課題として「デザインとコードのギャップ」があります。デザイナーはFigmaでUIを作り、エンジニアがコードに変換し、コンテンツ担当者が別のCMSで管理する。この三者間の往復がプロジェクトの速度を落とします。Payload CMSはこの摩擦を取り除くために設計されました。
主な機能
管理パネルが自動生成される
設定ファイル（payload.config.ts）にデータ構造を定義すると、それに対応した管理パネルがReact Server Componentsで自動生成されます。管理UIのソースコードは手元に置けるため、完全にカスタマイズできます。非技術者がコードを書かずに使える管理画面が、開発ゼロで手に入ります。
REST・GraphQL・Node.js APIを同時提供
設定ファイルに基づいて、RESTful APIとGraphQL APIが自動的に生成されます。Next.jsのServer Componentsからは直接DBへのアクセスも可能で、API経由のオーバーヘッドを避けられます。
バージョン管理と下書き
コンテンツのバージョン履歴を自動で保存し、公開前に下書きで確認できます。設定ファイルに1行追加するだけで有効になります。
認証機能が組み込み済み
JWTを使った認証がビルトインで提供されます。ユーザー管理・ロール設計・アクセスコントロールを自前で実装する必要がありません。
ローカライゼーション
複数言語対応も設定で有効にできます。フィールドごとに言語を切り替えてコンテンツを管理できるため、多言語サイト構築の手間が大幅に減ります。
Lexicalリッチテキストエディタ
コンテンツ編集にはMeta製のLexicalを採用しています。独自ブロックを組み込んでカスタムコンポーネントを挿入するなど、拡張性が高いのが特徴です。
対応データベース
Payload CMSはMongoDBとPostgreSQL、SQLiteの3種類に対応しています。PostgreSQLとSQLiteはDrizzleORM経由、MongoDBはMongoose経由で接続します。既存のインフラに合わせて選択できます。
セットアップ
新規プロジェクトの作成は1コマンドです。
pnpx create-payload-app@latest
テンプレートを選ぶと必要なファイルが生成されます。Webサイト向けにはwebsiteテンプレート、ECサイト向けにはecommerceテンプレートが用意されています。
既存のNext.jsプロジェクトへの追加も同様に1コマンドです。/appフォルダ内にPayloadの設定ファイルが追加されるだけなので、既存のフロントエンドコードはそのまま維持されます。
デプロイ先はVercelとCloudflare Workersそれぞれにワンクリック用テンプレートが用意されています。Vercelではフロント + Neonデータベース + Vercel Blobでメディアを管理できます。Cloudflare Workersではグローバルに分散されたD1データベースとR2ファイルストレージを組み合わせた構成が選べます。セルフホストも可能で、Node.jsが動く環境であれば自前のサーバーにもデプロイできます。
FigmaがPayload CMSを買収した戦略的背景
2025年6月、FigmaはPayload CMSの買収を発表しました。FigmaのCTO、Kris Rasmussen氏は「デザインと開発の未来はますますコラボレーティブになる。Figmaをデジタルプロダクト制作のハブにしたい」と述べています（参考）。
背景にあるのは「Figma Sites」です。FigmaはConfig 2025でデザインから直接Webサイトを公開できる新機能を発表しました。しかしデザインツールだけでは、コンテンツ更新を担うマーケターや編集者が使える管理UIを提供できません。
Payload CMSはその管理UIとバックエンドの両方を提供できます。開発者がAPIとデータ構造を設計し、非技術者が管理パネルからコンテンツを更新する。Figmaのデザイン→コード→公開のワークフローに、コンテンツ管理のレイヤーが加わります。
買収後もPayload CMSはオープンソース（MIT）のまま維持されます。Payload創業者のJames Mikrut氏は「即座に変わることは何もない。自社でのホスティングも、OSSへの継続投資も変わらない」と明言しています（参考）。
類似ツールとの比較
WordPressとの違いは言語とアーキテクチャです。WordPressのPHPテンプレートに比べ、Payload CMSはTypeScriptとReactで一貫して書けます。既存のコードベースとの一体感が高く、型安全性も維持できます。
StrapiもTypeScript製のOSSヘッドレスCMSですが、Next.jsへの直接統合という点ではPayload CMSが優位です。Strapiはフロントとは独立したサービスとして動作するため、管理が2つに分かれます。Payload CMSは同一リポジトリ・同一Next.jsプロセス内で完結します。
ContentfulやSanityのようなSaaS型と比べると、Payload CMSはデータを自社インフラに置けます。月額コストを抑えながらデータの所有権を保てるのは、規模が大きくなるほど重要になります。
料金
OSSとしてのPayload CMSは無料で利用できます（MITライセンス）。Vercel・Cloudflare・自前サーバーへのデプロイも費用はかかりません。
Payload Cloudというマネージドホスティングサービスも提供していましたが、Figmaによる買収後、新規サインアップを一時停止しています。現在はVercelやCloudflareへのデプロイが主な選択肢です。
TypeScript開発者にとっての位置づけ
Payload CMSが特に力を発揮するのは、次のような状況です。
Next.jsでWebサイトを構築していて、コンテンツ管理の仕組みを追加したい場合に、別サービスを契約する必要がなくなります。データのスキーマをTypeScriptで定義し、そのままAPIと管理パネルを得られます。
企業の内部ツールを開発する場合も有力な選択肢です。認証・アクセスコントロール・管理UIという三点セットが最初から揃っているため、ビジネスロジックの実装に集中できます。FigmaのCTOが「Fortune 100企業が採用している」と述べているのも、この用途での実績を示しています。
GitHub上では現在4.2万スターを獲得しており、活発なコミュニティがディスコードとGitHub Discussionsで継続的にサポートを提供しています。
まとめ
Payload CMSは、TypeScriptとNext.jsを前提にした開発者向けのオープンソースCMSです。設定ファイルから管理パネルとAPIが自動生成され、認証・バージョン管理・多言語対応が標準装備されています。
Figmaによる買収は、デザインから公開までを一つのエコシステムで完結させる戦略の一手です。Figma Sitesとの統合が進めば、デザイナー・開発者・コンテンツ担当者の間のギャップが縮まる可能性があります。Next.jsでの開発にCMSを追加したいなら、試す価値があるプロジェクトです。