【実践テクニック＃3】1pxのハイライトとシャドウで要素の明瞭度を上げてシャープに見せる

デザイン2021.8.15

最終更新日：2022.1.28 Update!!

実務でのデザイン制作に使える制作のポイントを紹介している実践テクニックシリーズですが、第3回目の今回はUIデザインに役立つ、要素をシャープに見せるためのハイライトやシャドウの使い方についてまとめてみたいと思います。過去記事「【デザインワークショップ】vol.11 ボタンのUIデザインについて考える」のコンテンツ内でもボタンデザインのTipsとして紹介していましたが、近年ではCSSにおいても表現を求められるケースもありますので知っておくと便利ですね。それでは早速進めていきたいと思います。今回はボタン要素をサンプルとして紹介しています。ボタン以外にもアイコンやカード要素、リストのアイテム要素など様々な場面で使えるかと思います。

色がついた背景の表面に要素を置く時に起こる問題

デザインによっては要素の色みと背景色が近い場合に、目立たせたいのに馴染んでしまう、視認性が下がるなどの問題が発生してしまいます。単純に要素や背景色の色味を調整することで、コントラストを上げることもできますが、全体のデザインルールをそのような理由で変えるというのも難しいケースもあります。

そんな場合には、要素に対してハイライトやシャドウを加えることで、立体的な印象を与えることができます。その結果、明瞭度やシャープさが上がり、背景と馴染んでしまうことや目立たなくなってしまうという問題を解消できます。ただし、普通の感覚で適用してしまうとどうしても強く極端に効果が入ってしまうことで、違和感が出てしまいます。そこで1pxだけ、わずかに変わるくらいに抑えておくというのがポイントになります。

1pxのハイライトとシャドウで要素をシャープに見せる

まずは、要素に対して内側にハイライトを入れていきます。ここでは白のインナーシャドウで、ぼかしは無しでソリッドなものを適用しています。透明度を調整することで要素の色味になじませます。透明度の強さは色味で調整しますが、あくまで目立たない程度で、入っているかどうかがわからないくらいにしておきます。今回は上下だけにしていますが、必要に応じで周囲に入れてみるのもいいですね。この後シャドウを要素の周囲に入れるので、その分を加味して1px大きく入れておきます。

ハイライトを入れるとこんな感じになります。これだけだとハイライトが入っている周囲だけぼやけてシャープには見えませんね。逆に境界部分が馴染んでしまっている状態です。ここからシャドウを入れていきます。

続いて、要素の周囲にシャドウを入れていきます。ハイライト同様にほんのり効果が適用されているくらいにするのがポイントです。今回はドロップシャドウや光彩などの効果ではなく、ソリッドにするのでボーダーで表現しました。色味は黒で要素の内側に適用するのがポイントです。ハイライトと同じく透明度を調整し、要素の色味に馴染ませていきます。

ハイライトに加えてシャドウを入れることで、要素の明瞭度が上がりシャープに見えるようになりました。ベタ塗りだけのものと比べるとしっかりと存在感が出ています。ユーザーのアクションを促す要素の場合にはとても効果が上がるのではないでしょうか。

背景色無し（白背景）と背景色ありのケースで、単色ベタ塗りとハイライト・シャドウを加えたものをそれぞれ比較してみると、このような違いになります。背景無し（白背景）の場合、ベタ塗りでは色味によっては境界線がクリアに出過ぎてしまい、逆に不自然に見えることもあります。そんな場合ではハイライトとシャドウを加えることで、不自然さを目立たなくすることもできますね。背景色ありの場合ではハイライトとシャドウを加えた要素がくっきりと見えるようになっているのがわかると思います。

また、要素のドロップシャドウが適用されている場合にも、今回のハイライトとシャドウを適用することで効果的に見せることができます。処理なしの場合ですと、どうしても要素のソリッドな感じと、シャドウのぼやけた感じに差が生まれることで違和感につながってしまいます。そこにハイライトとシャドウの処理が加わることで、ほんのり立体感が生まれナチュラルな印象になり、ドロップシャドウが自然に見えるようになります。

今回は要素にハイライトとシャドウを加えてシャープに見せる方法についてまとめてみました。このような効果は極端につけてしまうと不自然さが生まれ、マイナスに働いてしまいます。デザイン制作では神は細部に宿るという言葉も聞きますが、1px単位で、効果が適用されているかどうかがわからないくらいの細かい作業が、見た目に大きな影響を与えることができます。細かいところまで配慮ができるクリエイターを目指していきたいですね。（こちらの記事もどうぞ）【実践テクニック＃1】複数の人物写真を並べるデザインで気をつけるポイント【実践テクニック＃2】料理の写真を使ったデザインで気をつけるポイント