Airtable to Webflow

Webflow Blog CMS 接続

Airtableのブログ記事をWebflow CMSへ追加・更新・削除・公開します。

Sync Task

CMS同期を実行できます

Airtableの追加・更新・削除を確認して、Webflowへ安全に反映します。

01Airtableを確認0件
02Webflowを確認0件
03差分を反映0件
1 接続設定

APIキーとIDを.envまたは設定画面で準備

2 差分確認

追加・更新・削除の対象を同期前に確認

3 同期実行

Webflow CMSへ反映し、必要なら公開

Airtable記事0同期元
Webflow記事0同期先
追加予定0新規作成
更新予定0差分あり
削除予定0要確認
Next Action

分類確認から同期まで、上から順番に進めます

分類の既存数を確認し、必要な記事候補を作り、Airtableへ投入してからWebflowへ反映します。

待機中 処理を開始すると、ここに現在の作業が表示されます。
0秒 未実行
Production Audit

制作・修正監査

自分でも読みたい記事にするため、読者価値、分類ごとの不足、アフィリエイト回遊不足を確認します。

目標記事数 ジャンル・カテゴリー・タグ・シリーズごとに、この件数以上を目指します。
5件量産オペレーション 制作パックはpreview、Airtable dry-run、公開前監査の順に確認します。
待機中
本文は判断表、FAQ、失敗回避、独自視点まで入れる Toneサイト編集でスマホ表示、CTA、関連記事導線を見る 本番反映はdry-runログで5件すべてpreview通過後に行う
量産ブリーフ 監査後に不足分類から作成できます。
Toneサイト編集指示 制作ブリーフ後にWebflow側の確認指示を作成できます。
Search Console

検索流入チェック

まず90日・ページ単位で実データを拾い、表示が出ている記事から改善キューへ送ります。

接続状態 未確認
未接続
Research Intake

調査素材化

公式ページ、競合記事、キーワードをまとめて読み取り、Webflow記事に使う論点・比較軸・FAQ・タイトル案へ変換します。

記事化の着地点 タイトルキュー、制作ブリーフ、ChatGPT用V5 JSON指示へそのまま流せます。
未実行
Affiliate Products

記事に入れる商品

商品URLを保存し、記事テーマに合う商品だけ選んでV5指示へ渡します。

選択商品 A8貼り付け抽出、またはチェックした商品だけを記事本文の商品カード候補に入れます。
未接続
JSON Import

生成JSONをAirtableへ移行

CodexまたはChatGPTで作成したV5 JSONを貼り付けてEnterを押すと、品質チェック後にAirtableへ作成・更新します。改行はShift+Enterです。

ChatGPT画面から回収
Classification / Title Queue

記事生成の方向を固める

誰に、何を決めさせる記事かを先に固定してから、タイトルとV5 JSON指示を作ります。

生成方針 分類と記事の答えを固定すると、根幹のある候補を作成できます。
分類入力待ち
タイトルキューから実行 Chrome拡張が有効なChromeでは、この枠に「先頭1件Airtable」「品質優先で一括Airtable」などの実行ボタンが追加されます。in-app browserでは拡張が動かないため、指示コピーを使います。
拡張ボタン待ち
詳細操作
Generated JSON Hold

生成JSON保留箱

生成済みJSONをAirtable投入前に保持します。成功済みJSONはここから再投入できます。

保留JSON管理 ChatGPTまたはCodexで生成したJSONを、投入前の安全な置き場として管理します。
保留0件
Thumbnail Queue

サムネ反映

自動反映は文字崩れを避けるため無料写真ベースでURL化し、Airtable保存、Webflow反映まで実行します。

現在の状態 Record IDとタイトルが一致した画像だけ反映します。
待機中
キュー 0件 生成 待機 保存 待機 同期 待機
プロンプトと読取結果
Affiliate Queue

アフィリエイト候補キュー

実在リンクは自動生成せず、広告表記と収益導線だけをAirtableへ補完します。本物の広告URLがある記事だけリンク欄へ反映します。

候補・設置方針 形式は「Airtable Record ID | タイトル」です。Amazon/楽天/A8などは検索導線として整理します。
待機中
Auto Sync

