【WordPress】フルサイト編集に対応したブロックテーマの作り方と実案件への活かし方【①準備～ヘッダー・フッター構築まで】|UCHIWA Creative Studio

CONTENTS

そもそもブロックテーマとは？クラシックテーマとの違いとメリット

WordPressでサイトを作る方法は日々進化しています。
その中でも特に注目されているのが、「ブロックテーマ」の存在です。
これは従来の「クラシックテーマ」とは大きく異なる仕組みで、WordPress 5.9以降に導入されたFSE（フルサイト編集）に対応した新しいテーマ形式です。

この記事では、ブロックテーマとは何か、クラシックテーマとの違い、そしてブロックテーマを使うメリットについて解説し、その後は実際に手を動かしながらサンプルデザインを基にWebサイトのTOPページ部分を構築していきます。

これからWordPressサイトを自作したい方、ブロックテーマに挑戦してみたい方は、ぜひ参考にしてください。

※この記事を作成している途中であまりにも長編になりそうな予感がしましたので、
記事を２つに分割して作成していくことにしました。

ブロックテーマとは？〜FSE（フルサイト編集）に対応した次世代テーマ〜

ブロックテーマとは、従来のPHPベースのテーマとは異なり、「ブロック」単位でページ全体を構築する仕組みです。
ページだけでなく、ヘッダーやフッター、投稿リストやテンプレートパーツもすべてブロックとして管理されます。

この新しいテーマ形式では、「FSE（Full Site Editing）」と呼ばれる機能により、テーマファイルを直接編集することなく、管理画面上のビジュアルエディターでサイト全体のデザインと構造をカスタマイズできます。

クラシックテーマとの違い

比較項目	クラシックテーマ	ブロックテーマ
編集方式	PHPファイルを直接編集	ブロックエディターで視覚的に編集
レイアウト構成	header.php、footer.phpなど多数のテンプレートファイル	theme.json、templates、partsで構成管理
カスタマイズ性	HTML・PHPの知識が必要	ノーコードでも調整可能
プレビュー	編集後に再読み込みが必要	編集と同時にリアルタイム反映

このように、ブロックテーマは「ノーコードでも柔軟に編集できる」という点で、クラシックテーマとは一線を画しています。

※しかしながら、実際には多少のコード編集は必要となるので、「ローコード編集」というのが正しい表現かもしれません…

ブロックテーマの3つの大きなメリット

クライアント自身で更新できるサイトが作れる

ブロックテーマの最大のメリットのひとつは、サイト運用のハードルが下がることです。
従来のテーマでは、ちょっとしたレイアウトの変更や文字修正も開発者に依頼する必要がありましたが、ブロックテーマではクライアント自身が編集できるようになります。

デザイン調整がリアルタイムで簡単にできる

FSEのおかげで、実際の表示を確認しながら直感的にレイアウトを組み立てられます。
コーディングの知識があまりなくても、「見たまま編集」できるのは、特に初心者にとって大きな魅力です。

モダンな制作ワークフローで作業効率が上がる

ブロックテーマでは、CSSやテーマ設定をtheme.jsonで一元元管理できるため、開発の効率も向上します。
これにより、開発者にとっても、よりクリーンで保守しやすいサイト制作が可能になります。

しかしながら、WordPressの実際の制作現場では、ブロックテーマを使った構築はあまり浸透しておらず、いまだにクラシックテーマによるコーディングベースによるサイト構築が主流であるというのが私の制作者としての肌感です。

慣れないうちは戸惑うこともありますが、そのぶん可能性も広がっています。
次のセクションでは、実際にブロックテーマを自作するために必要な準備やスキルについて詳しく解説していきます。

ブロックテーマを自作する前に知っておくべき準備と基本知識

ブロックテーマの魅力を理解したところで、「自分でも作ってみたい」と感じた方も多いのではないでしょうか？
とはいえ、いきなり手を動かす前に、まずは最低限知っておくべき準備と基礎知識を押さえておくことが重要です。

私自身、初めてブロックテーマの構築に挑戦した際、クラシックテーマとのあまりの違いに戸惑い、非効率な手戻りを何度も経験しました。
ここでは、そうした経験も踏まえて、これから始める方がスムーズに進められるよう、基礎を丁寧に解説していきます。

WordPressのバージョンとFSE機能の確認

ブロックテーマを使用するには、WordPress 5.9以降であることが大前提です。
また、フルサイト編集（FSE）が有効かどうかは、管理画面の「外観」メニューに「エディター（ベータ）」が表示されているかで確認できます。

古いWordPressテーマやプラグインを併用している場合、ブロックテーマとの相性に問題が生じる可能性があるため、開発を始める前に環境の見直しをおすすめします。

開発はローカル環境で！

ブロックテーマの開発は、ローカル環境で行うのが安心・安全です。
私がよく使うのは「Local by Flywheel」や「XAMPP」といったツールで、WordPress環境の構築がGUIで簡単にできます。もちろん、MAMPでもOKです。

