デザイン– category –

ダークモードは色の反転では済みません。役割名ベースのCSSカスタムプロパティ設計、prefers-color-schemeと手動切り替えの併用、影・画像・彩度が壊れる問題への対処を順に解説します。

管理画面のUIは定番パターンで大部分をカバーできます。テーブルの列の絞り方と空状態の設計、フォームのバリデーション表示と必須表現、確認ダイアログを乱発しない基準を実例とともに解説します。

日本語Webフォントはファイルサイズとの戦いです。サブセット配信とfont-display: swapによる読み込み対策、本文16px以上・行間1.7〜1.9・字間0.02emといった実務の数値指針をまとめます。

配色は感覚ではなく手順で決められます。ベース＋アクセントのパレット構成、WCAGのコントラスト比4.5:1の検証方法、色だけに頼らない状態表示の工夫を、エンジニア目線で整理します。

「機能は動くのに使いにくい」を解消するのは、センスではなくルールです。余白の8pxグリッド、視覚的階層、揃え、近接の4原則を、CSSカスタムプロパティやgridでコードに落とす方法を解説します。