Directus vs Payload vs Supabase: 2026年に使うべきCMSバックエンドはどれ?
過去2年間、私は3つのツールすべてを使用して本番環境プロジェクトをリリースしました。新しいプロジェクトを始めるたびに、アーキテクチャディスカッションで同じ質問が出てきます:Directus、Payload、それともSupabase?答えは毎回異なります。なぜなら、マーケティングページには書かれていない要素に左右されるからです——コンテンツチームが実際にどのように機能するのか、データ関連性がどのような形をしているのか、18ヶ月後にどこにいるのかということです。
これは機能チェックリストの比較ではありません。Social Animalでのプロジェクト範囲決定時に実際に使用する意思決定フレームワークであり、数十のヘッドレスビルドを通じて洗練されています。最後には、自分を疑わずにあなたの特定の状況に適したツールを知ることができます。
目次
- 各ツールのコア・アイデンティティ
- アーキテクチャとデータモデリングの比較
- コンテンツ編集体験
- デベロッパー体験とAPI設計
- 認証、権限、行レベルセキュリティ
- セルフホスティング、クラウド、2026年の価格
- パフォーマンスとスケーラビリティベンチマーク
- 意思決定フレームワーク:どれをいつ使うか
- 実際のプロジェクトシナリオ
- 移行パスとロックイン検討事項
- FAQ

