
Contentful CMSガイド:機能・料金・GraphQL API&コード例【2026年版】
ContentfulはAPIファーストのヘッドレスCMSで、コンテンツを中央ハブに保存し、RESTおよびGraphQL API経由であらゆるフロントエンド——Web、モバイル、IoT、デジタルサイネージなど、あなたが作っているものすべて——に配信します。本ガイドでは、競合他社が省略しがちなすべてをカバーします。実際のコード例、リアルな料金数字、そして率直な限界点です。
私たちは本番環境でSanity(Contentfulの直接の競合)を4つのウェブサイト・10言語にわたって使用しているため、ベンダーの売り込みではなく、実務者の視点からこのガイドをお届けします。
クイックサマリー
| 項目 | 情報 |
|---|---|
| 種類 | ヘッドレスCMS(APIファースト) |
| 設立 | 2013年、ベルリン |
| 最適 | 大企業チーム、マルチチャネルコンテンツ、ローカライズ重視のプロジェクト |
| 不向き | 予算の限られた個人開発者、シンプルなブログ、標準でビジュアル編集が必要なチーム |
| 無料プラン | あり — ユーザー10名、月間APIコール10万件、スペース1個 |
| 有料プラン | 月額300ドル(Lite)〜カスタムEnterpriseまで |
| API | REST(CDA、CMA、CPA)+ GraphQL |
| コンテンツモデリング | 構造化:コンテンツタイプ、フィールド、参照、バリデーション |
| AI機能 | AI Actions、Contentful Studio、Ninetailedパーソナライゼーション |
| ローカライゼーション | ネイティブなロケールサポート、翻訳管理機能は非搭載 |
| オープンソース | いいえ |
| 主な競合 | Sanity、Strapi、Storyblok、Payload、Hygraph |
Contentfulとは?
ContentfulはクラウドネイティブでAPIファーストのヘッドレスCMSです。同社が現在そう呼んでいるように、「コンポーザブル・コンテンツ・プラットフォーム」とも言えます。WordPressのような従来のシステムがコンテンツ管理とフロントエンドを一体化しているのに対し、Contentfulは構造化コンテンツを中央に保存し、必要なあらゆるチャネルへAPI経由で配信します。
鍵となるコンセプトは、デカップルド(分離型)アーキテクチャです。コンテンツはContentfulのクラウド上に置かれます。フロントエンド——それがNext.jsのサイトであれ、React Nativeのアプリであれ、スマートディスプレイであれ——は、ビルド時または実行時にContentfulのAPIを通じてコンテンツを取得します。コンテンツは、自分がどこで使われるかを知らず、気にする必要もありません。
2013年にベルリンで設立されたContentfulは、最大級のヘッドレスCMSベンダーの一つへと成長しました。Spotify、Vodafone、Chanel、Atlassianといったブランドが、コンテンツ運用にContentfulを利用しています。オープンソースではなく、セルフホスティングの選択肢もありません。SaaSのみであり、これはデータの所在地に関するコンプライアンス上の制約がある場合には重要なポイントです。
Contentfulの公式ドキュメントによれば、このプラットフォームはコンテンツのためのインフラ——編集チームとデジタル体験の間に位置するコンテンツハブ——として位置づけられています。
Contentfulの仕組み
Contentfulは3層アーキテクチャに従います。コンテンツモデル(スキーマ)を定義し、コンテンツ(エントリ)を作成し、APIを通じて配信するという流れです。コンテンツはチャネルに依存しません。同じブログ記事を、一切の重複なしにウェブサイト、モバイルアプリ、メールマガジンに活用できます。
すべてはAPIを通じて流れます。サーバーサイドレンダリングは組み込まれておらず、テンプレートもテーマ層もありません。フロントエンドは好きなように構築し、Contentfulはコンテンツの保存と配信を担います。
3つのAPI
Contentfulは、それぞれ独自の目的と認証を持つ3つの異なるAPIを提供します。
- Content Delivery API(CDA): 公開済みコンテンツへの読み取り専用アクセス。FastlyのCDNで支えられているため、キャッシュされたリクエストは高速かつ無制限です。キャッシュされていないリクエストは秒間55件に制限されています。
- Content Management API(CMA): コンテンツをプログラムで作成・更新するための読み書きアクセス。秒間10リクエストに制限されています。マイグレーション、一括インポート、CI/CDパイプラインなどで使用するものです。
- Content Preview API(CPA): CDAと同じですが、ドラフト(下書き)コンテンツを配信します。フロントエンドにプレビューモードを構築するのに最適で、編集者は公開前に未公開の変更を確認できます。
3つすべてがRESTとGraphQLの両方をサポートします。認証はBearerトークンで行い、配信用と管理用で別々のトークンを使用します。
環境(Environments)とスペース(Spaces)
スペースはプロジェクト、環境はコンテンツ向けのgitブランチのようなものだと考えてください。本番用のmaster環境と、編集者が本番コンテンツに影響を与えずに作業できるstaging環境を持つ、といった構成が考えられます。
環境はエイリアシングをサポートしており、masterエイリアスを新しい環境に向けることで、ダウンタイムなしでコンテンツを昇格(プロモーション)できます。Contentfulと組み合わせるフロントエンドフレームワークを選定中の場合、この環境モデルはVercelやNetlifyのようなプラットフォーム上のプレビューデプロイと相性が良いです。
Webhookを使えば、コンテンツの変更をトリガーにビルドの実行、外部システムとの同期、ワークフローの起動ができます。ほとんどのチームは、これをCI/CDパイプラインに組み込み、公開イベントのたびに静的サイトを再ビルドしています。
Contentfulにおけるコンテンツモデリング
コンテンツモデリングとは、コンテンツの構造——どのフィールドが存在し、どのような種類のデータを保持し、コンテンツタイプ同士がどのように関連するかを定める「スキーマ」——を定義する作業です。私たちの経験上、ここはよりシンプルなCMSオプションと比較して、Contentfulが本当に輝くポイントです。
本質的には、コンテンツのスキーマを設計する作業で、データベースのテーブルに似ていますが、より柔軟です。「ブログ記事」コンテンツタイプには、タイトル(ショートテキスト)、本文(リッチテキスト)、著者(Authorコンテンツタイプへの参照)、タグ(文字列の配列)を持たせることができます。作成するすべてのエントリはこの構造に従います。
フィールドタイプとバリデーション
Contentfulは充実したフィールドタイプを提供します。
- ショートテキスト(Symbol): タイトル、スラッグ、ラベルなど。最大256文字
- ロングテキスト(Text): Markdownまたはプレーンテキスト。文字数制限なし
- リッチテキスト: JSONベース(HTMLではない)。レンダリングを完全に制御可能
- 数値(Number): 整数または小数
- 日付/時刻(Date/Time): ISO 8601形式
- ブール値(Boolean): True/Falseの切り替え
- メディア(Asset): 画像、動画、ドキュメント。Contentfulのアセットパイプラインに保存
- 参照(Link): エントリを他のエントリやアセットに接続
- JSONオブジェクト: 自由形式の構造化データ
- 位置情報(Location): 緯度/経度のペア
各フィールドはバリデーションをサポートします。必須、ユニーク、正規表現パターン、サイズ制限、カスタムバリデーションメッセージなどです。また、エディタUIでのフィールドの表示方法を制御する外観オプションも設定できます。
参照とリンクされたエントリ
参照は、コンテンツタイプ同士を接続する方法です。ブログ記事の「Author」参照はAuthorエントリにリンクします。「関連記事」フィールドは複数のブログ記事エントリを参照できます。これによりコンテンツグラフ——エントリがエントリにリンクされた構造——が生まれ、単一のAPIコールでクエリできます。
Content Management API経由で作成する際に、「ブログ記事」コンテンツタイプの定義が実際にはどのように見えるかを以下に示します。
{
"name": "Blog Post",
"fields": [
{ "id": "title", "type": "Symbol", "required": true },
{ "id": "slug", "type": "Symbol", "validations": [{ "unique": true }] },
{ "id": "body", "type": "RichText" },
{ "id": "author", "type": "Link", "linkType": "Entry" },
{ "id": "publishDate", "type": "Date" },
{ "id": "tags", "type": "Array", "items": { "type": "Symbol" } }
]
}これはバージョン管理に保存し、マイグレーションスクリプトを通じて適用する類いのものです。Contentfulのガイドでこれを見せてくれる競合は皆無で、彼らはコンテンツモデリングを抽象的に語るだけで、コードとして実際どう見えるかを示しません。
コンテンツのクエリ:REST APIとGraphQL API
Contentfulは、コンテンツ取得のためにRESTとGraphQLの両方のAPIを提供します。RESTはシンプルなクエリにはわかりやすいです。GraphQLは、ネストしたデータが必要な場合、1つのリクエストで複数のコンテンツタイプを取得したい場合、オーバーフェッチを避けたい場合に優れています。どちらも同じ認証トークンを使用します。
GraphQLエンドポイントはコンテンツモデルから自動生成されます。作成したすべてのコンテンツタイプは、フィルタリング、ソート、ページネーションを備えた、スキーマ内のクエリ可能な型になります。エンドポイントは以下の場所に存在します。
https://graphql.contentful.com/content/v1/spaces/{SPACE_ID}ContentfulのGraphQLドキュメントによれば、コンテンツタイプを変更するたびにスキーマは自動的に更新され、手動でのスキーマ管理は不要です。
GraphQLクエリの例
以下は、著者情報付きで最新のブログ記事10件を取得する基本的なクエリです。
query {
blogPostCollection(limit: 10, order: publishDate_DESC) {
items {
title
slug
publishDate
author {
name
}
}
}
}タグでフィルタリングし、ドイツ語のコンテンツを取得したい場合は、where句とlocaleパラメータを追加します。
query {
blogPostCollection(
where: { tags_contains_some: ["javascript"] }
locale: "de"
) {
items {
title
body {
json
}
}
}
}注意点として、GraphQLクエリには複雑度(complexity)の制限があります。複数のリンク参照を含む深くネストしたクエリは、上限に達する可能性があります。Contentfulは、ノード数とクエリの深さに基づいて複雑度を計算します。ブログ記事を著者、カテゴリ、関連記事付きで取得し、さらに各関連記事の著者まで取得すると、複雑度はすぐに膨れ上がります。
REST APIの基本
REST APIはよりシンプルですが、ネストしたデータにはより多くのリクエストが必要です。ブログ記事の基本的な取得はhttps://cdn.contentful.com/spaces/{SPACE_ID}/entries?content_type=blogPostにアクセスします。返ってくるのは、フラットなitems配列と、リンクされたエントリ用の別のincludesオブジェクトを含むJSONで、クライアント側で解決する必要があります。
TypeScriptを使っている場合、Contentfulのcontentful.js SDKがリンク解決と型生成を自動的に処理します。生のfetchコールを使う場合、GraphQL APIにクエリするための最小限のJavaScriptは以下の通りです。
const response = await fetch(
`https://graphql.contentful.com/content/v1/spaces/${SPACE_ID}`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${CDA_TOKEN}`,
},
body: JSON.stringify({ query }),
}
);
const { data } = await response.json();これだけです。SDK不要、ビルドステップ不要、依存関係も不要です。Node.js、Deno、Cloudflare Workers、ブラウザ——HTTPリクエストができる場所ならどこでも動作します。
知っておくべき主要機能
Contentfulは幅広い機能セットを備えていますが、すべての機能が同等に重要というわけではありません。ここでは、日々の運用体験やアーキテクチャの意思決定に実際に影響するものを紹介します。
ローカライゼーション(強みとギャップ)
Contentfulのローカライゼーションモデルは、インフラレベルでは堅実です。スペースにロケールを定義し(Enterpriseプランでは100以上まで)、すべてのフィールドがロケールごとの値を保存できます。フィールドレベルのロケール上書きにより、同じヒーロー画像を共有しながら、ドイツ語のタイトルを英語のものと別に設定できます。
ギャップは翻訳管理です。Contentfulは翻訳を保存するフィールドを提供しますが、翻訳を生み出すワークフローはありません。翻訳メモリも、用語集も、アサイン機能も、進捗管理もありません。実際の翻訳プロセスを処理するには、Phrase、Smartcat、Lokaliseといったサードパーティ連携が必要です。10言語以上を管理するチーム(私たちは自社サイトで10言語を管理しています)にとって、このギャップはすぐさまコスト増につながります。
環境とブランチング
環境は、コンテンツモデルとエントリ向けのgitブランチのように機能します。staging環境を作成し、スキーマを変更し、コンテンツでテストして、準備が整ったらmasterに昇格します。エイリアスを使えば、APIのURLを変更せずにmasterの指す環境を切り替えられます。
これはスキーママイグレーションに本当に役立ちます。分離された環境で新しいコンテンツタイプをテストし、フロントエンドが正しく処理することを検証してから昇格できます。すべて本番コンテンツに触れることなく行えます。私たちが目にしてきたほとんどのチームは、本番、ステージング、そして大規模マイグレーション用のフィーチャーブランチを時折、というように2〜3つの環境を使用しています。
その他、言及する価値のある機能:
- ロールと権限: きめ細かなアクセス制御。編集者を特定のコンテンツタイプに限定したり、ジュニアロールの公開権限をブロックしたりできます。Enterpriseプランではカスタムロール、SSOも利用可能
- Webhook: あらゆるコンテンツイベントでビルド、Slack通知、外部ワークフローをトリガー
- リッチテキスト: JSONベースで、レンダリングを完全に制御できる一方、フロントエンドフレームワークごとにカスタムレンダラーが必要
- App Framework: カスタムフィールドエディタ、サイドバーウィジェット、連携機能のための拡張機能を備えたマーケットプレイス
- Image API: オンザフライのリサイズ、クロップ、フォーマット変換(WebP、AVIF)、フォーカルポイントクロップ。別途画像CDNは不要
2026年のContentfulの新機能
Contentfulは2025年から2026年にかけて重要なアップデートをリリースしていますが、競合のガイドでこれらに触れているものは皆無です。2023年や2024年の情報に基づいてContentfulを評価しているなら、不完全な全体像で判断していることになります。
AI Actionsとコンテンツ自動化
ContentfulはAI Actionsをリリースしました。これは大規模言語モデルを活用した自動化コンテンツワークフローで、エディタ内で直接利用できます。翻訳の下書き、SEOメタデータの生成、代替テキストの作成、トーンの調整、コンテンツの要義に対応します。エディタのサイドバーからアクセスでき、現在編集中のエントリに対して動作します。
Diginomicaの報道によれば、AI Actionsは、単なるヘッドレスCMSではなく、完全なデジタルエクスペリエンスプラットフォーム(DXP)として位置づけようとするContentfulのより大きな方針の一環です。この機能は繰り返しの編集作業の自動化に本当に役立ちますが、翻訳出力は依然として人間のレビューが必要で、完成品ではなく初稿という位置づけです。
Contentful Studio(ビジュアルビルダー)
Contentful Studioは2024年春にGA(一般提供)となり、2025年を通じて大きく成熟しました。ドラッグ&ドロップのコンポーネントとライブプレビューで、非開発者がページを構成できるビジュアルページビルダーです。「Contentfulにはビジュアル編集がない」という批判を聞いたことがあるなら、Studioがその答えです。ただし注意点もあります。
Studioにはフロントエンド連携が必要で(コンポーネントをStudioのSDKに登録する必要がある)、有料アドオンであり、基本プランには含まれません。Contentfulの構造化コンテンツモデルの上にWordPressのようなページ構築を求めてきたチームにとって、今や現実的な選択肢です。ビジュアルファーストのワークフローでは依然としてStoryblokが優勢ですが、その差は縮まりつつあります。
Ninetailedによるパーソナライゼーション
Contentfulは2024年にNinetailedを買収し、Contentful Personalizationとしてリブランドしました。CMS Criticが報じたように、これによりネイティブなA/Bテスト、オーディエンスセグメンテーション、AI主導のバリエーション提案が可能になり、すべてエディタのOptimizationタブからアクセスできます。
これが注目されるのは、パーソナライゼーションは従来、別のベンダー(Optimizely、Dynamic Yieldなど)を必要としていたからです。CMSに組み込まれることで、連携の複雑さが軽減されます。ただし落とし穴もあります。Ninetailedは独自の料金体系を持つ別製品です。「Contentfulに無料で付いてくる」わけではありません。
Contentfulの料金:実際のコスト
Contentfulは4つのプランを提供していますが、ほとんどの競合ガイドはプラン名を挙げるだけで、実際の数字を示しません。以下は、Contentfulの料金ページに基づいた、2026年4月時点の実態です。
| プラン | 料金 | ユーザー数 | 月間APIコール | CDN帯域幅 | スペース |
|---|---|---|---|---|---|
| Free(Community) | 0ドル | 10 | 10万件 | 50 GB | Starter 1個 |
| Lite | 月額300ドル | 20 | 100万件 | 100 GB | 複数 |
| Premium | カスタム(月額約2,000ドル〜) | 無制限 | 無制限 | カスタム | カスタム |
| Enterprise | カスタム(年間で5桁台半ば〜6桁) | 無制限 | 無制限 | カスタム | カスタム |
"Contentful Monthly Cost by Tier"
データテーブル
| "Plan" | "Monthly Cost" |
|---|---|
| "Free" | 0 |
| "Lite" | 300 |
| "Premium" | 2000 |
| "Enterprise" | 5000 |
無料プランは、プロトタイピングや学習には寛大です。ユーザー10名、APIコール10万件、実際のプロジェクトを構築するのに十分な帯域幅が得られます。しかし、それを超えるとコストは急速に跳ね上がります。
予算に組み込むべき隠れたコスト:
- LiteのAPI超過料金: 月間100万コールを超えると、請求書に超過料金の項目が加算されます
- ロケールコスト: 追加ロケールはそれぞれスペースの制限にカウントされます — フィールドレベルで50ロケールは積み重なります
- Contentful Studio: ビジュアルビルダーは有料アドオンで、Liteはもちろん、一部のPremiumプランにも含まれません
- Ninetailedパーソナライゼーション: 別製品、別契約、別料金
- プロフェッショナルサービス: マイグレーション支援、オンボーディング、トレーニングは別途課金
- リッチテキストレンダラー: 直接のコストではありませんが、フレームワーク向けにカスタムレンダラーを構築する開発時間は確実に発生します
私たちの率直な見解: Contentfulの無料プランは、評価や小規模プロジェクトには堅実です。ただし、予算が最優先事項であれば、StrapiやPayloadのようなオープンソースCMSの代替手段ならライセンスコストを完全にゼロにでき、支払うのはホスティング代だけです。
Contentful vs Sanity vs Strapi:比較
これらは、ほぼすべての選定過程で候補に挙がる3つのヘッドレスCMSです。私たちはSanityで本番システムを構築してきたため、その強みと弱みを firsthand で知っています。以下、率直な比較です。
| 機能 | Contentful | Sanity | Strapi |
|---|---|---|---|
| 種類 | SaaS(クローズドソース) | SaaS + セルフホスト | オープンソース(セルフホストまたはCloud) |
| 無料プラン | ユーザー10名、コール10万件 | APIコール10万件、ユーザー3名 | 無制限(セルフホスト) |
| GraphQL | ネイティブ | プラグイン(GROQが主) | ネイティブ |
| コンテンツモデリング | GUI + API | コード(スキーマアズコード) | GUI + コード |
| リアルタイム共同編集 | あり | あり(Presence API) | 限定的 |
| ビジュアル編集 | Studioアドオン | Visual Editing(ネイティブ) | なし |
| ローカライゼーション | ネイティブロケール | プラグイン/カスタム | プラグイン(i18n) |
| 料金 | 月額300ドル〜 | 0ドル〜(無料枠が充実) | 無料(セルフホスト) |
| 最適 | 大企業、マルチチャネル | 開発者ファースト、柔軟なスキーマ | 予算重視、セルフホスト |
Contentfulが勝るのは、大規模なコンテンツ運用と厳格なガバナンス要件を持つ大企業チームです。成熟したロールシステム、SSO、監査ログ、Enterpriseプランの99.99% SLAは、他社が追随しにくい強みです。
Sanityが勝るのは、開発者体験とスキーマの柔軟性です。スキーマアズコードを好み、GROQのクエリ力を求め、リアルタイム共同編集機能を重視するなら、Sanityの方が適しています。詳細はSanity CMSの完全ガイドをご覧ください。
Strapiが勝るのはコストです。セルフホストなら無料で、APIコールの制限もありません。自社インフラを管理するDevOpsの余力があり、エンタープライズサポートが不要なら、Strapiは1ドルあたりのCMS機能が最も充実しています。
Storyblok、Payload、Hygraphを含むより広範な比較は、ヘッドレスCMSの完全比較をご覧ください。
Contentfulを選ぶ前に知っておくべき限界点
すべてのCMSにはトレードオフがあります。以下はContentfulの限界点で、曖昧なごまかしではなく具体的な数字を添えて示します。私たち自身も、自社のコンテンツパイプライン用にContentfulを評価した際に、これらのいくつかに行き当たりました。
レート制限は実在します。 CDAは秒間55件のキャッシュされていないリクエストを許可します。CDNキャッシュされたレスポンスは無制限ですが、アプリがキャッシュをバイパスする場合(たとえばリクエストごとのサーバーサイドレンダリング)、すぐに制限に達します。CMAはさらに厳しく秒間10リクエストで、マイグレーションスクリプトや一括インポートに関わってきます。
ビジュアル編集は標準非搭載(追加料金なしでは)。 Contentful Studioは存在しますが、フロントエンド連携を必要とする有料アドオンです。チームが基本製品でWordPressスタイルのページ構築を期待しているなら、その会話に備えてください。Storyblokはすべてのプランでビジュアル編集を含んでいます。
翻訳管理がありません。 得られるのはロケールフィールド、それだけです。翻訳ワークフローも、アサイン機能も、翻訳メモリも、進捗管理もありません。ローカライゼーションを主要機能として売っているプラットフォームでありながら、実際の翻訳体験はPhrase、Smartcat、Lokaliseといったサードパーティツールに完全に依存します。
フロントエンドに関することはすべて開発者依存。 コンテンツ編集者はエントリの作成と管理ができます。しかし、ページレイアウトの変更、新しいセクションの追加、ナビゲーションの変更、その他のフロントエンドの更新は、開発者なしにはできません。これはヘッドレスアーキテクチャ固有の性質ですが、基本製品にページビルダーが含まれないContentfulでは、それがより顕著です。
大規模になると料金が見通しにくい。 APIコールの超過、ロケールベースの制限、Studioとパーソナライゼーションのアドオンコスト、プロフェッショナルサービスが、予測の難しい料金モデルを生み出します。私たちが話を聞いた複数のチームが、無料プラン終了後の最初の請求書に驚かされました。
リッチテキストの複雑さ。 ContentfulのリッチテキストはHTMLではなくJSONベースです。フロントエンドフレームワークごとにカスタムレンダラーが必要で、Reactには@contentful/rich-text-react-renderer、バニラJSにはrich-text-html-rendererなどを使います。レンダリングを完全に制御できますが、HTMLベースの競合と比べて開発工数はかなり多くなります。
ベンダーロックイン。 クローズドソース、SaaSのみ、セルフホスティングの選択肢なし。コンテンツはAPI経由でエクスポート可能ですが、コンテンツモデル、ワークフロー、連携機能はContentful固有のものです。料金が変わったり機能が非推奨になったりしても、選択肢は限られます。
Contentfulを使うべき人(と使うべきでない人)
Contentfulは強力なプラットフォームですが、すべてのプロジェクトに適しているわけではありません。以下は、自己判断のための意思決定フレームワークです。
Contentfulを使うべきケース:
- 複数チャネル(Web、モバイル、IoT、デジタルサイネージ)でコンテンツを管理する大企業チーム
- 50以上のロケールとフィールドレベルの上書きを備えたネイティブなローカライゼーションが必要
- 専任サポートと99.99% SLAを備えた、成熟した実績あるプラットフォームが欲しい
- チームにAPIファーストアーキテクチャに慣れた開発者がいる
- きめ細かなロール、権限、監査ログ、SSOが必要
Contentfulを避けるべきケース:
- 予算制約のある個人開発者や小規模チーム — StrapiやPayloadを検討
- 基本製品に含まれるビジュアルページビルダーが欲しい — Storyblokを検討
- コードファーストのスキーマ定義と最大の柔軟性を好む — Sanityを検討
- シンプルなブログCMSが必要 — WordPressやGhostの方が安価で素早くセットアップできる
- コンプライアンス上の理由でセルフホストしたい — StrapiやPayloadを検討
| 必要なのは... | 選択 | 理由 |
|---|---|---|
| エンタープライズグレードのガバナンス | Contentful | 成熟したロール、SSO、監査ログ、99.99% SLA |
| 開発者の最大の柔軟性 | Sanity | スキーマアズコード、GROQ、ポータブルテキスト |
| ライセンスコストゼロ | StrapiまたはPayload | オープンソース、セルフホスト可能 |
| 標準でビジュアル編集 | Storyblok | ビジュアルエディタが中核製品 |
| シンプルなブログ | WordPressまたはGhost | 公開までの時間が最速 |
これらの代替手段すべての詳細は、ヘッドレスCMSの完全比較をご覧ください。
はじめに:Contentfulでの最初の15分
ここでは実践的なウォークスルー——理論ではなく、ゼロからGraphQL経由でコンテンツをクエリするまでの正確な手順——を約15分で紹介します。
ステップ1:サインアップ。 contentful.comにアクセスし、無料アカウントを作成します。クレジットカードは不要です。
ステップ2:スペースの作成。 スペースはプロジェクトのコンテナです。無料プランではStarterスペースが1つ利用できます。説明的な名前を付けてください。
ステップ3:コンテンツタイプの定義。 Content Modelに移動し、「Add content type」をクリックして「Article」タイプを作成します。フィールドを追加します。Title(ショートテキスト、必須)、Slug(ショートテキスト、ユニークバリデーション)、Body(リッチテキスト)、Cover Image(メディア)、Published Date(日付と時刻)。
ステップ4:エントリの作成。 Contentに移動し、「Add Article」をクリックしてフィールドを入力します。Publishを押します。
ステップ5:APIキーの取得。 Settings -> API Keysに移動します。新しいAPIキーを作成します。スペースID、Content Delivery APIトークン、Content Preview APIトークンが得られます。これらを保存してください。
ステップ6:GraphQL Playgroundでクエリ。 ブラウザでこのURLを開きます(認証情報は自分のものに置き換えてください):
https://graphql.contentful.com/content/v1/spaces/{SPACE_ID}/explore?access_token={CDA_TOKEN}ステップ7:アプリから取得。 上記APIセクションのJavaScriptのfetch例を使い、スペースIDとCDAトークンを自分のものに置き換えれば、ライブコンテンツを取得できます。
プロのヒント: GraphQL PlaygroundのURLはContentfulのUIでは見つけにくい場所にあります。Settings -> API Keys -> GraphQL Playground URLから見つけるか、上記のテンプレートを使って手動で構築できます。ブックマークしておきましょう。開発中は常に使うことになります。
よくある質問(FAQ)
Contentful CMSとは何で、どのように機能しますか?
ContentfulはAPIファーストのヘッドレスCMSで、構造化コンテンツをクラウドハブに保存し、RESTおよびGraphQL API経由で配信します。WordPressとは異なりフロントエンドを持たず、任意のフレームワークを使って自分で構築します。コンテンツ編集者はContentfulのWebアプリでエントリを管理し、開発者はAPIを通じてそのコンテンツを取得します。
Contentfulは無料で使えますか?
はい。Contentfulは無料のCommunityプランを提供しており、ユーザー10名、月間APIコール10万件、CDN帯域幅50 GB、Starterスペース1個が含まれます。プロトタイピングや小規模プロジェクトには十分です。有料プランはLiteプランが月額300ドルからで、PremiumとEnterpriseはカスタム見積もりです。
Contentfulにおけるコンテンツモデリングとは?
コンテンツモデリングとは、フィールド、バリデーション、参照を持つ構造化コンテンツタイプを定義することで、データベースのスキーマ設計に似ていますが、対象はコンテンツです。「ブログ記事」や「製品」といったタイプを特定のフィールド(タイトル、本文、画像、カテゴリ)付きで作成し、すべてのエントリがその構造に従います。これはContentfulの基盤です。
ContentfulはWordPressとどう比較されますか?
Contentfulはヘッドレス(APIのみ、組み込みフロントエンドなし)で、WordPressはコンテンツ管理とテーマベースのレンダリングを一体化しています。Contentfulはマルチチャネル配信に優れ、同じコンテンツをWeb、モバイル、IoTに提供できます。WordPressはシンプルさに優れ、開発者なしで数分で動くサイトが手に入ります。
Contentfulはエンタープライズ利用に適していますか?
はい。Contentfulはエンタープライズでの採用が最も進んだヘッドレスCMSプラットフォームの一つです。EnterpriseプランにはSSO、きめ細かなロールベースのアクセス、監査ログ、専任サポート、99.99% SLA、無制限のAPIコールが含まれます。Spotify、Vodafone、Chanel、Atlassianのような企業が、大規模なコンテンツ運用に利用しています。
Contentfulの欠点は何ですか?
主な限界点としては、基本製品にビジュアル編集がないこと(Studioは有料アドオン)、API超過やアドオンコストによる大規模時の料金の見通しにくさ、翻訳管理ワークフローの欠如、すべてのフロントエンド変更における開発者依存、カスタムレンダラーを要するリッチテキストのJSON、セルフホスティングの選択肢がないベンダーロックインが挙げられます。
ContentfulはGraphQLをサポートしますか?
はい、ネイティブにサポートします。すべてのContentfulスペースは、コンテンツタイプに基づいた自動生成のGraphQLスキーマを得ます。フィルタリング、ページネーション、ソート、ロケール固有のリクエストでクエリできます。エンドポイントはgraphql.contentful.com/content/v1/spaces/{SPACE_ID}にあり、Content Delivery APIトークンで認証します。
Contentfulの月額料金はいくらですか?
無料プランは0ドルです。Liteは月額300ドルで、ユーザー20名とAPIコール100万件が含まれます。Premiumは月額約2,000ドル以上からで、カスタム料金です。Enterpriseは年間で5桁台半ばから6桁です。隠れたコストに注意してください。API超過料金、Contentful Studioのアドオン料金、Ninetailedパーソナライゼーションの料金、プロフェッショナルサービスなどです。
Contentfulは複数言語を処理できますか?
はい。Contentfulはフィールドレベルの上書きを伴うネイティブなロケールサポートを備え、各フィールドはロケールごとに異なる値を保存できます。ただし、組み込みの翻訳ワークフロー、メモリ、用語集はありません。大規模な実際の翻訳プロセスを管理するには、Phrase、Smartcat、Lokaliseのようなサードパーティ連携が必要です。
Contentful Studioとは?
Contentful Studioは、2024年春にGAとなったビジュアルページビルダーのアドオンです。ドラッグ&ドロップのコンポーネントとライブプレビューで、非開発者がページを構成できます。フロントエンド連携が必要で(コンポーネントをStudioのSDKに登録する必要がある)、有料アドオンであり、Contentfulの基本プランには含まれません。