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

執筆者：宮崎真一（SEO検定1級・ウェブ解析士）

戦略的ウェブ制作工房「エル・タジェール」代表。
デジタル庁デジタル推進委員。
データ分析に基づくWordPress制作とウェブマーケティング支援を専門とし、これまで150社以上のホームページ制作・改善を手がける。「作って終わり」ではない、成果につながるサイト制作をモットーとしています。葛飾区を拠点に全国の会社様とお取引中。　詳しく見る

企業のデジタルトランスフォーメーションが加速する中、WordPressサイトの開発においても「統一性」と「効率性」を両立したアプローチが求められています。私は戦略的ウェブ制作工房エル・タジェールの代表として、ウェブ解析士・SEO検定1級の資格を活かし、数多くの企業サイトでWordPressデザインシステムを導入してきました。

従来の「作って終わり」のサイト制作から脱却し、theme.jsonを核としたデザインシステム構築により、開発時間を30-50%短縮しながら、ブランド統一性とSEOパフォーマンスを同時に向上させることが可能です。本記事では、WordPress 6.6以降の最新機能を踏まえた実践的なデザインシステム構築手法を、具体的なコード例とともに詳しく解説します。

WordPressデザインシステムの基本概念

デザインシステムが解決する3つの課題

統一性の欠如
従来のWordPress制作では、ページごとに異なるスタイリング手法が混在し、ブランドの一貫性が保てないという課題がありました。特に複数の制作者が関わるプロジェクトでは、フォントサイズ、カラー、余白の設定がばらつき、ユーザー体験の品質低下を招いていました。
開発効率の低下
CSSファイルの肥大化、重複するスタイル定義、ブロックごとの個別カスタマイズにより、開発工数が増大。また、デザイン変更時の影響範囲が把握しづらく、修正作業に多くの時間を要していました。
保守性の問題
サイト運用開始後の更新・修正において、既存コードへの影響を予測できず、意図しないデザイン崩れが発生。クライアントからの修正依頼に対して、迅速な対応が困難な状況が頻発していました。

theme.jsonが革命をもたらした理由

JSONベースの設定管理
WordPress 5.8で導入されたtheme.jsonは、テーマの設定とスタイルを構造化されたJSONファイルで一元管理する仕組みです。これにより、デザイントークン（色、フォント、余白などの設計要素）を体系的に定義し、サイト全体で一貫して適用できるようになりました。
ブロックエディターとの連携
theme.jsonで定義した設定は、ブロックエディターのUIに自動的に反映されます。エンドユーザーは、あらかじめ定義されたデザイン選択肢の中から適切なオプションを選択でき、ブランドガイドラインから逸脱するリスクを大幅に軽減できます。
階層構造による柔軟性
WordPressは以下の優先順位でスタイルを適用します：
- ユーザーカスタマイズ（Site Editor）
- テーマスタイルバリエーション
- theme.json（テーマファイル）
- WordPressデフォルト

この階層構造により、基盤となるデザインシステムを維持しながら、必要に応じてカスタマイズを加えることができます。

従来のテーマ開発との比較

項目	従来のCSSベース開発	theme.jsonベース開発
設定ファイル数	複数のCSSファイルに分散	theme.json一元管理
デザイン変更時間	30-60分（影響範囲調査含む）	5-15分（即座に反映）
品質保証工数	全ページ目視確認必須	自動適用により大幅軽減
クライアント操作性	技術知識必要	直感的なUI操作のみ
保守性	属人的・複雑	体系的・明確

成功するWordPressデザインシステム設計の5ステップ

Step1

ビジネス要件の整理とデザイントークン定義

WordPressデザインシステムの成功は、技術的な実装力よりも「何を作るべきか」を正確に把握することにかかっています。私がこれまで手がけた100以上のプロジェクトで学んだのは、最初の要件整理で80%の成否が決まるという事実です。

theme.jsonは非常に柔軟なツールですが、その柔軟性ゆえに「何でもできる」という錯覚に陥りがちです。しかし、実際のビジネスでは「何をすべきか」「何をすべきでないか」を明確に定義することが重要です。

クライアントヒアリング手法

