本文の内容がここに入ります。
Share
Embed
Slide 1
Slide 1 text
ブロックテーマ、WordPress でウェブサイトをつくるということ
Toro_Unit / 2026.02.07 @ Gifu WordPress Meetup
1
Slide 2
Slide 2 text
$ whoami
Toro_Unit / 占部 紘
Freelance
Frontend & WordPress Engineer
WordPress Contributor
Github: @torounit / X: @Toro_Unit
2
Slide 3
Slide 3 text
長野県松本市から来ました
高山濃飛バスセンターから
松本バスターミナルまでバスで
2時間半くらいです。
岐阜市からだと名古屋経由で
特急しなのに乗った方がたぶん
近いです。
Shinshu WordPress Meetup
やってるよ。
3
Slide 4
Slide 4 text
ブロックテーマとは？
4
Slide 5
Slide 5 text
5
Slide 6
Slide 6 text
6
Slide 7
Slide 7 text
7
Slide 8
Slide 8 text
8
Slide 9
Slide 9 text
9
Slide 10
Slide 10 text
WordPress 5.9 で導入された新しいテーマの仕組み。
フルサイト編集 (Full Site Editing, FSE) に対応。
従来のテーマと異なり、PHP テンプレートファイルを持たず、HTML テン
プレートと theme.json で構成される。
ブロックエディターを使用して、サイト全体のレイアウトやデザインをカ
スタマイズ可能。
ここ数年のデフォルトテーマ (Twenty Twenty-Two 以降) は全てブロックテ
ーマ。
10
Slide 11
Slide 11 text
テーマの仕組みと役割の変化
11
Slide 12
Slide 12 text
完成した HTML に「穴を空けて」
、テンプレートタグ等で置き換えるのが
「クラシック」なテーマ開発
12
タイトル
Slide 13
Slide 13 text
「テーマ」という仕組みが搭載された、2005年頃ではこれで十分でした。
2005年といえば、ブログブームやら、mixiが流行りだした頃とかそんな時代。
それだけでは機能が足りなくなってきたので、ウィジェットや
カスタマイザー、メニュー機能などが追加されていきました。
13
Slide 14
Slide 14 text
このテーマの仕組みにおける最適な開発フロー
1. HTML / CSS でデザインを作成
2. HTML 上の「穴」を、テンプレートタグに置き換え
14
Slide 15
Slide 15 text
「テーマの役割」の変化
従来のテーマ(クラシックテーマ)
完成したデザイン
ブロックテーマ
デザインの土台、コンポーネントの提供
フォント・色・スペーシングのプリセットの提供
各ブロックのスタイルの提供
15
Slide 16
Slide 16 text
ブログシステムから、
「ブラウザで動く
『ホームページビルダー』
のみたいなモノ」に変わろうと
しているのが最近の WordPress
16
Slide 17
Slide 17 text
「テーマ」が、デザインの土台、
コンポーネントの提供をしたり、
「ブロック」が HTML を
提供するようになった。
17
Slide 18
Slide 18 text
誤解を恐れずに言うならば、現代の WordPressは「デザインを100%
再現する」には向いていない。
HTMLの改変が難しい。
WordPress が提供する CSS の機能が中途半端。
例えばメディアクエリが使えない。CSS を記述する部分と theme.json
等で設定する部分の混在。
カスタムブロックの開発をすれば大抵は可能だが、実装コスト・保守コス
トの増加。
「クラシック」なやり方のままでは、サイト開発が難しい。
18
Slide 19
Slide 19 text
どうすべき ?
デザイナーとエンジニアで双方向にフィードバックしたり、カジュアルに
コミュニケーションを取れるような体制。
サクッとコアブロックで作って実験したりして、デザイナー等と相談。
デザイナー任せにせずエンジニア設計などに関わる、相談できる体制。
デザインが支給される場合、先方のデザイナーにミーティングをして説明とか
相談の機会を設けたり、まずチームでどんなブロックで実装できるか相談・
検証の時間を作ったりしてました。
19
Slide 20
Slide 20 text
そこまでするメリットは？
カスタマイザー / ウィジェット / メニュー等が不要に。全てブロックで解
決するように。
本文で使っている要素を、ヘッダーやフッター、サイドバー等でも同
じやり方で実装可能。
PHP の知識が無くても、テンプレートなどをの開発が可能に。-> セキュ
リティリスクの低減。
20
Slide 21
Slide 21 text
ブロックテーマを開発するには
21
Slide 22
Slide 22 text
Create Block Theme
ブロックテーマの開発を支援
するプラグイン
ブロックテーマの雛形を生成
既存のブロックテーマをベー
スに新しいブロックテーマを
作成
サイトエディター上での変更
をテーマに反映
22
Slide 23
Slide 23 text
なんとなくわかった気になる
ブロックテーマ入門 /
contents.nagoya 2025 6.28
https://speakerdeck.com/chiilog/na
ntonakuwakatutaqi-
ninaruburotukutemaru-men
23
Slide 24
Slide 24 text
ブロックテーマでの開発事例
24
Slide 25
Slide 25 text
https://risshi-juku.jp/
設計・デザイン・開発から全て丸っと担当。
25
Slide 26
Slide 26 text
26
Slide 27
Slide 27 text
開発の経緯
2024年12月頃、こんな相談。
LINE公式アカウントをやりたい、それに伴って同線を作りたい。
コンテンツの見直しなどもしたいので、操作方法などを教えてほしい。
現状だと情報の不足があってページ追加なども必要。
可能であれば自分たちでいじりたい。
27
Slide 28
Slide 28 text
以前はお知らせがたまに更新される程度だったので、静的サイトにすることも
検討したが、先方がコンテンツ作成を自分たちでやりたいという要望が
大きかったので、WordPress でリニューアルすることに。
28
Slide 29
Slide 29 text
デザイン、コンテンツ設計
29
Slide 30
Slide 30 text
30
Slide 31
Slide 31 text
最初はいきなりブラウザ上でデザインを作ろうと思ったけど、さすがに無理と
悟り、Figma でデザインを作成。
31
Slide 32
Slide 32 text
32
Slide 33
Slide 33 text
先方にも Figma に入ってもらって、ワイヤーフレームを共同で作成。
33
Slide 34
Slide 34 text
テーマの実装方針
基本的に、theme.json で出来ることは可能な限り theme.json で。
css を直接書けば何でも出来るけど、theme.json の挙動など考慮すること
が増えるので、可能な限り theme.json や、WordPress 側の機能で実装した
い。
ナビゲーションなどは、css 変数が用いられているのでそれを上書きした
りすれば多少はコントロール可能。
せっかくデザインから自分でやるので、CSS のビルドしない！(決意
34
Slide 35
Slide 35 text
テーマ開発の流れ
1. 色彩設計、タイポグラフィ設計、余白のルール設計
2. ボタン等の汎用のコンポーネントのデザイン定義
3. TOPページ、下層ページの汎用のパーツのデザイン設計
4. ワイヤーフレーム等を作成しながら各ページのコンテンツ設計
5. ヘッダーフッター、ナビゲーションなどの実装
6. 各ページの実装、ブロックパターン等の作成
35
Slide 36
Slide 36 text
テーマ実装などをしながら、同時並行で先方とコンテンツの整理を進め
る。
ワイヤーフレームを作成しながら、コアブロックでの作成が難しいところ
をブロックスタイル + ブロックパターンで実装。
TOPページの、各セクション、CTA、FAQ 等はブロックパターン化。
36
Slide 37
Slide 37 text
37
Slide 38
Slide 38 text
DEMO
38
Slide 39
Slide 39 text
ブロックテーマでサイトを
リニューアルした話 / 2026-
01-31 Kansai WordPress
Meetup
https://speakerdeck.com/torounit/2
026-01-31-kansai-wordpress-
meetup
39
Slide 40
Slide 40 text
ユーザーからのフィードバック
40
Slide 41
Slide 41 text
ユーザーの感想
思ってたより簡単に使えた。いわゆる TinyMCE みたいなモノを想像して
たからすげーってなった。
以前と比べてとかはよくわからない、触ってないしそもそも個人でサイト
とか持ってないし。
ボタンとか簡単に足せるのはおどろいた、後から写真とか足せるのありが
たい。
「普通のサイト」が、文字とか画像とかが案外簡単に変えれないって話は
それはびっくり。
事前に編集する部分を決めるのはしんどい。そこまで考えられない。
41
Slide 42
Slide 42 text
俺：右側の設定パネルとかって触った？
ユーザー：なにそれ？
俺：Oh...
42
Slide 43
Slide 43 text
その後色々話を聞いたけど、そもそもエンドユーザーにとって、
「設定パ
ネル = 高度な設定」となっているケースは多そう。
正直 CSS の知識が無いと良く解らないモノも多い。そして、タブの中に
タブがある UI。初心者お断り感はすごい。
可能な限り、設定パネルを触らなくても良いように考えるのが良い。
43
Slide 44
Slide 44 text
俺の感想
投稿サムネイルとか、毎回作ってエラいなーって思ってたら canva で 結構
簡単に作れるという話。Instagram用の画像も作らないいけないというこ
とで。
エンドユーザーがカジュアルにバナーとか作れる時代になったことの
は、ブロックテーマと相性がいいかも。
「緊急のお知らせをどこに出す？」みたいな話はそのときになってはじめ
てユーザー側が想像できる話だったりする。ブロックテーマだとある程度
柔軟に対応できた。
44
Slide 45
Slide 45 text
まとめ
45
Slide 46
Slide 46 text
ここ数年ブロックテーマに取り組んでみての感想
ブロックテーマになったことで、簡単になったこと、難しくなったことは
それぞれあるけど全体的にはそこまで工数が大きく変わった印象は無い。
ブロックエディターにちゃんと対応することの延長線上という感じ。
昔からたいへんなことは今もたいへん。
大枠での柔軟性が上がった分、細かい部分にこだわることのコストは高
い。(ブロックを作成したり)
ローコードになった部分もあるけど、コードを書かなくて良いかというと
そうでもない。
46
Slide 47
Slide 47 text
紹介した事例のサイトで使ってるテーマのテキスト等を差し替えたモノ
https://github.com/torounit/kansai-wordpress-meetup-20260131
47
Slide 48
Slide 48 text
Block Theme is Production Ready !!!
48
Slide 49
Slide 49 text
Thanks!!!
X: @Toro_Unit
Github: @torounit
https://torounit.com/
49