枠線

定義

枠線（border）は要素の縁に沿って引く線で、その要素がどこから始まりどこで終わるのか、 境界をはっきり見せてくれます。枠線の性格は三つの属性で決まります。線がどれくらい太いか（太さ）、 どんな形か（実線、点線、破線など）、そして何色かです。細い実線は静かに領域を分けるだけですが、 太い線は強く存在感を放ち、点線は一時的だったり空いている場所を示すのによく使われます。 同じ箱でも、枠線の与え方しだいで印象は大きく変わります。

なぜ重要か

画面で要素どうしの境界を作る方法は、大きく三つあります。枠線で線を引く方法、影で少し浮かせる方法、 そして背景色を変えてやんわり分ける方法です。このうち枠線は境界をもっともはっきり作る手段なので、 表のマス目を区切ったり、入力欄の範囲を知らせたりといった、正確な区別が必要な場所でとくに力を発揮します。 ユーザーは入力欄の枠線を見て、ここに文字を書けるんだなとすぐに気づきます。ただし枠線は線がくっきり残る分、 画面に線が増えすぎると仕切りに閉じ込められたように窮屈で、ごちゃごちゃして見えます。 だからこそ本当に必要な場所にだけ使い、あとは余白や薄い背景色で分ける節度が、画面をずっとすっきりさせます。

よくある間違い

• すべての要素を枠線で囲んでしまうことです。カード、リストの一行ずつ、ボタンまで全部を線で 囲むと、画面が格子に閉じ込められたように窮屈になります。区別がどうしても必要な場所にだけ線を使い、 あとは余白で分けたほうがずっとすっきりします。
• 枠線の色を濃くしすぎることです。背景とのコントラストが強い黒い線は、中身より線のほうが先に目に入り、 視線を奪ってしまいます。背景よりほんの少し暗いグレーくらいに薄く抑えてこそ、境界は生きたまま 中身が主役として残ります。
• 枠線と影と背景色を一つの要素に全部重ねて使うことです。三つとも境界を作る手段なので、 一緒に積み重ねると効果が重複し合い、要素が必要以上に重たく見えます。 場面に合った一つだけを選んで使うほうが、ずっとすっきりします。

実務のヒント

• 境界を作るときは、枠線・影・背景色の違いのうち、場面に合った一つを選びましょう。 はっきりした区別が必要なら枠線、浮いている感じが欲しいなら影、やんわりまとめたいなら 背景色の違いが向いています。三つを一つの要素に全部重ねると重たくなります。
• 枠線の色は別の値として持たず、背景色から派生させて数段階暗くした値に統一しましょう。 そうすれば、いくつもの画面にわたって線のトーンが一貫して保たれます。
• 入力欄のように状態の変化が大切な要素は、ふだんは薄い枠線を、フォーカスやエラー状態では 色の濃い枠線を与えて、いまの状態を線一本ではっきり知らせましょう。こうすると ユーザーは、いまどこに入力しているのか、何が間違っているのかを即座に気づけます。

関連概念