企業のWebサイトを運用する中で、「記事ごとに見出しのサイズが少し違う」「ブランドカラーとは微妙に異なる色が使われている」といった、デザインの揺れに悩まされた経験はないでしょうか。ブロックエディタは非常に自由度が高く便利な反面、複数人で運用したり、日々の更新を重ねたりするうちに、サイト全体の統一感を維持するのが難しくなることがあります。
このような運用上の課題を未然に防ぎ、スムーズな更新体制を築くためには、WordPressのブロックテーマにおける「最初の設計」が非常に重要です。事前にルールを定めておくことで、担当者は迷うことなく、常に一貫した美しいデザインでコンテンツを発信できるようになります。
theme.jsonによるプリセットの設計
デザインの統一と運用効率の向上を両立するための有効な手段が、theme.json を用いた設計です。
theme.json は、ブロックテーマにおけるデザイン設定（色、タイポグラフィ、余白など）を中央管理するためのファイルです。ここでサイトの基本となるルールを「プリセット」として定義しておくことで、エディタの選択肢を適切に制限し、あらかじめ用意されたブランドに沿ったデザインのみを使えるように制御できます。
本記事では、企業のWeb担当者や構築に関わる方向けに、実務で使いやすく、運用が格段に楽になる theme.json の具体的な定義例をご紹介します。
具体的な設定手順や活用方法
ここからは、実際の theme.json に記述するコードとともに、各項目の設計アプローチを紹介します。
レイアウト
ブロックエディタのレイアウトは、通常サイズと幅広サイズの2種類の定義が可能です。個人的に通常に対して幅を広げて作るというサイトに出会わないため、wideSizeを基準のサイズで、1カラムなど幅を狭めた時に使いたいサイズとしてcontentSizeというイメージで定義することが多いかもしれません。（使い勝手は悪くなりそうですが…）
具体的な定義としては、以下のような感じになります。
"layout": {
"contentSize": "1024px",
"wideSize": "1120px"
},色
基本の色として以下を用意することが多いです。どの定義もよく使います。
| 名前 | 役割 | 例：色 |
|---|---|---|
| Primary | ブランドの色 | #2563EB |
| Secondary | ブランドのサブの色（少しトーンを高めたような） | #1E3A8A |
| Accent | アクセントとなる色 | #F59E0B |
| Contrast | メインのテキスト色 | #111111 |
| Neutral Strong | 強めのグレー（補足のテキストなど） | #374151 |
| Neutral Medium | 中くらいのグレー（ボーダーなど） | #9CA3AF |
| Neutral Soft | 薄いグレー（背景など） | #E5E7EB |
| Base Body | 下地となる色（全体の背景など） | #FFFFFF |
| Base Primary | Primaryのトーンを上げて使いやすくした色 | 1F2937 |
具体的な定義としては、以下のような感じになります。
"settings": {
"color": {
"defaultPalette": false,
"palette": [
{ "name": "Body Primary", "slug": "body-primary", "color": "#1F2937" },
{ "name": "Primary", "slug": "primary", "color": "#2563EB" },
{ "name": "Secondary", "slug": "secondary", "color": "#1E3A8A" },
{ "name": "Accent", "slug": "accent", "color": "#F59E0B" },
{ "name": "Contrast", "slug": "contrast", "color": "#333" },
{ "name": "Neutral Strong", "slug": "neutral-strong", "color": "#374151" },
{ "name": "Neutral Medium", "slug": "neutral-medium", "color": "#9CA3AF" },
{ "name": "Neutral Soft", "slug": "neutral-soft", "color": "#E5E7EB" },
{ "name": "Base Body", "slug": "base-body", "color": "#FFFFFF" }
]
}
}その他、色の種類に応じてAccent2やAccent3を増やしたり、役割に応じた色として例えば、Service1とBase Service1のような固有の色を定義したりします。
文字サイズ
Medium（or Base）のような基準となる16pxを定義した上で、上下のサイズをどれくらい定義するかをサイトごとに決めていくようなイメージです。
最低限としては、本文、H1〜H3あたりまでは文字サイズの差で補えるようにしつつ、サイトごとにより大きなサイズを定義したりします。
（この定義でいく場合に個人的には、18pxがとても欲しくなる時があります…）
| 名前 | 役割 | 例：デスクトップ | 例：モバイル |
|---|---|---|---|
| Small | 小さいサイズ | 14px | 14px |
| Medium | 基準となるサイズ | 16px | 16px |
| Large | H3あたり | 20px | 18px |
| X Large | H2あたり | 24px | 20px |
| 2X Large | H1あたり | 32px | 24px |
| 3X Large | さらに大きいサイズ | 40px | 32px |
具体的な定義としては、以下のような感じになります。
"typography": {
"defaultFontSizes": false,
"fluid": {
"maxViewportWidth": "1120px",
"minViewportWidth": "375px"
},
"fontSizes": [
{
"fluid": false,
"name": "Small",
"size": "14px",
"slug": "small"
},
{
"fluid": false,
"name": "Base",
"size": "16px",
"slug": "base"
},
{
"fluid": {
"max": "20px",
"min": "18px"
},
"name": "Large",
"size": "20px",
"slug": "large"
},
{
"fluid": {
"max": "24px",
"min": "20px"
},
"name": "X Large",
"size": "24px",
"slug": "x-large"
},
{
"fluid": {
"max": "32px",
"min": "24px"
},
"name": "2X Large",
"size": "32px",
"slug": "2x-large"
},
{
"fluid": {
"max": "40px",
"min": "32px"
},
"name": "3X Large",
"size": "40px",
"slug": "3x-large"
}
]
},レスポンシブ対応
theme.jsonで定義して多くとclampを使った流体タイポグラフィとして定義できるメリットがあります。大きいサイズはデスクトップとモバイルでどのように変化させるかあらかじめ定義しておきましょう。
流体タイポグラフィとして定義する場合は、どの幅からどの幅を基準にするか、maxViewportWidthとminViewportWidthも定義するようにしましょう。
theme.jsonから抜粋すると以下の部分です。
"typography": {
"fluid": {
"maxViewportWidth": "1120px",
"minViewportWidth": "375px"
},
},Small以下はどうするか
16pxを基準としたときに小さいサイズをどれくらい定義するか悩むかと思いますが、流体タイポグラフィにしないのであればあまり定義しなくても良いのかなと思っています。
というのもブロックエディタからは、固定値での指定が可能です。モバイルもデスクトップも同じサイズで問題ないのであれば固定値の入力でも指定は可能となります。
X、2X、3X…はどこまで作るか
逆に大きいサイズの方は再現なさそうにも思います。この辺りは、サイトで表現したい幅に応じて決めていく感じかもしれません。
サイトによって7X Large、8X Largeあたりまで増やしたりもします。
文字サイズの参考サイト
規則的に文字サイズを定義するにあたって、以下の記事はとても参考になります。文字サイズの決め方で迷ったら読んでみてください。
フォント
基本的には日本語と英語の2種類がベースになるのかなと思います。
| 名前 | 役割 |
|---|---|
| Noto Sans JP | 主に日本語に使うフォント |
| Jost | 主に英語に使うフォント |
具体的な定義としては、以下のような感じになります。
"typography": {
"defaultFontSizes": false,
"fontFamilies": [
{
"fontFamily": "\"Noto Sans JP\", sans-serif",
"name": "Noto Sans JP",
"slug": "noto-sans-jp"
},
{
"fontFamily": "Jost, sans-serif",
"name": "Jost",
"slug": "jost"
}
],
}余白（スペーシング）
名前とデスクトップでのサイズが同じというそのままの名前をつけています（実装者視点だと思いますが…）。ひとまず7つ以下という縛りにすると以下のような形になりました。余白に関してはサイトごとで大きく数が異なってくると思います。
ブロックエディタが単なるエディタではなくレイアウトも構築でいるエディタということで、役割としては大きく2つに分かれています。8pxから48pxが文字や画像の余白を表現する用途、そして、80pxや120pxはセクションなど大きなレイアウトの余白を表現する用途です。
文章の余白の定義と、レイアウトの余白の定義をどれくらい用意しておくか、という考え方で、定義する数を決めていきます。
| 名前 | 役割 | 例：デスクトップ | 例：モバイル |
|---|---|---|---|
| 8 | 文字や画像の余白 | 8px | 8px |
| 16 | 文字や画像の余白 | 16px | 16px |
| 24 | 文字や画像の余白 | 24px | 20px |
| 32 | 文字や画像の余白 | 32px | 24px |
| 48 | 文字や画像の余白 | 48px | 32px |
| 80 | レイアウトの余白 | 80px | 64px |
| 120 | レイアウトの余白 | 120px | 80px |
具体的な定義としては、以下のような感じになります（clampの書き方が間違っていたら教えてください🙇♂️）
"spacing": {
"defaultSpacingSizes": false,
"units": [ "%", "px", "em", "rem", "vh", "vw" ],
"spacingSizes": [
{
"name": "8",
"size": "clamp(6px, calc( 6px + (100vw - 375px) * ( (8 - 6) / (1120 - 375) ) ), 8px)",
"slug": "8"
},
{
"name": "16",
"size": "clamp(14px, calc( 14px + (100vw - 375px) * ( (16 - 14) / (1120 - 375) ) ), 16px)",
"slug": "16"
},
{
"name": "24",
"size": "clamp(20px, calc( 20px + (100vw - 375px) * ( (24 - 20) / (1120 - 375) ) ), 24px)",
"slug": "24"
},
{
"name": "32",
"size": "clamp(24px, calc( 24px + (100vw - 375px) * ( (32 - 24) / (1120 - 375) ) ), 32px)",
"slug": "32"
},
{
"name": "40",
"size": "clamp(32px, calc( 32px + (100vw - 375px) * ( (40 - 32) / (1120 - 375) ) ), 40px)",
"slug": "40"
},
{
"name": "80",
"size": "clamp(40px, calc( 40px + (100vw - 375px) * ( (80 - 40) / (1120 - 375) ) ), 80px)",
"slug": "80"
},
{
"name": "120",
"size": "clamp(80px, calc( 80px + (100vw - 375px) * ( (120 - 80) / (1120 - 375) ) ), 120px)",
"slug": "120"
}
]
},角丸
角丸もよく使うものを定義しておくとブロックエディタからの更新が楽です。
| 名前 | 役割 | 例：値 |
|---|---|---|
| 4 | 文字や画像の余白 | 4px |
| 8 | 文字や画像の余白 | 8px |
| 16 | 文字や画像の余白 | 16px |
| full | 文字や画像の余白 | 9999px |
具体的な定義としては、以下のような感じになります。
"border": {
"radiusSizes": [
{
"name": "4",
"slug": "4",
"size": "4px"
},
{
"name": "8",
"slug": "8",
"size": "8px"
},
{
"name": "16",
"slug": "16",
"size": "16px"
},
{
"name": "full",
"slug": "full",
"size": "calc( infinity * 1px )"
}
]
}影
影はあらかじめ定義していないとブロックエディタから設定ができません。影をつけたい場合はtheme.jsonに定義しておきましょう。
| 名前 | 役割 | 例：値 |
|---|---|---|
| Shadow 1 | 汎用的な影 | 0px 10px 15px 0px rgb(0 0 0 / 10%) |
具体的な定義としては、以下のような感じになります。
"shadow": {
"defaultPresets": false,
"presets": [
{
"name": "Shadow 1",
"shadow": "0px 10px 15px 0px rgb(0 0 0 / 10%)",
"slug": "shadow-1"
}
]
},ベースの定義
色や文字、余白の定義ができたら、サイト全体の下地となるようなベースを定義しておきます。最低限としては、「文字色」「フォント」「ブロック間の余白」「上下左右の余白」かなと思います。
WordPressが出力するCSS変数を使うことで、定義した値を使うことが可能です。
文字色
Contrastの色を当てている例です。
"styles": {
"color": {
"text": "var(--wp--preset--color--contrast)"
},
},フォント
フォントは「Noto Sans JP」、文字サイズは「Medium」、太さは「400」で、行間は「1.5」を指定している例です。
"styles": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--noto-sans-jp)",
"fontSize": "var(--wp--preset--font-size--medium)",
"fontStyle": "normal",
"fontWeight": "400",
"lineHeight": "1.5"
}
},余白
ブロック間の標準の余白は定義した「24」、サイト全体の上限の余白は「なし」にして、左右は「24」を当てています。左右に余白に関しては、スマホの時の左右の余白を基準に考えると決めやすいです。
"styles": {
"spacing": {
"blockGap": "var(--wp--preset--spacing--24)",
"padding": {
"bottom": "0px",
"left": "var(--wp--preset--spacing--24)",
"right": "var(--wp--preset--spacing--24)",
"top": "0px"
}
},
},おわりに
WordPressのブロックテーマ運用において、theme.json は「サイトの品質を守るための見えない土台」です。初期段階で少し時間をかけてこれらのプリセットを丁寧に設計しておくだけで、その後の日々の運用における迷いや修正の手間は劇的に削減されます。
すべてを完璧に設定しようとする必要はありません。まずはご自身の運用サイトでよく使う色や文字サイズを数個定義するところから、実務に取り入れてみてはいかがでしょうか。