ローカル環境であれば、試行錯誤の段階でも本番に影響せずに変更を重ねることができ、失敗を恐れず挑戦できます。

ブロックテーマの基本構成と必須ファイル

ブロックテーマを構成する上で最低限必要なファイル・ディレクトリは以下の通りです。

your-theme/
├── style.css
├── theme.json
├── templates/
│   └── index.html
├── parts/

style.css：テーマの基本情報を記述（テーマヘッダー）
functions.php：機能の有効化やカスタマイズ
theme.json：テーマ全体の設定（色、タイポグラフィ、レイアウトなど）
templates/：各ページのHTMLテンプレート
parts/：共通パーツ（ヘッダーやフッターなど）

クラシックテーマではPHPで構築していたテンプレートファイルが、ブロックテーマではHTML形式で記述される点が大きな違いです。

GutenbergブロックのHTML構文への理解

ブロックテーマでは、テンプレートファイル内にGutenbergブロックのHTML構文を直接記述していきます。
例としては、次のような記述になります。

<!-- wp:paragraph -->
<p>これは段落ブロックです。</p>
<!-- /wp:paragraph -->

Gutenbergエディターで作成するブロック構造を、そのままHTMLで書いていくイメージです。
最初は戸惑うかもしれませんが、慣れてくるとデザインと構造を直感的に扱えるようになり、開発がとても楽になります。

デザインツールとの併用で設計効率アップ

ブロックテーマのメリットの1つとして「クライアント自身で更新できるサイトが作れる」ということを挙げさせていただきましたが、実際にはある程度のデザイン知識は必須といえるでしょう。
Webサイトとは「色」「タイプグラフィ」「余白」など、さまざまなデザイン要素が絶妙なバランスで合致して初めてユーザーにとって使いやすいものになる、ということは念頭に置いておきましょう。

もしあなたがデザイナーでFigmaやAdobe XDなどのデザインツールを使えるのであれば、ブロックテーマ開発との相性も抜群です。
私の場合、Figma上であらかじめ各パーツをブロック単位で設計しておくことで、実装時に「これはテンプレートパーツに」「これは再利用ブロックに」と判断がスムーズになり、効率的に開発を進められました。

ここまでで、ブロックテーマ自作に向けた基礎知識と準備のポイントを押さえることができました。
次のブロックでは、実際のテーマ構築の流れと、その中での注意点について詳しく解説していきます。

実務でブロックテーマを導入する前に、これだけは押さえておきたいポイント

ブロックテーマは非常に自由度が高い一方で、プロジェクト進行においては以下のような点に注意が必要です。

デザイナーが「ブロックエディターの限界」を理解しているか？

ブロックエディターは日々進化していますが、「すべての表現がノーコードでできるわけではない」というのが実情です。
例えば以下のようなケースでは工夫が求められます。

実装に工夫が必要なポイント

高度なアニメーションやインタラクション
絶対配置を使用した不規則なレイアウト
ダイナミックな動的コンテンツ表示

このため、デザインを担当する人が「これはブロックで実現可能／不可能」を判断できるだけの知識を持っているかどうかが重要です。

実装とデザインの分業体制の場合、連携が特に重要

特に「デザイン→実装」へ引き継ぐワークフローでは、次のような選択肢を事前に共有・議論しておくべきです。

連携が必要そうなポイント

表現が難しい実装はCSSだけで解決できる？
JavaScriptを使う必要があるか？
それともカスタムブロックを新たに作るべきか？

これらの判断には、デザイナー側にも一定の実装知識が求められます。
または、最初からWordPress実装に強い人がデザインも兼任するという体制が、スムーズな進行につながる場合もあります。

サイト全体の下準備

それではここからは実際にブロックテーマを活用したWebサイトを構築していきたいと思います。
構築にあたり、まずはこれらの下準備をあらかじめ行っておきます。

固定ページの登録
ホームページの設定
ダミーの「お知らせ」記事登録

固定ページの登録

今回はTOPページだけの制作を主題としていますので、厳密には固定ページは必要ありません。
しかしながら、ヘッダーの「ナビゲーションメニュー」やページ内のボタンにリンクを設置する際に下層ページとしてあらかじめ登録されている方が何かと便利ですので登録しておきましょう。
下記の5つの固定ページを登録しておきましょう。

「ホーム」、「当院について」、「診療科目」、「採用情報」、「Web予約」の5つの固定ページを登録

ダミーの「お知らせ」記事登録

また、お知らせ記事も表示できるようにダミーでよいので下記のようなタイトルと日付の記事を登録しておきましょう。

ブロックテーマ自作の具体的な手順

準備が整ったら、いよいよブロックテーマの自作に取り掛かります。
これまで「ブロックテーマとは？」ということで長々と説明してきましたが、まずは仕組みや理屈などは置いておいて「ブロックテーマに慣れる」ということを目標にこの後の手順をなぞっていただければと思います。