追加・更新・削除を自動実行

Airtableの変更を定期的に確認し、Webflow CMSへ自動で反映します。

停止中 自動同期は停止しています。
Sync Diff

差分一覧

AirtableとWebflowの差分を確認します。

操作 タイトル キー Airtable Record Webflow Item 差分
差分プレビューを実行してください。
Affiliate Growth OS

月100万へ向けた品質ロードマップ

記事数ではなく、読者が選べる記事、収益導線、更新作業、カレンダー通知を同じ画面で回します。

フェーズ別ロードマップ

制作量だけではなく、検証・修正・収益化を同時に進めます。

旬キーワード通知

今月の候補を記事タイトルへ変換し、制作キューへ渡します。

運用カレンダー

Googleカレンダー等に読み込める予定ファイルを作成します。

今日の反映アクション

Webサイト分析から、制作・修正・同期へ移す作業を決めます。

Airtable

同期元の記事を追加・編集・削除できます。

Webflow CMS

Webflow側の記事を直接追加・編集・削除できます。

Airtable / Webflow 構造

両方のフィールドを読み取り、自動でマッピング候補を作成します。

Airtable fields

Webflow fields

Site Boost

tone専用の導入ダッシュボード

Jetboost風の検索、複数フィルター、ソート、ページネーション、お気に入り、URL状態保存、接続診断をこのサイト専用にまとめます。

公開アプリURL https://tone-site-boost.epdesign2021.workers.dev

接続診断

公開スクリプト、API、Webflow公開HTMLを確認します。緑ならWebflowから読み込める状態です。

未確認

接続確認を実行してください。

自動ローダー 導入済み

記事テンプレートfooterにWebflow CDNのAW Engagement Loaderを適用済みです。

閲覧数 対応済み

Airtableの view-count を更新します。

いいね 対応済み

Airtableの like-total を更新します。同時更新も直列化済みです。

検索・フィルター 拡張済み

site-boost.js とCustom AttributesでCollection Listを絞り込みます。

ソート・ページング 対応済み

新しい順、古い順、タイトル、閲覧数、いいね数、Show Moreに対応します。

Favorites 対応済み

localStorageでお気に入りを保存し、一覧を絞り込めます。

URL保存 対応済み

data-aw-state="url" で検索・フィルター・ソートをURLに保存します。

動的フィルター 追加済み

CMS itemの値からカテゴリー・タグのボタンを自動生成します。

Map / 距離検索 追加済み

緯度・経度を持つCollection Itemを地図風に表示し、半径で絞り込みます。

Auto Archive 追加済み

日付が古い記事や未来記事を自動で一覧から非表示にできます。

Lightbox 追加済み

CMS item内の画像をクリック拡大できます。

Custom Attributesの入れ方

Webflow Designerで対象要素を選択し、Settings → Custom attributes に追加します。下のチップは Name と Value を別々にクリックコピーできます。Valueが「空欄」のものはNameだけ入れればOKです。

00 記事UXテンプレート

読者が開いてすぐ判断軸をつかみ、比較、注意点、CTA、次に読む記事へ進める構成です。Toneサイト編集タブでは、この順番でCMSテンプレートを確認します。

Hero直下 判断できること 結論 / 向いている人 / 確認リンク
本文前半 目的別おすすめ 初心者 / 価格重視 / 失敗回避
比較部分 判断表 向いている人 / 注意点 / 次の行動
導線 補助CTA 価格 / 条件 / 無料体験 / 関連記事 
Webflow記事テンプレートの優先順:
1. Hero直下に「この記事で判断できること」を置く
2. PR表記は小さく、本文導入の邪魔にならない位置に置く
3. TOC前後に「目的別おすすめ」ブロックを置く
4. 比較表はスペック表ではなく「判断表」にする
5. 商品・サービスCTAは本文の不安解消後に補助パネルで出す
6. FAQの直前に「選ばないほうがよい条件」を入れる
7. 関連記事は同ジャンル羅列ではなく「次に迷いやすいテーマ」へつなぐ

01 閲覧数・いいね