各ツールのコア・アイデンティティ
詳細に入る前に、各ツールが本質的に何であるかを理解する必要があります。なぜなら、機能セットのオーバーラップは誤解を招くことがあるからです。
DirectusはデータベースファーストのヘッドレスCMSです。既存のSQLデータベース(Postgres、MySQL、SQLite、MS SQL、MariaDB、CockroachDB)をラップして、自動生成されたAPIと洗練された管理パネルを提供します。データベースを設計すると、Directusはそれを自動検査してUIを提供します。TypeScriptで書かれており、Node.jsで実行されます。
Payloadは、Next.js上に構築されたコードファーストのヘッドレスCMS(Payload 3.0以降)です。TypeScriptの設定ファイルでコレクションとフィールドを定義すると、Payloadはその設定からデータベーススキーマ、管理UI、APIエンドポイント、およびTypeScriptタイプを生成します。データベースレイヤーとしてMongoDBまたはPostgresを使用します。
SupabaseはオープンソースのFirebase代替案である、Postgres上に構築されたバックエンドアズサービスです。これは実際にはCMSではありません。認証、ストレージ、リアルタイム購読、エッジ関数を備えたデータベースプラットフォームです。しかし、チームは常にそれをCMSバックエンドとして使用しており、それがこれらの比較に繰り返し登場する理由です。
この区別は、この記事の他のすべてのものより重要です。DirectusとPayloadは目的構築型コンテンツ管理システムです。Supabaseは汎用バックエンドであり、十分な努力でコンテンツ管理システムに成形できます。
アーキテクチャとデータモデリングの比較
Directus:データベースファースト
Directusはあなたのスキーマを所有しません。既存のデータベースをそれに指して、管理パネルを自動生成することができます。これはレガシーシステムと連携している場合、またはデータモデルがコンテンツ管理を超えた複数のアプリケーションに提供する場合に、本当に強力です。
Directusの関連モデリングは堅実です。M2M、M2O、O2M、さらには翻訳もUIを通じて処理されます。しかし、注意点があります。Directusはデータベースを生成するのではなく、データベースを自動検査するため、スキーマ変更は2つの場所で発生します——マイグレーションとDirectus管理。これはチーム環境で規律がないと混乱する可能性があります。
# Directusスキーマスナップショット(簡略版)
collections:
- collection: articles
fields:
- field: title
type: string
interface: input
- field: content
type: text
interface: input-rich-text-md
- field: author
type: uuid
interface: select-dropdown-m2o
related_collection: authors
Payload:コードファースト
Payload 3.0(2026年現在のバージョン)はNext.jsプラグインとしてその中で実行されます。コレクションはTypeScriptで定義されています:
import { CollectionConfig } from 'payload'
export const Articles: CollectionConfig = {
slug: 'articles',
admin: {
useAsTitle: 'title',
},
fields: [
{
name: 'title',
type: 'text',
required: true,
},
{
name: 'content',
type: 'richText',
},
{
name: 'author',
type: 'relationship',
relationTo: 'authors',
},
],
}
このコードファーストアプローチは、スキーマがバージョン管理に存在することを意味します。フルのTypeScriptタイプが設定から自動生成されます。これはTypeScriptの多いチームにとって最高のDXです。欠点は?非開発者がコード変更なしにデータモデルを変更することはできません。
Supabase:SQLファースト
Supabaseを使用する場合、SQLを書いています。生のPostgres。テーブルを定義し、行レベルセキュリティポリシーを設定し、自動生成されたREST API(PostgREST)またはJavaScriptクライアントを通じて相互作用します。
CREATE TABLE articles (
id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
title TEXT NOT NULL,
content JSONB,
author_id UUID REFERENCES authors(id),
created_at TIMESTAMPTZ DEFAULT now(),
published BOOLEAN DEFAULT false
);
-- 行レベルセキュリティ
ALTER TABLE articles ENABLE ROW LEVEL SECURITY;
CREATE POLICY "Public can read published articles"
ON articles FOR SELECT
USING (published = true);
最大限の柔軟性が得られますが、デフォルトではコンテンツ管理UIがありません。カスタム管理を構築するか、サードパーティツールを使用するか、同じPostgresインスタンス上にDirectusのようなものを配線する必要があります(はい、人々は実際にこれを行っています)。
コンテンツ編集体験
ここはCMS対非CMSの区別が最も厳しく当たるところです。
| 機能 | Directus | Payload | Supabase |
|---|---|---|---|
| 組み込み管理UI | ✅ 洗練、カスタマイズ可能 | ✅ Next.jsネイティブ、非常に良い | ❌ テーブルエディターのみ |
| リッチテキストエディター | ✅ WYSIWYG + Markdown | ✅ Lexicalベース(優秀) | ❌ なし |
| メディアライブラリ | ✅ 完全機能 | ✅ 完全機能 | ⚠️ ストレージバケット(ライブラリUIなし) |
| コンテンツプレビュー | ✅ カスタムモジュール経由 | ✅ ネイティブライブプレビュー | ❌ 自分で構築 |
| ローカライゼーション | ✅ 組み込み翻訳システム | ✅ フィールドレベルのローカライゼーション | ❌ 手動実装 |
| コンテンツバージョニング | ✅ リビジション組み込み | ✅ ドラフト + バージョン | ❌ 自分で構築 |
| ワークフロー / 公開 | ✅ フローシステム | ✅ ドラフト/公開状態 | ❌ カスタムロジック必須 |
| 非開発者フレンドリー | ✅ 非常に | ✅ はい | ❌ 全くない |
プロジェクトにコンテンツエディター——ブログ投稿を書く人、製品カタログを管理する人、ランディングページを更新する人——が関わっている場合、Supabaseは間違ったツールです。完全に。Directus と Payload が初日に与えてくれるものを構築するのに数週間費やすことになります。
Payload の エディター体験は 3.0 以降で顕著に改善されました。Lexical ベースのリッチテキストエディターは柔軟性があり、ライブプレビュー機能は Next.js フロントエンドと美しく機能し、管理パネルはそれが Next.js アプリ内で文字通り実行されるため、ネイティブに感じます。
Directus には 3 つのうち最も成熟した管理パネルがあります。長年の改良を通じて洗練されており、カスタムディスプレイ/インターフェースシステムは、フロントエンドコードに触れることなく複雑な編集ワークフローを構築できます。コンテンツ豊富な組織にとって、これは重要です。

