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

Slide 1

Slide 1 text

ブロックテーマをゴリゴリに使い倒してサイトを作った話つぶ @Kansai WordPress Meetup 2025.01.25

Slide 2

Slide 2 text

このセッションはToro_Unit さんのブロックエディタをゴリゴリに使い倒してサイトを作った話をオマージュさせていただいています。出典 : https://speakerdeck.com/torounit/kansai-wordpress-meetup-2023-09-23

Slide 3

Slide 3 text

> whoami

Slide 4

Slide 4 text

つぶ佐敷亮太(さしきりょうた) リユース業界の片隅で買ったり売ったりしてます。ブラウザと表計算ソフトの自動操作をかいてます。 Web 制作が好きです。サビ猫も好きです。好きな食べ物は🍜です。釣りが趣味です。 Github : @tbshiki X : @tbshiki

Slide 5

Slide 5 text

● 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 大阪市淀川区からきました

Slide 6

Slide 6 text

● WordPress を使って小さな Web サービス作るのが好きです。 ● Kansai WordPress Meetup のオーガナイザーしてます。 ● オレオレプラグインをつくることがたまにあります。 ● イベントで喋ったりお酒飲んだり WordCamp の実行委員をしたり釣りしたりたまにボランティアスタッフしたりしてます。

Slide 7

Slide 7 text

Agenda 1. ブロックテーマとは 2. 概要 3. ブロックテーマを選んだ理由 4. ブロックテーマを使い倒すことによるメリット 5. ブロックテーマから学ぶべきこと 6. 課題 7. お気持ち表明

Slide 8

Slide 8 text

ブロックテーマとは 2022年1月25-26日にリリースされたWordPress 5.9 “Joséphine Baker” に Full site editing(フルサイト編集)という機能が搭載されました。このFSE に対応したテーマのことをブロックテーマと呼んでいます。ちょうどリリースから3年👏

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

ブロックテーマとは ● 簡単にまとめるとコンテンツ部分以外のレイアウトにも。ブロックエディターで構築できるテーマのこと。 ○ ヘッダーやフッター、アーカイブページ、404ページなど全てブロックで構築できる。 ● .php でテーマテンプレートを作っていたのを、管理画面からブロックで構築できるようになりました。

Slide 13

Slide 13 text

出典 : https://ja.wordpress.org/team/handbook/theme-development/basics/template-hierarchy/

Slide 14

Slide 14 text

出典 : https://ja.wordpress.org/team/handbook/theme-development/basics/template-hierarchy/ →フロントエンドからの呼び出し順　　　　　　テーマ作成の優先順←

Slide 15

Slide 15 text

つまりどういうこと？

Slide 16

Slide 16 text

● テーマに依存するようなレイアウトに縛られることが少なくなった。 ● 設定がメニューやウィジェット、カスタマイザーなどに分散しない。 ● コンテンツ部分以外もカスタマイズできる自由度が格段にあがった。ブロックテーマとはいままで手を出せなかったところまでブロックで構築できるようになったのがブロックテーマ

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

一昨日(2025.01.23)にサイトをリリースしました。 https://hoothoe.com/ ● リニューアルではなく新規公開。 ● ディレクションからWP側の実装やメール設定や周辺まるっと。 ● デザインはデザイナーさん。でもコーディングもできる人。 ● そのデザイナーさんの下請け的な立場。パートナー。 ● 先にディレクションが走っていて実装期間は、1ヶ月くらい。 ○ 12月25日実装スタート、1月23日リリース

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

ページ編集画面はこんな感じ。

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

だいたい同じ見た目 ❢

Slide 23

Slide 23 text

● 実装期間が1ヶ月と短い。 ● かっこよさよりアクセシビリティ意識したい。 ● ダークモード対応したい。 ● カスタムブロックを作る予算は無い。 ● ピクセルパーフェクト不要、実装優先。概要（ディレクション）

Slide 24

Slide 24 text

