はじめに
「Webflowでブログや商品一覧を作りたいけど、CMSの設定が難しそう」「リファレンスフィールドって何に使うの？」「APIで外部システムと連携できると聞いたけど具体的にどうやるの？」
Webflow CMSに関する日本語情報はまだ少なく、公式ドキュメントを読みながら手探りで進めているWebflowユーザーは多いはずです。
この記事では、Webflow CMSの基本的なコレクション設計から、リファレンスフィールドを使ったカテゴリ・タグ機能の実現方法、CMS APIを使った自動化パイプラインの構築まで、実務で使える情報を体系的にまとめました。
Webflowを使い始めたばかりの方から、より高度な使い方を模索している中級者まで、幅広くカバーしています。
1.Webflow CMSとは
1-1.WordPressとの本質的な違い
Webflow CMSとWordPressは、どちらもCMS（コンテンツ管理システム）ですが、設計思想がまったく異なります。
WordPressは「まずコンテンツを書いて、テーマやプラグインで見た目を整える」という構造です。コンテンツとデザインが分離しており、高度なカスタマイズにはPHPの知識が必要になります。
Webflow CMSは「デザイナーがビジュアルエディタ上でデザインしながら、動的なデータをバインドする」というアプローチです。コードを書かずに、データベースの構造と表示デザインを同時に設計できます。
具体的な違いを整理すると：
- カスタムフィールド — WordPress: ACFなどプラグインが必要／Webflow CMS: 標準で豊富なフィールドタイプ
- テンプレート設計 — WordPress: PHPテンプレート／Webflow CMS: ビジュアルエディタで直接
- ホスティング — WordPress: 別途必要／Webflow CMS: Webflowに統合
- 表示ロジック — WordPress: コード記述が必要／Webflow CMS: 条件表示をGUIで設定
- APIアクセス — WordPress: REST API（プラグイン追加）／Webflow CMS: 標準でCMS API提供
1-2.ビジュアルCMSの強み
Webflow CMSの最大の特長は、デザインとデータが密接に連携している点です。
通常のCMSでは「テンプレートを作る人」と「コンテンツを入力する人」が別々の作業をしますが、Webflowでは一つのインターフェース上でその両方を設計できます。
たとえばブログ記事のカードコンポーネントをデザインしながら、「タイトルはCMSの"Name"フィールドを参照する」「サムネイルは"Thumbnail"フィールドの画像を使う」というバインドをその場で設定できます。コードを書く必要はありません。
また、CMSで管理するコンテンツが増えても、デザインは自動的にすべてのアイテムに適用されます。100件のブログ記事があっても、テンプレートを1つ変更すれば全記事に反映されます。
2.コレクションの基本
2-1.コレクションとは何か
Webflow CMSにおけるコレクションとは、同じ構造を持つコンテンツのグループです。データベースのテーブルに近い概念です。
たとえば「ブログ記事」というコレクションには、タイトル・本文・公開日・カテゴリ・サムネイル画像といったフィールドが含まれます。各記事はこの構造に沿ってデータを持ちます。
2-2.コレクションの作成手順
- Webflowのダッシュボードからプロジェクトを開く
- 左パネルの「CMS」アイコンをクリック
- 「+ New Collection」ボタンをクリック
- コレクション名（表示名）と単数形名、スラッグを入力
- フィールドを追加していく
コレクション名は後から変更できますが、スラッグはURLに使われるため、なるべく最初から適切な英語名をつけておくことをすすめます。
2-3.フィールドタイプの解説
Webflow CMSで使えるフィールドタイプは豊富です。実務でよく使うものを解説します。
Plain Text 短い文字列に使います。記事タイトル、商品名など。文字数制限は256文字です。
Rich Text HTMLが使えるリッチテキスト。ブログ本文に使います。見出し・リスト・画像の埋め込みが可能です。
Image 単一の画像フィールド。サムネイル画像や OGP画像に使います。
Multi-Image 複数の画像を管理できます。商品ギャラリーなどに便利です。
Number 数値。価格、順序、評点などに使います。
Switch ON/OFFのトグル。「公開フラグ」「特集フラグ」などに使います。
Option プルダウンで選択するフィールド。ステータス管理（Draft/Published/Archived）などに使います。
Reference / Multi-Reference 他のコレクションのアイテムを参照するフィールド。カテゴリや著者情報を別コレクションで管理するときに使います。詳細は後述します。
Date/Time 日時の管理。公開日や更新日に使います。
Color カラーコードを管理。ブランドカラーの設定などに使えます。
Link URLを保存するフィールド。外部リンクや内部リンクに使います。
Video 動画URL（YouTube、Vimeoなど）を管理します。
2-4.コレクション設計のベストプラクティス
名前は明確に、将来を見据えて
コレクション名は「誰が見ても分かる名前」にします。社内でWebflowを複数人で運用する場合、命名規則が重要です。
英語での命名例：
- ブログ記事 →
Blog Posts - 商品 →
Products - カテゴリ →
Categories - 著者 →
Authors
Nameフィールドは必ず意味のある値を
Nameフィールドは必須かつCMS内での識別子になります。「記事001」のような管理用の名前ではなく、実際のタイトルや商品名を入れることで、CMS編集画面での視認性が上がります。
Slugは英語・半角・ハイフン区切りで
SlugはURLに直接使われます。日本語タイトルを使うと日本語URLになりSEOやシェア時に問題が出ることがあるため、英語のslugを設定する習慣をつけましょう。
3.コレクションリストとテンプレートページ
3-1.コレクションリストで一覧を作る
コレクションリストは、CMSのデータを一覧表示するためのコンポーネントです。
設置方法：
- ページのキャンバス上でAddパネルを開く
- 「CMS」カテゴリの「Collection List」をドラッグ&ドロップ
- 設置したコレクションリストの「Settings」でどのコレクションに接続するか選ぶ
- コレクションリスト内のアイテムテンプレートをデザイン
- 各要素にCMSフィールドをバインド（テキスト要素を選択して「Get text from CMS」など）
フィールドのバインドは直感的です。テキスト要素をダブルクリックしてフォーカスし、左パネルの「Typography」タブ内「Get text from CMS」からフィールドを選ぶだけです。
3-2.フィルタとソートの設定
コレクションリストには、表示するアイテムのフィルタリングとソート機能があります。
フィルタ設定の例：
- 「カテゴリ = Tech」のアイテムのみ表示
- 「公開フラグ = ON」のアイテムのみ表示
- 「公開日が現在より前」のアイテムのみ表示
フィルタはAND/OR条件を組み合わせることができます。ただし、Current Page（現在のページのCMSアイテム）に基づいた動的なフィルタには制限があるため、複雑な条件分岐が必要な場合は設計を工夫する必要があります。
ソート設定の例：
- 公開日の降順（新しい記事が上）
- 名前のアルファベット順
- Numberフィールドを使った手動順序指定
ユーザーが操作できる動的なソート（JavaScriptによるクライアントサイドソート）はWebflow単体では難しいため、要件に応じてカスタムコードの追加が必要になる場合があります。
3-3.CMSテンプレートページ
各コレクションアイテムの詳細ページはCMSテンプレートページで管理します。
たとえば「Blog Posts」コレクションに対してテンプレートページを作ると、すべての記事が /blog-post/[slug] のURLで自動生成されます。
テンプレートページでは「Collection Page」として設定し、ページ上の要素にCMSフィールドをバインドします。ブログ記事テンプレートなら：
- H1要素 → Nameフィールド
- リッチテキストブロック → Bodyフィールド
- 画像要素 → Thumbnailフィールド
- テキスト要素 → 公開日フィールド
というようにバインドを設定することで、どの記事ページも同じレイアウトで自動表示されます。
4.リファレンスフィールドの活用
4-1.リファレンスフィールドとは
リファレンスフィールドは、他のコレクションのアイテムとの関係性を定義するフィールドです。リレーショナルデータベースでいう「外部キー」に近い概念です。
Webflowには2種類あります：
- Reference：1対1の関係（記事は1つのカテゴリに属する）
- Multi-Reference：1対多の関係（記事は複数のタグを持つ）
4-2.カテゴリ機能の実現
ブログ記事にカテゴリをつける例で説明します。
手順：
- 「Categories」コレクションを作成し、Name（カテゴリ名）、Slug、Color（カラーコード）などのフィールドを設定
- カテゴリアイテムを作成（Tech、Design、Businessなど）
- 「Blog Posts」コレクションにReferenceフィールドを追加し、参照先として「Categories」を選択
- 各ブログ記事のCMSアイテムにカテゴリを設定
コレクションリストやテンプレートページでは、バインド時に「Blog Post → Category → Name」のようにネストしてカテゴリ名を参照できます。
また、「Category = [Current Page Category]」のような動的フィルタを使うことで、カテゴリページ（カテゴリ別の記事一覧）も実現できます。
4-3.タグ機能の実現
タグはMulti-Referenceフィールドで実現します。
- 「Tags」コレクションを作成（Name、Slugフィールド）
- タグアイテムを作成（JavaScript、UI/UX、Figmaなど）
- 「Blog Posts」コレクションにMulti-Referenceフィールドを追加し、参照先として「Tags」を選択
- 各記事に複数タグを設定
テンプレートページでは、Multi-Referenceフィールドに対してネストしたコレクションリストを配置することで、記事ごとのタグ一覧を表示できます。
4-4.関連記事機能の実現
「この記事に関連する記事」を表示する方法はいくつかあります。
方法1：Multi-Referenceで手動設定 Blog Postsコレクション内にMulti-Referenceフィールド「Related Posts」を作り、編集者が記事ごとに手動で関連記事を指定します。シンプルで確実ですが、メンテナンスコストがかかります。
方法2：同じカテゴリの記事を自動表示 テンプレートページにコレクションリストを配置し、「Category = [Current Page Category]」かつ「Slug ≠ [Current Page Slug]」でフィルタリングすることで、同カテゴリの他記事を自動表示できます。
方法3：CMS APIと外部処理の組み合わせ より高度なレコメンドが必要な場合は、CMS APIでデータを取得し、外部システムで類似度計算を行ってMulti-Referenceフィールドを更新するパイプラインを構築できます。詳しくは次のセクションで解説します。
4-5.リファレンスフィールドの制限
リファレンスフィールドを使う際に知っておくべき制限があります。
- ネストの深さ制限：コレクションリスト内にネストできるコレクションリストは1段階まで。2段階以上のネストはできません。
- CMS参照のフィルタ制限：「別のコレクションのフィールド値でフィルタする」という複雑なフィルタには制限があります。
- Multi-ReferenceはCMSテンプレートページのみ：コレクションリストのアイテム内でMulti-Referenceの参照先を一覧表示するには、テンプレートページが必要になる場合があります。
5.CMS APIの活用
5-1.Webflow CMS APIの概要
WebflowはCMS APIを標準提供しており、外部からHTTPリクエストでCMSデータの取得・作成・更新・削除が可能です。
ベースURL：https://api.webflow.com/v2/
認証にはAPIトークンを使います。Webflowのアカウント設定からAPIトークンを発行でき、リクエストヘッダーに Authorization: Bearer YOUR_TOKEN を付与して使います。
5-2.主要なAPIエンドポイント
コレクション一覧の取得
GET /sites/{site_id}/collections
コレクションアイテムの一覧取得
GET /collections/{collection_id}/items
ページネーションのパラメータ：
limit：1リクエストで取得する件数（最大100）offset：取得開始位置
コレクションアイテムの作成
POST /collections/{collection_id}/items
リクエストボディ例：
{
"fieldData": {
"name": "新しいブログ記事",
"slug": "new-blog-post",
"body": "記事本文のHTMLコンテンツ",
"published-date": "2025-01-15T10:00:00Z"
},
"isDraft": false,
"isArchived": false
}
コレクションアイテムの更新
PATCH /collections/{collection_id}/items/{item_id}
アイテムの公開
POST /collections/{collection_id}/items/publish
作成・更新したアイテムは isDraft: false にしただけでは公開されません。publishエンドポイントを呼び出すか、Webflow Designerから手動パブリッシュが必要です。
5-3.自動化パイプラインの構築例
CMS APIを活用すれば、様々な自動化が実現できます。
例1：外部ブログシステムからWebflowへのコンテンツ同期
NotionやAirtableで記事を管理し、n8nやMake（旧Integromat）でWebflow CMSへ自動投稿するパイプラインです。
フロー例：
- Notionで記事を「公開済み」ステータスに変更
- n8nのWebhookが発火
- Notionから記事データを取得
- Webflow CMS APIでアイテムを作成
- publishエンドポイントを呼び出して公開
このアプローチにより、ライターはWebflowを直接触らずにNotionで執筆し、Webflowには自動的にコンテンツが反映される運用が可能になります。
例2：ECサイトの在庫・価格情報の同期
商品データを社内の在庫管理システムで管理し、Webflow CMSに定期的に同期するパイプラインです。
フロー例：
- 毎時00分にスケジュールトリガー発火
- 在庫管理システムのAPIから商品データを取得
- WebflowのCMS APIで既存アイテムを更新（価格、在庫状況）
- 新商品があればアイテムを新規作成してパブリッシュ
例3：AIを使ったコンテンツ自動生成
キーワードリストからAIで記事を自動生成し、Webflow CMSへ投稿するSEO自動化パイプラインも構築可能です。
フロー例：
- キーワードリスト（スプレッドシートなど）から未処理のキーワードを取得
- OpenAI APIで記事を生成
- 生成した記事をWebflow CMS APIで投稿
- Slackに完了通知を送信
この種の自動化では、コンテンツの品質担保のために「draft状態で投稿してレビュー後に公開する」フローにすることを推奨します。
5-4.APIレート制限への対応
Webflow APIには以下のレート制限があります：
- Standard plan以上：60リクエスト/分
- Enterprise：交渉により拡張可能
大量データの処理時は、リクエスト間に適切なウェイトを設けるか、バルク操作APIを活用することで制限に引っかからないようにします。
6.CMSの運用Tips
6-1.エディター権限の設定
WebflowにはCMS Editorという機能があり、デザインにアクセスさせずにコンテンツ編集だけを許可できます。
CMS Editorは以下の方法でアクセスできます：
- サイトURL末尾に
?editを付けてアクセス - ダッシュボードのEditor招待機能からアクセス
権限設定のポイント：
- コンテンツ担当者にはEditor権限のみ付与し、Design権限を与えない
- 特定のコレクションのみ編集可能にすることはできないため、重要なコレクションは誤操作防止の仕組みを検討する
- EditorからはCMSの追加・編集・削除ができますが、Designerへのアクセスはできません
6-2.下書きワークフローの設計
CMSアイテムには「Draft」と「Published」の状態があります。
おすすめの運用フロー：
- ライターがEditorで記事を作成（Draft状態）
- 編集担当がEditorでレビュー・修正
- 承認後にPublishedに変更
- デザイナーがDesignerからパブリッシュ実行
ステージング環境（Webflow Stagingドメイン）を活用することで、本番公開前のプレビューが可能です。Stagingドメインではドラフト記事も確認できます。
6-3.バックアップの考え方
WebflowにはWordPressのような一括バックアップ機能はありません。データ保護のために以下の対策を検討してください。
CMSデータのバックアップ CMS APIを使って定期的にすべてのコレクションデータをJSON形式でエクスポートするスクリプトを作成し、S3やGoogleドライブに保存するパイプラインを構築するのが有効です。
デザインのバックアップ WebflowはDesignerの変更履歴を保持しています（プランによって保持期間が異なります）。重要な変更前には「Backup Site」機能でスナップショットを作成しておくと安心です。
エクスポート機能の活用 Pro以上のプランでは、HTML/CSS/JSとしてサイトをエクスポートできます。ただしCMSデータは含まれないため、あくまでデザインのバックアップとして位置づけます。
6-4.パフォーマンス最適化
CMSを使ったサイトのパフォーマンス改善でよく効果があるのは以下の点です：
- 画像最適化：Webflowは画像の自動最適化を行いますが、アップロード前に適切なサイズにリサイズしておくことで読み込み速度が改善します
- コレクションリストの件数制限：コレクションリストのlimitは必要最小限に設定する。不要に多くのアイテムを読み込まない
- Lazyload設定：スクロールしないと見えない画像にはLazyloadを設定する
7.CMS設計の失敗パターンと回避法
7-1.コレクション数の上限
Webflowのプランによってコレクション数に上限があります。
- Basic：CMSなし
- CMS plan：20コレクション
- Business plan：40コレクション
- Enterprise：無制限
プロジェクト開始前に「このサイトで何種類のコンテンツを管理するか」を洗い出し、プランを確認してください。コレクションを分けすぎると上限に達することがあります。
よくある失敗：「著者」「タグ」「カテゴリ」「関連キーワード」「FAQ」「事例」「お知らせ」「スタッフ」「パートナー」「商品」「商品カテゴリ」「商品タグ」と、細かくコレクションを作りすぎて上限超過。
回避策：似た構造のコンテンツは一つのコレクションにまとめ、Optionフィールドで種別を管理する方法を検討する。
7-2.ネストの制限を無視した設計
前述の通り、コレクションリスト内のネストは1段階のみです。
よくある失敗：「記事 → カテゴリ → 親カテゴリ → 親親カテゴリ」のような3段階以上の階層を設計してしまう。
回避策：
- カテゴリの階層は2段階（親カテゴリ・子カテゴリ）までに留める
- 「記事カテゴリ」コレクションに「Parent Category」のセルフリファレンスを持たせ、テンプレートページのCurrent Pageから1段階でアクセスできる構造にする
- どうしても深い階層が必要な場合は、カスタムコードでCMS APIを呼び出してフロントで実装する
7-3.CMSアイテム数の見積もり不足
プランによってCMSアイテム数の上限もあります。
- CMS plan：2,000アイテム
- Business plan：10,000アイテム
- Enterprise：無制限
ECサイトや大規模なブログでは、商品数・記事数・カテゴリ数・タグ数の合計が予想以上に増えることがあります。事前に想定最大件数を計算してプランを選択してください。
7-4.フィールドの過剰設計
「将来使うかも」と多くのフィールドを作ってしまい、CMS編集画面が使いにくくなるケースがあります。
回避策：使うことが確定しているフィールドのみ作成する。フィールドはいつでも追加できますが、使わないフィールドが多いとEditorが混乱します。コメントやヘルプテキスト機能を活用して各フィールドの用途を明記しておくことも重要です。
7-5.Slugの重複・変更問題
CMSアイテムのSlugはURLに直結します。
よくある失敗：
- Slugを変更した後に旧URLがリンクされたまま404になる
- 日本語名のままSlugを設定してエンコードされたURLになる
回避策：
- Slugは公開前に必ず英語・半角・ハイフン区切りで設定する
- 公開後のSlug変更は301リダイレクト設定とセットで行う（WebflowのPage Settingsでリダイレクト設定可能）
7-6.パブリッシュを忘れる運用問題
WebflowはCMSアイテムを保存しても、サイトをパブリッシュしないと変更が本番に反映されません。
よくある失敗：Editorで記事を更新したのにサイトに反映されていないと焦る。
回避策：
- EditorからCMSを更新した場合も、Designerからのパブリッシュが必要なことをチーム全員が理解する
- 頻繁な更新が必要なサイトでは、CMS APIとWebflowのパブリッシュAPIを組み合わせて自動パブリッシュフローを構築することを検討する
8.まとめ
Webflow CMSは、デザインとデータを一体で管理できるビジュアルCMSとして非常に強力なツールです。
コレクション設計を適切に行い、リファレンスフィールドを使いこなすことで、複雑なコンテンツ構造も柔軟に表現できます。また、CMS APIを活用すれば、外部システムとの連携や自動化パイプラインの構築も可能で、コンテンツ運用の効率を大きく上げることができます。
一方で、コレクション数・アイテム数の上限、ネストの制限、パブリッシュフローなど、Webflow特有の制限や設計パターンを理解しておかないと、後から設計を大きく変更しなければならない事態になることもあります。
Webflowでのサイト構築は、設計段階でのコレクション構造の決定が非常に重要です。誤った設計は後から修正しにくく、開発コストが増大します。
Webflow CMSの設計・構築についてお悩みの方は、ぜひf2t.jpにご相談ください。
コレクション設計のレビューから、CMS APIを使った自動化パイプラインの構築、既存サイトのWebflow移行まで、Webflowの実務経験をもとに課題解決のサポートをしています。小規模なご相談でも歓迎しています。
この記事はWebflow CMS v2 APIに基づいて記述しています。UIや仕様は随時更新されるため、最新情報はWebflow公式ドキュメントもあわせてご確認ください。