デベロッパー体験とAPI設計
APIスタイル
Directus は REST と GraphQL をボックスの外に提供し、さらに JavaScript SDK も提供します。REST API は一貫したパターンに従い、GraphQL 実装はスキーマから自動生成されます。機能しますが、GraphQL は複雑なネストされたクエリに対して制限されているように感じるかもしれません。
Payload は REST と GraphQL API を生成し、さらにローカル API へのフルアクセスを取得します(HTTP オーバーヘッドなしの直接データベースクエリ)。Payload 3.0 は Next.js アプリ内で実行されるため、Server Components で直接 payload.find() を呼び出すことができます。これは Next.js プロジェクトにとって大きな利点です。
// Next.js Server Component の Payload Local API
import { getPayload } from 'payload'
import config from '@payload-config'
export default async function ArticlePage({ params }) {
const payload = await getPayload({ config })
const article = await payload.findByID({
collection: 'articles',
id: params.id,
depth: 2,
})
return <Article data={article} />
}
Supabase の API は PostgREST によって自動生成され、JavaScript クライアントライブラリは本当に優秀です。クエリビルダーは自然に感じます:
const { data, error } = await supabase
.from('articles')
.select('*, author:authors(*)')
.eq('published', true)
.order('created_at', { ascending: false })
.range(0, 9)
Supabase はリアルタイム購読も提供しており、Directus も Payload も ネイティブに提供していません。ライブデータ更新が必要な場合(チャット、通知、協調編集)、Supabase がデフォルトで勝ちます。
型安全性
Payload は最高の TypeScript ストーリーを持っています。型はコレクション設定から生成され、すべてがエンドツーエンドで強く型付けされます。Supabase は CLI(supabase gen types typescript)を通じた堅実な型生成を持ち、これはデータベーススキーマから型を作成します。Directus は TypeScript SDK を持っていますが、型生成は追加のセットアップが必要であり、タイトに統合されていません。
認証、権限、行レベルセキュリティ
これは Supabase が本当に輝くところです。Postgres 行レベルセキュリティ(RLS)は、3 つのうち最も粒度が細かく、最も実績のある権限モデルです。データベースレベルでポリシーを定義すると、データにどのようにアクセスされるかに関わらず適用されます。マルチテナント SaaS アプリケーションに非常に強力です。
Directus はコレクションとフィールドレベルで機能するロールベースの権限システムを持っています。管理パネルで直感的であり、ほとんどの CMS ユースケースに十分です。ロールごとの CRUD 権限を設定し、カスタムフィルタールールを追加することもできます。
Payload は、設定の関数を通じたフィールドレベルとコレクションレベルのアクセス制御を提供します:
{
slug: 'articles',
access: {
read: () => true,
create: ({ req: { user } }) => user?.role === 'editor',
update: ({ req: { user } }) => user?.role === 'editor',
delete: ({ req: { user } }) => user?.role === 'admin',
},
fields: [
{
name: 'internalNotes',
type: 'textarea',
access: {
read: ({ req: { user } }) => user?.role === 'admin',
},
},
],
}
エディター、レビュアー、および管理者の標準的な CMS では、すべて 3 つが正常に機能します。動的権限ルールを持つ複雑なマルチテナントアプリケーションの場合、Supabase の RLS が最も強力なオプションです。
セルフホスティング、クラウド、2026年の価格
すべてはオープンソースでセルフホスティング可能です。しかし、クラウド価格は彼らのターゲット市場について多くを物語っています。
| プラン | Directus Cloud | Payload Cloud | Supabase Cloud |
|---|---|---|---|
| 無料層 | ❌ クラウド無料なし | ✅ 1 プロジェクト、制限付き | ✅ 2 プロジェクト、500MB DB |
| スターター/プロ | $99/月(Professional) | $35/月(Standard) | $25/月(Pro) |
| チーム/ビジネス | $399/月(Enterprise) | カスタム価格 | $599/月(Team) |
| セルフホスト費用 | 無料(オープンソース) | 無料(オープンソース) | 無料(オープンソース) |
| データベース含む | ✅ 管理 | ✅ 管理 Postgres | ✅ 管理 Postgres |
| CDN/ストレージ | 含む | 含む | 制限付きで含む |
2026年Q1時点の価格。現在のレートについては、各プラットフォームの価格ページを確認してください。
Payload Cloud は小中規模プロジェクト向けの最も手頃な管理オプションです。Supabase の無料層はプロトタイピングとサイドプロジェクト向けの最も寛大です。Directus Cloud は、管理された洗練された体験にお金を払う準備ができている大規模組織をターゲットにしています。
セルフホスティングは方程式を劇的に変えます。3 つすべてが $5-20/月の VPS で良く実行されます。Directus と Supabase には、信頼できる公式 Docker Compose セットアップがあります。Payload は、Next.js が実行される場所どこででもデプロイされます——Vercel、Railway、Fly.io、あなた自身のサーバー。
ヘッドレス CMS 開発プロジェクトの場合、コスト効率のために通常は Railway または Fly.io でのセルフホスティングを推奨しており、クライアントが保証された SLA を必要とする場合にのみ管理クラウドを使用します。
パフォーマンスとスケーラビリティベンチマーク
同等のハードウェア(4 vCPU、8GB RAM、Postgres 16)上で、約 50,000 のコンテンツレコードのデータセットを使用して非公式なベンチマークを実行しました。
| 操作 | Directus | Payload | Supabase |
|---|---|---|---|
| シンプルリストクエリ(20 項目) | 約 45ms | 約 12ms(ローカル API)/ 約 38ms(REST) | 約 18ms |
| ネストされた関連クエリ(深さ 3) | 約 120ms | 約 35ms(ローカル API)/ 約 95ms(REST) | 約 55ms |
| フルテキスト検索(1000 結果) | 約 180ms | 約 85ms | 約 40ms(pg_trgm) |
| 一括挿入(1000 レコード) | 約 2.1s | 約 1.8s | 約 0.9s |
| コールドスタート時間 | 約 3.5s | 約 2.8s | N/A(常に実行) |
Payload の Local API は Next.js アプリケーションにとって最速のオプションです。HTTP オーバーヘッドがないためです——レンダリングプロセスから直接データベースをクエリしています。Supabase の生 Postgres パフォーマンスは、データが多い操作で抜きんでています。Directus は抽象化を通じてオーバーヘッドを追加しますが、コンテンツ提供ワークロードには完全に問題ありません。
検索の場合、Supabase は Postgres のネイティブフルテキスト検索、トリグラムインデックス、セマンティック検索用の pgvector 拡張機能さえ使用できるため、大きな利点があります。Directus と Payload はどちらも検索をサポートしていますが、Postgres を直接活用するのではなく、独自の実装に依存しています。
意思決定フレームワーク:どれをいつ使うか
実際のフレームワークはここです。これらの質問に答えると、選択は明らかになります。
Directus を選ぶべき場合:
- コンテンツチームが大きく、非技術的
- 既存のデータベースを CMS レイヤーでラップする必要がある
- Postgres 以外のデータベースを使用している(MySQL、MS SQL など)
- 複数のフロントエンド(ウェブ、モバイル、キオスク)に提供する独立型 CMS が必要
- フロントエンドが Next.js ではない(Astro、Nuxt、SvelteKit を使用している可能性がある)
- コード無しで管理 UI カスタマイズの最大限の柔軟性が必要
Directus は、ビルドタイムレンダリングとアイランドアーキテクチャが完全な React フレームワークよりも意味をなすコンテンツが豊富なサイトの場合、Astro と美しくペアになります。
Payload を選ぶべき場合:
- フロントエンドが Next.js である(これはキラーユースケース)
- チームが TypeScript ファーストで、どこでも型安全が必要
- CMS とフロントエンドを単一のデプロイ可能な単位で必要
- ライブプレビューと視覚編集機能が必要
- バージョン管理のコード定義スキーマが必要
- スキーマが事前に確立されたサイトを構築している
Payload は、コンテンツ管理がコア要件である Next.js 開発プロジェクトでの当社の推奨事項です。統合は比類がありません。
Supabase を選ぶべき場合:
- コンテンツウェブサイトではなくアプリケーションを構築している
- リアルタイム機能が必要(チャット、ライブ更新、協調編集)
- 複雑なマルチテナント権限が必要(RLS は王様)
- 主な必要がバックエンドであり、コンテンツは二次的
- Postgres 拡張機能を使用したい(pgvector、PostGIS、pg_cron)
- チームが独自の管理インターフェースを構築することが快適
- ユーザー生成データが編集的なコンテンツより重要な SaaS 製品を構築している
実際のプロジェクトシナリオ
シナリオ 1:ブログ付きマーケティングウェブサイト
最適な選択:Payload(Next.js の場合)または Directus(Astro/その他の場合)
50~200 ページ、ブログ、および 2~3 人の小さなコンテンツチームを備えたマーケティングサイト。ランディングページの柔軟性、画像最適化、SEO メタデータ管理、そしておそらくいくつかの A/B テストが必要です。
Payload のライブプレビュー機能はここで完璧です。コンテンツエディターは、公開前にページがどのようになるかを正確に見ることができます。ブロックベースのフィールドタイプにより、エディターに十分なロープを自分たちをハング自分にしない柔軟なランディングページを構築できます。
シナリオ 2:e コマース製品カタログ
最適な選択:Directusまたは Payload
5,000 以上の SKU、複雑なカテゴリ分け、複数の価格リスト、インベントリシステムとの統合を備えた製品カタログ。ここでの鍵はデータモデリングの柔軟性と、構造化データを効率的に処理できることです。
既存の製品データベースに接続してデータを移行したくない場合、Directus が有利です。最初から構築していて、Next.js ストアフロントで型安全な製品クエリが必要な場合、Payload が勝ちます。
シナリオ 3:マルチテナント SaaS プラットフォーム
最適な選択:Supabase
各顧客が独自のデータスペースを持つプラットフォーム。ロールベースのアクセス、リアルタイム通知、ユーザー生成コンテンツがあります。行レベルセキュリティ、ビジネスロジック用のエッジ関数、水平スケーリングの能力が必要です。
これは CMS プロジェクトではなく、アプリケーションバックエンドプロジェクトです。Supabase はこれのために正確に構築されました。
シナリオ 4:内部ナレッジベース
最適な選択:Payloadまたは Directus
200 人の企業向けの内部ウィキ/ナレッジベース。リッチテキストコンテンツ、カテゴリ分け、検索、ロールベースのアクセス。コンテンツエディターは技術的から非技術的まで様々です。
どちらの CMS も良く機能します。非技術的チームの場合、Directus はわずかに有利です。管理パネルはコードなしでカスタマイズできるためです。Payload は、洗練されたブランド化されたフロントエンド体験が必要な場合に優れています。
移行パスとロックイン検討事項
ロックインは実在します。コミットする前に考えてください。
Directus はロックインが最も少ないです。なぜなら、データベーススキーマは CMS に依存しないためです。Directus を削除しても、クリーンな標準 SQL データベースが残ります。データは独自の形式に閉じ込められていません。
Payload は、標準 Postgres(または MongoDB)テーブルにデータを保存しますが、スキーマは Payload の慣例に従います。移行することは、いくつかのものを再構成することを意味しますが、データはまだ標準データベースにあります。
Supabase はちょうど Postgres です。ゼロロックイン。データベースダンプを取得して、任意の Postgres インスタンスで実行できます。クライアントライブラリは PostgREST と GoTrue のラッパーです。Supabase が明日消えたとしても、いくつかの API 呼び出しを置き換える必要がありますが、データとスキーマは完全に無傷になります。
3 つすべては、Contentful や Sanity などのプロプライエタリ CMS プラットフォームと比較してロックインで良い得点を得ます。これらのプラットフォームでは、データは他の誰かのクラウドに存在し、それをエクスポートすることは常に部分的なプロセスです。
FAQ
Supabase をヘッドレス CMS として使用できますか? 技術的には可能ですが、CMS 機能をスクラッチから構築します——コンテンツ編集 UI、メディア管理、リビジョン履歴、公開ワークフロー。開発者のみのコンテンツ管理を備えた小さなプロジェクトの場合は機能します。非技術的なエディターが関わる何かのために、Payload または Directus のような実際の CMS を使用し、必要に応じて Supabase をアプリケーションデータに接続してください。
Payload は本当に無料ですか?何か落ちくぼみがありますか? Payload CMS は MIT ライセンス下で本当にオープンソースです。永遠に無料でセルフホストできます。Payload Cloud は彼らの有料管理ホスティングサービスであり、$35/月から始まります。あなたが言いたいならば陥落は、Payload Cloud には無料であるがホストされた環境から利益を得ないいくつかのプレミアム機能(フォームビルダーと SEO プラグイン)があることです。コア CMS は何も支払わずに完全に機能します。
Directus と Supabase を一緒に使用できますか? 絶対に、そしてこれは私が複数回使用したパターンです。Directus を Supabase Postgres データベースにポイントします。コンテンツ管理用の Directus 管理パネルと、アプリケーション機能用の Supabase のリアルタイム購読、認証、およびエッジ関数が得られます。2 つのツールは、異なるレイヤーで動作するため、相互に補完します。
Next.js プロジェクトに最適なのはどれですか? Payload、そしてそれは近くもありません。Payload 3.0 以降、CMS は Next.js アプリケーション内にプラグインとして実行されます。Server Components のデータベースオーバーヘッドゼロのクエリに Local API を取得し、ネイティブライブプレビュー、および単一のデプロイメントを取得します。当社は Next.js 開発でこの組み合わせを常に使用します。
2026 年の Strapi との比較はどのようなものですか? Strapi v5 は堅実なオプションですが、いくつかの分野で遅れをとっています。管理パネルは Payload のと比較して古く感じます。TypeScript サポートはそれほど強力ではなく、ライセンスモデルはより制限的になっています。Directus は、より近代的な UI でデータベースラッピングアプローチと同様のものを提供します。Payload は TypeScript チーム向けに優れた DX を提供します。Strapi の主な利点は、より大きなプラグインエコシステムとより大きなコミュニティですが、ギャップは閉じています。
Sanity、Contentful、またはその他の SaaS CMS プラットフォームはどうですか? Sanity と Contentful は素晴らしい製品ですが、プロプライエタリ SaaS プラットフォームです。データはサーバー上に存在し、価格は使用量でスケーリングされ(急速に高額になる可能性があります)、インフラストラクチャに依存しています。Directus、Payload、および Supabase はすべてオープンソースでセルフホスト可能です。データ所有権、コスト管理、デプロイメント柔軟性があなたにとって重要な場合、オープンソースオプションが勝ちます。当社は ヘッドレス CMS 開発ページでこれの詳細をカバーしています。
プラグイン/拡張機能エコシステムが最高のものはどれですか? Directus にはカスタムインターフェース、ディスプレイ、およびモジュール用のコミュニティ拡張機能を備えたマーケットプレイスがあります。Payload には、SEO、フォーム、ネストされたドック、およびリダイレクト用の公式プラグインを備えた成長中のプラグインエコシステムがあります。Supabase には Postgres 拡張機能(何百もの)があり、異なる目的に役立ちますが、非常に強力です。CMS 固有のプラグインの場合、Directus は現在最もオプションを持っています。
予算が制限されている小さなチームに最適なオプションは何ですか? Payload は Vercel の無料層または Railway の趣味プランでセルフホストされています。低トラフィックプロジェクトのためのゼロ月次費用で完全な CMS を取得します。Supabase の無料層もプロトタイピングに優れています。Directus は無料クラウド層がないためセルフホスティングが必要ですが(無料を使用する場合)、$5/月の VPS で正常に実行されます。予算が厳しく、正しい選択をするのに助けが必要な場合、お問い合わせください——コスト効果的なアーキテクチャを見つけるのに助けたプレンティなチームがあります。