「Twenty Twenty-Three」は、WordPress 6.1に搭載されているWordPressの新しいデフォルトテーマです。

無駄な要素を取り除き、必要最低限の機能を搭載したテーマで、テンプレートやスタイルバリエーションを作成したり、WordPressの最新バージョンに導入された新機能をテストするのに理想的です。そのミニマルなスタイル、レスポンシブデザイン、動作の軽さから、さまざまなブログやサイトに適していますが、開発やテスト環境として使用するのも良いアイデアです。

Kjell Reigstad氏は、Twenty Twenty-Twoテーマを紹介する中で、デフォルトテーマの展望について以下のように語っています。

theme.json、ブロックテンプレート、ブロックパターンなどの革新的な技術によってテーマ開発が劇的に容易になり、サイトのカスタマイズに新たな可能性が生まれます。WordPressコミュニティもこの技術を活用し、今後数年間でさらに多くのテーマやカスタマイズツールが生まれると予測しています。（英語原文の日本語訳）

これを受け、Channing Ritter氏が以下のように提案しました。

テーマそのものではなく、コミュニティメンバーがデザインしたスタイルバリエーションを中心に考えるのはどうだろう。例えば、Twenty Twenty-Twoをベースにして、多様なスタイルが主役になる「真っ白なキャンバス」のようなテーマを作成できる。（英語原文の日本語訳）

このような経緯で誕生したデフォルトテーマが、「Twenty Twenty-Three」です。WordPressデフォルトテーマのデザイン制作に参加するように呼びかけられたコミュニティメンバーが集い、参加型プロジェクトによって生み出されました。

「Twenty Twenty-Three」のプレビュー
「Twenty Twenty-Three」のプレビュー

テーマ最大の特徴であるスタイルバリエーションをご紹介する前に、まずはTwenty Twenty-Threeの基本機能と使用事例を見ていきましょう。

ページレイアウトとスタイル

先に触れた通り、「Twenty Twenty-Three」は、Twenty Twenty-Twoの機能を必要最低限にした縮小版です。したがって、そのシンプルさと軽量さが特徴です。テンプレート編集、グローバルスタイルのバリエーション、Fluid Typography、ブロックパターンなど、Gutenberg最新のサイト編集機能にも柔軟に対応し、完全に適合可能です。

今回の記事では、装飾的要素が一切ないものの、カスタマイズやテストに打ってつけのシンプルなページを例に挙げて機能をご説明していきます。

以下のスクリーンショットは、アイキャッチ画像有り（右）と無し（左）の投稿例です。

アイキャッチ画像有り無しの投稿プレビュー
アイキャッチ画像有り無しの投稿プレビュー

以下は、トップページとアーカイブページの比較。

トップページとアーカイブページ
トップページとアーカイブページ

Twenty Twenty-Twoをベースにしたミニマルなテーマとは言え、両者を比較すると、Twenty Twenty-Threeにはいくつかの重要な変更点が見られます。

まずは、見出しのサイズが縮小されている点。デフォルトのセリフフォントがシステムのサンセリフフォントに置き換えられています。

Twenty Twenty-Threeの見出しサイズ
Twenty Twenty-Threeの見出しサイズ

また、カラーパレットも異なります。Twenty Twenty-Threeのパレット定義は、theme.jsonの以下のコードで確認できます。

{
	"settings": {
		"appearanceTools": true,
		"color": {
			"palette": [
				{
					"color": "#ffffff",
					"name": "Base",
					"slug": "base"
				},
				{
					"color": "#000000",
					"name": "Contrast",
					"slug": "contrast"
				},
				{
					"color": "#9DFF20",
					"name": "Primary",
					"slug": "primary"
				},
				{
					"color": "#345C00",
					"name": "Secondary",
					"slug": "secondary"
				},
				{
					"color": "#F6F6F6",
					"name": "Tertiary",
					"slug": "tertiary"
				}
			]
		},
	}
}
Twenty Twenty-Threeのデフォルトカラー
Twenty Twenty-Threeのデフォルトカラー

そして最大の特徴は、一連のスタイルバリエーション。Twenty Twenty-Threeには、10種類のグローバルスタイルがあり、それぞれが異なる色、フォントファミリー、フォントサイズの組み合わせになっています。

Twenty Twenty-Threeのグローバルスタイル
Twenty Twenty-Threeのグローバルスタイル

