cms-best-practices

CMS のベストプラクティス

Webflow CMS のアーキテクチャ、リレーションシップ、最適化、トラブルシューティングに関する専門的なガイダンスを提供します。

重要な注意事項

すべての操作で、必ず Webflow MCP ツールを使用してください。

• 作業を始める前に、Webflow MCP の webflow_guide_tool を使用してベストプラクティスを取得してください
• Webflow MCP の data_sites_tool でアクション list_sites を指定し、利用可能なサイトを特定してください
• Webflow MCP の data_sites_tool でアクション get_site を指定し、サイトの詳細とプランの上限を取得してください
• Webflow MCP の data_cms_tool でアクション get_collection_list を指定し、既存のコレクションを分析してください
• Webflow MCP の data_cms_tool でアクション get_collection_details を指定し、コレクションのスキーマを確認してください
• Webflow MCP の data_cms_tool でアクション list_collection_items を指定し、コンテンツ量を評価してください
• Webflow MCP の data_pages_tool でアクション list_pages を指定し、ページ構造を把握してください
• 個別の API に関する質問には、Webflow MCP の ask_webflow_ai を使用してください
• Webflow の操作には、ほかのツールや方法を使用しないでください
• すべてのツール呼び出しに、必須の context パラメーターを含めてください（第三者視点で15～25語）

手順

フェーズ 1：調査と分析

1. 依頼内容を特定する：ユーザーが次のどれに該当するかを判断します。
   • 新しい CMS 構造の計画
   • 既存のコレクションの最適化
   • パフォーマンスに関する問題のトラブルシューティング
   • リレーションシップの設定
   • アーキテクチャに関するガイダンスの依頼
2. サイト情報を取得する：Webflow MCP の data_sites_tool でアクション list_sites と get_site を指定し、プランの上限を把握します
3. 既存の構造を分析する：Webflow MCP の data_cms_tool でアクション get_collection_list と get_collection_details を指定し、現在の設定を確認します
4. コンテンツ量を評価する：Webflow MCP の data_cms_tool でアクション list_collection_items を指定し、規模を把握します
5. ページを確認する：Webflow MCP の data_pages_tool でアクション list_pages を指定し、コンテンツの表示方法を確認します

フェーズ 2：要件の確認

6. ユースケースを把握する：次の点について確認します。
   • 管理する必要があるコンテンツは何ですか？
   • 誰がコンテンツを更新しますか？
   • コンテンツはどのように表示されますか？
   • どのようなリレーションシップが必要ですか？
   • 想定されるコンテンツ量はどのくらいですか？
7. 制約を特定する：プランの上限、技術的な制約、チームのスキルを考慮します
8. 成功基準を定義する：パフォーマンス目標、編集ワークフロー、スケーラビリティの要件を定めます

フェーズ 3：アーキテクチャの計画

9. コレクション構造を設計する：コレクション、フィールド、リレーションシップを計画します
10. フィールドタイプを選択する：各コンテンツ要素に適したフィールドタイプを選びます
11. リレーションシップを計画する：1対多および多対多の関連付けを設計します
12. タクソノミーを検討する：カテゴリー、タグ、整理構造を決定します
13. 拡張性を考慮する：将来の拡大に備えて設計します（ページネーション、パフォーマンス、上限）
14. 決定事項を文書化する：トレードオフとその理由を説明します

フェーズ 4：推奨事項と検証

15. 推奨事項を作成する：具体的で実行可能なガイダンスを提示します
16. 変更に優先順位を付ける：効果に応じて整理します（すぐに実施できる改善と長期的な改善）
17. トレードオフを説明する：制約と回避策を理解できるよう支援します
18. ベストプラクティスに照らして検証する：Webflow の制限事項やパターンと照合します
19. 代替案を提示する：該当する場合は、複数のアプローチを提案します
20. 実装ロードマップを作成する：段階に分けて整理します

フェーズ 5：実装ガイダンス

21. 手順を順を追って提示する：実装に向けた明確なガイダンスを提供します
22. 支援を申し出る：ほかのスキル（cms-collection-setup、bulk-cms-update）の利用を提案します
23. 構造を文書化する：チームで参照できるドキュメントを作成するよう推奨します
24. テスト方法を提案する：変更を検証する方法を案内します
25. 移行を計画する：リファクタリングの場合は、移行戦略を提示します

コレクションのアーキテクチャ

CMS と静的コンテンツの使い分け

CMS を使用する場合：

• コンテンツを頻繁に更新する（週次以上）
• 類似した項目が複数ある（ブログ投稿、製品、チームメンバー、プロジェクト）
• 技術に詳しくないユーザーがコンテンツを編集する必要がある
• フロントエンドでコンテンツをフィルタリング／並べ替えする必要がある
• 同じコンテンツが複数のページに表示される（著者プロフィール、製品の特徴）
• 項目間でコンテンツの構造が一貫している
• ページを動的に生成する必要がある

静的コンテンツを使用する場合：

• コンテンツがほとんど変わらない（年次以下の更新）
• 独自の単発セクション（概要ページのヒーロー、ホームページの特別な機能）
• 項目ごとに複雑なカスタムレイアウトがあり、パターンに沿わない
• 動的なフィルタリングや検索が不要
• コンテンツが高度にカスタマイズされ、共通の構造を持たない
• コンテンツが変わらず、パフォーマンスが重要
• セクションごとに完全なデザインの柔軟性が必要

ハイブリッドなアプローチ：

• CMS で管理するセクションを含む静的ページ（例：CMS のお客様の声を含む静的なホームページ）
• 最近のコンテンツには CMS を使用し、古いコンテンツのアーカイブには静的コンテンツを使用
• 静的なランディングページと、サブページ用の CMS

フィールドタイプの選択

コンテンツタイプ	推奨フィールド	備考	文字数制限
短いテキスト	プレーンテキスト	タイトル、名前、スラッグ	最大 256 文字
長いテキスト（書式なし）	プレーンテキスト（長文）	説明、抜粋	無制限
書式付きコンテンツ	リッチテキスト	ブログコンテンツ、プロフィール、記事	無制限
単一画像	画像	写真、サムネイル、ヘッダー	画像あたり最大 4MB
複数画像	複数画像	ギャラリー、製品写真	最大 25 枚
ファイルのダウンロード	ファイル	PDF、ドキュメント、ダウンロード	ファイルあたり最大 4MB
はい／いいえの値	スイッチ	注目フラグ、表示切り替え	ブール値
単一選択	オプション	ステータス、タイプ、カテゴリー	選択肢の数は無制限
日付／時刻	日付／時刻	公開日、イベント、締め切り	ISO 8601 形式
1 項目へのリンク	参照	著者 → 投稿、カテゴリー → 投稿	1 項目
複数項目へのリンク	複数参照	投稿 → タグ、投稿 → 関連投稿	複数項目
外部 URL	リンク	ソーシャルリンク、外部リソース	最大 2048 文字
数値	数値	価格、評価、順序、件数	整数または小数
電話番号	電話番号	連絡先の電話番号	E.164 形式
メールアドレス	メール	連絡先のメールアドレス	有効なメールアドレス形式
色の値	色	テーマカラー、アクセントカラー、ブランドカラー	16 進数形式
動画の埋め込み	動画	YouTube、Vimeo の埋め込み	埋め込み URL

フィールドタイプの選択フロー

Need to store:
├── Text?
│   ├── Short (≤256 chars)? → Plain Text
│   ├── Long + Formatting? → Rich Text
│   └── Long + No Formatting? → Plain Text (long)
├── Media?
│   ├── Single image? → Image
│   ├── Multiple images? → Multi-image
│   ├── Video? → Video
│   └── File download? → File
├── Choice/Selection?
│   ├── Yes/No? → Switch
│   ├── One option? → Option
│   └── Link to item? → Reference/Multi-reference
├── Structured data?
│   ├── Number? → Number
│   ├── Date/Time? → Date/Time
│   ├── Phone? → Phone
│   ├── Email? → Email
│   └── URL? → Link
└── Visual?
    └── Color? → Color

