第19講
WordPressブロックエディター実務
WordPressのブロックエディターは、HTMLやCSSを直接書かずに画面を作れる便利な道具です。しかし、視覚確認なしで自由に使うと、見た目の不統一や破綻が起きやすくなります。
ブロックは画面上の部品である
WordPressでは、見出し、段落、画像、ボタン、グループ、カラム、スペーサーなどをブロックとして扱います。ブロックは、画面上に置かれる部品です。
問題は、ブロックを置くこと自体ではなく、部品同士の関係を考えずに置くことです。
グループブロック
グループブロックは、複数の部品を1つのまとまりにするための箱です。背景色、余白、幅を設定すると、視覚的にも1つの領域に見えます。
注意グループを深く重ねすぎると、どこに余白が効いているのか分かりにくくなります。目視確認なしでは、意図しない大きな余白や狭すぎる余白が発生しやすくなります。
カラムブロック
カラムブロックは、情報を横並びにするための部品です。パソコンでは横に並び、スマートフォンでは縦に並ぶことが多いです。
起きやすい問題3つのカードを横並びにしたつもりでも、文字量が違うため高さが不揃いに見える。スマートフォンで縦並びになったとき、順序が意図と違って見える。
スペーサーブロック
スペーサーブロックは空白を入れるための部品です。便利ですが、乱用するとページごとに余白がばらばらになります。
安全な運用スペーサーで場当たり的に調整するのではなく、CSSやテーマ設定で、見出し前後、カード間、セクション間の余白を統一します。
幅広・全幅
幅広は、通常の本文幅より少し広く表示する設定です。全幅は、画面の左右いっぱいまで広げる設定です。
全幅を使うと迫力は出ますが、本文や小さな情報に使うと、横に広がりすぎて読みにくくなります。トップの大きな領域や背景付きの帯など、目的が明確な場所だけに使います。
画像ブロック
画像は見える人に強い印象を与えます。画像が大きすぎると、本文より画像が主役になります。画像の縦横比が他の部品と合わないと、1つだけ大きな枠に見えることがあります。
ブロックエディターでの確認項目
- 同じ種類の見出しは、同じ大きさ・余白に見えるか。
- ボタンの色と形は、ページ内でそろっているか。
- スペーサーを入れすぎて、間延びしていないか。
- カラムがスマートフォンで自然な順序に並ぶか。
- 画像だけが大きすぎたり、小さすぎたりしていないか。
- ページごとに雰囲気が変わりすぎていないか。
講義のまとめ
WordPressでは、自由に作れることより、統一された選択肢の中で作ることが重要です。全盲の制作者が関わる場合、色、文字サイズ、幅、余白をあらかじめ制限した方が、目視品質を安定させやすくなります。