対応するJSONファイルは、styleフォルダ内に格納されています。

ページテンプレート、スタイル、スタイルバリエーションのプレビューは、Figmaでご覧ください。

FigmaでのTwenty Twenty-Threeのスタイルバリエーションプレビュー
FigmaでのTwenty Twenty-Threeのスタイルバリエーションプレビュー

タイポグラフィ

Twenty Twenty-Threeのように極限までシンプルなテーマにおいて、タイポグラフィは、コンテンツの読みやすさ、サイトの外観、ひいてはあらゆるデバイスや画面サイズを想定したブラウジング体験のカギを握っています。

これを考慮し、Twenty Twenty-Threeには新たなフォントファミリーが搭載され、WordPress 6.1で導入されたFluid Typography（フォントサイズがレスポンシブ）をサポートしています。

フォント

シンプルさと多様性を特徴とする、以下のフォントセットがスタイルバリエーションに使用されています。

  • システムフォント：var(--wp--preset--font-family--system-font)
  • IBM Plex Mono：var(--wp--preset--font-family--ibm-plex-mono)
  • Inter：var(--wp--preset--font-family--inter)
  • Source Serif Pro：var(--wp--preset--font-family--source-serif-pro)
  • DM Sans：var(--wp--preset--font-family--dm-sans)

IBM Plex Monoは、IBM Plexフォントセットの一部で、SILオープンフォントライセンス（OFL）の下でリリースされたコーポレートフォント。Adobe FontsとIBMのウェブサイトでプレビューを確認できます。

IBM Plex Monoのプレビュー（ibm.com）
IBM Plex Monoのプレビュー（ibm.com）

Interは、Rasmus Andersson氏がPC画面用に制作した無料のオープンソースフォントファミリー。同氏のウェブサイトやGoogle Fontsでプレビューおよびダウンロード可能です。

Interのプレビュー（rsms.me）
Interのプレビュー（rsms.me）

Source Serif Proは、Adobe Originalsのフォントで、Adobe Fontsのアカウントをお持ちであれば無料で使用できます（Adobe Fontsのライセンスについてはこちらをご覧ください）。

Source Serif Proのプレビュー（fonts.adobe.com）
Source Serif Proのプレビュー（fonts.adobe.com）

DM Sansは、Colophon Foundry氏がGoogleからの依頼を受け、Jonny Pinhorn氏とIndian Type Foundryと共同制作したOFLフォントです。

DM Sansのプレビュー（Google Fonts）
DM Sansのプレビュー（Google Fonts）

Fluid TypographyとFluid Spacing

WordPress 6.1で登場したFluid TypographyとFluid Spacingが導入されています。

Twenty Twenty-Threeは、Fluid Typhographyの実装例を見るにはもってこいのテーマで、お使いのテーマでこの機能を利用する際にテンプレートとして活用できます。

以下は、theme.jsonのsettings.typography.fluidとsettings.typography.fontSizes[]のプロパティを定義するコードです。

"settings": {
	...
	"typography": {
		"fluid": true,
		"fontSizes": [
			{
				"fluid": {
					"min": "0.875rem",
					"max": "1rem"
				},
				"size": "1rem",
				"slug": "small"
			},
			{
				"fluid": {
					"min": "1rem",
					"max": "1.125rem"
				},
				"size": "1.125rem",
				"slug": "medium"
			},
			{
				"size": "1.75rem",
				"slug": "large",
				"fluid": false
			},
			{
				"size": "2.25rem",
				"slug": "x-large",
				"fluid": false
			},
			{
				"size": "10rem",
				"slug": "xx-large",
				"fluid": {
					"min": "4rem",
					"max": "20rem"
				}
			}
		]
	}
}

typography.fluidでFluid Typographyを有効化し、typography.fontSizes[].fluidでフォントサイズの最小値と最大値を設定します。

フォントサイズが柔軟に変動するFluid Typographyに加えて、Fluid Spacingにも対応しています。

WordPress 6.1以前は、余白の値をエディターで設定することはできましたが、余白（padding、margin、gap）の固定値は指定することができず、制限がありました。例えば、異なるテーマ間で同じ余白設定を適用したり、複数のサイト間でコンテンツやブロックパターンをコピー＆ペーストする際、余白の値を維持することができませんでした。

Twenty Twenty-Threeでは、spacing.spacingScaleとspacing.spacingSizes設定を使用して、Fluid Spacingのサポートを宣言することができます（詳しくはこちらをご覧ください）。設定方法は以下の通り。