● カスタムフィールドはなるべく使わない。 ● ショートコードもなるべく追加しない。 ● なるべくメディアクエリに依存したCSS をなるべく書かない。 ○ コア・ブロック・プラグインが持っているもの以外。 ○ unitone はEvery Layout の影響が濃いから。 ● できるだけWYSIWYG。概要（実装）

Slide 25

Slide 25 text

デザインデータはこんな感じ。

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

カスタムフィールドを使わない方向での構築

Slide 28

Slide 28 text

テーマどうする問題

Slide 29

Slide 29 text

テーマ選定時にブロックテーマを選んだ理由 ● 公開予定日まで時間がない。 ● オリジナルテーマを作るのは間に合わなさそう。 ● いわゆる既存テーマを使うことで時短したい。 ● アクセシビリティ気になる。 ● 先方さんは九州。 ● デザイナーさんも九州。

Slide 30

Slide 30 text

選ばれたのはunitone でした https://unitone.2inc.org/

Slide 31

Slide 31 text

この案件をやる上で、一番大事にしたこと。発信するハードルを下げる

Slide 32

Slide 32 text

Why?

Slide 33

Slide 33 text

● 先方さん「更新続けられるかなー」 ● でも育てることができるWeb サイトにしたい。 ● 発信しないとWeb サイトの意味がない。 ● 更新しないとCMS の意味がない。 ○ 更新しないなら静的サイトでいい。 ○ 難しいものは触りたくない。 ○ わかりやすいと触ることができる。 ○ かっこいいと触りたくなる。

Slide 34

Slide 34 text

自分たちの情報発信を自身でコントロールしたいから CMSを使うんだよね？

Slide 35

Slide 35 text

開発体制

Slide 36

Slide 36 text

DesignStudio 35mm 三宅敦（みやけあつし）福岡でホームページ制作をしています。主にデザイン・コーディング・WordPress の構築を行っていますが、 WordPress はクラシックテーマばかりでheader.php やront-page.php などテンプレートファイルを用意したり、固定ページはコーディングしておいた html をエディタ内に貼り付けるという方法で作っていました。今回つぶさんに制作をご相談したところ「それたぶん全部ブロックテーマで出来ますよ」と言われ、はじめてブロックテーマで作ることになりました。自然の中が好きで時々森で仕事しています。 Web : https://www.designstudio35mm.com/ X : @ds_35mm

Slide 37

Slide 37 text

● デザイン。 ● ディレクション。 ● ブロックを調整。 ● CSS。 ● コンテンツの流し込み。三宅さんの役割

Slide 38

Slide 38 text

● テーマ・プラグインの選定。 ● カスタム投稿タイプ・カスタムタクソノミーの設定。 ● ブロックの組み立て。 ● 必要に応じてその他のカスタマイズ。自分の役割

Slide 39

Slide 39 text

クエリーループブロック無双

Slide 40

Slide 40 text

ワークフロー ● デザインデータを確認しながら実装できるかを検討。 ○ これはこのブロックで実装できるかなみたいな感じで Figma のワイヤーフレームにコメントでやりとり。 ● ブロックだけで無理じゃね？ってのはコメントに残しておいて実装できなさそうなら最終的にコードを書くつもりをしておく。 ● 基本的に自分がブロック組み立てて、三宅さんが調整。 ○ デザインに合わなければCSS を書いてもらう流れ。

Slide 41

Slide 41 text

技術的な課題 ● コンテンツの追加や運用は先方さんで行ってもらいたい。 ● CMS としての機能を活用したい。 ○ コンテンツの作成に集中してもらいたい。 ○ 触られたくないところは触られないようにしたい。 ● でも触ることができないテキストは極力減らしたい。 ● マニュアルが無くても触ってもらえるようにしたい。

Slide 42

Slide 42 text

解決する為の考え方

Slide 43

Slide 43 text

