1pxの緊張線

初心に返ってデザインうんちくシリーズ。今回は「1pxの緊張線」です。

「キンチョウセンってナンデスカー！！？？」という方、すみません。
私が勝手に付けた名前です。由来は読み進めて頂ければお分かりかと思います。

若干明るさが違う濃い2つの色が隣り合うと「もったり」感がただよってしまう所に、光の奥深さというか、色のエクスタシーというか（言い過ぎた！）そういった類いの物を私は感じます。
使い方を上手くすれば光を表現するのに、実はとても効果的なんですよ！

が、ただ、「若干」明るさが違うという繊細な色合いなので、サラっと見ると1色に感じてしまうという弱点が近似色の隣り合う2色には有るのです。

そこで！その弱点回避の為に、大抵私はこの似通った色の境に「1pxの緊張線」で境界を引いてやります。

「1pxの緊張線」とは、2色の隣り合う画像に明るい方の色からまた若干明るくなった1pxの線を間に設けることを指します。（この画像は、先ほどの画像に1本線を間に入れただけです。）

すると、例えば左右の黒の明るさを左側が0、右側が1、そして間の1pxの線が右側よりも明るい2とした時に（※解り易く単純な数値としているだけで、実際の明度差とは異なります）、間に1pxの線が入るだけで左側の黒との差がただ右側の黒が隣接した場合は「1」であるのに対して、左側の黒と1pxの緊張線との差は「2」となります。

たった1pxのラインを引くことで実際の明度差に（良い意味で）硬さを発生させるわけです。

ただ1pxも使っているので、Webデザインのpx単位の世界ではかなり邪魔になったりもします。その時は端をぼかしてやったりして調整をおこないます。

最後に、この差を使って以下にひとまとまりの画像をご用意しました。

1pxもあると、差が激しすぎて！とおっしゃる方！
デザインを客観視するのに一番手っ取り早い方法「目を細めて」画面を見てみて下さい。
右の方がパッキリと色差が出ているのではないでしょうか？

なんだか印象がもったりしている時、「1pxの緊張線」を駆使して目の錯覚を起こしてみてはいかがですか？

これはおもしろい！

teeさん：
ありがとうございます！
ちょっとした事をするだけでも変わるという経験則を
少しでも共有出来たら…と思いまして書きました。