"settings": {
	"spacing": {
		"spacingScale": {
			"steps": 0
		},
		"spacingSizes": [
			{
				"size": "clamp(1.5rem, 5vw, 2rem)",
				"slug": "30",
				"name": "30"
			},
			{
				"size": "clamp(1.8rem, 1.8rem + ((1vw - 0.48rem) * 2.885), 3rem)",
				"slug": "40",
				"name": "40"
			},
			{
				"size": "clamp(2.5rem, 8vw, 6.5rem)",
				"slug": "50",
				"name": "50"
			},
			{
				"size": "clamp(3.75rem, 10vw, 7rem)",
				"slug": "60",
				"name": "60"
			},
			{
				"size": "clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)",
				"slug": "70",
				"name": "70"
			},
			{
				"size": "clamp(7rem, 14vw, 11rem)",
				"slug": "80",
				"name": "80"
			}
		],
		"units": [
			"%",
			"px",
			"em",
			"rem",
			"vh",
			"vw"
		]
	}
}

Twenty Twenty-Threeでの実際のFluid Typographyの使用例は、以下の動画をご覧ください。

タイポグラフィと余白のプリセットについては、こちらのデザインの仕様をご覧ください。

テンプレートとテンプレートパーツ

WordPress 6.1で導入されているすべての機能とサイト編集機能の変更点が適用されています。

これは特にテンプレートとテンプレートパーツで顕著に見られます。

Twenty Twenty-Threeのテンプレート
Twenty Twenty-Threeのテンプレート

Twenty Twenty-Threeを有効化してサイトエディターを開くと、11種類のテンプレートと4種類のテンプレートパーツが一覧表示されます。

以下は「404」テンプレートです。

404テンプレート
404テンプレート

対応するHTMLファイルは、templatesとpartsフォルダに格納されています。

テンプレートパーツ
テンプレートパーツ

以下は、「コメント」テンプレートパーツの編集モードの表示例です。

コメントテンプレートパーツの編集画面
コメントテンプレートパーツの編集画面

カスタムテンプレートとテンプレートパーツは、theme.jsonで定義されています。

カスタムテンプレート

デフォルトのテンプレートに加え、以下のカスタムテンプレートが利用可能です。

  • 空白
  • ブログ（代替）
  • 404
  • アイキャッチ画像付き
  • カバーブロック付き

このテンプレートは、theme.jsonで以下のように定義されています。

{
	"customTemplates": [
		{
			"name": "blank",
			"postTypes": [
				"page",
				"post"
			],
			"title": "Blank"
		},
		{
			"name": "blog-alternative",
			"postTypes": [
				"page"
			],
			"title": "Blog (Alternative)"
		},
		{
			"name": "404",
			"postTypes": [
				"page"
			],
			"title": "404"
		},
		{
			"name": "with-featured-image",
			"postTypes": [
				"page",
				"post"
			],
			"title": "With Featured Image"
		},
		{
			"name": "with-cover-block",
			"postTypes": [
				"page",
				"post"
			],
			"title": "With Cover Block"
		}
	],
}

テンプレートパーツ

テンプレートパーツは、以下のように定義されています。

{
	"templateParts": [
		{
			"area": "header",
			"name": "header",
			"title": "Header"
		},
		{
			"area": "footer",
			"name": "footer",
			"title": "Footer"
		},
		{
			"area": "uncategorized",
			"name": "comments",
			"title": "Comments"
		},
		{
			"area": "uncategorized",
			"name": "post-meta",
			"title": "Post Meta"
		}
	]
}

グローバルスタイルのバリエーション

前述のとおり、WordPress 6.0以降、複数のスタイルセットをテーマに組み込むことができるようになったことで、ユーザーはテーマを変更することなくスタイルを切り替えることができるようになりました。

この画期的な機能を全面に取り入れたのが、Twenty Twenty-Three。10種類のバリエーションから好きなものを選択することができます。

Twenty Twenty-Threeのグローバルスタイル
Twenty Twenty-Threeのグローバルスタイル

サイトエディターの「スタイル」パネルで管理可能で、以下のような操作を行うことができます。

  • サイト全体のスタイルを切り替え
  • テキスト、リンク、見出し、ボタンの管理
  • 各要素の色の変更
  • メインコンテンツエリアのレイアウトを管理
  • 特定の要素の外観を管理
