ブロックテーマでサイトリニューアルした話 / Toro_Unit / 2025.04.12 @ Shinshu WordPress Meetup

ブロックテーマでサイトリニューアルした話 Toro_Unit / 2025.04.12 @ Shinshu WordPress Meetup 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 3

最近（２月）にサイトをリニューアルしました 4

https://risshi-juku.jp/ 9年ぶりのリニューアル。プロジェクト開始が12月半ば、リリースが2月半ばという特急スケジュール。設計・デザイン・開発から全て丸っと担当。 6

リニューアルに至る経緯 7

塾の先生達からこんな相談。 12月頃、LINE公式アカウントをやりたい、それに伴ってサイト上での同線を作りたい。コンテンツの見直しなどもしたいので、操作方法などを教えてほしい。現状だと情報の不足があってページ追加なども必要、お願いできないか？可能であれば自分たちで弄りたい。 8

相談を受けた時のサイトの状況前回のリニューアルが2016年2月。ブロックエディターを念頭に置いた設計にはなっていない。既存サイトの改修でやり続けるのは限界がありそう。 9

とりあえず、Figjam で、マインドマップなどを駆使して、コンテンツの整理。 10

メインとなるサービスのページ等をしっかりと作りたい、訪問者に対して適切な同線が無い等の課題が見えてきた。トップページだけではなくほぼ全てのページの見直しが必要そう。既存サイトの改修でもコストがそれなりにかかる。今後のコンテンツの見直し等を考えるとリニューアルするのが一番コストパフォーマンスが良さそう。というわけで 12月末にリニューアルを決定。 12

プロジェクト概要春期講習等の申し込みなどのために、2月中旬にはリリースしたい。実装期間はせいぜい1ヶ月と少し。運用時にコンテンツの追加や修正がしやすいように。僕の担当範囲は、ディレクション、デザイン、開発、運用の支援。テキスト、写真素材は先方のタスクに。 13

システム選定・設計方針先方の要望に一番マッチしてそうなのが、ブロックテーマでの WordPress だと判断。工期が短いのでなるべくコアのブロックを生かす。迷ったときは、運用のしやすさ、開発工数を考えてシンプルな方に倒す。 14

デザイン 15

最初はブラウザ上で進めて行こうと考えたが流石にしんどかったので、 Figma でデザインを進めることに。作業内容等 i. カラーセット、タイポグラフィ、マージンのルール、レイアウトグリッドの整備 -> theme.json に落とし込む。
ii. 画像、カラム、幅広の横幅などの整理。-> 画像のサイズ設定、 theme.json iii. 各要素のデザイン -> ブロックパターン、ブロックスタイル 17

TOPページ以外は、コンポーネントを各ページで組み合わせる格好に。テーマ実装などをしながら、先方とコンテンツの整理を進める。ワイヤーフレームを作成ながら、コアブロックでの作成が難しいところをブロックスタイル + ブロックパターンで実装。 18

テーマ、ページ開発 20

基本的に、theme.json で出来ることは可能な限り theme.json で。ブロックスタイルなども、section style で。 css も、theme.json の
css プロパティに。 css をビルドしたりすることとどっちがマシかは諸説あるが、トレードオフがあるので、悩んだら theme.json で頑張る。 css を直接書けば何でも出来るけど、theme.json の挙動など考慮することが増えるので、可能な限り theme.json で。ナビゲーションなどは、css 変数が用いられているのでそれを上書きしたりすれば多少はコントロール可能。 21

メディアクエリが使えないが、 flex-basis はブロックごとに設定出来るので、カラムのコントロールはそちらでうまいことやる。フォントサイズやマージンなどは、 clamp() を使ってうまいことやる。 22

今回は1人で完結してるからデザインと開発を行ったり来たり出来るが、これが分業だとなかなか難しくなりがち。CSSを書けばなんとかなるけど、ブロックテーマでは「CSS を書く」という行為に対して様々なトレードオフが存在するため物事を難しくしている。 WordPress 側が吐き出す CSS の挙動の考慮等。複雑性の増加。
23

プラグイン開発など 24

ブロックエディターでは、文中のフォントサイズを変える機能が存在しないので、format API を用いて変更出来るようにプラグインを作成。ついでに、改行位置の制御の機能なども追加。(inline-block化) 25

運用 26

Clarity の導入各ページでの行動などが視覚的にわかるので、とっつきやすい。 Google Analytics は正直難易度高い。 27

先方からの感想特別使いづらさとかは感じなかったとのこと。テキスト・画像の変更等は問題無く行っていた。既存の要素を複製等して対応等はしていた。いちからページを丸っと作れるかというと怪しいかもしれない。慣れたら出来るかも。不明点などはこちらでサポートしたり、やって見せたりしてた。ブロックの詳細なプロパティは触ってない。 Clarity はおもしろい。週1は見ている。 28

制作側としての感想ブロックテーマで以前よりは簡単に扱えるようになった気がしているけど、まだまだ一般のユーザーにとっては簡単では無い。シンプルに、なるべく設定パネルを触らずに使える設計が大事。ユーザーのスキルセット、運用体制に応じた複雑性の調整が必要。複雑性とデザインは密接に絡むので、ちゃんと考慮する必要があるが、 Figma上でデザインしているだけでは「考慮」は難易度高い。行ったり来たり大切。ユーザーと併走していく意識は大事。 29

Thanks!!! 30

ブロックテーマでサイトリニューアルした話 / Toro_Unit / 2025.04.12 @...

ブロックテーマでサイトリニューアルした話 / Toro_Unit / 2025.04.12 @ Shinshu WordPress Meetup

Toro_Unit (Hiroshi Urabe)

More Decks by Toro_Unit (Hiroshi Urabe)

Featured

Transcript