第8講

CSSとWordPressデザインツールの考え方

CSSやWordPressのデザイン機能は、見た目を作る道具です。しかし、道具を覚えることより、何を統制するための道具なのかを理解することが重要です。

CSSは見た目の指示書である

HTMLは、見出し、本文、リスト、リンク、ボタン、フォームなどの意味を表します。CSSは、それらをどのように見せるかを指定します。

CSSで指定できるものには、色、文字サイズ、余白、幅、枠線、背景、横並び、中央揃え、カードの影、スマートフォン時の並び替えなどがあります。

CSSプロパティと見た目の対応

CSSの考え方見た目に起きること注意点
margin部品の外側に余白を作る大きすぎると離れすぎ、小さすぎると詰まります。
padding部品の内側に余白を作るカードやボタンの中身に余裕を作ります。
max-width横幅の広がりすぎを防ぐ本文の読みやすさに直結します。
display: flex要素を横並びにしたり、中央揃えにしたりするスマートフォンで縦並びに戻す設計が必要です。
display: gridカードや領域を格子状に並べるカード一覧や複数カラムに向いています。
border枠線をつけるまとまりを示せますが、多用すると硬く見えます。
box-shadow影をつけて少し浮いたように見せるカードやパネルを強調できますが、過剰だと古く見えます。

WordPressブロックエディター

WordPressのブロックエディターでは、見出し、段落、画像、ボタン、グループ、カラムなどを部品として組み合わせます。

便利な反面、自由に使いすぎると、ページごとに余白、文字サイズ、色、ボタン形状がばらばらになりやすいです。視覚確認なしで作業する場合は、自由度を下げ、決められたパターンを使う方が安全です。

グローバルスタイルとtheme.jsonの考え方

WordPressでは、サイト全体で使う色、文字サイズ、レイアウト幅などをまとめて管理する仕組みがあります。これにより、編集者がページごとに別々のデザインを作ってしまうことを防ぎやすくなります。

視覚確認が難しい制作者ほど、「自由に選べる色を増やす」のではなく、「使ってよい色とサイズを制限する」方が実務的です。

WordPressで起きやすい破綻

  • スペーサーブロックを入れすぎて、余白が広すぎる。
  • カラムを使った結果、スマートフォンで順序が不自然になる。
  • ページごとにボタンの色や形が違う。
  • 画像だけが大きすぎて、本文とのバランスが崩れる。
  • 「幅広」「全幅」を使いすぎて、本文の横幅が不安定になる。

実務での基本方針

CSSやWordPressのデザイン機能は、自由に飾るためではなく、サイト全体の見た目を安定させるために使います。視覚確認が難しい場合は、選択肢を増やすより、良い型を固定して使い回す方が安全です。

CSSプロパティと見た目の対応表

CSSを詳しく書けなくても、どの指定が見た目の何を変えるのかを知っておくと、制作者や目視確認者との会話がしやすくなります。

指定見た目の変化確認するときの言葉
margin部品の外側の余白を作る。部品同士が詰まりすぎていないか。
padding部品の内側、文字と枠の間に余白を作る。カードやボタンの中が窮屈に見えないか。
max-width本文や箱の横幅が広がりすぎないようにする。本文の1行が長すぎないか。
display: flex横並び、中央揃え、均等配置などを作る。ボタンやカードの並びが自然か。
gap横並び・縦並びの部品同士の間隔を作る。カード同士の距離が近すぎないか。
font-size文字の大きさを変える。見出しと本文の差が明確か。
font-weight文字の太さを変える。強調が多すぎていないか。
border枠線を付ける。情報のまとまりが分かりやすいか。
border-radius角を丸くする。硬い印象か、柔らかい印象か。
box-shadow影を付け、浮いたように見せる。カードが浮きすぎて不自然ではないか。

WordPressでは「自由に触れるほど崩れやすい」

WordPressのブロックエディターは便利ですが、ページごとに色、文字サイズ、余白、幅を自由に変えると、全体の統一感が壊れます。目視確認が難しい制作者ほど、自由度を上げるより、選択肢を制限した方が安定します。

安全な考え方色は基本色、背景色、強調色を決めて使い回す。見出しサイズも数種類に絞る。余白も「小・中・大」程度に整理し、毎回感覚で調整しない。