● 難しすぎそうなことはしない。 ● 運用でカバーをなるべく無くす。 ○ 権限で使えるブロックを管理 ○ ブロックのロック ● プラグインで解決できるところはプラグインで解決する。 ○ 使うプラグインの見極めは大事。 ● クエリーループブロック使い倒した。

Slide 44

Slide 44 text

「変なところ触ったらおかしくなりました」への処方箋ブロックのロックと権限で使えるブロックをコントロールここから少しブロックエディターの話です、ブロックテーマでも有用です

Slide 45

Slide 45 text

ブロックのロック ● ブロックの構造をロックできる。 ● ブロックの構造を変更されないようにしたい。 ● ブロックの移動や削除をできなくする。 ○ ただしその場でロックを解除できる。 ○ 誤操作対策。 Block Locking API https://ja.wordpress.org/team/handbook/block-editor/how-to-guides /curating-the-editor-experience/block-locking/

Slide 46

Slide 46 text

● mgn さんの記事をヒントに寄稿者・投稿者が使えるブロックを制限した。 https://snippet.m-g-n.me/2023/12/05/884 ○ 管理者と編集者は制限しない。 ○ ブロック一覧を取得するのになんか書いた。使えるブロックの制限

Slide 47

Slide 47 text

● Snow Monkey Editor の編集ロック（ロール） https://ja.wordpress.org/plugins/snow-monkey-editor/ ● ブロックのスタイルの変更をロック(オレインデザインさんの記事) ○ templateLock https://olein-design.com/blog/how-to-lock-wordpress-content その他の手法

Slide 48

Slide 48 text

アクセシビリティって難しい

Slide 49

Slide 49 text

アクセシビリティしたいこと ● リンクは直感的にリンクってわかるようにしたい。 ● ギュンギュンに動くのは疲れる。 ● 目に優しく。 ● 見た目を優先しすぎてわかりやすさを下げることはしない。 ● 今いる場所をわかりやすくしたい。

Slide 50

Slide 50 text

アクセシビリティしたこと ● カードデザインの内部のテキスト以外のリンクは一部を除いてtext-decoration: none; しない。 ○ あえてアンダーラインがついたまま残す。 ● 英単語をデザインとして大文字で表示したかった。 ○ HTML で大文字で表記するとスクリーンリーダーが略語として認識してしまうやつ。 ○ text-transform: uppercase; で対応。 ● 勝手にギュンギュン動かさない。触って動くのはOK。 ● 🌙

Slide 51

Slide 51 text

ダークモード対応

Slide 52

Slide 52 text

プラグインと 💸

Slide 53

Slide 53 text

結果 ● ダークモード対応が楽できた。 ● 結構WYSIWYG になった。 ● クエリーループブロックほんと便利。 ● ショートコード作るPHPちょっと書いた。 ● メディアクエリに依存するCSSちょっと書いた。 ● カスタムフィールド使わなかった。 ● カスタムフィールド使わなかった。

Slide 54

Slide 54 text

ブロックテーマと相性良さそうなプラグインを見つけた Advanced Query Loop https://ja.wordpress.org/plugins/advanced-query-loop/ クエリーループブロックのクエリーをごにょごにょできる。カスタムフィールドでクエリーをフィルタする的なこともできるはず。 Hyperlink Group Block https://ja.wordpress.org/plugins/hyperlink-group-block/ 囲んだブロックをでラップできるブロック。クエリーループブロック内でクエリーのリンクをあてたグループブロックみたいなブロックが追加される。

Slide 55

Slide 55 text

対応の速さに驚いた

Slide 56

Slide 56 text

unitone フォーラムに書き込み ● ちょっとした不具合のようなものを見つけてしまったのでunitone のフォーラムで相談しました。

Slide 57

Slide 57 text

要望まで解決してくれた ● そのやり取りの中で要望を伝えました。 ● 報告をした2日後に不具合の修正と一緒に要望を解決できる為のフィルターフックを組み込んでいただけました。 ● はっや。 ● ありがてぇ。

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

