20251102 WordCamp Kansai 2025

WordCamp Kansai 2025のセッション「ブロックテーマ実践記 – 本当に使いやすいWordPressの作り方」のスライド

Transcript

2. 岡本千秋 株式会社HAMWORKS フロントエンドエンジニア Github: @chiilog X: @chiilogweb Zenn: https://zenn.dev/chiilog 2
3. 今日のアジェンダ 1. 「更新しやすいサイト」とは何か 2. 設定パネルに頼りすぎない設計をする 3. パターンで「完成形」を提供する 4. デザインの選択肢を整理する 5. まだ解決できていないこと 6. まとめ 3
4. 1. 「更新しやすいサイト」とは何か 4
5. こんな状況に陥ること、ありませんか？ 「更新しやすいサイトを作ってほしい」という要望 でも 「どう更新するか」は具体的に詰められていない 結果として……… かっこいいデザインだけど更新できない 機能は豊富だけど使い方がわからない 結局、ユーザーが更新を諦めて、制作会社に毎回依頼することになる 5
6. これは誰が悪いわけでもありません！ 「更新しやすいサイト」が当たり前すぎて言語化されていないことが 原因 6
7. 「更新しやすい」とは、ユーザーにとって 必要なときに、 必要な場所を スムーズに更新できる 7
8. そもそも、なぜ「更新しやすさ」が重要？ ユーザーが更新しやすい ということは、 情報が新鮮に保たれる ことであり 訪問者(エンドユーザー)に価値が届く ことにつながる！ これが、私が考えるWordPress（CMS）の本質です。 8
9. これを実現するために ブロックテーマで試行錯誤してきました 解決できたことも、できなかったことも 理想論じゃない、現場の話。 「私なりのやり方」をお話しします！ 9
10. 2. 設定パネルに頼りすぎない設計をする 10
11. まず、一番大事にしていることは 設定パネルを触らなくても きれいなコンテンツが作れる状態を目指す 11
12. それってどういうこと？ ユーザーが「コンテンツ」に集中できるようにする テキストや画像など、本来考えるべきことに時間を使う レイアウトや装飾の設定で迷わせない 12
13. 例えば、スペーサーブロック 余白なら「サイズ」で選べるのでは？と思う ところだけど……… パディング、マージン、ブロックの間隔… ユーザーは何を触ればいいか分からない 13
14. そもそもの問題 14
16. そもそも設定パネル自体が出てなくて 存在を知らない可能性もある！ 説明を聞いても、実際に使う時には 「なんだったっけ…？」ってなるかもしれない 16
17. じゃあ、ユーザーはどうする傾向にあるでしょう？ 17
18. Q.空の段落ブロックは何を意図していると思いますか？ 18
19. A.「スペースとして」の段落ブロック この使い方の問題点 意図がわからない → 「これ消し忘れ？」と思われて削除されてし まう コントロールできない → 複数入れても思い通りの余白にならない 19
20. そこでスペーサーブロックの出番 20
22. 見た目のためのブロックがわかりやすいのはどっち？ 22
23. 「正しいCSS」より「わかりやすい操作」の方が、 ユーザーには価値がある 「ここは余白にしたい」という意図が明確になった ほしい余白を確実につけられるようになった 結果、ユーザーが迷わず、デザインも崩れない 23
24. 3. パターンで「完成形」を提供する 24
25. よく使われるレイアウトの例 25
26. 既存ブロックの組み合わせで 色々なデザインが作れます。 26
27. でも、これを他のページでも使いたいとき… 毎回ブロックを組み合わせるのは大変 複雑なレイアウトになるほど手間がかかる たくさん重なったグループブロック………どこをコピーしたらいいかわ からなくなりがち！ 毎回1から作ると、デザインを統一するのも難しい 27
28. そこで「パターン」の出番 ブロックの組み合わせを「パターン」として保存すれば、 入れるだけで整ったデザインが使えます 28
29. 「パターン」からどういうデザインがあるか一覧で見ることができる 29
30. パターンがない頃はカスタムブロックを作っていた 今ならブロックの組み合わせでできることも、 その都度カスタムブロックを作っていたので、 開発コストが今より高かった！ コアの更新に追従しないのでメンテナンスも大変………。 「いらなくなったから消す」ができない、負の遺産になりがち。 30
31. パターンの作り方 1. エディターでブロックを組む 2. ブロックを選択 → 「パターンを作 成」 3. 名前とカテゴリを設定 4. 「同期」のチェックを外して保存 これだけ！ 31
32. 理想的なページの作り方 1. パターンを挿入 2. テキスト・画像を差し替える 3. 必要があれば微調整 パターンの組み合わせだけでページが作れる状態を目指す！ 32
33. 実際にパターンにしているもの 複雑なレイアウト・デザイン性が高いもの メインビジュアル 入力が面倒・設定が必要なもの 病院の診察時間テーブル、背景色付き全幅セクション 繰り返し使うもの 投稿一覧、装飾付き見出し、カードリンク 33
34. さらに、ページの雛形も 作れます ページ全体をパターンとして 作成することができるので、 新しいページを作るたびに過去の ページをコピーする手間が 省けます! https://developer.wordpress.org/themes/ patterns/starter-patterns/ 34
35. ただ、WordPressが提供する機能だけでは 実現できないデザインもあります 例えば: ボタンのホバー時の色変更 矢印などの装飾アイコン メインビジュアルなど、緻密なレイアウト調整 リンクのクリック可能な領域を拡張する 35
36. そんなときは、 ブロックの 追加CSSクラス を使う WordPressのコア機能ではカバーしきれない 部分を独自のCSSで補う形をとります。 なお、追加CSSクラスを使うたびに CSSファイルを増やすのも大変だなぁと 思っているので、私はTailwind CSSを 採用しています。 36
37. ポイント: ユーザーが入力することは想定していない 開発者がパターン作成時に設定する 「複数ブロックで成り立つデザイン」をコンポーネント的に扱える 万が一class名が壊れても、パターンを入れ直せば元に戻る 37
38. カスタムブロック？ or パターン？ まずはブロックを使ってパターンで実現できるか？ を考えましょう 1. コアブロックの組み合わせで解決できるか？ 2. CSSで装飾すれば実現できるか？ --- 8〜9割くらいはここまでで解決します --- 3. 既存ブロックに機能を追加するプラグインを入れる？ 4. それでも無理ならカスタムブロックを作る or 要件に合致するプラ グインを使う 38
39. 結果、パターンを使うようになってどうなった？ カスタムブロックの開発数がすごく減った！ 数年前は「10〜20個作るのは当たり前」くらいでしたが、近年は 5個作ったらちょっと多いかも？と思う くらい。 カスタムブロック＝Reactでの開発なので、パターンにすることで 開発コストも下がりました。 39
40. 4. デザインの選択肢を整理する 40
41. デザインの選択肢を整理する ユーザーの執筆体験を邪魔しない設計を目指す 見た目に関する設定はあらかじめ作り込んでおく ボタンの色や、本文のフォントサイズ 設定パネルによるカスタマイズの効率化 41
42. 設定パネルは「補助」として使う 右側の設定パネルでできることは限定的に。 カラーを変える フォントサイズを変える この2つを重点的に設計する！ 42
43. 例: フォントサイズ デザインからスタイルを整理して、 可能であれば5個に絞ります。 デフォルトのフォントサイズをMサイズに 設定して、それより大きい見出しのサイズ＋ 小文字に使うためのSサイズで 構成しています。 43
44. 大量にフォントサイズを設定したところで 使わない 選択肢が多いとどれを使うのがよいか迷っ てしまう 6個以上だとセレクトボックス形式にな り、操作感が変わって混乱する S〜XXLからポチッと押すだけでフォント サイズ変わる方が手間がない 44
45. 例: カラーパレット デフォルトの色はノイズにしかならないので、 無効化しておく。 （ theme.json で "defaultPalette": false ） サイトで使わない色が大量に並ぶことで、 本当に使うべき色が埋もれる。 結果、色選びに時間がかかったり、誤った色を 選んでサイトの統一感が損なわれてしまう。 45
46. どんな色をカラーパレットにする？ 企業のコーポレートカラー → Primary, Secondary デザイン上で使われている色 → 背景色、 差し色など 機能的な色 → エラー表示用の赤など カラーパレットは視覚的に選べるので、 色相順や使用頻度順に並べると選びやすい 46
47. その結果、ユーザーからの反応は？ 47
48. 実際にいただいた声や起こったこと 「カラーパレットを設定してもらったので、色を探さなくてよくな って助かる」 「使い方を説明してもらっただけで、やりたいことができるように なった」 ユーザーが制作会社に依頼することなく、自分でページを作成でき た 48
50. 5. まだ解決できていないこと 50
51. ボタンのホバー ボタンブロックのホバー色は現状、 管理画面から設定できません。 CSSで :hover をつけるしかないけど、 ボタンの色ごとにホバーの色を変更する ことができない。 今のところは透過や輝度の変化で対応中です。 51
52. ナビゲーション メガメニューだとどう作る？→Interactivity APIを使う手法で検証中 そもそもスマホでレイアウトが変わるのはどうする？ メガメニュー参考：https://developer.wordpress.org/news/2024/02/an- introduction-to-block-based-mega-menus/ 52
53. Tailwind CSS を使うかどうか？ 実装時には独自CSSではなく、Tailwind CSS を 採用していますが、これが最適解かどうかは まだ模索中です。 「今のところ大体うまくいっている」 だけなので、もっといいアプローチも 探っていきたい。 53
54. これだ！っていう答えはまだない WordPressもバージョンアップのたびに どんどん作りやすくなっています。 今回私が発表した内容も、 数ヶ月後にはもっといい案が出ているかもしれない。 試行錯誤しながら、最適解を探していく このスタンスはずっと大事にしたい。 54
55. まとめ ユーザーが使いやすく、 訪問者(エンドユーザー)にも価値が届く。 両方を満たして初めて、サイトの価値が生まれる 55
56. 具体的なアプローチ 56
57. 設定パネルに頼りすぎない設計をする 右側の設定パネルは気づかれにくい → スペーサーなど、目に見える形 で余白を作る パターンで「完成形」を提供する ゼロから組み立てるのは大変 → 「入れるだけで整ったデザイン」を 用意する デザインの選択肢を整理する 選択肢が多すぎると迷う → サイトで使う色・文字サイズだけに絞る 57
58. はっきり言い切ります。 ブロックテーマで「使いやすいサイト」を作るのは、思っているより ずっと簡単です。 「どう作ったらユーザーが更新しやすい？」 この問いに、すごく向き合いやすくなりました ぜひ、ブロックテーマを作ってみてください。 一緒に「使いやすいWordPress」を増やしていきましょう。 58
59. ありがとうございました！ 59