リレーションシップのパターン

1 対多（参照フィールド）

例： 投稿 → 著者

Authors Collection:
├── name (Text, required)
├── slug (Text, required)
├── bio (Rich Text)
├── photo (Image)
├── title (Text) - job title
├── email (Email)
└── social-links (Link)

Posts Collection:
├── title (Text, required)
├── slug (Text, required)
├── content (Rich Text)
└── author (Reference → Authors)  ← Each post has ONE author

表示： 投稿ページで author.name、author.photo、author.bio にアクセスします

フィルタリング： 特定の著者で投稿をフィルタリングできます

利点：

• ✅ 著者データを一元管理（1 回更新すれば、すべての場所に反映されます）
• ✅ 一貫性を簡単に維持できます
• ✅ 著者のすべての投稿を表示するプロフィールページを作成できます
• ✅ 効率的です（投稿ごとに参照は 1 つ）

ユースケース：

• ブログ投稿 → 著者
• 製品 → ブランド
• イベント → 会場
• プロジェクト → クライアント
• お客様の声 → 顧客

多対多（複数参照）

例： 投稿 ↔ タグ

Tags Collection:
├── name (Text, required)
├── slug (Text, required)
├── description (Plain Text)
└── color (Color) - optional visual grouping

Posts Collection:
├── title (Text, required)
├── slug (Text, required)
├── content (Rich Text)
└── tags (Multi-Reference → Tags)  ← Each post has MANY tags

表示： 投稿ページでtagsをループし、すべてのタグを表示します

絞り込み： 特定のタグで投稿を絞り込めます

メリット：

• ✅ 柔軟なコンテンツ整理
• ✅ 関連コンテンツの相互リンク
• ✅ SEO の向上（トピックのクラスタリング）
• ✅ ユーザーナビゲーションの改善

制限事項：

• ⚠️ コレクションごとに複数参照フィールドは最大 5 個です
• ⚠️ コレクションリストでは、一度に 1 つの複数参照値でのみ絞り込めます
• ⚠️ 参照先フィールドの値では並べ替えできません
• ⚠️ 参照ごとに追加のクエリが発生します（パフォーマンスに影響します）

複数タグで絞り込む場合の回避策：

1. 組み合わせたタグを作成します（例：「vegan-gluten-free」）
2. クライアント側の絞り込みには Finsweet CMS Filter を使用します
3. よく使う組み合わせごとに、絞り込み済みのコレクションリストを作成します
4. Webflow API を使用したカスタムコードを使います

ユースケース：

• ブログ投稿 ↔ タグ
• 商品 ↔ 特徴
• プロジェクト ↔ 技術
• レシピ ↔ 材料
• コース ↔ トピック

自己参照（ネストされたコレクション）

例： サブカテゴリを持つカテゴリ

Categories Collection:
├── name (Text, required)
├── slug (Text, required)
├── description (Plain Text)
├── parent (Reference → Categories)  ← Self-reference for hierarchy
└── level (Number) - 1, 2, 3 for display logic

ユースケース：

• サブカテゴリを持つカテゴリ
• サブメニュー項目を持つメニュー項目
• 組織階層
• 商品分類

メリット：

• ✅ 柔軟な階層構造
• ✅ 深さに制限がありません（理論上）
• ✅ 簡単に再編成できます

制限事項：

• ⚠️ Webflow でネストされた階層を表示するには複雑な作業が必要です
• ⚠️ 実用上は最大 2～3 階層を推奨します
• ⚠️ 深いネストにはカスタムロジックが必要です

代替案： シンプルな 1～2 階層の分類には Option フィールドを使用します

双方向の関係

例： 関連する投稿

Posts Collection:
├── title (Text, required)
├── slug (Text, required)
├── content (Rich Text)
└── related-posts (Multi-Reference → Posts)  ← Self-reference to other posts

表示： 投稿ページの下部に関連する投稿を表示します

メリット：

• ✅ ユーザーのエンゲージメントを高めます
• ✅ SEO の向上（内部リンク）
• ✅ 柔軟なコンテンツの関連付け

課題：

• ⚠️ 真の双方向ではありません（A → B を設定しても、B → A が自動的に作成されるわけではありません）
• ⚠️ 必要に応じて、両方向を手動で維持する必要があります
• ⚠️ コンテンツ編集者にとって時間がかかる場合があります

解決策：

1. タグを使用して「タグで関連付ける」ロジックを自動化します
2. 最も重要な関連付けは手動で設定します
3. ハイブリッド方式：手動設定と、タグやカテゴリに基づく自動設定を組み合わせます

例

例 1：新しい CMS 構造の計画

ユーザープロンプト：

I'm building a recipe site. How should I structure the CMS?

ステップ 1：要件の確認

📐 CMS Planning: Recipe Site

Let me ask a few questions to design the best structure:

1. **Content Volume**: How many recipes do you plan to have?
   - Small (≤50): Simple structure
   - Medium (50-200): Moderate organization
   - Large (200+): Advanced taxonomy needed

2. **Recipe Attributes**: What information will each recipe have?
   - Basic: Name, ingredients, instructions, image
   - Advanced: Prep time, cook time, difficulty, nutrition, dietary tags

3. **Organization Needs**: How will users find recipes?
   - By meal type (breakfast, lunch, dinner)
   - By cuisine (Italian, Mexican, Asian)
   - By dietary restrictions (vegan, gluten-free, keto)
   - By cooking method (baking, grilling, slow cooker)
   - By ingredients (chicken, pasta, vegetables)

4. **Author Setup**: Single or multiple authors?
   - Single: You manage all content
   - Multiple: Team of recipe creators

5. **User Engagement**: What interactive features?
   - Comments/reviews
   - Ratings
   - Save favorites
   - Print recipe cards

Based on your answers, I'll design the optimal CMS architecture.

ステップ 2：ユーザーの回答後

📐 Recommended CMS Architecture: Recipe Site

Based on your requirements (Medium volume, Multiple authors, Advanced filtering):

---

## Collections Needed: 4

### 1. Recipes (Main Content)
├── name (Text, required) - "Homemade Pasta Carbonara"
├── slug (Text, required) - "homemade-pasta-carbonara"
├── description (Plain Text, 160 chars) - Brief summary for SEO
├── featured-image (Image) - Hero image for detail page
├── thumbnail-image (Image) - Smaller image for grid cards
├── prep-time (Number, required) - Minutes of prep
├── cook-time (Number, required) - Minutes of cooking
├── total-time (Number) - Auto-calculated or manual
├── servings (Number, required) - Number of servings
├── difficulty (Option: Easy, Medium, Hard)
├── ingredients (Rich Text, required) - Ingredient list with quantities
├── instructions (Rich Text, required) - Step-by-step directions
├── notes (Rich Text) - Cook's notes, tips, substitutions
├── nutrition-info (Plain Text) - Calories, protein, etc.
├── author (Reference → Authors, required)
├── category (Reference → Categories, required) - Primary meal type
├── cuisine (Reference → Cuisines) - Italian, Mexican, etc.
├── dietary-tags (Multi-Reference → Dietary Tags) - Vegan, GF, etc.
├── cooking-methods (Multi-Reference → Methods) - Baking, Grilling, etc.
├── featured (Switch) - Highlight on homepage
├── published-date (Date, required)
└── view-count (Number) - Track popularity

**Total fields:** 22 fields
**Plan required:** CMS plan minimum (20 collections, 2000 items)

### 2. Authors
├── name (Text, required)
├── slug (Text, required)
├── title (Text) - "Head Chef", "Recipe Developer"
├── bio (Rich Text)
├── photo (Image)
├── specialty (Plain Text) - "Italian Cuisine", "Baking"
├── social-instagram (Link)
├── social-website (Link)
└── email (Email)

**Purpose:** Reusable author information across all recipes

### 3. Categories
├── name (Text, required) - "Breakfast", "Lunch", "Dinner", "Desserts"
├── slug (Text, required)
├── description (Plain Text)
├── image (Image) - Category hero image
├── color (Color) - Brand color for UI
└── sort-order (Number) - Control display order