記事ページで数字を表示したい場所にText要素、押してもらいたい場所にButton要素を置くだけです。自動ローダー導入済みなので、通常はscriptタグを追加しなくて大丈夫です。

Text要素 閲覧数 data-view-count
Button要素 いいねボタン data-like-button data-default-text="♡ いいね" data-liked-text="♥ いいね済み"
Text要素 いいね数 data-like-count 
<span data-view-count>0</span>
<button data-like-button data-default-text="♡ いいね" data-liked-text="♥ いいね済み">♡ いいね</button>
<span data-like-count>0</span>

02 手動Embed

一覧カードなどに閲覧数といいね数を小さく並べるコードです。テキストは出さず、アイコンと数字だけで見せます。

<span style="display:inline-flex;align-items:center;gap:.8em;line-height:1;background:none;color:currentColor;">
  <span style="display:inline-flex;align-items:center;gap:.35em;background:none;">
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 176 176" aria-hidden="true" focusable="false" style="width:1.1em;height:1.1em;flex:0 0 auto;">
      <g transform="translate(-31.13 -26.54)">
        <rect width="176" height="176" transform="translate(31.13 26.54)" fill="none"/>
        <g transform="translate(10.357 4.5)">
          <path d="M61.943,50.27A20.813,20.813,0,0,0,41.13,71.083v83.253a31.22,31.22,0,0,0,31.22,31.22h62.44A20.813,20.813,0,0,0,155.6,164.743" transform="translate(0 2.533)" fill="none" stroke="#395dd5" stroke-linecap="round" stroke-linejoin="round" stroke-width="12.14" fill-rule="evenodd"/>
          <path d="M153.07,31.99H80.223A20.813,20.813,0,0,0,59.41,52.8v93.66a20.813,20.813,0,0,0,20.813,20.813H153.07a20.813,20.813,0,0,0,20.813-20.813V52.8A20.813,20.813,0,0,0,153.07,31.99Z" transform="translate(2.533)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="12.14" fill-rule="evenodd"/>
        </g>
      </g>
    </svg>
    <span data-view-count>0</span>
  </span>

  <span style="display:inline-flex;align-items:center;gap:.35em;background:none;">
    <button data-like-button data-default-text="♡" data-liked-text="♥" aria-label="いいね" style="display:inline-flex;align-items:center;background:none;border:0;padding:0;color:currentColor;line-height:1;cursor:pointer;font:inherit;">♡</button>
    <span data-like-count>0</span>
  </span>
</span>
<script src="https://tone-site-boost.epdesign2021.workers.dev/view-counter.js" defer></script>
<script src="https://tone-site-boost.epdesign2021.workers.dev/like-button.js" defer></script>

03 Collection List Boost

記事一覧に検索窓、カテゴリー絞り込み、タグ絞り込み、並び替え、ページ送りを足します。基本は「Wrapperに範囲」「Collection Itemに値」「ボタンや入力欄に操作」の3段階です。

Wrapper / Scope 機能範囲 data-aw-scope="articles" data-aw-state="url" data-aw-page-size="12"
Collection Item 対象アイテム data-aw-item data-aw-key="slug" data-aw-title="記事タイトル" data-aw-category="考察映画" data-aw-tags="映画,伏線回収" data-aw-date="2026-06-03" data-aw-views="0" data-aw-likes="0"
Input要素 キーワード検索 data-aw-search
Button / Checkbox カテゴリー・タグ data-aw-filter="category" data-aw-value="考察映画" data-aw-filter="tags" data-aw-value="伏線回収"
Button要素 Select All / Reset data-aw-select-all="category" data-aw-clear
Select要素 並び替え data-aw-sort value="newest" value="oldest" value="title-asc" value="popular" value="liked"
Text要素 件数表示 data-aw-result-count data-aw-total-count
Pagination ページング data-aw-prev data-aw-next data-aw-show-more data-aw-page-current data-aw-page-total
Favorites お気に入り data-aw-favorite-button data-aw-favorite-text="♡ 保存" data-aw-favorited-text="♥ 保存済み" data-aw-favorites-only data-aw-favorite-count
空表示 / 適用中 補助UI data-aw-empty data-aw-active-filters 
<script src="https://tone-site-boost.epdesign2021.workers.dev/site-boost.js" defer></script>

