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