Webflow 連携
Webflow の CMS コレクションに記事をそのまま公開できます。フィールドマッピングや双方向同期にも対応しています。
RankTurn は、Webflow の CMS コレクションに記事を直接公開します。各記事は CMS アイテムとして作成され、すぐにライブ公開するか、下書きのまま残しておくかを選べます。双方向同期をオンにすれば、Webflow 側で加えた編集を RankTurn 側へ反映することもできます。
すべての連携の概要は 連携・インテグレーション を、双方向の動作については 双方向同期 をご覧ください。
前提条件と API トークンのスコープ
必要なもの:
- 公開済みのサイトがある Webflow アカウント
- そのサイト上の CMS コレクション（Webflow 組み込みの Blog Posts テンプレートはそのまま利用可能）
- 適切なスコープを持つサイト API トークン
トークンの作成手順:
- Webflow にログインし、公開先のサイトを開く
- Site settings → Apps & integrations → API access に移動
- Generate API token をクリック
- トークンをすぐにコピー — 一度しか表示されません
トークンには少なくとも以下のスコープを付与してください:
| スコープ | 権限 | 用途 |
|---|---|---|
| CMS | Read and write | コレクションアイテムの作成・読み取り・更新 |
| Sites | Read | 接続テスト時にサイトの確認とコレクション一覧の取得 |
双方向同期をオンにする場合、RankTurn が同じサイト API トークンを使って Webflow からの更新通知を設定します。そのため、トークンにサイトの通知を管理する権限があることを確認してください。
サイトID・コレクションIDの確認
RankTurn にはサイトIDと、記事を格納するコレクションのIDの両方が必要です。
サイトID
- Webflow ダッシュボードでサイトを選択
- Site settings → General に表示される Site ID を確認、または
- 設定URLから読み取り:
https://webflow.com/dashboard/sites/{site-id}/general
{site-id} 部分をコピーします。
コレクションID
- ダッシュボードでサイトの CMS を開く
- 公開先のコレクション（例: 「Blog Posts」）を選択
- URLから
{collection-id}をコピー:
https://webflow.com/dashboard/sites/{site-id}/cms/{collection-id}
接続時には、サイトのコレクション一覧を取得し、指定したコレクションIDが存在するかを RankTurn が確認します。
フィールドマッピング
RankTurn は記事データを特定の Webflow フィールドスラッグに書き込みます。2 つのフィールドは Webflow ブログの標準デフォルトを使用し、その他はマッピングを設定した場合のみ書き込まれます。常に存在する name と slug を除き、各フィールドは任意です。
| 記事データ | デフォルトフィールドスラッグ | 備考 |
|---|---|---|
| タイトル | name | 常に設定。全コレクションで標準。256 文字に切り詰め。 |
| URL スラッグ | slug | 常に設定。タイトルから生成。 |
| 本文（HTML） | post-body | 異なるスラッグの場合は Content Field Name で上書き。 |
| 要約 / メタディスクリプション | post-summary | 記事の抜粋またはメタディスクリプションを使用し 500 文字に切り詰め。Summary Field Name で上書き。 |
| タグ | デフォルトでは未マッピング | Tags Field Name を設定した場合のみ書き込み。タグはカンマ区切りのプレーンテキストとして結合（Webflow のマルチリファレンスフィールドは非対応）。 |
| 著者 | デフォルトでは未マッピング | Author Field Name を設定した場合のみ書き込み。 |
| 正規URL（canonical） | デフォルトでは未マッピング | Canonical Field Name を設定した場合のみ書き込み。 |
| 構造化データ（Schema.org） | structured-data | 記事の構造化データをこのフィールドに書き込み。Structured Data Field Name で上書き。 |
Webflow でフィールドスラッグを確認する手順:
- コレクションを開き、Settings に移動
- 各フィールド名の下に Field slug が表示される
- そのスラッグを RankTurn の接続フォームの対応する入力欄に入力
組み込みの Blog Posts テンプレートを使用している場合、本文と要約のデフォルトが一致するため、これらの入力欄は空欄のままで構いません。サムネイル / アイキャッチ画像は Webflow 自身のアイキャッチフィールドが管理します。RankTurn は重複を避けるためサムネイルを本文から除去し、インライン画像はレイアウトに収まるようサイズを調整します。
RankTurn での接続
Webflow の接続には有効な有料サブスクリプションが必要です。無料プランでは接続ステップ（および Webflow への公開）が利用できません。詳しくは プランと料金 をご覧ください。
- 設定 → インテグレーション に移動
- Webflow カードを見つけて 接続 をクリック
- フォームを入力:
| フィールド | 値 |
|---|---|
| API Token | 前提条件で取得したサイトトークン |
| Site ID | サイトのID |
| Collection ID | 対象コレクションのID |
| Publish Format | Publish（公開）または Draft（下書き） |
| Content Field Name | 任意 — 空欄で post-body を使用 |
| Summary Field Name | 任意 — 空欄で post-summary を使用 |
| Tags Field Name | 任意 — 空欄でタグをスキップ |
| Author Field Name | 任意 — 空欄で著者をスキップ |
| Canonical Field Name | 任意 — 空欄で正規URLをスキップ |
| Structured Data Field Name | 任意 — 空欄で structured-data を使用 |
- 接続 をクリック。保存前に RankTurn が接続を確認します（サイトのコレクション一覧を取得し、コレクションIDが存在するかをチェック）。
後から変更する場合は、接続済みの Webflow カードの 設定 ボタンをクリックします。編集時に API Token を空欄のままにすると、既存のトークンが維持されます。
トークンは暗号化して安全に保管されます。詳しくは 認証情報とセキュリティ をご覧ください。
双方向同期と新規インポート
接続後、Webflow カードに 双方向同期 トグルが表示されます。
オンにすると、コレクション内のアイテムに何か起きたときに Webflow から即時通知が届くよう、RankTurn が自動で設定します:
- アイテムが作成されたとき
- アイテムが変更されたとき
- アイテムが削除されたとき
- アイテムが非公開になったとき
これらが起きると、Webflow が RankTurn に通知します。RankTurn は常に Webflow から最新のアイテムを取得し、お使いの記事と突き合わせます:
- 作成・変更: 該当する記事を見つけ、タイトル・本文・要約を Webflow に合わせて更新します。
- 削除・非公開: 該当する記事は RankTurn 側で 下書き に戻されます。
- 競合: 最後の同期以降に RankTurn 側で記事を編集していた場合は Webflow 側が優先 され、その内容が同期ログに記録されます。
- 変更なし: 受信内容が RankTurn が最後に送信したものと一致する場合は何も変わりません。これにより、双方が互いを更新し合うループを防ぎます。
双方向同期をオンにすると、新規インポート トグルも表示されます:
- オフ（既定）: 更新は RankTurn にすでに存在する記事にのみ適用されます。Webflow 側で直接作成した新規アイテムは無視されます。
- オン: 対応する記事がない新規 Webflow アイテムは、RankTurn に 下書き 記事として取り込まれます。これらのインポートは記事生成クォータを消費しません（生成ではなくインポートのため）。
双方向同期を再びオフにすると、RankTurn が設定した更新通知は削除されます。
双方向同期には有効な有料サブスクリプションが必要です。詳しくは プランと料金 をご覧ください。
公開時の動作とトラブルシューティング
Webflow を接続すると、記事の公開やスケジュール時に公開先として表示されます。各記事に対して RankTurn は以下を行います:
- タイトルからURLスラッグを生成（タイトルからスラッグを作れない場合、例えばラテン文字を含まないタイトルのときは、自動の代替スラッグを使用）
- 本文からサムネイルを除去し、インライン画像のサイズを調整
- マッピングされたフィールドデータで CMS アイテムを作成
- Publish フォーマットを選んでいる場合は、Webflow でアイテムをライブ公開
- 作成された Webflow アイテムを記事に紐づけ
主なエラー:
| メッセージ | 原因と対処 |
|---|---|
| Collection not found | コレクションIDがこのサイトに存在しません。エラーには利用可能なコレクションが表示されるので、CMS URL から正しいIDをコピーしてください。 |
| Invalid credentials | APIトークンが間違っているか期限切れです。Webflow のサイト設定で再生成し、接続を更新してください。 |
| Failed to create item | マッピングしたフィールドスラッグがコレクションに存在しません。各フィールド名が実際のフィールドスラッグと一致しているか確認してください。 |
| Item created as draft but publish failed | CMS アイテムは作成されましたが、公開が失敗しました（サイトの公開制限が原因のことが多いです）。Webflow Designer から手動で公開してください。 |
アイテムの公開に成功しても、変更がライブサイトに反映されるまでに Webflow 側で完全なサイト公開が必要な場合があります。RankTurn は自動で公開しますが、サイトに公開制限がある場合は Webflow Designer から公開してください。
スケジュール設定や自動公開については 公開とスケジュール をご覧ください。