<div data-aw-scope="articles" data-aw-state="url" data-aw-page-size="12">
  <input data-aw-search placeholder="記事を検索">
  <button data-aw-filter="category" data-aw-value="考察映画">考察映画</button>
  <button data-aw-filter="tags" data-aw-value="伏線回収">伏線回収</button>
  <button data-aw-select-all="category">カテゴリー全選択</button>
  <button data-aw-clear>解除</button>

  <select data-aw-sort>
    <option value="newest">新しい順</option>
    <option value="oldest">古い順</option>
    <option value="title-asc">タイトル昇順</option>
    <option value="popular">閲覧数順</option>
    <option value="liked">いいね順</option>
  </select>

  <span data-aw-result-count>0</span> / <span data-aw-total-count>0</span>
  <div data-aw-active-filters></div>
  <div data-aw-empty hidden>該当記事がありません。</div>

  <div data-aw-item data-aw-key="article-slug" data-aw-title="記事タイトル" data-aw-category="考察映画" data-aw-tags="映画,伏線回収" data-aw-date="2026-06-03" data-aw-views="0" data-aw-likes="0">
    <button data-aw-favorite-button data-aw-favorite-text="♡ 保存" data-aw-favorited-text="♥ 保存済み">♡ 保存</button>
    Collection Item
  </div>

  <button data-aw-prev>前へ</button>
  <span data-aw-page-current>1</span> / <span data-aw-page-total>1</span>
  <button data-aw-next>次へ</button>
  <button data-aw-show-more>もっと見る</button>
</div>

04 既存デザインでフィルター

JetboostのStyle、CDN、hidden input、jetboost-* クラスは使いません。今の検索欄、カテゴリリンク、ソートselect、件数表示をSite Boostが自動で拾って動かします。

Page Footer 読み込むJS site-boost.js Jetboost CDNは削除
Input要素 今の検索欄 class="search-input" data-aw-searchは自動付与
Category / Tag Link 今のリンクを絞り込み化 class="filter-category-text" class="filter-tag-text"
Select要素 今の並び替え class="sort-filter" 最新/過去/閲覧/評価/タイトル
Collection Item 記事カード class="article-inner-item" data-aw-itemは自動付与
自動クリーンアップ Jetboost残骸を削除 jetboost-* class削除 記事内style削除 壊れたhidden input削除 
<script src="https://tone-site-boost.epdesign2021.workers.dev/site-boost.js" defer></script>

<!-- Webflow側では以下を削除してください -->
<!--
  https://cdn.jetboost.io/jetboost.js
  https://cdn.jetboost.io/v1.34.0/jetboost-main.js
  jetboost-* class
  input.jetboost-list-item
  記事カード内のstyle Embed
-->

05 動的フィルター生成

カテゴリーやタグのボタンを手作業で増やさず、Collection Itemに入っている値から自動でボタンを作ります。CMS側でカテゴリーが増えても、Webflow側のボタン追加作業を減らせます。

ボタン生成エリア カテゴリー一覧を自動生成 data-aw-dynamic-filter="category" data-aw-all-label="すべて"
Collection Item 値の置き場所 data-aw-category="考察映画" data-aw-tags="映画,伏線回収" 
<div data-aw-scope="articles">
  <div data-aw-dynamic-filter="category" data-aw-all-label="すべて"></div>
  <div data-aw-dynamic-filter="tags"></div>

  <div data-aw-item data-aw-category="考察映画" data-aw-tags="映画,伏線回収">
    Collection Item
  </div>
</div>

06 タグ索引の自動差し込み

タグCMSのCollection Listから名前、リンク、Index Group、Index Sortを読み取り、Behanceのようなアルファベット/かな見出し付き一覧を自動で描画します。

