WordPress管理画面のデザインを、独自CSSの上書きだらけにしない

WordPressプラグインの管理画面を自社ブランドに合わせようとして、色や角丸を個別CSSで上書きすると、本体更新のたびに表示が崩れやすくなります。WordPress 7.1で導入された管理画面用デザイントークンの考え方を整理します。

7.1の「テーマ対応」は管理画面の話

WordPress 7.1では、管理画面コンポーネントの色、角丸、カーソルなどを調整するための基盤が追加されました。これは公開サイトのテーマを切り替える機能ではなく、プラグインなどの管理画面をWordPressの部品と調和させるための仕組みです。

wp-themeスタイルシートには、意味に基づくCSSカスタムプロパティが用意されています。特定の青色を各所へ直接書く代わりに、背景、文字、境界線、強調色などの役割で参照できます。

値を役割へ置き換えると、配色テーマが変わってもコントラストや一貫性を保ちやすくなります。

ボタン、入力欄、通知、モーダルをすべて独自実装すると、見た目だけでなくアクセシビリティや操作も保守対象になります。利用できるWordPressのコンポーネントを確認し、足りない部分だけ拡張します。

ブランド表現は、ロゴや主要色を適切に使う程度に抑えます。管理画面全体を公開サイトと同じ見た目へ変えるより、利用者がWordPressの操作として迷わないことを優先します。

すでに独自CSSが多い場合は、色、余白、角丸、ボタンの順に棚卸しします。変更前後のスクリーンショットを残し、通常、hover、focus、disabled、エラー状態を確認します。

WordPress 7.1未満も対応対象なら、新しいトークンがない場合のフォールバック値を用意します。対応するWordPressの最低バージョンを引き上げる場合は、READMEや更新案内へ明記します。

設定一覧、新規登録、保存完了、入力エラー、権限不足、狭い画面など、代表状態を確認リストにします。WordPress本体やGutenbergの更新後に同じ画面を確認すれば、独自CSSの影響を早く見つけられます。

見た目だけでなく、フォーカス表示、読み上げ名、キーボード操作も確認します。色の変更で文字が読みにくくなっていないかにも注意します。

管理画面のデザインは、ブランド色を増やすことより、WordPressの操作として一貫していることが重要です。7.1のデザイントークンを活用し、色や角丸を役割で管理すれば、本体更新に追従しやすいプラグイン画面を作れます。