多くの駆け出しデザイナーが、要素を区切るために思考停止でborderを引いてしまいます。しかし、画面内に線が増えれば増えるほど、視覚的なノイズとなり、ユーザーの認知負荷は高まります。シニアデザイナーの視点から、borderを「引く」のではなく「デザインを制御する」ための考え方を共有します。
borderを「色」で解決しようとしない
多くの人は、境界線を目立たせるために濃いグレーや黒を選びがちです。しかし、それではUIが安っぽく見えます。私が現場で推奨するのは、背景色とのコントラスト差を最小限にする手法です。具体的には、背景色をHSLで定義し、borderの色をその明度（L）から10〜15%だけ下げた色に設定します。これにより、線が主張しすぎず、かつ「領域が分けられている」という認識を脳に自然に与えることができます。
border-radiusとの「相性」を計算する
カードUIなどでborderを引く際、角丸（border-radius）を設定すると、角の内側のカーブに違和感を覚えたことはありませんか？これは外側のRと内側のRが数学的に一致していないために起こる現象です。内側のRは、外側のRからborderの太さを引いた値に設定するのが鉄則です。この「Rの数学的整合性」を守るだけで、プロダクト全体の洗練度が劇的に向上します。
線を使わない「セパレーション」の技術
実務において最も重要なのは、borderに頼らないレイアウトを検討することです。例えば、リストアイテムの間に線を入れる代わりに、各要素に十分なパディング（余白）を持たせ、背景色をわずかに変える手法があります。あるいは、box-shadowを極めて薄く（spreadをマイナスにし、ぼかしを弱く）適用し、光の加減で境界線を感じさせる「擬似border」も有効です。
アクセシビリティを忘れない
最後に、デザインの美しさ以前に、borderはアクセシビリティの要でもあります。特にフォームの入力欄において、borderの色だけで状態（エラーやアクティブ）を表現するのは避けてください。必ずアイコンや太さの変化、あるいはフォーカス時のリング（outline）を併用することが、プロとしての最低限の責任です。
線は、引くことよりも「いかに引かずに境界を意識させるか」が腕の見せ所です。次回のコーディングでは、一度すべてのborderを消して、余白だけで画面が成立するかを試してみてください。その時、本当に必要な線だけが自然と見えてくるはずです。
コメント