デザインシステム構築において最も重要なのは、クライアントのブランド戦略とビジネス目標の正確な把握です。私は以下の項目を体系的にヒアリングしています：

ターゲットユーザーの属性と行動パターン
競合他社との差別化ポイント
既存ブランドガイドラインの有無と適用範囲
将来的な事業展開とサイト拡張予定

デザイントークンの体系化

ヒアリング結果をもとに、以下の要素を定義します：

{
  "settings": {
    "custom": {
      "colors": {
        "primary": {
          "50": "#f0f9ff",
          "500": "#3b82f6",
          "900": "#1e3a8a"
        },
        "semantic": {
          "success": "#10b981",
          "warning": "#f59e0b",
          "error": "#ef4444"
        }
      },
      "spacing": {
        "xs": "0.5rem",
        "sm": "1rem",
        "md": "1.5rem",
        "lg": "2rem",
        "xl": "3rem"
      }
    }
  }
}

Step2

theme.jsonによる基盤構築

theme.jsonは、WordPressデザインシステムの「憲法」のような存在です。ここで定義した内容が、サイト全体のデザインルールとなり、すべてのページ、すべてのブロックに適用されます。

従来のCSS主体の開発では、スタイルが複数ファイルに分散し、「どこで何が定義されているか」を把握するのが困難でした。theme.jsonにより、すべてのデザイン決定を一箇所に集約できるようになったのです。

基本構造の設定

theme.jsonファイルは、WordPress公式のJSONスキーマに準拠した構造で記述します：

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "appearanceTools": true,
    "color": {
      "palette": [
        {
          "slug": "primary",
          "color": "#3b82f6",
          "name": "プライマリー"
        },
        {
          "slug": "secondary",
          "color": "#64748b",
          "name": "セカンダリー"
        }
      ],
      "defaultPalette": false,
      "custom": false
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif",
          "slug": "primary",
          "name": "メインフォント"
        }
      ],
      "fontSizes": [
        {
          "slug": "small",
          "size": "0.875rem",
          "name": "小"
        },
        {
          "slug": "medium",
          "size": "1rem",
          "name": "中"
        },
        {
          "slug": "large",
          "size": "1.25rem",
          "name": "大"
        }
      ]
    }
  }
}

Step3

スタイルバリエーションの戦略的活用

スタイルバリエーションは、単なる「見た目の選択肢」ではありません。ブランド戦略を反映した、戦略的なデザインオプションです。

例えば、BtoB企業のサイトでは：

平日の営業時間：信頼感重視のコーポレートデザイン
展示会期間中：注目を集めるクリエイティブデザイン
決算期：成果を強調するダイナミックデザイン

このように、ビジネスシーンに応じてデザインを切り替えることで、より効果的なコミュニケーションが可能になります。

WordPress 6.6以降では、4つのタイプのスタイルバリエーションが利用可能です：

1. カラーバリエーション（Color Variations）

/styles/color/ フォルダに配置し、カラーパレットのみを変更：

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "title": "ダークモード",
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "base",
          "color": "#1f2937",
          "name": "ベース"
        },
        {
          "slug": "contrast",
          "color": "#f9fafb",
          "name": "コントラスト"
        }
      ]
    }
  }
}

2. タイポグラフィバリエーション（Typography Variations）

/styles/typography/ フォルダで、フォントシステムを定義：

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "title": "明朝体セット",
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "'Noto Serif JP', 'Times New Roman', serif",
          "slug": "serif",
          "name": "明朝体"
        }
      ]
    }
  },
  "styles": {
    "elements": {
      "heading": {
        "typography": {
          "fontFamily": "var:preset|font-family|serif",
          "fontWeight": "400"
        }
      }
    }
  }
}

3. テーマバリエーション（Theme/Global Variations）

/styles/theme/ フォルダで、サイト全体の包括的なデザインシステムを変更：

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

{
  "$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"
        }
      }
    }
  }
}

4. ブロックスタイルバリエーション（Block Style Variations）

/styles/block/ フォルダで、特定のブロックや「セクション」に特化したスタイリング：

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

