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