テキスト、色、レイアウトを管理
テキスト、色、レイアウトを管理

これほど豊富なスタイルを作成したコミュニティの努力は、改めて特筆すべき功績です。Twenty Twenty-Threeプロジェクトのキックオフ後、8カ国にまたがる19名のコミュニティメンバーから、38の提案が集まりました（プロジェクトの全貌はGitHubで）。

この38件のうち、結果として以下10種類のスタイルバリエーションが採用されています。

ピッチ
ピッチ
  • カナリア：単一の文字サイズと狭い列幅が特徴で、要素の角が丸くなる（以下スクリーンショット参照）珍しいborder-radiusプロパティを採用。
カナリア
カナリア
  • エレクトリック：サイト全体のタイポグラフィにボールドカラーを採用。
  • 巡礼：ベースとなるスタイルのダークカラー版。
  • マリーゴールド：シンプルで柔らかいトーンのスタイル。
  • ブロックアウト：画像にデュオトーン効果（2色を組み合わせた手法）を適用。
  • ウィスパー：ページ端のボーダー、ボタンのスタイル、リンクのアンダーラインなど、カスタマイズ要素あり。
  • シャーベット：明るく色鮮やかで個性的な印象を持つスタイル。
シャーベット
シャーベット
  • ぶどう：カラーパレットとフォントの相性の良さが採用の決め手に。
  • ナス：暗いトーンの分裂色の背景が効いた目を引くスタイル。

そしてこのスタイルバリエーションの強みは、フロントエンド開発者の手を借りなくても、スタイルを作成できること。

コーディングの知識をお持ちであれば、styleフォルダにある.jsonファイルを1つ選択して、テンプレートにしてスタイルバリエーションを構築することができます。

そうでなければ、WordPress.orgのプラグインディレクトリで無料でダウンロード可能な公式プラグイン「Create Block Theme」を使用しましょう。

まずはプラグインをインストールして有効化し、スタイルエディターに移動します。ここで色、タイポグラフィ、レイアウトを編集して保存します。

グローバルスタイルパネルでスタイルを変更
グローバルスタイルパネルでスタイルを変更

変更を終えたら、WordPress管理画面の「外観」にカーソルを合わせて、「Create Block Theme」を選択します。

Create Block Themeを選択
Create Block Themeを選択

一番下までスクロールして、最後の項目の「Create a style variation」を選択します。「Variation Name」にスタイル名を入力して「Create theme」をクリック。これで、テーマのstylesフォルダ内に.jsonファイルが新規作成されます。

スタイルバリエーションを作成
スタイルバリエーションを作成

これによってスタイルをさらに柔軟に編集することができ、さらに別のWordPressサイトにエクスポートして使用することも可能です。

Create Block Themeは、WordPressの最新バージョンで利用できるテーマやテンプレートの作成機能をフル活用するための貴重なプラグイン。他にも以下のような操作が可能です。

  • Twenty Twenty-Threeのエクスポート
  • Twenty Twenty-Threeの子テーマを作成
  • Twenty Twenty-Threeの複製
  • Twenty Twenty-Threeの上書き
  • 空白のテーマを作成
  • スタイルバリエーションを作成
作成したスタイルはスタイルパネルに表示される
作成したスタイルはスタイルパネルに表示される

まとめ

WordPressの新デフォルトテーマ「Twenty Twenty-Three」は、一見面白みがなく簡素に見えますが、実は最新のサイト編集機能を最大限に活用することができるテーマです。

編集可能な豊富なテンプレートとテンプレートパーツ、魅力的なウェブサイトを構築するための土台となる10種類のスタイルバリエーション、Fluid Typographyと改善されたテンプレートシステムをはじめとする、WordPress 6.1のすべての新機能に対応しています。

Twenty Twenty-Threeは、サイトの外観と機能の管理をはっきりと差別化したテーマとも言えます。テーマの機能はサイトの外観に影響するものだけに絞られ、機能の実装はプラグインに一任。この観点から、Gutenberg最新のサイト編集機能がすべてサポートされ、サイトの外観のカスタマイズがこれまで以上に容易になっています。

あなたなら、このテーマをどのように利用しますか？テスト環境ですでにお試し済みですか？スタイルバリエーションは作成してみましたか？以下のコメント欄で、ぜひ感想をお聞かせください。

Carlo Daniele Kinsta

Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.