{
  "$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で以下のように表示されます：

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

この4つのスタイルバリエーションを戦略的に活用することで、1つのWordPressテーマから無数のデザインパターンを生成でき、クライアントの多様なニーズに効率的に対応できます。特に大規模サイトやマルチブランドサイトでは、その威力を最大限発揮できるでしょう。

Step4

コンポーネント化による再利用性向上

コンポーネント化は、単にコードを整理するためのテクニックではありません。ブランドの一貫性を技術的に保証する仕組みです。

例えば、「お問い合わせボタン」がサイト内で10箇所使われているとします。従来の開発では、それぞれ微妙にデザインが異なってしまう可能性がありました。コンポーネント化により、すべてのボタンが同じデザインルールに従うことが保証されます。

ブロックスタイルバリエーションの実装

セクション単位でのスタイリングを実現：

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "title": "ヒーローセクション",
  "slug": "hero-section",
  "blockTypes": ["core/group", "core/cover"],
  "styles": {
    "color": {
      "background": "linear-gradient(135deg, var:preset|color|primary 0%, var:preset|color|secondary 100%)",
      "text": "var:preset|color|white"
    },
    "spacing": {
      "padding": {
        "top": "var:preset|spacing|xl",
        "bottom": "var:preset|spacing|xl"
      }
    },
    "elements": {
      "heading": {
        "typography": {
          "fontSize": "clamp(2rem, 5vw, 4rem)",
          "fontWeight": "700"
        }
      }
    }
  }
}

Step5

運用・保守体制の確立

更新ワークフローの確立

デザイン変更要求の受付
theme.jsonでの影響範囲確認
ステージング環境での検証
本番環境への適用
品質確認とフィードバック

クライアント教育体制

Site Editorの操作方法に関する動画マニュアル作成と、定期的なサポートセッションの実施により、クライアント自身での基本的な更新作業を可能にしています。

プロが使うWordPressデザインシステム応用テクニック

CSSとJSONの使い分け戦略

WordPress開発者の実践的な経験則として、「3行以下のCSSはJSONで、それ以上はスタイルシートで」という指針があります。これは、JSONでのCSS記述の制約（シンタックスハイライトの欠如、単一行記述）を考慮した実用的な判断基準です。

JSONでのCSS記述例：

{
  "styles": {
    "css": "&::first-line{\n\tfont-weight: 700;\n\tfont-variant: small-caps;\n}"
  }
}

外部スタイルシートが適切な場合：

複雑なアニメーション
メディアクエリを多用するレスポンシブデザイン
疑似要素を多用する装飾

Figmaとの連携ワークフロー

デザイントークンの同期プロセス

Figmaでデザインシステムを構築
デザイントークンをJSON形式でエクスポート
WordPress VIP Design System Bridgeツールで変換
theme.jsonに統合

この手法により、デザイナーとの協業効率が大幅に向上し、デザインからコードへの変換時間を短縮できます。

大規模サイトでのスケール戦略

マルチサイト環境での共通化

WordPress Multisiteにおいて、共通のデザインシステムを効率的に管理するため、以下の構造を採用しています：

/wp-content/
  /mu-plugins/
    /design-system/
      /theme.json (共通基盤)
      /variations/ (サイト固有バリエーション)

バージョン管理とCI/CD

また、Gitによるバージョン管理と、GitHub Actionsを活用した自動デプロイメントにより、複数環境での一貫性を保証しています。

WordPressデザインシステム構築に役立つツール集

開発環境・ツールチェーン

Local / DevKinsta

ローカル開発環境として、WordPressに特化したツールを推奨。theme.jsonの変更を即座に確認できる環境を構築。

VS Code拡張機能

WordPress Snippets
JSON Schema Validator
Prettier Code Formatter
GitLens

GitHub連携

プルリクエストベースの開発フローにより、theme.jsonの変更履歴を詳細管理。

デザインシステムで実現するSEO最適化

theme.jsonによるパフォーマンス向上

CSS生成の最適化

theme.jsonベースのスタイル生成により、以下のパフォーマンス改善を実現：

不要なCSSの削除：従来比で30-40%のファイルサイズ削減
CSSの読み込み最適化：クリティカルCSSの自動分離
キャッシュ効率の向上：構造化されたCSS出力

