ブロックテーマをゴリゴリに使い倒してサイトを作った話 / Kansai WordPress Meetup 2025 01 25

【大阪】Kansai WordPress Meetup@大阪『新年スペシャルLT大会+α』登壇資料です。

このスライドはToro_Unit さんの
ブロックエディタをゴリゴリに使い倒してサイトを作った話
https://speakerdeck.com/torounit/kansai-wordpress-meetup-2023-09-23
をオマージュさせていただきました。
Special Thanks❢
Toro_Unit (Hiroshi Urabe)
https://speakerdeck.com/torounit

Transcript

1. ブロックテーマをゴリゴリに使い倒してサイトを作った話 つぶ @Kansai WordPress Meetup 2025.01.25
2. このセッションはToro_Unit さんの ブロックエディタをゴリゴリに使い倒してサイトを作った話 をオマージュさせていただいています。 出典 : https://speakerdeck.com/torounit/kansai-wordpress-meetup-2023-09-23
3. > whoami
4. つぶ 佐敷 亮太(さしき りょうた) リユース業界の片隅で買ったり売ったりしてます。 ブラウザと表計算ソフトの自動操作をかいてます。 Web 制作が好きです。サビ猫も好きです。 好きな食べ物は🍜です。釣りが趣味です。 Github : @tbshiki X : @tbshiki
5. • Kansai WordPress Meetup ◦ もくもく会を担当しています。 ◦ 2/28 @Osaka(予定) Wikimedia Commons/ File:August 2007, Yodo River seen from Umeda Sky Building 5.jpg Author:Syced.License:Creative Commons Zero, Public Domain Dedication 大阪市淀川区からきました
6. • WordPress を使って小さな Web サービス作るのが好きです。 • Kansai WordPress Meetup の オーガナイザーしてます。 • オレオレプラグインを つくることがたまにあります。 • イベントで喋ったりお酒飲んだり WordCamp の実行委員をしたり 釣りしたりたまにボランティアス タッフしたりしてます。
7. Agenda 1. ブロックテーマとは 2. 概要 3. ブロックテーマを選んだ理由 4. ブロックテーマを使い倒すことによるメリット 5. ブロックテーマから学ぶべきこと 6. 課題 7. お気持ち表明
8. ブロックテーマとは 2022年1月25-26日にリリースされたWordPress 5.9 “Joséphine Baker” に Full site editing(フルサイト編集)という機能が搭載されました。 このFSE に対応したテーマのことをブロックテーマと呼んでいます。 ちょうどリリースから3年👏
12. ブロックテーマとは • 簡単にまとめるとコンテンツ部分以外のレイアウトにも。 ブロックエディターで構築できるテーマのこと。 ◦ ヘッダーやフッター、アーカイブページ、404ページなど 全てブロックで構築できる。 • .php でテーマテンプレートを作っていたのを、 管理画面からブロックで構築できるようになりました。
13. 出典 : https://ja.wordpress.org/team/handbook/theme-development/basics/template-hierarchy/
14. 出典 : https://ja.wordpress.org/team/handbook/theme-development/basics/template-hierarchy/ →フロントエンドからの呼び出し順 　　　　　　テーマ作成の優先順←
15. つまりどういうこと？
16. • テーマに依存するようなレイアウトに縛られることが少なくなった。 • 設定がメニューやウィジェット、カスタマイザーなどに分散しない。 • コンテンツ部分以外もカスタマイズできる自由度が格段にあがった。 ブロックテーマとは いままで手を出せなかったところまで ブロックで構築できるようになったのが ブロックテーマ
18. 一昨日(2025.01.23)にサイトをリリースしました。 https://hoothoe.com/ • リニューアルではなく新規公開。 • ディレクションからWP側の実装やメール設定や周辺まるっと。 • デザインはデザイナーさん。でもコーディングもできる人。 • そのデザイナーさんの下請け的な立場。パートナー。 • 先にディレクションが走っていて実装期間は、1ヶ月くらい。 ◦ 12月25日実装スタート、1月23日リリース
20. ページ編集画面はこんな感じ。
22. だいたい同じ見た目 ❢
23. • 実装期間が1ヶ月と短い。 • かっこよさよりアクセシビリティ意識したい。 • ダークモード対応したい。 • カスタムブロックを作る予算は無い。 • ピクセルパーフェクト不要、実装優先。 概要（ディレクション）
24. • カスタムフィールドはなるべく使わない。 • ショートコードもなるべく追加しない。 • なるべくメディアクエリに依存したCSS をなるべく書かない。 ◦ コア・ブロック・プラグインが持っているもの以外。 ◦ unitone はEvery Layout の影響が濃いから。 • できるだけWYSIWYG。 概要（実装）
25. デザインデータはこんな感じ。
27. カスタムフィールドを使わない方向での構築
28. テーマどうする問題
29. テーマ選定時にブロックテーマを選んだ理由 • 公開予定日まで時間がない。 • オリジナルテーマを作るのは間に合わなさそう。 • いわゆる既存テーマを使うことで時短したい。 • アクセシビリティ気になる。 • 先方さんは九州。 • デザイナーさんも九州。
30. 選ばれたのはunitone でした https://unitone.2inc.org/
31. この案件をやる上で、一番大事にしたこと。 発信するハードルを下げる
32. Why?
33. • 先方さん「更新続けられるかなー」 • でも育てることができるWeb サイトにしたい。 • 発信しないとWeb サイトの意味がない。 • 更新しないとCMS の意味がない。 ◦ 更新しないなら静的サイトでいい。 ◦ 難しいものは触りたくない。 ◦ わかりやすいと触ることができる。 ◦ かっこいいと触りたくなる。
34. 自分たちの情報発信を自身でコントロールしたいから CMSを使うんだよね？
35. 開発体制
36. DesignStudio 35mm 三宅 敦（みやけ あつし） 福岡でホームページ制作をしています。 主にデザイン・コーディング・WordPress の構築を行っていますが、 WordPress はクラシックテーマばかりでheader.php やront-page.php など テンプレートファイルを用意したり、固定ページはコーディングしておいた html をエディタ内に貼り付けるという方法で作っていました。 今回つぶさんに制作をご相談したところ「それたぶん全部ブロックテーマで 出来ますよ」と言われ、はじめてブロックテーマで作ることになりました。 自然の中が好きで時々森で仕事しています。 Web : https://www.designstudio35mm.com/ X : @ds_35mm
37. • デザイン。 • ディレクション。 • ブロックを調整。 • CSS。 • コンテンツの流し込み。 三宅さんの役割
38. • テーマ・プラグインの選定。 • カスタム投稿タイプ・カスタムタクソノミーの設定。 • ブロックの組み立て。 • 必要に応じてその他のカスタマイズ。 自分の役割
39. クエリーループブロック無双
40. ワークフロー • デザインデータを確認しながら実装できるかを検討。 ◦ これはこのブロックで実装できるかなみたいな感じで Figma のワイヤーフレームにコメントでやりとり。 • ブロックだけで無理じゃね？ってのはコメントに残しておいて 実装できなさそうなら最終的にコードを書くつもりをしておく。 • 基本的に自分がブロック組み立てて、三宅さんが調整。 ◦ デザインに合わなければCSS を書いてもらう流れ。
41. 技術的な課題 • コンテンツの追加や運用は先方さんで行ってもらいたい。 • CMS としての機能を活用したい。 ◦ コンテンツの作成に集中してもらいたい。 ◦ 触られたくないところは触られないようにしたい。 • でも触ることができないテキストは極力減らしたい。 • マニュアルが無くても触ってもらえるようにしたい。
42. 解決する為の考え方
43. • 難しすぎそうなことはしない。 • 運用でカバーをなるべく無くす。 ◦ 権限で使えるブロックを管理 ◦ ブロックのロック • プラグインで解決できるところはプラグインで解決する。 ◦ 使うプラグインの見極めは大事。 • クエリーループブロック使い倒した。
44. 「変なところ触ったらおかしくなりました」への処方箋 ブロックのロックと権限で使えるブロックをコントロール ここから少しブロックエディターの話です、ブロックテーマでも有用です
45. ブロックのロック • ブロックの構造をロックできる。 • ブロックの構造を変更されないようにしたい。 • ブロックの移動や削除をできなくする。 ◦ ただしその場でロックを解除できる。 ◦ 誤操作対策。 Block Locking API https://ja.wordpress.org/team/handbook/block-editor/how-to-guides /curating-the-editor-experience/block-locking/
46. • mgn さんの記事をヒントに 寄稿者・投稿者が使えるブロックを制限した。 https://snippet.m-g-n.me/2023/12/05/884 ◦ 管理者と編集者は制限しない。 ◦ ブロック一覧を取得するのになんか書いた。 使えるブロックの制限
47. • Snow Monkey Editor の編集ロック（ロール） https://ja.wordpress.org/plugins/snow-monkey-editor/ • ブロックのスタイルの変更をロック(オレインデザインさんの記事) ◦ templateLock https://olein-design.com/blog/how-to-lock-wordpress-content その他の手法
48. アクセシビリティって難しい
49. アクセシビリティしたいこと • リンクは直感的にリンクってわかるようにしたい。 • ギュンギュンに動くのは疲れる。 • 目に優しく。 • 見た目を優先しすぎてわかりやすさを下げることはしない。 • 今いる場所をわかりやすくしたい。
50. アクセシビリティしたこと • カードデザインの内部のテキスト以外のリンクは 一部を除いてtext-decoration: none; しない。 ◦ あえてアンダーラインがついたまま残す。 • 英単語をデザインとして大文字で表示したかった。 ◦ HTML で大文字で表記するとスクリーンリーダーが 略語として認識してしまうやつ。 ◦ text-transform: uppercase; で対応。 • 勝手にギュンギュン動かさない。触って動くのはOK。 • 🌙
51. ダークモード対応
52. プラグインと 💸
53. 結果 • ダークモード対応が楽できた。 • 結構WYSIWYG になった。 • クエリーループブロックほんと便利。 • ショートコード作るPHPちょっと書いた。 • メディアクエリに依存するCSSちょっと書いた。 • カスタムフィールド使わなかった。 • カスタムフィールド使わなかった。
54. ブロックテーマと相性良さそうなプラグインを見つけた Advanced Query Loop https://ja.wordpress.org/plugins/advanced-query-loop/ クエリーループブロックのクエリーをごにょごにょできる。 カスタムフィールドでクエリーをフィルタする的なことも できるはず。 Hyperlink Group Block https://ja.wordpress.org/plugins/hyperlink-group-block/ 囲んだブロックを<a></a>でラップできるブロック。 クエリーループブロック内でクエリーのリンクをあてた グループブロックみたいなブロックが追加される。
55. 対応の速さに驚いた
56. unitone フォーラムに書き込み • ちょっとした不具合のようなものを 見つけてしまったのでunitone の フォーラムで相談しました。
57. 要望まで解決してくれた • そのやり取りの中で要望を伝えました。 • 報告をした2日後に不具合の修正と一緒に 要望を解決できる為のフィルターフックを 組み込んでいただけました。 • はっや。 • ありがてぇ。
58. WordPress 6.7.1 テーマ : unitone 結果 使用プラグイン : Advanced Query Loop All-in-One WP Migration Custom Post Type UI Microsoft Clarity My unitone One User Avatar SEO SIMPLE PACK Snow Monkey Editor Snow Monkey Forms SVG Support unitone TOC WP Dark Mode WP Mail SMTP WP Multibyte Patch XO Security Yoast Duplicate Post 実装時にお世話になったプラグイン : Simple Custom CSS and JS User Switching
59. ブロックテーマを使い倒すことによるメリット
60. ブロックテーマは楽しい • 短い期間で構築できる。 • コードを書かなくていい。 • だいたい管理画面でできる。 • クエリーループブロックとても便利。
61. 足りないものを補ってくれる • コードを書けない人はコードが書けない人なりの戦い方ができる。 • デザインができない人はデザインができない人なりの戦い方ができる。 • プログラミングができない人は プログラミングができない人なりの戦い方ができる。 • 自分に合った戦い方を選べるのがブロックテーマの魅力。
62. WordPress 化をしてきた人へのメリット • テーマテンプレートの構造がわかっているからブロックテーマでも どのテンプレートを触ればいいかを既に知っている。 • いままでコードで書いてきたものをブロックで作るだけ。 • 全体を見るのが楽になる。 • ツールをあっちこっちしなくてよくなる。 • お客さんと一緒に見ながら編集できる。 • ブロックテーマでの制作はまだまだブルーオーシャン。
63. ブロックテーマから学ぶべきこと
64. 出典 : https://ja.wordpress.org/team/handbook/theme-development/basics/template-hierarchy/
65. クラシックテーマと工数の変化 • クラシックテーマとそんなに変わってない気はする。 • ブロックテーマになったから工数が減ったってことも無い。 • 同期パターンとかブロックエディターが進化してて ショートコード作ることは減った。 • コードで書いていたものがブロックになった感覚。
66. 開発者・実装者主体ではなくあくまで運用者メイン • CMSであることの意味を考え続ける。 • 運用者にとっての「良い」を考え続ける。 ◦ 心地良い、気持ち良いという状況を提供できているか。 • いままで編集できなかったところの実装を考えるきっかけに。 • できるだけブロックで実装する気概が身につく。
67. ユーザーにも気を配れていますか？
68. 違和感をしっかりキャッチアップ
69. 違和感潰し • デザインのちょっとしたズレ。 • 見えづらい要素。 • タップしにくい、クリックしにくい。 • 人間はすぐ順応してしまう。 • 制作者はずっと見てるから違和感も当たり前になってしまう。 • Web 制作って違和感潰しの繰り返しだったりしませんか。
70. 課題
71. • まだ足りないものはある。 • 前後の記事ブロックの画像以外とか。 • なんでもブロックで実装するのは本当に必要なのか。 ◦ 全部自分で設定しないといけないのは大変。 ◦ テーマのテンプレートに頼るのは楽だった。 ブロックテーマとしての課題
72. • できることをしてみよう。 • バグ報告しよう。 • アンケートに答えたり。 • issue 潰したりしてみよう。 • 翻訳とかもおすすめ。 思うことがある人は
73. いいと思うことを実現しようとすると時間がかかる
74. コミュニケーションの課題 • 戻しが多くなってしまった。 • ブロック組み立て→スタイル調整→CSSじゃなくてブロックでできた ということが多かった。 • 気になるところがあったらとりあえずチャットで送る。 ◦ チャットでやりとりしてるだけだとタスクにならない。 ◦ タスク管理ツールを使えばいいじゃない。 ◦ 今回はGitHub Projects を採用。
75. コミュニケーション大事 • めっちゃovice で肩ポンした。 • 画面共有しまくって何度も相互確認をお願いしてしまった。 • 何回もカスタムフィールドは使わずに実装しましょうって言って ごめんなさい。 • Figma のコメントとても便利。
76. oviceのスクショ
77. 裏課題
78. • ブロックテーマを使った制作を三宅さんに知ってもらいたかった。 • カスタムフィールド製造業からの脱却。 WordCamp Tokyo 2019 しずみさんのセッション https://www.youtube.com/watch?v=Q6NQbBI9jtw • 管理・運用・保守にできるだけコストがかからないようにする。 ◦ なにかある度にコードをいじるならWordPress じゃなくていい。 ◦ コアもテーマもプラグインも自動更新。 ◦ 崩れたら直しましょうの精神の共有。 これからのためにデザイナーさんとの連携強化
79. さいごに、お気持ち
80. この5年6年と少しくらいでの変化 WordPress がWeb サイトを作る上で 『一番簡単で手軽なツールだった時代』は終わりを遂げました。 • フロントエンドなら、Next.js / Astro + microCMS とか。 • ブログなら、note とか。 • ノーコードなら、Wix / STUDIO / Squarespace とか。 • AI 開発なら、replit / bolt.new + Supabase / v0 とか。
81. 自分がWordPress を導入する理由
82. 自分がブロックテーマ を選択する理由
83. カスタマイズ可能な強力なエディターを備えているから
84. クラッシックテーマにもハイブリッドテーマにもブロックテーマにも 関係する話が多くなってしまったかもしれません。 結局はユーザーの為になっているか、運用者が更新したくなるものかが大事です。 テーマはしたいことを叶える為の手段であって目的ではありません。 私はブロック開発とかテーマ開発をめちゃくちゃしてきたわけではありません。 ブロックテーマはそんな私のいい武器となって一緒に戦ってくれました。 ですがブロックテーマが正義とか、クラシックテーマの方がよかったとかはないです。 いま目の前にいる運用者さんが使いやすいというものを提供するべきだと思います。 Toro_Unit さんが伝えたかったことを今一度考えてみてはいかがでしょうか。 間違ってたらごめんね。
85. WordPress のエディターは唯一無二
86. ブロックテーマが気になる方は 正直今はこれだけ追いかけていたらいい日本国内版 • Twenty Twenty-Five https://wordpress.org/themes/twentytwentyfive/ • X-T9 https://x-t9.vektor-inc.co.jp/ • unitone https://unitone.2inc.org/ 他にオススメがあったら教えて下さい
87. • 最先端やトレンドをすべて把握してくれとはいわない。 • わからないことがあったら 使って、調べて、真似て、つくって、とにかく触って。 • 横着をしない。 • したいことを明確にした上で AI に聞くなり、課金するなり、代替案に変えたりしよう。 • 使いやすいように実装できれば勝ち！ • スキルがなくてもOK、調べ尽くせ！ • そうしたらしたいことがを実現できるスキルが身につくから。
88. あなたが使っているWordPress は使いやすいWordPress ですか？
89. 必要があればこんなこともします
90. ショートコードにまみれることだってあるさ
91. めちゃくちゃに散らかっているオレオレプラグイン
92. 実装を優先することだってあるさ (ごめんなさい、ちゃんときれいにします)
93. Thanks❢ Github / X / WP.org and more... : @tbshiki tbshiki.com Special Thanks❢ Toro_Unit https://speakerdeck.com/torounit/kansai-wordpress-meetup-2023-09-23