**Purpose:** Primary meal type classification

**Suggested Categories (8):**
- Breakfast & Brunch
- Appetizers & Snacks
- Lunch
- Dinner & Main Courses
- Side Dishes
- Salads
- Desserts & Sweets
- Drinks & Beverages

### 4. Cuisines
├── name (Text, required) - "Italian", "Mexican", "Asian"
├── slug (Text, required)
├── description (Plain Text)
└── flag-icon (Image) - Optional visual

**Purpose:** Filter by cuisine type

**Suggested Cuisines (12):**
- American, Italian, Mexican, Asian, Mediterranean, French, Indian, Thai,
  Chinese, Japanese, Greek, Middle Eastern

### 5. Dietary Tags
├── name (Text, required) - "Vegan", "Gluten-Free", "Keto"
├── slug (Text, required)
├── description (Plain Text)
├── icon (Image) - Badge icon
└── color (Color) - Badge color

**Purpose:** Multi-select dietary filters

**Suggested Tags (10):**
- Vegetarian, Vegan, Gluten-Free, Dairy-Free, Keto, Paleo, Low-Carb,
  High-Protein, Nut-Free, Pescatarian

### 6. Cooking Methods
├── name (Text, required) - "Baking", "Grilling", "Slow Cooker"
├── slug (Text, required)
└── description (Plain Text)

**Purpose:** Filter by cooking technique

**Suggested Methods (8):**
- Baking, Grilling, Slow Cooker, Instant Pot, Stovetop, No-Cook,
  Air Fryer, Sous Vide

---

## Relationship Map

レシピ → 著者（一対多） ↓ レシピ → カテゴリ（一対多） ↓ レシピ → 料理の種類（一対多） ↓ レシピ → 食事制限タグ（多対多） ↓ レシピ → 調理方法（多対多）

**Multi-reference count:** 2 fields (within 5-field limit ✅)

---

## Recommended Page Structure

### 1. Homepage (/)
- Hero section with featured recipe
- Category cards (8 categories)
- Latest recipes (collection list, 6 items)
- Popular recipes (sorted by view-count)
- Call-to-action

### 2. Recipes Index (/recipes)
- Collection list showing all recipes
- Filter sidebar:
  - Category (tabs or dropdown)
  - Cuisine (multi-select)
  - Dietary tags (checkboxes)
  - Cooking time (< 30 min, 30-60 min, 60+ min)
  - Difficulty (easy, medium, hard)
- Pagination (12 recipes per page)
- Search bar (Finsweet CMS Filter)

### 3. Recipe Detail (/recipes/[slug])
- Hero image + title
- Prep/cook/total time + servings
- Difficulty badge + dietary badges
- Ingredients list
- Step-by-step instructions
- Author card with bio
- Related recipes (same category or tags)
- Print button

### 4. Category Pages (/category/[slug])
- Category hero image + description
- Filtered recipes by category
- Breadcrumbs: Home > Recipes > [Category]
- Related categories

### 5. Cuisine Pages (/cuisine/[slug])
- Cuisine description + flag
- Filtered recipes by cuisine
- Popular cuisines sidebar

### 6. Author Profiles (/authors/[slug])
- Author photo + bio
- Author's recipes (collection list)
- Social links
- Author stats (total recipes, join date)

### 7. Dietary Filter Pages (/diet/[slug])
- Dietary tag description
- Filtered recipes by tag
- Related dietary tags

---

## SEO Optimization

### Collection Template SEO

レシピ詳細ページ（/recipes/[slug]）：

• SEO タイトル：{{recipe.name}} | Your Site Name
• メタディスクリプション：{{recipe.description}}
• OG 画像：{{recipe.featured-image}}
• スキーマ：Recipe 構造化データ（JSON-LD）