表示したい場所 索引の差し込み先 data-aw-taxonomy-index="tags"
タグ Collection Item タグ1件のルート data-aw-taxonomy-item="tags" data-aw-dedupe-list
タグ名/リンク CMSフィールドを読む場所 data-aw-taxonomy-name data-aw-taxonomy-link
任意 Airtable/Webflowの並び順 data-aw-index-group data-aw-index-sort 
<script src="https://tone-site-boost.epdesign2021.workers.dev/site-boost.js" defer></script>

<div data-aw-taxonomy-index="tags"></div>

<div style="display:none" data-aw-dedupe-list data-aw-sort-list="true">
  <div data-aw-taxonomy-item="tags">
    <a href="/cms-tags/tag-slug" data-aw-taxonomy-link>
      <span data-aw-taxonomy-name>便利ツール</span>
    </a>
    <span data-aw-index-group>ハ</span>
    <span data-aw-index-sort>106-便利ツール</span>
  </div>
</div>

07 Map / 距離検索

店舗や場所系のCMSで使います。Itemに緯度・経度を入れると簡易マップに点を出し、現在地や指定座標から半径◯km以内だけ表示できます。

Collection Item 場所データ data-aw-lat="35.6812" data-aw-lng="139.7671"
Input / Button 距離検索 data-aw-distance-radius data-aw-use-location data-aw-map 
<div data-aw-scope="places" data-aw-page-size="12">
  <input data-aw-distance-lat placeholder="緯度">
  <input data-aw-distance-lng placeholder="経度">
  <input data-aw-distance-radius placeholder="半径km">
  <button data-aw-use-location>現在地を使う</button>
  <button data-aw-distance-clear>距離検索を解除</button>
  <div data-aw-map></div>

  <div data-aw-item data-aw-title="東京駅" data-aw-lat="35.6812" data-aw-lng="139.7671">
    Collection Item
  </div>
</div>

08 Auto Archive

キャンペーン、イベント、古い記事などを、日付ルールで自動的に一覧から非表示にします。Webflow CMSを削除するわけではなく、表示側だけ隠す安全な動きです。

Wrapper / Scope 古い日付を非表示 data-aw-scope="articles" data-aw-archive-before="today"
Wrapper / Scope 未来の日付を非表示 data-aw-archive-after="today"
Collection Item 判定する日付 data-aw-item data-aw-date="2026-06-01" 
<div data-aw-scope="articles" data-aw-archive-before="today">
  <div data-aw-item data-aw-date="2026-06-01">今日より前なら非表示</div>
  <div data-aw-item data-aw-date="2026-06-05">今日以降なら表示</div>
</div>

09 CMS Lightbox

Collection Item内の画像をクリックした時に、ページ遷移せず大きく表示します。ギャラリー系や画像付き記事一覧に向いています。

Wrapper / Scope ライトボックス有効化 data-aw-scope="gallery" data-aw-lightbox
Collection Item 対象アイテム data-aw-item data-aw-title="作品タイトル"
Image / Link クリック拡大対象 src="image-1.jpg" alt="作品タイトル" 
<div data-aw-scope="gallery" data-aw-lightbox>
  <div data-aw-item data-aw-title="作品タイトル">
    <img src="image-1.jpg" alt="作品タイトル">
    <img src="image-2.jpg" alt="別カット">
  </div>
</div>

10 無限スクロール

「もっと見る」ボタンを押さなくても、下までスクロールしたら次の件数を自動で表示します。Webflow Designer上ではなく、PreviewまたはPublished siteで確認します。

Wrapper / Scope 表示件数 data-aw-scope="articles" data-aw-page-size="12"
Collection Item 対象アイテム data-aw-item
一番下のDiv 読み込みトリガー data-aw-infinite-scroll data-aw-infinite-margin="240px" data-aw-for="articles"
Nextボタン Webflow Pagination data-aw-next-page 
<div data-aw-scope="articles" data-aw-page-size="12">
  <div data-aw-item>Collection Item</div>
  <a data-aw-next-page href="/articles?xxxx_page=2">Next</a>
  <div data-aw-infinite-scroll data-aw-for="articles"></div>
</div>

接続情報

.envの値を読み込むか、ここで作業用に上書きできます。

フィールドマッピング

左がAirtable項目名、右がWebflow CMSのfield slugです。

ログ