今回自作のブロックテーマを作るにあたって何か具体的な題材が欲しいなと思ったので、サンプルデザインを私の方で準備してみました。
下記のリンクからFigmaファイルをダウンロードできるので、実際に開いて中身を見てみましょう。

ブロックテーマ用サンプルページ

今回は「あだちメディカルクリニック」という架空のクリニックのWebサイトのデザインを作ってみましたので、こちらを参考にブロックテーマを作成していきましょう。

Create Block themeプラグインをインストール

ここから先は既にローカル環境にWordPressのテスト環境を準備してあることを前提に話を進めていきます。

まずは、ブロックテーマを作成しやすくするためのプラグイン「Create Block theme」をインストールします。
無くても問題なく作成することは可能ですが、あった方が圧倒的に便利なのでインストールしておきましょう。

WordPressの「プラグイン」から検索欄に「Create Block Theme」と入力してください。
恐らく下記のプラグインが表示されると思いますので、「インストール」を押したのち、「有効化」を選択してください。

プラグインを有効化したら、今度は空のテーマを作成していきます。
今回はあえて空のテーマを０から構築していきます。

サイドバーの「プラグイン」から「ブロックテーマを作成」をクリックします。

「新しい空のテーマを作成する」を選択します。

ポップアップ画面が表示されるので、必要情報を入力して「空のテーマの作成と有効化」をクリックしてください。

テーマ名⇒testtheme、テーマの説明⇒テスト用のサンプルテーマです、作成者⇒UCHIWA

ここまでの作業で下記の構成のテーマが自動で作成されます。

your-theme/
├── style.css
├── theme.json
├── templates/
│   └── index.html
├── parts/
├── screenshot.png

Gutenbergプラグインのインストール

今回は一部のブロックの機能を拡張して使用したいので、Gutenbergプラグインというものを使用したいと思います。
※あくまでも「実験中」という位置づけであるため、実際の案件で使用するかどうかは慎重に検討してください。

先ほどと同じように検索欄に「Gutenberg」と入力してください。
下記のプラグインが表示されると思いますので、「インストール」を押したのち、「有効化」を選択してください。

有効化すると、サイドバーに「Gutenberg」という項目が追加されるので、「実験中」をクリックします。

その中から「グリッドのインタラクティビティを追加」にチェックをいれて「保存」ボタンを押してください。

これで機能の拡張が完了しました。
この機能は後々使用していきます。

theme.jsonについて

theme.jsonは、ブロックテーマの“核”とも言えるファイルです。
ここにはスタイルの統一ルールや、エディターの設定、使用するカラー・フォントなどが定義されています。

デザインのルールをあらかじめ theme.json にまとめておくことで、サイト全体の統一感を保ちながら、エディター側でも同じスタイルを参照できるようになります。

下記はtheme.jsonのサンプルコードになります。

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {
          "slug": "primary",
          "color": "#0d6efd",
          "name": "Primary"
        }
      ]
    },
    "typography": {
      "fontSizes": [
        {
          "slug": "large",
          "size": "32px",
          "name": "Large"
        }
      ]
    }
  }
}

このtheme.jsonはコードで直接記述してテーマに認識させる方法でも全然問題ないのですが、WordPressの「エディター」機能から設定することも可能です。

次はその「エディター」画面からtheme.jsonの編集を行っていきましょう。

スタイルの登録：タイポグラフィ

先ほどのテーマが有効化されるとそのままエディター画面が開かれるので、作業を進めていきます。
もし、別のページを開いていた場合はサイドバーの「外観」⇒「エディター」をクリックしてエディター画面を開いてください。

そして同時にFigmaファイルを開き、「DesignPreset」のページを開いてください。

今回はテーマを作成しやすいように下記のようなプリセットをあらかじめ用意しておいたので、これらをエディター画面から編集しtheme.jsonに反映させていきます。

タイプグラフィとは「文字を美しく読みやすく配置するデザイン」のことですが、Webデザインにおいてタイポグラフィと言われたら、フォント、文字の大きさ、行間、文字間、色などの総称を指すと思ってください。

エディターのサイドバーから「スタイル」を選択し、「タイポグラフィ」をクリックします。

今回はsystem font以外に「Zen maru Gothic」というフォントを使用するのでGoogle Fontsからインストールしていきます。

「フォント」から「フォントをインストール」をクリックします。

検索窓に「zen maru」と入力すると下記のように「Zen Maru Gothic」が表示されます。

Figmaの方にも記載しているように、今回は500と700のweightのみを使用するので下記のように選択してインストールをクリックします。

次にフォントサイズを登録していきます。

デフォルトサイズが下記のように設定されており、このまま使用しても良いのですが、今回はすべてカスタムプリセットを設定していきます。