ブロックテーマを使い倒すことによるメリット

Slide 60

Slide 60 text

ブロックテーマは楽しい ● 短い期間で構築できる。 ● コードを書かなくていい。 ● だいたい管理画面でできる。 ● クエリーループブロックとても便利。

Slide 61

Slide 61 text

足りないものを補ってくれる ● コードを書けない人はコードが書けない人なりの戦い方ができる。 ● デザインができない人はデザインができない人なりの戦い方ができる。 ● プログラミングができない人はプログラミングができない人なりの戦い方ができる。 ● 自分に合った戦い方を選べるのがブロックテーマの魅力。

Slide 62

Slide 62 text

WordPress 化をしてきた人へのメリット ● テーマテンプレートの構造がわかっているからブロックテーマでもどのテンプレートを触ればいいかを既に知っている。 ● いままでコードで書いてきたものをブロックで作るだけ。 ● 全体を見るのが楽になる。 ● ツールをあっちこっちしなくてよくなる。 ● お客さんと一緒に見ながら編集できる。 ● ブロックテーマでの制作はまだまだブルーオーシャン。

Slide 63

Slide 63 text

ブロックテーマから学ぶべきこと

Slide 64

Slide 64 text

出典 : https://ja.wordpress.org/team/handbook/theme-development/basics/template-hierarchy/

Slide 65

Slide 65 text

クラシックテーマと工数の変化 ● クラシックテーマとそんなに変わってない気はする。 ● ブロックテーマになったから工数が減ったってことも無い。 ● 同期パターンとかブロックエディターが進化しててショートコード作ることは減った。 ● コードで書いていたものがブロックになった感覚。

Slide 66

Slide 66 text

開発者・実装者主体ではなくあくまで運用者メイン ● CMSであることの意味を考え続ける。 ● 運用者にとっての「良い」を考え続ける。 ○ 心地良い、気持ち良いという状況を提供できているか。 ● いままで編集できなかったところの実装を考えるきっかけに。 ● できるだけブロックで実装する気概が身につく。

Slide 67

Slide 67 text

ユーザーにも気を配れていますか？

Slide 68

Slide 68 text

違和感をしっかりキャッチアップ

Slide 69

Slide 69 text

違和感潰し ● デザインのちょっとしたズレ。 ● 見えづらい要素。 ● タップしにくい、クリックしにくい。 ● 人間はすぐ順応してしまう。 ● 制作者はずっと見てるから違和感も当たり前になってしまう。 ● Web 制作って違和感潰しの繰り返しだったりしませんか。

Slide 70

Slide 70 text

課題

Slide 71

Slide 71 text

● まだ足りないものはある。 ● 前後の記事ブロックの画像以外とか。 ● なんでもブロックで実装するのは本当に必要なのか。 ○ 全部自分で設定しないといけないのは大変。 ○ テーマのテンプレートに頼るのは楽だった。ブロックテーマとしての課題

Slide 72

Slide 72 text

● できることをしてみよう。 ● バグ報告しよう。 ● アンケートに答えたり。 ● issue 潰したりしてみよう。 ● 翻訳とかもおすすめ。思うことがある人は

Slide 73

Slide 73 text

いいと思うことを実現しようとすると時間がかかる

Slide 74

Slide 74 text

コミュニケーションの課題 ● 戻しが多くなってしまった。 ● ブロック組み立て→スタイル調整→CSSじゃなくてブロックでできたということが多かった。 ● 気になるところがあったらとりあえずチャットで送る。 ○ チャットでやりとりしてるだけだとタスクにならない。 ○ タスク管理ツールを使えばいいじゃない。 ○ 今回はGitHub Projects を採用。

Slide 75

Slide 75 text

コミュニケーション大事 ● めっちゃovice で肩ポンした。 ● 画面共有しまくって何度も相互確認をお願いしてしまった。 ● 何回もカスタムフィールドは使わずに実装しましょうって言ってごめんなさい。 ● Figma のコメントとても便利。

