Contentful 標準リッチテキストエディタで「Word 的な編集体験」はどこまで可能か：見た目より「構造」に強い CMS のリアル
Contentful は構造化コンテンツ管理に特化した CMS ですが、現場の「Word 的な」直感編集ニーズにはどこまで応えられるのでしょうか？本記事では標準リッチテキストエディタの機能と限界、設計思想をわかりやすく整理します。
2025.06.03概要
本記事では、Contentful 標準のリッチテキストエディタだけで「Word 的な編集体験」がどこまで実現できるかを詳しく解説します。「構造化コンテンツ」に特化した Contentful の設計思想を踏まえつつ、標準エディタで利用できる装飾・編集機能の範囲を実際の画面例・一覧表つきで紹介します。
背景：「Word 的な編集体験」とは？
Contentful は、見た目やレイアウトから独立した「構造化データ管理」 を最重視する CMS です。一方で、実際の現場では「最低限の装飾」や「直感的な編集体験」も求められがちです。
ここでいう「Word 的な編集体験」とは、たとえば：
- 文字装飾（太字・斜体・下線・取消線）
- 箇条書き／番号リスト
- 見出し階層
- 画像や表の挿入
- ハイパーリンク
- 直感的なWYSIWYG UI
といった操作が該当します。
Contentful 標準リッチテキストエディタの機能一覧
Contentful 標準のリッチテキストエディタで使える主な編集機能をまとめます。
| 機能 | Word | Contentful標準 | コメント |
|---|---|---|---|
| フォント変更 | ○ | × | |
| 太字/斜体/下線/取消線 | ○ | ○ | |
| 上付き文字/下付き文字 | ○ | ○ | |
| 文字色 | ○ | × | |
| 箇条書き/番号リスト | ○ | ○ | |
| 見出し階層 | ○ | ○ | h1 〜 h6 |
| 画像挿入 | ○ | △ | ブロック単位 |
| 表 | ○ | △ | ブロック単位 |
| ハイライト | ○ | × | |
| ハイパーリンク | ○ | ○ | |
| 内部リンク | ○ | △ | ブロックまたはインライン埋め込み |
実際の編集画面
REST API での取得結果
{
"metadata": {
"tags": [],
"concepts": []
},
"sys": {
"space": {
"sys": {
"type": "Link",
"linkType": "Space",
"id": "****"
}
},
"id": "56Z0SH9Uq39TMjLQ3tMFCi",
"type": "Entry",
"createdAt": "2025-06-02T06:16:53.554Z",
"updatedAt": "2025-06-04T02:14:22.641Z",
"environment": {
"sys": {
"id": "master",
"type": "Link",
"linkType": "Environment"
}
},
"publishedVersion": 60,
"revision": 4,
"contentType": {
"sys": {
"type": "Link",
"linkType": "ContentType",
"id": "blogPost"
}
},
"locale": "en-US"
},
"fields": {
"title": "テスト投稿",
"body": {
"nodeType": "document",
"data": {},
"content": [
{
"nodeType": "heading-1",
"data": {},
"content": [
{
"nodeType": "text",
"value": "見出し1",
"marks": [],
"data": {}
}
]
},
{
"nodeType": "heading-2",
"data": {},
"content": [
{
"nodeType": "text",
"value": "見出し2",
"marks": [],
"data": {}
}
]
},
{
"nodeType": "heading-3",
"data": {},
"content": [
{
"nodeType": "text",
"value": "見出し3",
"marks": [],
"data": {}
}
]
},
{
"nodeType": "heading-4",
"data": {},
"content": [
{
"nodeType": "text",
"value": "見出し4",
"marks": [],
"data": {}
}
]
},
{
"nodeType": "heading-5",
"data": {},
"content": [
{
"nodeType": "text",
"value": "見出し5",
"marks": [],
"data": {}
}
]
},
{
"nodeType": "heading-6",
"data": {},
"content": [
{
"nodeType": "text",
"value": "見出し6",
"marks": [],
"data": {}
}
]
},
{
"nodeType": "paragraph",
"data": {},
"content": [
{
"nodeType": "text",
"value": "太字 ",
"marks": [
{
"type": "bold"
}
],
"data": {}
}
]
},
{
"nodeType": "paragraph",
"data": {},
"content": [
{
"nodeType": "text",
"value": "斜体",
"marks": [
{
"type": "italic"
}
],
"data": {}
}
]
},
{
"nodeType": "paragraph",
"data": {},
"content": [
{
"nodeType": "text",
"value": "下線",
"marks": [
{
"type": "underline"
}
],
"data": {}
}
]
},
{
"nodeType": "paragraph",
"data": {},
"content": [
{
"nodeType": "text",
"value": "上付き",
"marks": [
{
"type": "superscript"
}
],
"data": {}
}
]
},
{
"nodeType": "paragraph",
"data": {},
"content": [
{
"nodeType": "text",
"value": "下付き",
"marks": [
{
"type": "subscript"
}
],
"data": {}
}
]
},
{
"nodeType": "paragraph",
"data": {},
"content": [
{
"nodeType": "text",
"value": "取消線",
"marks": [
{
"type": "strikethrough"
}
],
"data": {}
}
]
},
{
"nodeType": "paragraph",
"data": {},
"content": [
{
"nodeType": "text",
"value": "等幅",
"marks": [
{
"type": "code"
}
],
"data": {}
}
]
},
{
"nodeType": "paragraph",
"data": {},
"content": [
{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
},
{
"nodeType": "hyperlink",
"data": {
"uri": "htttps://example.com"
},
"content": [
{
"nodeType": "text",
"value": "リンク",
"marks": [],
"data": {}
}
]
},
{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
}
]
},
{
"nodeType": "unordered-list",
"data": {},
"content": [
{
"nodeType": "list-item",
"data": {},
"content": [
{
"nodeType": "paragraph",
"data": {},
"content": [
{
"nodeType": "text",
"value": "箇条書き",
"marks": [],
"data": {}
}
]
}
]
},
{
"nodeType": "list-item",
"data": {},
"content": [
{
"nodeType": "paragraph",
"data": {},
"content": [
{
"nodeType": "text",
"value": "箇条書き",
"marks": [],
"data": {}
}
]
}
]
}
]
},
{
"nodeType": "ordered-list",
"data": {},
"content": [
{
"nodeType": "list-item",
"data": {},
"content": [
{
"nodeType": "paragraph",
"data": {},
"content": [
{
"nodeType": "text",
"value": "番号リスト",
"marks": [],
"data": {}
}
]
}
]
},
{
"nodeType": "list-item",
"data": {},
"content": [
{
"nodeType": "paragraph",
"data": {},
"content": [
{
"nodeType": "text",
"value": "番号リスト",
"marks": [],
"data": {}
}
]
}
]
}
]
},
{
"nodeType": "blockquote",
"data": {},
"content": [
{
"nodeType": "paragraph",
"data": {},
"content": [
{
"nodeType": "text",
"value": "引用",
"marks": [],
"data": {}
}
]
}
]
},
{
"nodeType": "paragraph",
"data": {},
"content": [
{
"nodeType": "text",
"value": "↓区切り線",
"marks": [],
"data": {}
}
]
},
{
"nodeType": "hr",
"data": {},
"content": []
},
{
"nodeType": "paragraph",
"data": {},
"content": [
{
"nodeType": "text",
"value": "↓表",
"marks": [],
"data": {}
}
]
},
{
"nodeType": "table",
"data": {},
"content": [
{
"nodeType": "table-row",
"data": {},
"content": [
{
"nodeType": "table-header-cell",
"data": {},
"content": [
{
"nodeType": "paragraph",
"data": {},
"content": [
{
"nodeType": "text",
"value": "キー",
"marks": [],
"data": {}
}
]
}
]
},
{
"nodeType": "table-header-cell",
"data": {},
"content": [
{
"nodeType": "paragraph",
"data": {},
"content": [
{
"nodeType": "text",
"value": "値",
"marks": [],
"data": {}
}
]
}
]
}
]
},
{
"nodeType": "table-row",
"data": {},
"content": [
{
"nodeType": "table-cell",
"data": {},
"content": [
{
"nodeType": "paragraph",
"data": {},
"content": [
{
"nodeType": "text",
"value": "test",
"marks": [],
"data": {}
}
]
}
]
},
{
"nodeType": "table-cell",
"data": {},
"content": [
{
"nodeType": "paragraph",
"data": {},
"content": [
{
"nodeType": "text",
"value": "0",
"marks": [],
"data": {}
}
]
}
]
}
]
}
]
},
{
"nodeType": "paragraph",
"data": {},
"content": [
{
"nodeType": "text",
"value": "インライン埋め込み→ ",
"marks": [],
"data": {}
},
{
"nodeType": "embedded-entry-inline",
"data": {
"target": {
"sys": {
"id": "473uBljHJGPM7q44Y4dJt4",
"type": "Link",
"linkType": "Entry"
}
}
},
"content": []
},
{
"nodeType": "text",
"value": " ←インライン埋め込み",
"marks": [],
"data": {}
}
]
},
{
"nodeType": "paragraph",
"data": {},
"content": [
{
"nodeType": "text",
"value": "↓ブロック埋め込み",
"marks": [],
"data": {}
}
]
},
{
"nodeType": "embedded-entry-block",
"data": {
"target": {
"sys": {
"id": "473uBljHJGPM7q44Y4dJt4",
"type": "Link",
"linkType": "Entry"
}
}
},
"content": []
},
{
"nodeType": "paragraph",
"data": {},
"content": [
{
"nodeType": "text",
"value": "↓画像",
"marks": [],
"data": {}
}
]
},
{
"nodeType": "embedded-asset-block",
"data": {
"target": {
"sys": {
"id": "6MxROuQsX8qlxzhkV2tNLo",
"type": "Link",
"linkType": "Asset"
}
}
},
"content": []
},
{
"nodeType": "paragraph",
"data": {},
"content": [
{
"nodeType": "text",
"value": "",
"marks": [],
"data": {}
}
]
}
]
}
}
}
「Word 的な編集体験」との違い
Word のように「その場で自由に文字装飾・細かなレイアウト調整」はできませんが、最低限の見出し・リスト・画像・表・リンクといった「プレーンな記事編集」に必要な機能は備わっています。
ただし以下の点には注意が必要です。
- 文字色・フォント・ハイライトなどは不可。表現の自由度は限定的
- 画像や表も「段落（ブロック）単位」での挿入のみ
- 複雑なレイアウトやインライン装飾はできない
- API 経由では「構造」として取得可能（見た目情報は保持しない）
まとめ：標準リッチテキストエディタでできること・できないこと
- できること
- プレーンテキスト編集、見出し、リスト、表、画像・リンクの挿入など
- シンプルなブログやドキュメント用途なら十分対応
- できないこと
- 文字色・フォント・ハイライトなどの細かい装飾
- 複雑なページレイアウト・インライン画像配置など
「見た目」より「構造」にフォーカスしたいとき Contentful の強みを最大限活かすことが可能です。
発展：より高度な WYSIWYG 体験が必要なら
カスタム UI Extension の導入で TinyMCE や CKEditor 等の本格 WYSIWYG エディタを組み込むことも可能です