ファンとサイズのプリセットには、あらかじめ「小」、「中」、「大」、「特大」が定義されている

まずはtheme.jsonの「typography」の部分に下記の記述を追加します。

"typography": {
  "defaultFontSizes": false,
　"fontFamilies": [
　　{
　　　//省略//
　　}
　]
},

defaultFontSizes:falseにすることで、もともとデフォルトで存在していたフォントサイズのプリセットを消すことができます。

それではまず最初に固定サイズのプリセットを登録していきます。
下記のように「極小」～「超特大」までの値を入力していってください。

※保存ボタンは特にないので入力後そのまま前の画面に戻って大丈夫です。

固定サイズのプリセットをすべて入力すると下記のようになっているはずです。

次は画面の横幅サイズに応じてフォントサイズが変化するような「Fluidタイポグラフィ」というものを設定してきます。
Fluidタイポグラフィとは画面幅に応じてブラウザが自動でテキストサイズを可変してくれるものです。

今回のデザインではコンテンツ幅を1200pxで設定してあるので、このサイズの場合にテキストは最大値の値をとって欲しいわけです。
最小値の方はデフォルトでは320pxになっていますが、こちらも一応明示的に示しておきます。

"typography": {
  "defaultFontSizes": false,
　"fluid":{
    "maxViewportWidth": "1200px",
    "minViewportWidth": "320px"
  }
　"fontFamilies": [
　　{
　　　//省略//
　　}
　]
},

エディターの方の編集ではこれまで同様にカスタムプリセットから新規にプリセットを追加します。

そして「フルードタイポグラフィ」にチェックを入れ「カスタムフルード値」にもチェックを入れます。
そして最大値と最小値にFigmaから取得した値を入力します。

ただし、ここで一つ注意点があります。
Fluidタイポグラフィを使用する場合に、「サイズ」の入力フィールドの値は他のプリセットのサイズと被ってはいけません。（固定プリセットも当然含まれます）

例えば…

新規にカスタムプリセットを追加した場合、入力値には16という値がセットされています。

このままカスタムフルード値にチェックを入れると、グレーアウトし変更ができなくなります。

入力はできなくなりましたが、ここでは内部的に16pxという値を保持しています。
この16pxという値は固定プリセットの「中」サイズと被ってしまっています。
この場合、Fluidタイポグラフィとして登録することはできますが、テーマ作成時にこのプリセットをフォントサイズとして適用しようとしたときに、先に登録してある「中」サイズのプリセットが優先されて適用されることになり、Fluidタイポグラフィで登録したこのプリセットが何の意味も持たないものになってしまいます。

つまり、先ほど「Fluidタイポグラフィを使用する場合に～」とは言いましたが、実際は「サイズ」に入力される値は「Fluid」「固定」を問わず、一切他と被ってはいけません。

という点に注意しつつ、下記のようにFigmaの値を参照しながらFluidタイポグラフィとして登録していきます。

最終的にフォントサイズに関するタイポグラフィのセッティングは下記のようになっています。

「タイポグラフィ」では、フォントの種類（フォントファミリー）やフォントサイズをあらかじめデフォルト値として設定できます。
これにより、ウェブページを作成する際に、要素ごとにいちいち設定する手間を省き、効率的に作業を進められます。

「要素」のカテゴリーに中に「テキスト」や「見出し」「リンク」などがありますが、今回は「テキスト」「見出し」「ボタン」の3つを設定していきます。

FigmaのDesignPresetにはこの辺りの設定を細かくは設定していませんが、実際のデザインを見てみるとこの辺りの設定は取得できるかと思います。
例えば通常の段落テキストは下記のような設定が適用できます。

「見出し」は今回のデザインではH2とH3までしか使用しない想定なので、こちらの2つを登録しておきます。

ボタンのタイポグラフィは下記のように設定します。

ここまでで「タイポグラフィ」に関する設定は一通り完了です。
一度ここまでの設定をtheme.jsonにエクスポートしてみましょう。

画面の右側のプレビュー画面をクリックすると編集画面に移行します。

右上の三点リーダーをクリックします。

「ブロックテーマを作成」を選択します。

「テーマへの変更を保存」をクリックします。

「変更内容を保存」ボタンをクリックします。

これで下記のようにtheme.jsonに変更内容が保存されました。