Slide 76

Slide 76 text

oviceのスクショ

Slide 77

Slide 77 text

裏課題

Slide 78

Slide 78 text

● ブロックテーマを使った制作を三宅さんに知ってもらいたかった。 ● カスタムフィールド製造業からの脱却。 WordCamp Tokyo 2019 しずみさんのセッション https://www.youtube.com/watch?v=Q6NQbBI9jtw ● 管理・運用・保守にできるだけコストがかからないようにする。 ○ なにかある度にコードをいじるならWordPress じゃなくていい。 ○ コアもテーマもプラグインも自動更新。 ○ 崩れたら直しましょうの精神の共有。これからのためにデザイナーさんとの連携強化

Slide 79

Slide 79 text

さいごに、お気持ち

Slide 80

Slide 80 text

この5年6年と少しくらいでの変化 WordPress がWeb サイトを作る上で『一番簡単で手軽なツールだった時代』は終わりを遂げました。 ● フロントエンドなら、Next.js / Astro + microCMS とか。 ● ブログなら、note とか。 ● ノーコードなら、Wix / STUDIO / Squarespace とか。 ● AI 開発なら、replit / bolt.new + Supabase / v0 とか。

Slide 81

Slide 81 text

自分がWordPress を導入する理由

Slide 82

Slide 82 text

自分がブロックテーマを選択する理由

Slide 83

Slide 83 text

カスタマイズ可能な強力なエディターを備えているから

Slide 84

Slide 84 text

クラッシックテーマにもハイブリッドテーマにもブロックテーマにも関係する話が多くなってしまったかもしれません。結局はユーザーの為になっているか、運用者が更新したくなるものかが大事です。テーマはしたいことを叶える為の手段であって目的ではありません。私はブロック開発とかテーマ開発をめちゃくちゃしてきたわけではありません。ブロックテーマはそんな私のいい武器となって一緒に戦ってくれました。ですがブロックテーマが正義とか、クラシックテーマの方がよかったとかはないです。いま目の前にいる運用者さんが使いやすいというものを提供するべきだと思います。 Toro_Unit さんが伝えたかったことを今一度考えてみてはいかがでしょうか。間違ってたらごめんね。

Slide 85

Slide 85 text

WordPress のエディターは唯一無二

Slide 86

Slide 86 text

ブロックテーマが気になる方は正直今はこれだけ追いかけていたらいい日本国内版 ● Twenty Twenty-Five https://wordpress.org/themes/twentytwentyﬁve/ ● X-T9 https://x-t9.vektor-inc.co.jp/ ● unitone https://unitone.2inc.org/ 他にオススメがあったら教えて下さい

Slide 87

Slide 87 text

● 最先端やトレンドをすべて把握してくれとはいわない。 ● わからないことがあったら使って、調べて、真似て、つくって、とにかく触って。 ● 横着をしない。 ● したいことを明確にした上で AI に聞くなり、課金するなり、代替案に変えたりしよう。 ● 使いやすいように実装できれば勝ち！ ● スキルがなくてもOK、調べ尽くせ！ ● そうしたらしたいことがを実現できるスキルが身につくから。

Slide 88

Slide 88 text

あなたが使っているWordPress は使いやすいWordPress ですか？

Slide 89

Slide 89 text

必要があればこんなこともします

Slide 90

Slide 90 text

ショートコードにまみれることだってあるさ

Slide 91

Slide 91 text

めちゃくちゃに散らかっているオレオレプラグイン

Slide 92

Slide 92 text

実装を優先することだってあるさ (ごめんなさい、ちゃんときれいにします)

Slide 93

Slide 93 text

Thanks❢ Github / X / WP.org and more... : @tbshiki tbshiki.com Special Thanks❢ Toro_Unit https://speakerdeck.com/torounit/kansai-wordpress-meetup-2023-09-23

Slide 94

Slide 94 text

No content