### Structured Data (Recipe Schema)
```json
{
  "@context": "https://schema.org/",
  "@type": "Recipe",
  "name": "{{recipe.name}}",
  "image": "{{recipe.featured-image}}",
  "author": {
    "@type": "Person",
    "name": "{{recipe.author.name}}"
  },
  "datePublished": "{{recipe.published-date}}",
  "description": "{{recipe.description}}",
  "prepTime": "PT{{recipe.prep-time}}M",
  "cookTime": "PT{{recipe.cook-time}}M",
  "totalTime": "PT{{recipe.total-time}}M",
  "recipeYield": "{{recipe.servings}} servings",
  "recipeIngredient": [...],
  "recipeInstructions": [...]
}

メリット：

• Google 検索でリッチスニペットが表示されます
• CTR が向上します（検索結果に画像、評価、調理時間を表示）
• 音声検索に最適化されます
• レシピを見つけやすくなります

---

パフォーマンスの最適化

50～200 件のレシピの場合：

1. ページネーション戦略

Recipes Index page:
- Limit: 12 recipes per page
- Enable Webflow pagination
- "Load More" button for smoother UX

2. 画像の最適化

Thumbnail: 400x300px (grid cards)
Featured: 1200x800px (detail pages)
Format: WebP when possible
Loading: lazy for below-fold images

3. 参照フィールドの戦略

Display only needed fields:
- Author name + photo (don't bind entire author object)
- Category name + color (skip unused fields)
- Each reference = query, so minimize bindings

4. コレクションリストの制限

Homepage: 6 featured recipes
Category pages: 12 recipes per page
Author pages: 12 recipes per page
Related recipes: 3-4 max

---

コンテンツ戦略

フェーズ 1：基盤（1～2 週目）

• 著者を作成します（3～5 名）
• カテゴリを作成します（8 カテゴリ）
• 料理の種類を作成します（10～12 種類）
• 食事制限タグを作成します（8～10 個）
• 調理方法を作成します（6～8 種類）

フェーズ 2：初期コンテンツ（3～4 週目）

• 主要なレシピを 20～30 件追加します
• カテゴリ間で均等に分配します
• すべてのレシピに高品質な写真を用意します
• メタデータをすべて入力します（全フィールドを入力）

フェーズ 3：拡大（継続）

• 毎週 5～10 件のレシピを追加します
• 人気のレシピを監視します（view-count）
• 季節のレシピを更新します
• コンテンツの品質を維持します

---

実装ロードマップ

1 週目：セットアップ

• 6 つすべてのコレクションとフィールドを作成します
• 関係（参照）を定義します
• 必須フィールドを設定します
• 編集者向けのヘルプテキストを追加します

第2週：コンテンツ構造

• サポート用コレクション（Authors、Categories など）にデータを追加する
• テスト用レシピ（3〜5件）をすべてのフィールドに入力して作成する
• データ構造を検証する

第3週：ページ

• ホームページのレイアウトを構築する
• フィルター付きのレシピ一覧ページを作成する
• レシピ詳細テンプレートをデザインする
• カテゴリー／料理ジャンル／著者のページを構築する

第4週：仕上げ

• SEO（タイトル、説明、スキーマ）を実装する
• パンくずリストとナビゲーションを追加する
• 画像を最適化する
• ページネーションとフィルターをテストする

第5週：公開

• 初期レシピを20〜30件追加する
• 最終QAテストを実施する
• サイトを公開する
• パフォーマンスを監視する

---

すぐにできる改善

1. 閲覧数を「人気のレシピ」に活用する

• Number フィールドを追加する：view-count
• コレクションリストを view-count の降順で並べ替える
• ホームページに「最も人気」のセクションを表示する

2. 合計時間を自動計算する

• オプション1：手動（編集者が準備時間と調理時間を入力する）
• オプション2：表示ロジック（UIに準備時間と調理時間の合計を表示する）
• 最適な用途：パフォーマンス（追加の計算が不要）

3. 印刷に適したレシピカード

• 「レシピを印刷」ボタンを追加する
• カスタムコードを使用して印刷用にフォーマットする
• 含めるもの：材料、手順、画像
• 除外するもの：ナビゲーション、広告、コメント

4. 関連レシピのロジック

自動（手動で選定しない場合）：

• 同じカテゴリーでフィルターする
• 共通の食事制限タグでフィルターする
• 公開日（新しい順）で並べ替える
• レシピを3〜4件に制限する

---

実装を始めますか？次のことをお手伝いできます。

1. cms-collection-setup skill を使ってこれらのコレクションを作成する
2. bulk-cms-update skill を使って初期コンテンツを追加する
3. ページ構造を構築する
4. SEOとパフォーマンスを最適化する

どれから始めますか？

### Example 2: Optimizing Existing CMS

**User prompt:**

500件以上あるコレクションリストの読み込みが遅いです。どう最適化すればよいですか？

**Response:**

⚡ CMSパフォーマンスの最適化

500件以上のアイテムに関するパフォーマンスの問題を分析しています...

---

現在の問題の診断

問題： 1ページに500件以上のアイテムを読み込んでいる 影響：

• ページの読み込みが遅い（5〜10秒以上）
• 直帰率が高い
• SEOランキングが低下する
• ユーザーエクスペリエンスが悪化する
• サーバーに負荷がかかる

主な原因：

1. 一度に読み込むアイテムが多すぎる
2. 参照フィールドの検索が多すぎる可能性がある
3. 最適化されていない大きな画像
4. ページネーションや遅延読み込みがない
5. 複雑にネストされたコレクションリスト

---

すぐにできる修正（効果大、手間小）

1. ページネーションを実装する ⚡ 重要

現在： 500件以上のアイテムをすべて読み込んでいる 修正： 1ページあたり12〜20件に制限する

Webflow Designerで：

1. コレクションリストを選択する
2. Settings > Limit items：20
3. 「Paginate items」を有効にする
4. ページネーションのコントロールをスタイル設定する

効果： ページの読み込みが95%高速化 ✅ 実装時間： 5分 手間： 小

2. 画像の読み込みを最適化する 🖼️

現在： フル解像度の画像をすぐに読み込んでいる 修正： 適切な画像サイズと遅延読み込みを使用する

実装：

Thumbnail images in grid:
- Size: 400x300px (not full resolution)
- Format: WebP (smaller file size)
- Loading: lazy (below fold images)

In Collection List Image settings:
- Set custom size: 400x300
- Enable lazy loading
- Use srcset for responsive images

効果： 読み込みが60〜70%高速化 ✅ 実装時間： 15分 手間： 小

3. 表示する参照フィールドを減らす 🔗

現在： すべての参照フィールドをバインドしている 修正： 実際に必要なものだけを表示する

コレクションリストを確認してください：

❌ Bad: Binding entire author object
{
  author.name,
  author.bio,
  author.photo,
  author.email,
  author.social-links
}

✅ Good: Bind only displayed fields
{
  author.name,
  author.photo
}

理由： 参照フィールドごとに個別のデータベースクエリが発生する 効果： 30〜40%高速化 ✅ 実装時間： 10分 手間： 小

---

中期的な対策（効果中、手間中）

4. コレクションレベルでフィルターする

現在： すべてのアイテムを読み込んでから、条件付き表示で非表示にしている 修正： コレクションリストのフィルターを使う

例：

Instead of:
- Load all 500 posts
- Hide if published-date > today (conditional)

Do this:
- Collection List Filter: published-date ≤ today
- Only loads matching items

実装：

1. Collection List Settings
2. フィルターを追加する：[field] [condition] [value]
3. 複数のフィルターを AND/OR で組み合わせる

効果： 50%高速化し、よりすっきりする ✅ 実装時間： 30分 手間： 中

5. 「さらに読み込む」ボタンを実装する

ページネーションの代替案： よりスムーズな UX

選択肢： a) Webflow ネイティブ： 「さらに読み込む」スタイルのページネーション b) Finsweet： CMS Load プラグイン（無料） c) カスタムコード： AJAX による追加読み込み

メリット：

• ユーザーは同じページにとどまります（ページを再読み込みしません）
• モバイル UX が向上します
• スムーズにスクロールできます

効果： UX が向上し、パフォーマンスはページネーションと同等です ✅ 実装時間： 1～2 時間 作業量： 中

6. フィルター済みビューを作成する

代わりに： 巨大な「すべての投稿」ページを 1 つだけ作成する 作成するもの： 複数のフィルター済みページ

例：

/blog → Recent posts (20 items)
/blog/featured → Featured posts only (10 items)
/blog/category/tech → Tech category (filtered)
/blog/archive → Older posts with pagination

メリット：

• 個々のページの読み込みが速くなります
• SEO が向上します（対象を絞ったページ）
• ナビゲーションが簡単になります
• 認知負荷が軽減されます

効果： UX が大幅に向上します ✅ 実装時間： 2～3 時間 作業量： 中

---

長期的な解決策（効果大、作業量大）

7. 古いコンテンツをアーカイブする

戦略： 最近のコンテンツは動的に、アーカイブは静的に表示します

実装：

Recent Content (Dynamic CMS):
- Last 50-100 posts
- Full dynamic filtering
- Fast performance

Older Content (Static):
- Archive pages for older posts
- Yearly/quarterly archives
- Still accessible but static HTML
- Rarely updated

使用する場面：

• アイテム数が 1000 件以上
• 最近のコンテンツと古いコンテンツを明確に分ける
• アーカイブコンテンツへのアクセスがまれ

効果： 規模が大きくなっても高速なパフォーマンスを維持します ✅ 実装時間： 1～2 週間 作業量： 大

8. データを非正規化する

問題： 参照先の検索が多すぎます 解決策： 頻繁にアクセスされるデータをコピーします

例：

Current (Normalized):
Post → Author (reference)
Display: {{post.author.name}}
= 2 queries (post + author)

Denormalized:
Post has author-name field (text)
Display: {{post.author-name}}
= 1 query (just post)

使用する場面：

• 参照データがほとんど変更されない（著者名など）
• パフォーマンスが重要
• 整合性を維持できる

トレードオフ： ⚠️ データが変更された場合、複数の場所で更新する必要があります

効果： 参照の多いページが 40～50％高速化します ✅ 実装時間： 変動します（データ移行が必要） 作業量： 大

9. クライアントサイドのフィルタリングを実装する

使用するもの： Finsweet CMS Filter（無料）

メリット：

• 一度読み込めば、すぐにフィルタリングできます
• ページを再読み込みしません
• 複数のフィルターを同時に適用できます
• 検索機能を利用できます
• UX が向上します

最適な対象：

• アイテム数が 100～500 件
• 高度なフィルタリングが必要なユーザー
• デスクトップを主に利用するユーザー層

制限事項： すべてのアイテムが最初に読み込まれます（ページネーションと併用してください）

効果： フィルタリングが即座に行われます ✅ 実装時間： 2～4 時間 作業量： 中～大

---

最適化の総合チェックリスト

すぐに実行すること（今日）：

• コレクションリストを 20 件に制限する
• ページネーションを有効にする
• 画像サイズを最適化する（サムネイルは 400x300）
• 画像の遅延読み込みを有効にする
• 未使用の参照フィールドのバインディングを削除する

今週中：

• コレクションリストのフィルター（日付、カテゴリ）を追加する
• カテゴリ別のフィルター済みページを作成する
• モバイルでパフォーマンスをテストする
• 必要に応じて「さらに読み込む」を実装する
• サイト内のすべてのコレクションリストを監査する

今月中：

• 高度なフィルタリングに Finsweet CMS Filter の利用を検討する
• アイテム数が 1000 件を超える場合はアーカイブ構造を作成する
• すべての画像を最適化する（WebP 形式）
• 参照関係を見直して最適化する
• パフォーマンス監視を設定する

---

パフォーマンスのベンチマーク

最適化前：

• 読み込み時間：8～12 秒
• 読み込まれるアイテム数：500 件以上
• 画像：フル解像度
• 参照：すべてのフィールド

簡易的な修正後（ページネーション＋画像）：

• 読み込み時間：1～2 秒 ✅
• 読み込まれるアイテム数：20 件
• 画像：最適化されたサムネイル
• 参照：表示するフィールドのみ

最適化完了後：

• 読み込み時間：1 秒未満 ✅
• Lighthouse スコア：90 以上 ✅
• スムーズなページネーション
• 即時のクライアントサイドフィルタリング

---

変更内容のテスト

デプロイ前：

1. ステージング環境でテストする：

   • まずステージングドメインに公開する
   • ページネーションが機能することを確認する
   • 画像品質を確認する
   • すべてのフィルターをテストする

2. パフォーマンスをテストする：

   • Google PageSpeed Insights を使用する
   • モバイル（3G/4G）でテストする
   • Lighthouse スコアを確認する
   • Core Web Vitals を確認する

3. ユーザーテスト：

   • ページ間を移動する
   • 検索／フィルターをテストする
   • モバイルでの利用体験を確認する
   • リンク切れがないことを確認する

4. 公開後に監視する：

   • アナリティクス（直帰率、ページ滞在時間）を確認する
   • エラーログを確認する
   • 読み込み時間を監視する
   • ユーザーからのフィードバックを収集する

---

実装の優先順位（簡易版）

優先度 1（最初に実施）：

1. ページネーション（1 ページあたり 20 項目）
2. 画像を最適化する（サムネイル）
3. 未使用の参照バインディングを削除する

優先度 2（今週中に実施）： 4. 遅延読み込みを追加する 5. フィルタリング済みビューを作成する 6. 「さらに読み込む」オプションを実装する

優先度 3（必要に応じて実施）： 7. Finsweet CMS Filter 8. 古いコンテンツをアーカイブする 9. 重要なデータを非正規化する

---

これらの最適化の実装方法について、詳しく説明しましょうか？次の内容を提供できます。

• Webflow Designer の手順をステップごとに説明
• カスタムコードのスニペット
• テスト用チェックリスト
• パフォーマンス監視の設定

どの最適化から始めたいか教えてください！

### Example 3: Troubleshooting Relationships

**User prompt:**

参照フィールドがページに表示されません。何が問題でしょうか？

**Response:**

🔍 トラブルシューティング：参照フィールドが表示されない

問題の診断と解決をお手伝いします。

---

よくある原因と解決策

問題 1：参照フィールドが要素にバインドされていない

症状： データが表示されるはずの場所に空白がある 診断： 要素は存在しますが、データバインディングがありません

修正方法：

1. 要素（テキスト、画像など）を選択します
2. Settings パネル > Get text/image from [Collection Item] を選択します
3. 参照フィールドを選択します
4. 表示する特定のフィールドを選択します

例：

Element: Text Block
Binding: Blog Post > Author (reference) > Name

Correct path:
Collection Item > author > name

問題 2：参照フィールドに値がない

症状： 一部の項目にはデータが表示され、ほかの項目には表示されない 診断： すべてのコレクション項目に参照が設定されているわけではありません

修正方法：

1. CMS Collections に移動します
2. コレクションを開きます
3. 表示されない項目を確認します
4. 参照フィールドに値が設定されていることを確認します

予防策：

• 重要な参照フィールドは「必須」にします
• デフォルトまたは代替のコンテンツを用意します

問題 3：コレクションのコンテキストが正しくない

症状： ドロップダウンに参照フィールドが表示されない 診断： 要素がコレクションリストのコンテキスト外にあります

修正方法：

❌ Wrong:
<div>
  <text>Author: {{author.name}}</text> ← No collection context
</div>

✅ Correct:
<Collection List - Posts>
  <Collection Item>
    <text>Author: {{author.name}}</text> ← Inside collection context
  </Collection Item>
</Collection List>

問題 4：複数参照の表示エラー

症状： 最初の項目しか表示されない、または何も表示されない 診断： 複数参照にはネストされたコレクションリストが必要です

修正方法：

For Multi-Reference field (Post → Tags):

❌ Wrong: Direct binding
<text>Tags: {{post.tags}}</text>

✅ Correct: Nested collection list
<Collection List - Posts>
  <Collection Item - Post>
    <Collection List - Get Items from Post > Tags>
      <Collection Item - Tag>
        <text>{{tag.name}}</text>
      </Collection Item>
    </Collection List>
  </Collection Item>
</Collection List>

問題 5：参照先の項目が削除されている

症状： 参照フィールドに値を設定しても何も表示されない 診断： 参照先の項目が別のコレクションから削除されました

修正方法：

1. 参照元のコレクションに移動します
2. 参照フィールドの割り当てを確認します
3. 既存の項目に再割り当てします
4. または、削除された項目を再作成します

予防策：

• 参照先の項目を削除する際は注意します
• 削除する前に「X 項目で使用中」を確認します
• 可能であれば削除せず、アーカイブします

問題 6：コレクションが公開されていない

症状： Designer では動作するが、公開サイトでは動作しない 診断： 参照先のコレクション項目が下書きです

修正方法：

1. 参照先のコレクション（例：Authors）に移動します
2. 下書き項目を見つけます
3. 公開します
4. メインサイトを再公開します

確認方法：

CMS Collections > Authors
- Look for "Draft" badge
- Publish all needed items
- Items must be published to display via reference

---

手順に沿った診断

ステップ 1：コレクションの構造を確認する

Check in CMS:
1. Does the reference field exist?
2. Is it configured correctly (Reference or Multi-Reference)?
3. Is it pointing to the right collection?

ステップ 2：データが存在することを確認する

Check collection items:
1. Open an item that should display
2. Check if reference field is populated
3. Verify referenced item exists and is published

ステップ 3：ページの構造を確認する

Check in Designer:
1. Is element inside Collection List?
2. Is Collection List connected to correct collection?
3. Is element binding correct path?

ステップ 4：Designer でテストする

In Designer:
1. Click Collection List
2. Set preview mode: "Item 1"
3. Cycle through items
4. Check if data appears

If it works in Designer but not live:
→ Publish issue (republish site)

---

参照フィールドのテスト

手動テスト用チェックリスト

• 参照を設定したテスト項目を作成する
• Designer でプレビューする
• 要素のバインディングパスを確認する
• 公開して、公開サイトを表示する
• すべての項目が正しく表示されることを確認する
• 参照のない項目を確認する（適切に処理される必要があります）

よくあるバインディングパターン

単一参照（Author）：

Collection List: Posts
Collection Item: Post
Element: Text Block
Binding: Get text from Post > author > name

複数参照（Tags）：

Collection List: Posts
Collection Item: Post
  Nested Collection List: Get items from Post > tags
  Collection Item: Tag
    Element: Text Block
    Binding: Get text from Tag > name

自己参照（Related Posts）：

Collection List: Posts
Collection Item: Post (current)
  Nested Collection List: Get items from Post > related-posts
  Collection Item: Post (related)
    Element: Text Block
    Binding: Get text from Post > title

---

予防のヒント

ベストプラクティス：

1. 重要な参照を必須にする

   • 必須：作者、カテゴリー
   • 任意：タグ、関連アイテム

2. デフォルトのコンテンツを用意する

   • 参照が空の場合は「未分類」と表示します
   • 任意の参照には条件付き表示を使用します

3. データが不完全な状態でテストする

   • 参照が欠けているテストアイテムを作成します
   • 適切なフォールバックが行われることを確認します

4. 参照構造を文書化する

   • コンテンツ編集者向けのガイドを作成します
   • 必須フィールドを説明します
   • 参照の割り当て方法を示します

5. わかりやすいフィールド名を使用する

   • ❌ 「ref-1」、「link」
   • ✅ 「author」、「primary-category」、「related-posts」

---

症状別の簡単な修正方法

症状	最も考えられる原因	簡単な修正方法
何も表示されない	バインドされていない	要素を参照フィールドにバインドします
一部のアイテムが空になる	参照が割り当てられていない	CMS で参照を割り当てます
デザイナーでは動作するが、公開ページでは動作しない	アイテムが公開されていない	参照先のコレクションアイテムを公開します
最初のタグだけが表示される	複数参照にテキストバインディングを使用している	入れ子になったコレクションリストを使用します
無関係なデータが表示される	コレクションコンテキストが間違っている	コレクションリストの入れ子を確認します
削除後に動作しなくなる	参照先のアイテムが削除された	アイテムを再割り当てするか、再作成します

---

特定の設定を確認して、正確な問題を診断しましょうか？以下のことができます。

• コレクション構造の確認
• 参照フィールド設定の確認
• ページレイアウトの分析
• データバインディングのテスト
• 個別のトラブルシューティング

確認してほしい内容をお知らせください。

## Guidelines

### Phase 1: Discovery Best Practices

**Always Start With:**
1. **Identify plan limits** - Use `data_sites_tool` with action `get_site` to check collection/item limits
2. **Analyze existing structure** - List collections before recommending changes
3. **Understand content volume** - Check item counts to assess scale
4. **Review current pages** - See how content is currently displayed
5. **Ask clarifying questions** - Don't assume requirements

**Plan Limits Reference:**

スタータープラン：

• コレクション：1
• コレクションあたりのアイテム数：50
• CMS ページ：50

ベーシックプラン：

• コレクション：2
• アイテム合計：200
• CMS ページ：150

CMS プラン：

• コレクション：20
• アイテム合計：2,000
• CMS ページ：2,000

ビジネスプラン：

• コレクション：40
• アイテム合計：10,000
• CMS ページ：10,000

エンタープライズプラン：

• カスタム上限

**Key Questions to Ask:**
1. "What content needs to be managed?" (identify collections)
2. "Who will update the content?" (determine complexity level)
3. "How will content be displayed?" (affects fields and relationships)
4. "What's the expected content volume?" (plan for scale)
5. "Are there any special requirements?" (unique features, integrations)

### Phase 2: Field Selection Best Practices

**Field Type Selection Matrix:**

**For Text Content:**
- **<50 characters:** Plain Text (single line)
- **50-256 characters:** Plain Text (multi-line)
- **Need formatting:** Rich Text
- **Pure data (no display):** Plain Text (validation enabled)

**For Relationships:**
- **One parent:** Reference (e.g., Post → Author)
- **Multiple parents:** Multi-Reference (e.g., Post → Tags)
- **Self-referencing:** Reference to same collection (e.g., Category → Parent Category)

**For Media:**
- **Hero images:** Image field (1 image)
- **Galleries:** Multi-image field (up to 25 images)
- **Documents:** File field (PDFs, docs)
- **Videos:** Video field (YouTube/Vimeo embeds)

**For Metadata:**
- **Dates:** Date/Time field
- **Numbers:** Number field (prices, counts, ratings)
- **Colors:** Color field (brand colors, theme colors)
- **Switches:** Boolean field (featured, published, active)

**Field Naming Conventions:**

✅ 適切な名前：

• published-date（具体的で、ハイフン区切り）
• author（用途が明確）
• main-image（どの画像かを特定）
• post-summary（用途を説明）

❌ 不適切な名前：

• date1（どの日付かわからない）
• img（どの画像かわからない）
• text（どのようなテキストかわからない）
• field1（意味がない）

**Required vs Optional:**

必須にする項目：

• name（一意の識別子）
• slug（URL の生成に使用）
• 主な関連付け（作者、カテゴリー）
• 公開日（並べ替えに使用）

任意にする項目：

• タグ（常に該当するとは限らない）
• 追加画像
• 高度なメタデータ
• 関連アイテム

### Phase 3: Relationship Design Best Practices

**One-to-Many Guidelines:**

次の場合に使用します：

• 各アイテムに親が1つだけある
• 親のデータを多くのアイテムで再利用する
• データを一元管理したい

例： ✅ 投稿 → 作者（各投稿には作者が1人います） ✅ 製品 → ブランド（各製品にはブランドが1つあります） ✅ イベント → 会場（各イベントには会場が1つあります）

次の場合は使用しないでください： ❌ アイテムに複数の親を設定できる（複数参照を使用します） ❌ 関係が一時的である（オプションフィールドを検討します） ❌ データが単純で、ほとんど変更されない（代わりにオプションフィールドを使用します）

**Many-to-Many Guidelines:**

次の場合に使用します：

• アイテムに複数の関連付けを設定できる
• 関連付けを個別に管理する必要がある
• 柔軟な相互リンクが必要

例： ✅ 投稿 ↔ タグ（投稿には複数のタグが付き、タグは複数の投稿に適用されます） ✅ 製品 ↔ 機能（製品には複数の機能があり、機能は複数の製品に適用されます） ✅ コース ↔ トピック（コースでは複数のトピックを扱い、トピックは複数のコースにまたがります）

ご注意ください： ⚠️ コレクションあたりの複数参照フィールドは最大5つです ⚠️ 一度にフィルタリングできる複数参照は1つだけです ⚠️ 参照先フィールドの値では並べ替えできません ⚠️ パフォーマンスに影響します（クエリが増えます）

**Self-Reference Guidelines:**

次の場合に使用します：

• 階層を構築する（カテゴリー、メニュー構造）
• 同じコレクション内の関連アイテム
• 組織ツリー

実装方法：

• 同じコレクションを参照する Reference フィールドを追加します
• わかりやすい名前を付けます：parent-category、related-posts
• 実用的な表示のため、階層の深さを2～3段階に制限します
• フィルタリングしやすいよう、「level」数値フィールドの追加を検討します 構成例： カテゴリー： ├── Web Development（レベル 1、親：null） │ ├── Frontend（レベル 2、親：Web Development） │ └── Backend（レベル 2、親：Web Development） └── Design（レベル 1、親：null）

### Phase 4: Architecture Patterns

**Common Collection Patterns:**

**1. Blog Architecture:**

最小構成（コレクション 1 件）：

• ブログ記事

標準（コレクション 3 件）：

• ブログ記事
• 著者
• カテゴリー

上級（コレクション 5 件以上）：

• ブログ記事
• 著者
• カテゴリー
• タグ
• トピック／シリーズ

**2. E-commerce Architecture:**

最小構成（コレクション 1 件）：

• 商品

標準（コレクション 4 件）：

• 商品
• カテゴリー
• ブランド
• 特徴／仕様

上級（コレクション 7 件以上）：

• 商品
• カテゴリー
• ブランド
• 特徴
• レビュー
• コレクション（厳選した商品グループ）
• 関連商品

**3. Portfolio Architecture:**

最小構成（コレクション 1 件）：

• プロジェクト

標準（コレクション 3 件）：

• プロジェクト
• クライアント
• サービス／カテゴリー

上級（コレクション 5 件以上）：

• プロジェクト
• クライアント
• サービス
• チームメンバー
• 使用技術

**4. Directory Architecture:**

最小構成（コレクション 1 件）：

• 掲載情報

標準（コレクション 4 件）：

• 掲載情報
• カテゴリー
• 場所
• オーナー／管理者

上級（コレクション 6 件以上）：

• 掲載情報
• カテゴリー
• サブカテゴリー
• 場所（階層構造）
• アメニティ／特徴
• レビュー／評価

### Phase 5: Performance Optimization

**Pagination Strategy:**

コンテンツ量 → ページあたりの項目数：

• 0～50 件：ページネーションは不要
• 50～100 件：ページあたり 20 件
• 100～500 件：ページあたり 15～20 件
• 500～1000 件：ページあたり 12～15 件
• 1000 件以上：ページあたり 10～12 件 ＋ 高度なフィルタリング

**Image Optimization:**

用途 → 推奨サイズ：

• サムネイル（グリッドカード）：400x300px
• メイン画像（ヒーロー）：1200x800px
• ギャラリー画像：800x600px
• 背景画像：1920x1080px

フォーマットの優先順位：

1. WebP（圧縮率が最も高く、最新のブラウザーに対応）
2. JPEG（写真、複雑な画像）
3. PNG（透過が必要な場合、シンプルなグラフィック）
4. SVG（ロゴ、アイコン、シンプルなグラフィック）

**Reference Field Strategy:**

最適化レベル：

レベル 1 - 必要なものだけを表示： ❌ 著者オブジェクト全体をバインド：{{author}} ✅ 特定のフィールドをバインド：{{author.name}}, {{author.photo}}

レベル 2 - 重要なデータを非正規化： 代わりに：投稿 → Author.name（2 回のクエリ） 保存先：Post.author-name（1 回のクエリ） 適用場面：パフォーマンスが重要で、データがほとんど変更されない場合

レベル 3 - 関連コンテンツを遅延読み込み： メインコンテンツをすぐに表示 操作（クリック、スクロール）に応じて関連項目を読み込む 初期ページ読み込みを高速化

**Collection List Optimization:**

ベストプラクティス：

1. コレクションレベルでフィルタリング： ✅ コレクションリストの標準フィルターを使用 ❌ すべての項目を読み込んでから条件分岐で非表示にする

2. 項目数を制限： ✅ 適切な上限（12～20 件）を設定 ❌ 項目数を制限せずに読み込む

3. ネストされたリストを最適化： ✅ ネストされたコレクションリストを 3～5 件に制限 ❌ 上限のないリストを複数ネストする

4. 条件付き読み込みを使用： ✅ ビューポートに応じてコンテンツを読み込む ❌ 最初にすべてを読み込む

5. ページネーションを実装： ✅ Webflow のページネーションまたは「Load More」を有効にする ❌ すべての項目を含む無限スクロール

### Phase 6: SEO Best Practices

**Collection Template SEO:**

必須フィールド：

1. SEO タイトル（項目名から動的に設定）
2. メタディスクリプション（要約／説明から動的に設定）
3. OG 画像（メイン画像から動的に設定）
4. canonical URL（自動）

推奨： 5. Schema.org の構造化データ（JSON-LD） 6. Open Graph タグ（Facebook／LinkedIn） 7. Twitter Card タグ 8. すべての画像の代替テキスト

**Slug Best Practices:**

✅ 良いスラッグ：

• webflow-cms-best-practices
• ultimate-guide-to-seo
• 2026-web-design-trends

❌ 悪いスラッグ：

• Post1
• new-post-copy-3
• untitled-entry

ルール：

• 小文字のみ
• ハイフンを使用（アンダースコアは不可）
• 特殊文字は使用しない
• 内容が分かるものにする（キーワードを含める）
• 最大 50～60 文字

**Structured Data Implementation:**

一般的なタイプ：

ブログ記事（Article スキーマ）：

• headline、author、datePublished、image
• 用途：ブログ記事、ニュース記事

商品（Product スキーマ）：

• name、description、price、availability、image
• 用途：EC 商品

イベント（Event スキーマ）：

• name、startDate、location、organizer
• 用途：イベント、ウェビナー、カンファレンス

レシピ（Recipe スキーマ）：

• name、ingredients、instructions、cookTime
• 用途：レシピサイト、料理ブログ ローカルビジネス（LocalBusiness スキーマ）：
• 名前、住所、電話番号、営業時間
• 用途：ディレクトリ、ビジネスリスティング

### Phase 7: Editorial Workflow

**Content Editor Guidelines:**

**Field Usage Documentation:**

各コレクションのガイドを作成します：

例 — ブログ投稿コレクション：

1. 名前*（必須）

   • 投稿タイトル
   • SEO対策として60文字以内にします
   • 魅力的で内容が伝わる名前にします

2. スラッグ*（必須）

   • 名前から自動生成されます
   • SEO最適化のために編集できます
   • ハイフンを使い、小文字のみを使用します

3. 投稿の概要

   • 簡潔な説明（最大160文字）
   • 用途：グリッドカード、メタディスクリプション、ソーシャルメディアでの共有
   • 読者を引きつける内容にします。ユーザーが最初に目にする項目です

4. アイキャッチ画像*

   • 投稿のヒーロー画像
   • 最小サイズ：1200x800px
   • アクセシビリティのため、必ず代替テキストを追加します

5. 著者*

   • 著者リストから選択します
   • 著者が見つからない場合は、管理者に依頼して「著者」コレクションに作成してもらいます

...（すべてのフィールドを記載します）

**Required Field Checklist:**

公開前： □ 名前を入力済み □ スラッグを設定済み（「untitled」のような汎用的なスラッグは使用しない） □ 概要を記述済み（魅力的な内容で、160文字以内） □ 代替テキスト付きのアイキャッチ画像をアップロード済み □ 著者を割り当て済み □ カテゴリーを選択済み □ 公開日を設定済み □ コンテンツを校正済み □ リンクをテスト済み □ 画像を最適化済み □ SEOを確認済み

**Draft → Published Workflow:**

1. 下書きとして作成します：

   • 必須フィールドを最低限入力します
   • 作業内容を保持するために保存します

2. コンテンツを完成させます：

   • コンテンツをすべて作成またはアップロードします
   • 代替テキスト付きの画像を追加します
   • メタデータを設定します

3. 内部レビューを行います：

   • 校正します
   • 書式を確認します
   • リンクをテストします
   • 参照を確認します

4. 公開します：

   • 公開日を設定します
   • ステータスを下書きから公開に変更します
   • 公開中のサイトで確認します
   • 共有・宣伝します

5. 継続的な管理：

   • 必要に応じて更新します
   • パフォーマンスを監視します
   • 古くなったコンテンツを更新します
   • 関連性がなくなった場合はアーカイブします

### Phase 8: Migration Strategy

**When Refactoring Existing CMS:**

**Assessment Phase:**

1. 現在の構造を監査します：

   • すべてのコレクションを一覧表示します
   • コレクションごとのアイテム数を数えます
   • 関係性をマッピングします
   • 問題を特定します

2. 新しい構造を設計します：

   • 改善点を計画します
   • 新しいコレクションを設計します
   • 新しい関係性を定義します
   • 移行計画を作成します

3. アプローチを検証します：

   • サンプルデータでテストします
   • 関係性が正しく機能することを確認します
   • パフォーマンスを確認します
   • ステークホルダーの承認を得ます

**Migration Approaches:**

**Approach 1: Parallel Build (Safest)**

1. 新旧のコレクションを並行して作成します
2. コンテンツを段階的に移行します
3. 十分にテストします
4. ページを新しいコレクションに切り替えます
5. 古いコレクションをアーカイブします

メリット： ✅ ダウンタイムなし ✅ 簡単にロールバック可能 ✅ 完全に移行する前にテスト可能

デメリット： ❌ 一時的にコンテンツが二重になります ❌ 期間が長くなります ❌ 一時的に両方のシステムを管理する必要があります

**Approach 2: Direct Migration (Faster)**

1. 新しいコレクションを作成します
2. 古いコレクションからデータをエクスポートします
3. データ形式を変換します
4. 新しいコレクションにインポートします
5. 新しいコレクションを使用するようにページを更新します
6. 古いコレクションを削除します

メリット： ✅ 短期間で完了 ✅ 明確な切り替え ✅ コンテンツが重複しない

デメリット： ❌ リスクが高い ❌ ダウンタイムが発生する可能性 ❌ ロールバックが困難

**Approach 3: Hybrid (Recommended)**

1. 新しい構造を作成します
2. バッチ単位（50～100アイテム）で移行します
3. 各バッチをテストします
4. ページを段階的に更新します
5. 問題がないか監視します
6. 移行を完了します

メリット： ✅ リスクと速度のバランスが取れています ✅ 問題を早期に発見できます ✅ 段階的にテストできます

デメリット： ❌ 入念な計画が必要です ❌ 実行がより複雑になります

### Phase 9: Troubleshooting Common Issues

**Issue: "Collection won't save"**

考えられる原因：

1. 必須フィールドが空欄
2. スラッグの競合（重複）
3. スラッグに無効な文字が含まれている
4. 削除済みのアイテムを参照している
5. フィールドの検証に失敗している

診断：

• 赤くハイライトされたフィールドがないか確認します
• スラッグが一意であることを確認します
• オプションフィールドを空欄にしてテストします
• ブラウザーのコンソールでエラーを確認します

修正：

• すべての必須フィールドに入力します
• スラッグを変更して一意にします
• 特殊文字を削除します
• 参照を再割り当てします
• 解決しない場合は、Webflow サポートにお問い合わせください

**Issue: "Reference field not showing options"**

考えられる原因：

1. 参照先のコレクションにアイテムがない
2. 参照先のコレクションのアイテムが公開されていない
3. 参照設定で誤ったコレクションが選択されている
4. ブラウザーのキャッシュの問題 修正方法：
5. まず、参照先のコレクションにアイテムを作成します
6. 参照先のコレクションにあるすべてのアイテムを公開します
7. 参照フィールドの設定を再確認します
8. キャッシュをクリアして更新します

**Issue: "Collection list showing wrong items"**

考えられる原因：

1. 選択したコレクションが間違っています
2. フィルターが正しく設定されていません
3. 件数の上限が低すぎます
4. アイテムが公開されていません
5. 選択した CMS ロケールが間違っています

診断：

• コレクションリストの設定を確認します
• フィルター条件を確認します
• アイテムの公開状態を確認します
• 正しいロケールが選択されていることを確認します

修正方法：

• 正しいコレクションを選択します
• フィルターを調整するか、削除します
• 件数の上限を増やします
• アイテムを公開します
• 正しいロケールに切り替えます

**Issue: "Pagination not working"**

考えられる原因：

1. ページネーションが有効になっていません
2. 件数の上限がアイテムの総数と同じか、それを超えています
3. JavaScript の競合
4. カスタムコードが干渉しています

修正方法：

1. コレクションリストの設定でページネーションを有効にします
2. アイテムの総数より少ない値（例：20）を上限に設定します
3. すべてのカスタムコードを無効にしてテストします
4. コンソールで JavaScript エラーを確認します

**Issue: "Multi-reference only showing first item"**

原因：表示方法が間違っています

修正方法： ネストされたコレクションリストを使用する必要があります： ❌ テキストに直接バインド ✅ Collection List > Get items from [field] > Collection Item > Display

例： <Collection List - Posts> <Collection Item - Post> タグ： <Collection List - Get items from Post > tags> <Collection Item - Tag> {{tag.name}} </Collection Item> </Collection List> </Collection Item> </Collection List>

### Phase 10: Advanced Techniques

**Conditional Display Based on References:**

ユースケース：カテゴリーに応じて異なるレイアウトを表示する

実装：

1. 要素に条件付き表示を追加します
2. 条件：Category = "Video Posts"
3. ビデオプレーヤーのレイアウトを表示します
4. 条件：Category = "Image Posts"
5. イメージギャラリーのレイアウトを表示します

制限事項：一度に確認できる値は1つだけです 代替方法：クラス名を指定するオプションフィールドを使い、クラスを動的に適用します

**Scheduled Publishing:**

実装：

1. 「Published Date」フィールド（Date/Time）を追加します
2. コレクションリストの設定で：
   • フィルターを追加します：Published Date ≤ Current Date
3. アイテムに未来の日付を設定して、公開を予約します

メリット：

• プラグインは不要です
• Webflow の標準機能です
• 設定した日付になると、アイテムが自動的に表示されます

制限事項：アイテムは存在しますが、フィルターで除外されているだけで、実際に未公開になっているわけではありません

**Dynamic Sorting:**

オプション 1：手動で並べ替え

• 「Sort Order」数値フィールドを追加します
• 手動で値を割り当てます：1、2、3、4...
• コレクションリストを Sort Order の昇順で並べ替えます

オプション 2：エンゲージメントに基づく自動並べ替え

• 「View Count」数値フィールドを追加します
• ページビューごとに値を増やします（カスタムコードが必要です）
• 「人気」のリストでは View Count の降順で並べ替えます

オプション 3：日付に基づく並べ替え

• 「最近」のリストでは Published Date の降順で並べ替えます
• 「時系列」のリストでは Created Date で並べ替えます
• 「今月のトップ投稿」ではフィルターと組み合わせます

**Multi-Lingual Content:**

方法 1：言語ごとにコレクションを分ける

• Blog Posts EN
• Blog Posts ES
• Blog Posts FR

メリット：シンプルで、Webflow の標準機能を使えます デメリット：構造を複製する必要があり、保守が難しくなります

方法 2：言語フィールドとフィルターを使用する

• 「Language」オプションフィールド（EN、ES、FR）を追加します
• 言語でコレクションリストをフィルタリングします
• 言語切り替えには URL パラメーターまたは Cookie を使用します

メリット：構造を1つにまとめられ、保守が簡単です デメリット：すべてのコンテンツが1つのコレクションに入ります

方法 3：Webflow Localization（CMS Plan+）

• Webflow の標準ローカライズ機能を使用します
• 追加のロケールを作成します
• ロケールごとに CMS コンテンツを翻訳します

メリット：公式の方法で、SEO に最適です デメリット：CMS Plan+ が必要で、設定が複雑です

**Search Functionality:**

オプション 1：標準機能（制限あり）

• コレクションリストでフィルター入力を使用します
• 基本的なキーワード照合のみです
• あいまい検索や関連度順の並べ替えには対応していません

オプション 2：Finsweet CMS Filter（無料）

• クライアント側で検索とフィルタリングを行います
• 既存のコレクションリストで動作します
• 複数のフィルターを同時に使用できます
• JavaScript が必要です

オプション 3：Algolia／カスタム（高度）

• AI を使ったサーバー側検索です
• 入力ミスへの対応や同義語に対応しています
• 高速で拡張性に優れています
• 統合が必要で、費用がかかります

推奨：

• 100 件未満：標準機能または Finsweet
• 100～1000 件：Finsweet
• 1000 件以上：Algolia を検討します

## Production Checklist

Before launching CMS-driven site:

**Structure:**
- [ ] All collections created with proper field types
- [ ] Required fields set appropriately
- [ ] Help text added for content editors
- [ ] Relationships configured correctly
- [ ] Self-references working properly
- [ ] Validation rules set on text fields

**Content:**
- [ ] Test items created for all collections
- [ ] All reference fields populated in test items
- [ ] Images optimized (size, format, alt text)
- [ ] Slugs follow naming conventions
- [ ] Published dates set on items
- [ ] Draft items clearly marked

**Pages:**
- [ ] Collection lists limited appropriately (12-20 items)
- [ ] Pagination enabled on large lists
- [ ] Filters configured correctly
- [ ] Multi-reference fields use nested collection lists
- [ ] Conditional visibility works as expected
- [ ] Empty states handled gracefully

**SEO:**
- [ ] Collection template has SEO title binding
- [ ] Meta descriptions bound to summary fields
- [ ] OG images bound to featured images
- [ ] Structured data implemented (if applicable)
- [ ] Alt text present on all images
- [ ] Slugs are SEO-friendly

**Performance:**
- [ ] Images lazy loading enabled
- [ ] Only displayed reference fields bound
- [ ] Collection lists use filters (not conditional hiding)
- [ ] Pagination prevents loading too many items
- [ ] Performance tested on mobile
- [ ] Lighthouse score >80

**Documentation:**
- [ ] Field usage guide created for editors
- [ ] Collection structure documented
- [ ] Relationship map created
- [ ] Publishing workflow defined
- [ ] Troubleshooting guide available
- [ ] Contact for technical support identified

**Testing:**
- [ ] All collection lists display correctly
- [ ] Pagination works
- [ ] Filters work
- [ ] Search works (if implemented)
- [ ] Reference fields display data
- [ ] Multi-reference lists show all items
- [ ] Empty states handled
- [ ] Mobile experience tested
- [ ] Cross-browser tested
- [ ] Performance benchmarked

**Launch:**
- [ ] Content editors trained
- [ ] Editorial calendar established
- [ ] Publishing workflow in place
- [ ] Monitoring setup (analytics, errors)
- [ ] Backup strategy defined
- [ ] Support plan in place