{
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "620px",
			"wideSize": "1000px"
		},
		"spacing": {
			"units": [
				"%",
				"px",
				"em",
				"rem",
				"vh",
				"vw"
			]
		},
		"typography": {
			"defaultFontSizes": false,
			"fluid": {
				"maxViewportWidth": "1200px",
				"minViewportWidth": "320px"
			},
			"fontFamilies": [
				{
					"fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
					"name": "System Font",
					"slug": "system-font"
				},
				{
					"fontFace": [],
					"fontFamily": "\"Zen Maru Gothic\", sans-serif",
					"name": "Zen Maru Gothic",
					"slug": "zen-maru-gothic"
				}
			],
			"fontSizes": [
				{
					"fluid": false,
					"name": "小",
					"size": "14px",
					"slug": "custom-1"
				},
				{
					"fluid": false,
					"name": "中",
					"size": "16px",
					"slug": "custom-2"
				},
				{
					"fluid": false,
					"name": "やや大",
					"size": "20px",
					"slug": "custom-3"
				},
				{
					"fluid": false,
					"name": "大",
					"size": "24px",
					"slug": "custom-4"
				},
				{
					"fluid": false,
					"name": "特大",
					"size": "32px",
					"slug": "custom-5"
				},
				{
					"fluid": false,
					"name": "超特大",
					"size": "48px",
					"slug": "custom-6"
				},
				{
					"fluid": {
						"max": "20px",
						"min": "18px"
					},
					"name": "F-M",
					"size": "200px",
					"slug": "custom-7"
				},
				{
					"fluid": {
						"max": "24px",
						"min": "16px"
					},
					"name": "F-L",
					"size": "240px",
					"slug": "custom-8"
				},
				{
					"fluid": {
						"max": "32px",
						"min": "24px"
					},
					"name": "F-XL",
					"size": "320px",
					"slug": "custom-9"
				},
				{
					"fluid": {
						"max": "48px",
						"min": "28px"
					},
					"name": "F-XXL",
					"size": "480px",
					"slug": "custom-10"
				}
			]
		},
		"useRootPaddingAwareAlignments": true
	},
	"styles": {
		"elements": {
			"button": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--zen-maru-gothic)",
					"fontSize": "var(--wp--preset--font-size--custom-7)"
				}
			},
			"h2": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--zen-maru-gothic)",
					"fontSize": "var(--wp--preset--font-size--custom-9)"
				}
			},
			"h3": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--zen-maru-gothic)",
					"fontSize": "var(--wp--preset--font-size--custom-3)"
				}
			}
		},
		"typography": {
			"fontSize": "var(--wp--preset--font-size--custom-2)",
			"lineHeight": "1.5"
		}
	},
	"templateParts": [
		{
			"area": "header",
			"name": "header"
		},
		{
			"area": "footer",
			"name": "footer"
		}
	],
	"version": 3,
	"$schema": "https://schemas.wp.org/wp/6.8/theme.json"
}

スタイルの登録：色

続いては色に関するスタイルを設定していきます。
今回もまたDesignPresetのシートを確認し、エディターから登録していきます。
下記の4つの色を登録しておきます。

まずは、「パレットを編集」をクリックしましょう。

パレットには初期状態では下記のようにデフォルトで複数のカラーがセットされています。

一旦これらは邪魔なので消しておきましょう。
theme.jsonに下記を追記します。

{
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "620px",
			"wideSize": "1000px"
		},
        "color": {
            "defaultPalette":false
        },
        //省略//
    },
	"version": 3,
	"$schema": "https://schemas.wp.org/wp/6.8/theme.json"
}

defaultPalette:falseを指定することで初期状態のカラーを消すことができます。
そして新たに下記のようにパレットを登録します。

そして、タイポグラフィでやった時と同じように、この色を使って各要素のデフォルトの色を設定していきましょう。

下記の画像のようにそれぞれ設定してください。

テキスト	Black
リンク	Black（デフォルト）、Blue（ホバー）
ボタン	White（テキスト）、Blue（背景）
見出し	Blue（テキスト）

上記を設定したら、再度「テーマへの変更を保存」しtheme.jsonに内容を反映させておきましょう。

スタイルの登録：影

次は「影」の設定をしていきますが、今回のTOPページのデザインでは影の仕様は一か所しかありません。
なので、スタイルとして登録しておかなくても構いませんが、解説のために一応登録しておきます。

デザインでは影はこの「特徴セクション」のメディア型コンポーネントにのみ使用されています。

このメディア型コンポーネントを選択し、「ドロップシャドウ」を確認するとどのような数値で設定されているのかを確認することができます。
再度WordPressのエディター画面に戻り、これらの値を登録していきます。

こちらもデフォルトの設定が加えられているので、削除しておきたいと思います。

theme.jsonに下記の変更を加えます。
defaultPresetsの値をfalseにしておきます。

{
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "620px",
			"wideSize": "1000px"
		},
        "color": {
            "defaultPalette":false
        },
    　　"shadow": {
      　　"defaultPresets": false
    　　},
        //省略//
    },
	"version": 3,
	"$schema": "https://schemas.wp.org/wp/6.8/theme.json"
}

「カスタム」右横の「+」をクリックし値を登録していきます。
入力値は下記のように設定すればOKです。

カラー=#00000017,x=0,Y=4px,BLUR=8px,SPREAD=0,outset

スライルの登録：レイアウト

次はレイアウトに関するスタイルを登録していきます。

レイアウトでは下記のような項目を設定することができます。

