Blog2018.06.11hoshidaPhotoshopやCSSなどのWebデザインで1px以下に見える線を描く方法Web制作デザインHTML・CSSシェアTweetWebデザインをしていると、最小単位である1px以下の線を引きたいと思うことがあります。そのテクニックをご紹介します。錯視の考慮はデザインの基本その線の目的は何か1px以下に見える線のコード実際にお見せしましょう。以下、1pxの線です。以下が、1px以下に見える線です。#bbb;}コピーわーほそーい!!解説もうお気づきだとは思いますが種明かしをしましょう。以下2つの線を、眼鏡をはずしたり、視点をぼかしたり、遠くに離れて見てみてください。同じ太さに見えると思います。実際には、下の線の方が倍の太さです。同じ色で同じ太さになったら、下の線の方が細く見えます。細く見えると思います。最初のコードは実際は1pxなのですが、線を薄くすることでそれ以下に見えているのです。このような、実物と見えるものがことなることを「錯視」といいます。簡単な言葉にすると「目の錯覚」です。錯視の有名な例として以下のようなものがあります。同じ長さの線分なのに、左側の方が長く見えるというものです。ちなみにこちらは「ミュラー・リヤー錯視」というちゃんとした名前があります。錯視が生じる理由はさまざまで、網膜の物理的特性によるものから、脳での視覚情報処理上のバグのようなもの。生活上の経験が引き起こすものなどがあります。この「ミュラー・リヤー錯視」は、四角い建物の中で生活する経験が引き起こすものだと考えられています。四角い建物の中で生活する私たちは、左の形では真ん中の線は奥の方に、右の形では真ん中線が手前にあるということを固定観念として持っています。人間の目には遠くのものほど小さく、手前のものほど大きく見えますから、左の線は奥にあるから実際はもっと大きいはず、右の線は手前にあるからもっと小さいはずだと補正し、左右の線で長さが異なってみえるとされています。今回のテクニックでも、同じような経験上の錯視が生じています。人間の目には、細い線がぼやけて見えるときには色が薄く見えます。細い濃い線と、太い薄い線は、目の上での見え方が同じなのです。よって、ぼやけた薄い線が見えるとき、それが実はより細くて濃い線なのだという錯覚を起こすのです。人の視覚に対してアプローチを行うビジュアルデザインでは、このような錯視を考慮する必要があります。非常に繊細にデザインされている「フォント」も、当然その錯視を考慮しています。上のフォントは有名な「Futura」です。近代的・未来的な印象になるように直線や円などの幾何学的な形で構成されています。「o」の形なんか見るとまん丸ですよね。正円を重ねてみましょう。