WordPressデザインシステム完全ガイド2025｜theme.jsonで実現する効率的なサイト構築術

企業向けテーマバリエーション例

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "title": "コーポレート",
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "primary",
          "color": "#1e40af",
          "name": "コーポレートブルー"
        },
        {
          "slug": "secondary",
          "color": "#64748b",
          "name": "グレー"
        }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "'Roboto', 'Noto Sans JP', sans-serif",
          "slug": "corporate",
          "name": "コーポレートフォント"
        }
      ]
    },
    "spacing": {
      "spacingSizes": [
        {
          "slug": "corporate-sm",
          "size": "1rem",
          "name": "コーポレート小"
        },
        {
          "slug": "corporate-lg",
          "size": "3rem",
          "name": "コーポレート大"
        }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "var:preset|color|base",
      "text": "var:preset|color|contrast"
    },
    "typography": {
      "fontFamily": "var:preset|font-family|corporate"
    },
    "elements": {
      "button": {
        "color": {
          "background": "var:preset|color|primary",
          "text": "var:preset|color|base"
        },
        "border": {
          "radius": "0.25rem"
        },
        "spacing": {
          "padding": {
            "top": "0.75rem",
            "bottom": "0.75rem",
            "left": "1.5rem",
            "right": "1.5rem"
          }
        }
      },
      "heading": {
        "typography": {
          "fontWeight": "600",
          "lineHeight": "1.2"
        }
      }
    },
    "blocks": {
      "core/group": {
        "spacing": {
          "padding": "var:preset|spacing|corporate-lg"
        }
      }
    }
  }
}

クリエイティブテーマバリエーション例

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "title": "クリエイティブ",
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "primary",
          "color": "#ec4899",
          "name": "ピンク"
        },
        {
          "slug": "secondary",
          "color": "#8b5cf6",
          "name": "パープル"
        }
      ],
      "gradients": [
        {
          "slug": "creative-gradient",
          "gradient": "linear-gradient(45deg, #ec4899 0%, #8b5cf6 100%)",
          "name": "クリエイティブグラデーション"
        }
      ]
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "'Poppins', 'Noto Sans JP', sans-serif",
          "slug": "creative",
          "name": "クリエイティブフォント"
        }
      ]
    }
  },
  "styles": {
    "elements": {
      "button": {
        "color": {
          "background": "var:preset|gradient|creative-gradient"
        },
        "border": {
          "radius": "2rem"
        },
        "typography": {
          "fontWeight": "600",
          "textTransform": "uppercase"
        }
      },
      "heading": {
        "typography": {
          "fontFamily": "var:preset|font-family|creative",
          "fontWeight": "700"
        }
      }
    }
  }
}

セクションスタイルの実装

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "title": "ヒーローセクション",
  "slug": "hero-section",
  "blockTypes": ["core/group", "core/cover", "core/columns"],
  "styles": {
    "color": {
      "background": "linear-gradient(135deg, var:preset|color|primary 0%, var:preset|color|secondary 100%)",
      "text": "var:preset|color|white"
    },
    "spacing": {
      "padding": {
        "top": "clamp(3rem, 8vw, 6rem)",
        "bottom": "clamp(3rem, 8vw, 6rem)",
        "left": "var:preset|spacing|md",
        "right": "var:preset|spacing|md"
      }
    },
    "elements": {
      "heading": {
        "typography": {
          "fontSize": "clamp(2rem, 5vw, 4rem)",
          "fontWeight": "700",
          "lineHeight": "1.1"
        },
        "spacing": {
          "margin": {
            "bottom": "var:preset|spacing|lg"
          }
        }
      },
      "paragraph": {
        "typography": {
          "fontSize": "clamp(1.125rem, 2.5vw, 1.375rem)",
          "lineHeight": "1.6"
        }
      },
      "button": {
        "color": {
          "background": "var:preset|color|white",
          "text": "var:preset|color|primary"
        },
        "spacing": {
          "padding": {
            "top": "1rem",
            "bottom": "1rem",
            "left": "2rem",
            "right": "2rem"
          }
        },
        ":hover": {
          "color": {
            "background": "var:preset|color|base-2"
          }
        }
      }
    }
  }
}

CTAセクションスタイル

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "title": "CTA セクション",
  "slug": "cta-section",
  "blockTypes": ["core/group"],
  "styles": {
    "color": {
      "background": "var:preset|color|contrast",
      "text": "var:preset|color|base"
    },
    "spacing": {
      "padding": "var:preset|spacing|xl"
    },
    "border": {
      "top": {
        "width": "4px",
        "style": "solid",
        "color": "var:preset|color|primary"
      }
    },
    "elements": {
      "heading": {
        "typography": {
          "textAlign": "center",
          "fontSize": "var:preset|font-size|xl"
        }
      },
      "paragraph": {
        "typography": {
          "textAlign": "center"
        }
      }
    },
    "blocks": {
      "core/buttons": {
        "spacing": {
          "margin": {
            "top": "var:preset|spacing|lg"
          }
        }
      }
    }
  }
}

テキストスタイルバリエーション

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "title": "キッカー",
  "slug": "text-kicker",
  "blockTypes": ["core/heading", "core/paragraph"],
  "styles": {
    "typography": {
      "fontSize": "var:preset|font-size|xs",
      "fontWeight": "600",
      "textTransform": "uppercase",
      "letterSpacing": "0.05em",
      "lineHeight": "1.2"
    },
    "color": {
      "text": "var:preset|color|primary"
    },
    "spacing": {
      "margin": {
        "bottom": "var:preset|spacing|xs"
      }
    }
  }
}

実装時のディレクトリ構造

/wp-content/themes/your-theme/
├── theme.json (基盤となるデザインシステム)
└── styles/
    ├── theme/ (テーマバリエーション)
    │   ├── corporate.json
    │   ├── creative.json
    │   └── minimal.json
    ├── color/ (カラーバリエーション)
    │   ├── dark.json
    │   ├── light.json
    │   └── high-contrast.json
    ├── typography/ (タイポグラフィバリエーション)
    │   ├── serif.json
    │   ├── sans-serif.json
    │   └── monospace.json
    └── block/ (ブロックスタイルバリエーション)
        ├── hero-section.json
        ├── cta-section.json
        ├── text-kicker.json
        └── card-variations.json

Site Editorでの表示

これらのバリエーションは、Site Editorで以下のように表示されます：

1. スタイル > Browse styles：テーマバリエーション一覧
2. スタイル > Colors > Palettes：カラーバリエーション一覧
3. スタイル > Typography > Presets：タイポグラフィバリエーション一覧
4. 各ブロックの設定：ブロックスタイルバリエーション一覧