ブロックテーマ、WordPress でウェブサイトをつくるということ / 2026.02.07 Gifu WordPress Meetup

Gifu WordPress Meetup #91 - WordPress や Web 制作に関するお話がたくさん聞ける会 https://www.meetup.com/ja-jp/gifu-wordpress-meetup/events/312855759 の登壇資料です。

Transcript

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