コンテンツ幅

まずは、コンテンツ幅についてですが、これはWebサイトにおける基本的なコンテンツの幅のことを指します。
例えば今回私が用意したデザインでは、薄赤色で示された列幅（ここでは1200px）に沿って凡そのコンテンツを配置しています。

幅広

一方で下記のヘッダーやメインビジュアル、背景画像のように、あえてコンテンツ幅から外して配置しているレイアウトのものも存在します。（ここでは1760pxで設定）
このように通常のレイアウトからは少しアクセントをつけて、あえて外したレイアウトにしたい場合等にこの「幅広」は使用します。

パディング

Webデザインをする上で絶対に避けては通れないのが、このパディングというものと、もう一つマージンという概念です。
簡潔に説明するのが非常に難しい言葉ですが、あえて簡単に説明するのであれば、パディングとは「その要素が内側に持つ余白」、マージンとは「他の要素との間の余白」のことを示します。

そして、この個所ではWebサイト全体におけるパディングを設定します。

では、「Webサイト全体におけるパディング」とはどういうことなのか？
下記の画像を見ていただけると分かりやすいかと思います。

この画像の右側のプレビュー画面を見ていただくと、コンテンツが横幅いっぱいに広がってしまっており、非常に見づらい状態になっているかと思います。
これは先ほどの「コンテンツ幅」の設定で1200pxという値を設定していいるにも関わらず、画面幅がそれを下回っているので、コンテンツが自動で画面幅いっぱいに表示されている、という状態です。

この状態のままでは、非常に見づらいWebサイトになってしまうので、このWebサイト全体に対して、最小限の余白を設けておこう！、というのがここでの設定となります。

本来であれば、スマホやタブレットデザインがあればそれらの値を参照して、固定値にするか可変値にするか決めればよいのですが、今回はどちらも用意していないため、固定値として16pxという値を横方向に対してのみ(縦方向のパディングは不要)設定しておきます。

するとどうでしょう？先ほどまでとは違い、プレビュー画面の内側に余白が生まれました。
これで先ほどよりも一段と見やすいレイアウトになったかと思います。

ブロックの間隔

続いて、ブロック間の余白のデフォルト値を設定します。

今回のTOPページに関しては、このデフォルト値はほぼ使わない予定ですが、下層ページなどを今後皆様ご自身で作成していく際などに汎用的に使用できるように設定しておきましょう。
ちなみに、TOPページではこのデフォルト値を新しい値に都度書き換えて余白を設定していきます。

今回はFigmaの値通りに「1.8em」という設定で余白を設定しておきます。
ちなみに「em」という単位ですが、これは要素が持つfont-size×1.8倍のサイズという意味です。
例えばフォントサイズが16pxの要素に対しては28.8pxの余白が付与されます。

Spacing preset(余白のプリセット)

ここからはエディター画面からは編集できないので、theme.jsonを直接編集していきます。
Figmaの下記の値をそのままtheme.jsonに適用します。

このプリセットの中にMAXサイズとMINサイズがそれぞれ異なる値で設定されているものがあります。
これは、PC画面とスマホ画面でそれぞれ余白の大きさを変えたいからです。

PCの余白をそのままスマホに適用させる場合、そのままのサイズで上手くハマる場合もあれば、違和感が生まれて不自然なデザインになってしまう場合があります。
WordPressの本来の機能ではPCサイズとスマホサイズでデザインを変える機能はありません。

そこで、本来は無い機能を補うためにclampという関数を使って画面幅に合わせて徐々にMAXサイズからMINサイズに遷移していきます。
また、今回のclmap関数は1200pxでMAXサイズ値をとり320pxでMINサイズの値を取るように設定しています。

clampの計算は下記のツールを使用しています。

Font-size clamp() generator

Generate linearly scale font-size with clamp()

theme.jsonの方には下記のように記述します。
spacingSizesの中身と、defaultSpacingSizes:falseを追記してください。