Core Web Vitalsへの影響

実測データに基づく改善効果：

Largest Contentful Paint (LCP)：平均0.3秒改善
First Input Delay (FID)：レイアウトシフトの軽減
Cumulative Layout Shift (CLS)：安定したレイアウト構造

構造化データとの連携

theme.jsonで定義したデザイントークンは、構造化データ（JSON-LD）の生成にも活用できます：

function add_organization_schema() {
    $schema = array(
        "@context" => "https://schema.org",
        "@type" => "Organization",
        "name" => get_bloginfo('name'),
        "brand" => array(
            "@type" => "Brand",
            "color" => "var(--wp--preset--color--primary)"
        )
    );

    echo '<script type="application/ld+json">' . json_encode($schema) . '</script>';
}
add_action('wp_head', 'add_organization_schema');

アクセシビリティ向上

カラーコントラストの自動検証

theme.jsonで定義したカラーパレットに対して、WCAG 2.1 AA基準のコントラスト比を自動チェックする仕組みを実装：

{
  "settings": {
    "custom": {
      "accessibility": {
        "colorContrast": {
          "base-contrast": 4.5,
          "base-2-contrast": 3.0
        }
      }
    }
  }
}

WordPressデザインシステムQ&A

Q1: 既存のクラシックテーマサイトにデザインシステムを導入できますか？
A1: はい、段階的な移行が可能です。まずtheme.jsonファイルを追加し、基本的なデザイントークンを定義。その後、ブロックエディターサポートを順次追加していく手法を推奨しています。

Q2: theme.jsonのバージョン管理はどのように行うべきでしょうか？
A2: Gitによるバージョン管理に加え、theme.jsonのversionプロパティを適切に設定。WordPress本体のアップデートに伴う互換性チェックも重要です。

Q3: パフォーマンスへの影響はありますか？
A3: 適切に設定されたtheme.jsonは、むしろパフォーマンス向上に寄与します。不要なCSSの削減と最適化されたスタイル生成により、従来比で読み込み速度が向上します。

Q4: 互換性の問題はありますか？
A4: WordPress 5.8以降であれば基本的な互換性は保証されています。ただし、古いプラグインとの組み合わせでは、個別の検証が必要な場合があります。

Q5: 学習コストについて教えてください
A5: JSONの基本知識とWordPressブロックエディターの理解があれば、1-2週間程度で基本的な実装が可能です。

WordPressデザインシステムで未来のウェブ制作を始めよう

WordPressデザインシステムの導入は、単なる技術的な改善にとどまらず、ウェブ制作プロセス全体の変革をもたらします。theme.jsonを核とした体系的なアプローチにより、開発効率の向上、ブランド統一性の確保、SEOパフォーマンスの最適化を同時に実現できます。

実践への第一歩：

現在のサイトでtheme.jsonファイルを作成
基本的なカラーパレットとタイポグラフィの定義
1つのブロックスタイルバリエーションを実装
Site Editorでの動作確認

ウェブ解析士として、データに基づいた戦略的なウェブ制作をお求めの企業様は、ぜひ戦略的ウェブ制作工房エル・タジェールまでご相談ください。WordPressデザインシステムの導入から運用まで、包括的なサポートを提供いたします。

デジタル時代の競争優位性を確立するため、今こそWordPressデザインシステムの活用を始めてみませんか。

エル・タジェールの実績あるコンテンツマーケティング戦略で、
あなたのビジネスの可能性を最大限に引き出します。

無料相談

現状分析と改善提案

戦略立案

データに基づく最適な戦略

成果実現

継続的な改善で確実な成果

今すぐ無料相談を申し込む

平日08:00-16:00 / お電話・メール・オンライン対応可能

新刊書籍発売中！

売上が伸びる！WordPressの始め方: 中⼩企業‧商店の売上につながるホームページを作るための基礎知識

こんな方に読んでいただきたい

制作会社様：クライアントへの提案力を向上させたい
中小企業・商店の経営者様：自社サイトの効果を最大化したい
マーケティング担当者様：データに基づいた改善手法を学びたい
ウェブ制作初心者様：正しい順序で効率的に学びたい

ご購入はAmazonサイトから