こんにちは、Webデザイナーのそいです。

今回はデザインの基本、画像の色調補正についてを解説していきたいと思います。ベースカラーにあわせてどのような色合いの系統で補正をかけると馴染むのか？といった解説を事例とあわせて紹介していますのでぜひご覧ください。

画面に“馴染む”色調補正とは？

色調補正とは、画面の明るさ・鮮やかさをはじめに、色味のバランスを整えていく（補正する）ことを指します。デザインと画像を組み合わせる場合、元の画像を闇雲に色合い調整、または補正無しでそのまま元の画像を使うと全体のバランスがしっくりこない、ということが起きるのでどんなデザインでも画像を使う場合、色調補正は行うようにしましょう。

例えばこんな時に

下記の画像を例に挙げて補正無し・有りの違いを解説していきます。

キービジュアルの画像ですが補正無し・有りとで2つのパターンを作成してみました。補正無しの画像でも悪くはないのですが、少しボヤっとした印象です。これに対し、Photoshopを使ってトーンカーブやレベル補正をかけ、シャープな印象に仕上げたのが補正有りの画像になります。

デザインの色合いのバランスや調和のとれた雰囲気を演出するためには補正は欠かせない作業の1つです。今回の例は画像をシャープに見せる補正でしたが、もう1つの要点として、ベースのデザインの色合いに合わせて画像の色味も補正することが挙げられます。

今回の記事では、色味を調整することの重要性やコツを紹介していきます。次からはWEBデザインにおいて、ベースカラーで良く使われる色合いをもとに色調補正を解説します。4種類ずつ色補正をかけていますがベースカラーごとで“馴染む”印象が変わりますので、ぜひ見比べてみてください。

ベースカラーがベージュの場合

色合い補正無し（ノーマル）：相性◎

色味の補正はかけずにトーンカーブで微調整した画像を使っています。画像そのものが程よく暖色が効いていて、ベースカラーのベージュと調和している印象です。

レンズフィルター（寒色）：相性△

色味に青系統のフィルターをかけています。落ち着いた印象に仕上がっていますが、ベージュそのものの色が黄色っぽいため、少し相性が悪くなってしまいます。

彩度低め・レベル補正きつめ：相性×

メリハリが効いた補正加工になります。写真が全体的に暗く、エッジが効いた加工になりますのでベージュが持つ“温かみ”とマッチしていない印象があります。

レンズフィルター（暖色）：相性×

色味にオレンジ系統のフィルターをかけています。赤み・黄色みがきつめにかかっているので色焼けしたような安っぽい印象に見えてしまっています。

ベースカラーがオレンジの場合

色合い補正無し（ノーマル）：相性〇

色合いの相性は悪くないものの、ベースカラーのパキっとしたカラーに写真のイメージが負けてしまっています。もう少しメリハリがつくと◎

レンズフィルター（寒色）：相性△

ベースカラーの反対色の寒色がかった写真の場合、引き立つ印象になりますが補正をかけすぎると違和感が生じてしまいます。寒色がかったフィルターをかけたい場合は「気持ち青いかな？」程度をおすすめします。

彩度低め・レベル補正きつめ：相性×

ベージュほどではありませんが、少し暗い印象が強くなりあまりマッチしていない印象があります。

レンズフィルター（暖色）：相性◎

ベースカラーと同系統のフィルターをかけると色味が調和しバランス良く見えるようになります。暖色が強めのこのフィルターでも、少しレトロ＆モダンな風合いに演出することができます。

ベースカラーがブルーの場合

色合い補正無し（ノーマル）：相性△

この画像との色合いの相性はさほど悪くありませんが、画像によっては相性が悪くなることも。例えばこの画像より暖色系や緑系統のイメージですと、色のまとまりが悪くなってしまいます。ですので、元の画像の色味は、ベースカラーにあわせて調整するのが良いでしょう。

レンズフィルター（寒色）：相性◎

ベースカラーオレンジ×レンズフィルター（暖色）で紹介した時と同様に、同系色の色調補正は相性抜群です。

彩度低め・レベル補正きつめ：相性〇

“ブルー”そのもののの色合いが格好良く、締まりのあるイメージですのでこの補正との相性は悪くありません。“ブルー”も優しく淡い空色、スタイリッシュな紺色など、系統は様々ですのでベースカラーの印象にあわせてレベル補正や彩度を調整するのがおすすめです。

レンズフィルター（暖色）：相性×

ベースカラーと反対色にあたる色合いのフィルターをかけると、ベースカラーベージュ×レンズフィルター（暖色）で紹介したように、相性が悪くデザインの仕上がり品質が下がってしまいます。青系統のベースカラーを使ったデザインを作成する場合、もともとが暖色がかった写真を使うのであれば彩度を落とす、青みが強くなるように補正するなど忘れず加工を行いましょう。

ベースカラーがモノトーンの場合

色合い補正無し（ノーマル）：相性△

色合いの相性は悪くないものの、ベースカラーに重みがあるので写真が柔らかすぎる印象を受けてしまいます。

レンズフィルター（寒色）：相性〇

青みがさほど強くなければ、モノトーン×寒色の相性は良いです。写真に少し青みが加わることで色合いに奥行きが出るため、締まりが出てバランスが取れるようになります。

彩度低め・レベル補正きつめ：相性×◎

モノトーン×彩度低め・レベル補正きつめ色調補正の相性は抜群です。写真に“メリハリの利いた”加工を意識し、レベル補正をふんだんに活用することでスタイリッシュで格好良い印象の仕上がりになります。

レンズフィルター（暖色）：相性×

モノトーンと相性が悪いのは“中途半端”に色数が多い写真や、色合いが寄っているもの（〇色系統のような表現になるもの）です。ベースとなるモノトーンの濃淡が濃いめであれば彩度を落すことが調和するコツになります。

まとめ

いかがでしょうか。今回はベースカラー別で、合う色調補正・合わない色調補正について解説しました。同じ色補正でもベースカラーが異なることで印象が全然違いますよね。今回は一例として4色を挙げて紹介しましたが、ベースカラーに対してどんな色合いに加工すると相性が良いのかはPhotoshopに触れてみるほかわかりません。加工する×組み合わせる…を繰り返して、新たな発見が生まれていきますのでぜひ色々な色合い補正を試してみてくださいね！

今回もご一読いただき、ありがとうございました。