{
  "settings": {
    "appearanceTools": true,
    "color": {
      //省略//
    },
    "layout": {
     //省略//
    },
    "shadow": {
     //省略//
    },
    "spacing": {
      "defaultSpacingSizes": false,
      "units": ["%", "px", "em", "rem", "vh", "vw"],
      "spacingSizes": [
        {
          "name": "1",
          "size": "0.75rem",
          "slug": "30"
        },
        {
          "name": "2",
          "size": "1rem",
          "slug": "40"
        },
        {
          "name": "3",
          "size": "1.5rem",
          "slug": "50"
        },
        {
          "name": "4",
          "size": "clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem)",
          "slug": "60"
        },
        {
          "name": "5",
          "size": "2rem",
          "slug": "70"
        },
        {
          "name": "6",
          "size": "clamp(1rem, 0.6364rem + 1.8182vw, 2rem)",
          "slug": "80"
        },
        {
          "name": "7",
          "size": "2.5rem",
          "slug": "90"
        },
        {
          "name": "8",
          "size": "4rem",
          "slug": "100"
        },
        {
          "name": "9",
          "size": "clamp(2.5rem, 1.9545rem + 2.7273vw, 4rem)",
          "slug": "110"
        },
        {
          "name": "10",
          "size": "5rem",
          "slug": "120"
        },
        {
          "name": "11",
          "size": "clamp(1.5rem, 0.2273rem + 6.3636vw, 5rem)",
          "slug": "130"       
        }
      ]
    },
    //省略
  "styles": {
   //省略//
  },
  "templateParts": [
    //省略//
  ],
  "version": 3,
  "$schema": "https://schemas.wp.org/wp/6.8/theme.json"
}

すると、下記のように余白のプリセットが登録されています。
（※今回は「name」の値にに数字を入れてしまっていますが、これだとパッと見たときに何pxなのか判断できないので、もう少し分かりやすい表記でもいいかもしれませんね）

スタイルの登録：ブロック

続いてブロックにスタイルを適用していきます。
ここで言うブロックとは、ブロックエディター上に存在する各ブロックのことです。
※Figma上のコンポーネントのことではありません。

今回のデザインを見渡した際にブロックの設定として登録できそうなものは凡そ下記が該当するかなと思います。

ブロックスタイルとして登録するもの

ナビゲーションブロック
ボタンブロック

ナビゲーションブロック

ヘッダー部分のナビゲーションの登録を行っていきます。

エディター画面の「スタイル」から「ブロック」を選択し、下にスクロールしていくと、「ナビゲーション」というブロックが見つかるはずです。

このブロックを選択し、下記のようにスタイルを設定してください。

ナビゲーションブロックのスタイル登録。フォント=Zen Maru Gothic、フォントサイズ=18px、外観=デフォルト、行の高さ=1.5、ブロックの間隔=3

ボタンブロック

続いて、「ボタン」ブロックのスタイルを登録していきます。

「ボタン」を選択し、下記のようにスタイルを登録します。

ボタンブロックのスタイル登録。フォント=Zen Maru Gothic、フォントサイズ=F-M、外観=デフォルト、行の高さ=1.5、パディング上下=1、パディング左右=4、角丸=10px

テキストと背景の色に関しては、「スタイルの登録：色」で既に登録していると思いますので、ここで再度設定を行う必要はありません。

このボタンブロック、実は「エディター」の機能だけで実現することは不可能です。
なぜなら矢印アイコンの部分、ここがエディター上では実現できないからです。

そのため、テーマフォルダの中に新たにfunstions.phpを作成しstyle.cssと合わせてコードを記述していきます。

<?php
//テーマ独自のCSS（style.css）をエディターに読み込む関数
function mytheme_supports() {
    add_editor_style('style.css');
}
add_action('after_setup_theme', 'mytheme_supports');

//テーマのCSS(style.css)をフロントに読み込む関数
function mytheme_enqueue(){
    wp_enqueue_style('mytheme_style', get_stylesheet_uri(), array(), filemtime(get_theme_file_path('style.css')));
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue');

//WordPressのコアブロックにスタイルを追加するための関数
function register_block_styles(){
    register_block_style(
        'core/button',
        array(
            'name' => 'has-icon-button',
            'label' => 'アイコン付きボタン'
        )
    );
}
add_action('init', 'register_block_styles');

そしてアイコン画像を保存しておくためのimagesフォルダをassetsフォルダの直下に設置します。

your-theme/
├── assets/
│   └── fonts
│   └── images
├── style.css
├── theme.json
├── templates/
│   └── index.html
├── parts/

そしてFigmaから画像をエクスポートしてimagesフォルダの中に保存します。

style.cssには下記のように記述します。

.is-style-has-icon-button .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.is-style-has-icon-button .wp-block-button__link::after {
  content: "";
  display: inline-block;
  width: 1.5rem;
  aspect-ratio: 1/1;
  background-image: url("assets/images/tdesign_swap-right.png");
  background-size: contain;
  background-repeat: no-repeat;
}

以上で「ボタン」ブロックの設定は完了です。

パターンの登録：ヘッダー

続いては現在プレビュー画面に表示されているこちらの「ヘッダー」部分をデザインを基に編集していきます。

まずはエディターのサイドバーから「パターン」を選択します。

既にデフォルトで「ヘッダー」と「フッター」が用意されているので、今回はこれらの中身を変更してデザインを再現していきましょう。
試しに「ヘッダー」をクリックし、概観を見てみると様々なブロックで構築されているのが分かるかと思います。

これらのブロックをそのまま使用し、スタイルを整えるだけでも今回のヘッダーデザインは十分再現できるとは思いますが、今回はブロックテーマ制作の学習が目的であるため、一旦これらのブロックはすべて削除し、1から作り直していきたいと思います。

その前にまずはサイトのタイトルとキャッチフレーズを変更したいと思うので、管理画面の「設定」⇒「一般」から下記のようにサイトのタイトルとキャッチフレーズを入力し、保存しておいてください。

それでは先ほどの「ヘッダー」の編集画面に戻ります。
下記のブロックをまずは挿入してください。

ヘッダーに必要なブロック

サイトロゴ
ナビゲーション

サイトロゴブロックの設定

まずはサイトロゴから登録していきます。
下記の部分を丸っとPNG形式でFigmaの方からエクスポートします。
ご自身のローカル環境のどこでも良いので保存しておきましょう。

そしてWordPressの方の編集画面で「サイトロゴ」の部分のブロックをクリックし、今ダウンロードした画像をアップロードします。

右サイドパネルの「ブロック」設定から下記のように設定を行ってください。
「画像にホームへのリンクをつける」にチェックをつけるとユーザーがロゴ画像をクリックした際にサイトのTOPページに遷移することが可能になります。

ナビゲーションブロックの設定

続いて「ナビゲーション」の設定です。
左サイドバーの「ナビゲーション」を展開しドラッグ＆ドロップでメニューの順番を入れ替えます。

ちなみに「ナビゲーション」ブロックは現在公開されている固定ページが一覧表示されます。
今回はナビゲーションに必要な固定ページしか登録していませんが、通常は右サイドバーの「ブロック」タブからデザインに従い取捨選択を行ってください。
「上に移動」「下に移動」を使い分けながら、メニューの並び順を変更します。

レイアウトを調整

次はこれらのブロックのレイアウトを整えていきます。

ブロックのリストビューから2つの「サイトロゴ」と「ナビゲーション」ブロックの2つを選択し、三点リーダーをクリックして「グループ化」をクリックします。
もしくは、「Ctrl+G」でグループ化を行います。

グループ化が完了したら、そのグループブロックを選択した状態で右サイドパネルを確認します。
そうすると、グループのレイアウトを設定できるようになっているので、ここでは左から2番目の「横並び」を選択し、レイアウトは一番右の「項目の間隔」を選択します。

※ちなみに下記のように2つのブロックを選択してブロックのメニューバーから直接「横並び」を選択することも可能です。

このようにサイトロゴブロックとナビゲーションブロックが横幅いっぱいに広がるようになります。

これだけではまだヘッダーのデザイン再現としては不十分なので追加で設定を行っていきましょう。

上方向のパディングは33px、横方向のパディングは11番（24px~80px）を選択します。

現在までの設定でヘッダーは下記のようなレイアウトになっています。

ここで、「なぜ勝手にハンバーガーメニューが出来ているのか？」と疑問に思った方もいるかもしれません。

先ほどのナビゲーションブロックの設定では説明は省きましたが、ナビゲーションブロックはデフォルトでは下記のように設定されており、スマホサイズの画面で自動でハンバーガーメニューが出力されるようになっています。

パターンの登録：フッター

続いてはフッターの編集を行っていきます。
今回はこのレイアウトを「グリッド」ブロックを使用して実現していきます。
そして、一部「Gutenberg」プラグインの実験的な機能を使用しないと実現できないため、「Gutenbergプラグインのインストール」のセクションの手順を実行しておいてください。

まずは、既存のフッターに登録されているブロックを削除して完全にまっさらな状態にしておきましょう。

そして新たに必要なブロックを追加していきます。

それぞれ下記ような設定値で登録しています。

ロゴは画像ブロックにて登録。設定値は代替テキストに「あだちメディカルクリニック、スペクト比は「元のサイズ」、幅と高さは「自動」、解像度は「フルサイズ」

アクセス情報部分は段落ブロックを使用。サイズは「小(14px)」、行の高さは「2」。

※ボタンに関してはそのままボタンブロックを挿入し、テキストを入れるだけなので省略

この「診療時間」のテーブルブロックはデフォルト機能だけではデザインを再現できないので、ボタンブロックのスタイルを追加したときと同じようにコードを追加して、新たなスタイルを設定します。

まず、functions.phpに下記のように追記します。

<?php
//省略//

//WordPressのコアブロックにスタイルを追加するための関数
function register_block_styles(){
    register_block_style(
        'core/button',
        array(
            'name' => 'has-icon-button',
            'label' => 'アイコン付きボタン'
        )
    );
    register_block_style(
        'core/table',
        array(
            'name' => 'original-style',
            'label' => 'オリジナルスタイル'
        )
    );
}
add_action('init', 'register_block_styles');

.is-style-original-style thead {
  border-bottom: solid 1px;
}

.is-style-original-style tr:not(:last-child) {
  border-bottom: solid 1px #ccc;
}

.is-style-original-style th,
.is-style-original-style td {
  padding: 1rem 0.5rem;
}

.is-style-original-style th {
  border: none;
}

.is-style-original-style td {
  border: none;
}