Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ブロックテーマとこれからの WordPress サイト制作 / Toyama WordPres...
Search
Toro_Unit (Hiroshi Urabe)
December 06, 2025
Technology
0
160
ブロックテーマとこれからの WordPress サイト制作 / Toyama WordPress Meetup Vol.81
Toro_Unit (Hiroshi Urabe)
December 06, 2025
Tweet
Share
More Decks by Toro_Unit (Hiroshi Urabe)
See All by Toro_Unit (Hiroshi Urabe)
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
380
ブロックテーマでサイトリニューアルした話 / Toro_Unit / 2025.04.12 @ Shinshu WordPress Meetup
torounit
1
260
Cloudflare Meetup Nagano Vol.3
torounit
1
120
僕が考える 「HTML サイトを WordPress にする」話 / 2023-11-05 Kansai WordPress Meetup
torounit
9
7.7k
Cloudflare Pages に入門してみた / 2023-10-14 Cloudflare Meetup Nagano Vol.2
torounit
2
2k
ブロックエディタをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2023 09 23
torounit
15
10k
ブロックエディターカスタマイズことはじめ #wpshinshu / 2023-06-17 Shinshu WordPress Meetup vol.24
torounit
1
440
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
480
ブロックエディターを用いたWEBサイト開発とカスタムフィールドのあり方を考える。/ WordCamp Japan 2021
torounit
0
620
Other Decks in Technology
See All in Technology
DGX SparkでローカルLLMをLangChainで動かした話
ruzia
1
260
Multimodal AI Driving Solutions to Societal Challenges
keio_smilab
PRO
1
120
HIG学習用スライド
yuukiw00w
0
110
AI駆動開発によるDDDの実践
dip_tech
PRO
0
280
手動から自動へ、そしてその先へ
moritamasami
0
160
Oracle Cloud Infrastructure:2025年11月度サービス・アップデート
oracle4engineer
PRO
1
110
MAP-7thplaceSolution
yukichi0403
2
240
プロダクトマネジメントの分業が生む「デリバリーの渋滞」を解消するTPMの越境
recruitengineers
PRO
3
420
その設計、 本当に価値を生んでますか?
shimomura
2
180
Active Directory 勉強会 第 6 回目 Active Directory セキュリティについて学ぶ回
eurekaberry
16
5.9k
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
16k
Design System Documentation Tooling 2025
takanorip
1
920
Featured
See All Featured
Scaling GitHub
holman
464
140k
Mobile First: as difficult as doing things right
swwweet
225
10k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.3k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
690
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.2k
Designing Experiences People Love
moore
142
24k
Why Our Code Smells
bkeepers
PRO
340
57k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Writing Fast Ruby
sferik
630
62k
Product Roadmaps are Hard
iamctodd
PRO
55
12k
Being A Developer After 40
akosma
91
590k
Transcript
ブロックテーマとこれからのWordPressサイト制作 Toro_Unit / 2025.12.06 @ Toyama WordPress Meetup vol.81 1
$ whoami Toro_Unit / 占部 紘 Frontend & WordPress Engineer
Github: @torounit Twitter: @Toro_Unit 2
Contributions WordPress / Gutenberg Team Shinshu WordPress Meetup WordCamp Tokyo
2023 Speaker WordCamp Kansai 2024 Organizer Team WordCamp Kansai 2025 Organizer Team 3
長野県松本市から来ました 思ってるより1時間くらい近 かった。 Shinshu WordPress Meetup 来週やります。 4
WordPress でサイト制作してる人 5
WordPress でブロックテーマでサイト制作してる人 6
ブロックテーマとは? 7
8
WordPress 5.9 で導入されたテーマ。( Beta が取れたのは 6.2 ) フルサイト編集 (Full Site
Editing, FSE) に対応。 従来のテーマと異なり、PHP テンプレートファイルを持たず、HTML テン プレートと theme.json で構成される。 ブロックエディターを使用して、サイト全体のレイアウトやデザインをカ スタマイズ可能。 ここ数年のデフォルトテーマ (Twenty Twenty-Two 以降) は全てブロックテ ーマ。 9
メリット カスタマイザー / ウィジェット / メニュー等が不要に。全てブロックで解 決するように。 PHP の知識が無くても、テンプレートなどをの開発が可能に。-> セキュ
リティリスクの低減。 10
11
「テーマの役割」の変化 従来のテーマ(クラシックテーマ) 完成したデザイン ブロックテーマ デザインの土台、コンポーネントの提供 12
ブロックテーマを開発するには 13
Create Block Theme ブロックテーマの開発を支援 するプラグイン ブロックテーマの雛形を生成 既存のブロックテーマをベー スに新しいブロックテーマを 作成 サイトエディター上での変更
をテーマに反映 14
なんとなくわかった気になる ブロックテーマ入門 / contents.nagoya 2025 6.28 https://speakerdeck.com/chiilog/na ntonakuwakatutaqi- ninaruburotukutemaru-men 15
ブロックテーマでの開発事例 16
https://risshi-juku.jp/ 設計・デザイン・開発から全て丸っと担当。 17
18
開発の流れ 1. 色彩設計、タイポグラフィ設計、余白のルール設計 2. ボタン等の汎用のコンポーネントのデザイン定義 3. TOPページ、下層ページの汎用のパーツのデザイン設計 4. ワイヤーフレーム等を作成しながら各ページのコンテンツ設計 5.
ヘッダーフッター、ナビゲーションなどの実装 6. 各ページの実装、ブロックパターン等の作成 19
デザイン、コンテンツ設計 20
21
22
作業内容等 1. カラーセット、タイポグラフィ、マージンのルール、レイアウトグリッド の整備 -> theme.json に落とし込む。 2. 画像、カラム、幅広の横幅などの整理。-> 画像のサイズ設定、theme.json
3. 各要素のデザイン -> ブロックパターン、ブロックスタイル 23
実装方針 基本的に、theme.json で出来ることは可能な限り theme.json で。 css を直接書けば何でも出来るけど、theme.json の挙動など考慮すること が増えるので、可能な限り theme.json
や、WordPress 側の機能で実装した い。 ナビゲーションなどは、css 変数が用いられているのでそれを上書きした りすれば多少はコントロール可能。 24
ブロックテーマで サイトリニューアルした話 / Toro_Unit / 2025.04.12 @ Shinshu WordPress Meetup
https://speakerdeck.com/torounit/2 025-dot-04-dot-12-at-shinshu- wordpress-meetup 25
ブロックテーマでの開発について 26
考えるべきこと オリジナルのブロックを作成しない限り、HTML を改変することが 難しい。そのため、デザインをフィックスさせてスタートすると 開発コストの増加に繋がる可能性が高い。 デザインと実装でフィードバックをしながらすすめることが重要。 各ブロックなどの挙動理解してデザインをすることが理想だけど、 組み合わせの問題などもあり、事前に把握するのは簡単ではないので、 サクッと実装してみて確認していくのが良いのでは。 27
既存のブロックの組み合わせで出来るならそれがベターだけど、ブロック を作成した方が楽で使いやすい場合もある。 28
ブロックをゴリゴリに作っている例 29
株式会社ブルートーン by: ZIZO DESIGN https://bluetone.co.jp/ 30
White House http://whitehouse.gov/ 31
ヘッダーや、ナビゲーション、メインビジュアルなどはゴリゴリにカスタ ムブロックを作成して対応している。 レスポンシブとかを大真面目にやると基本的にはゴリゴリに開発をするこ とになることが多い。 32
ここ数年 ブロックテーマに取り組んでみての感想 ブロックテーマになったことで、簡単になったこと、難しくなったことは それぞれあるけど全体的にはそこまで工数が大きく変わった印象は無い。 ブロックエディターにちゃんと対応することの延長線上という感じ。 昔からたいへんなことは今もたいへん。 大枠での柔軟性が上がった分、細かい部分にこだわることのコストは高 い。(ブロックを作成したり) ローコードになった部分もあるけど、コードを書かなくて良いかというと そうでもない。
33
Thanks!!! 34