名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

一般的なコーポレートサイトやサービスサイトにおいてホームページのメインはテキストですが、ユーザーに企業やサービスを具体的に伝え訴求する要素として、写真もまたメインとなり得る要素です。AdobeXDやIllustratorをデザインソフトとして使用している場合でも、細かい色調補正などにはPhotoshopでの画像補正が必要になります。デザインに画像を当てはめ、全体的な明度やコントラストを調整するだけでもWEBデザインのブラッシュアップにはなりますが、野外の写真であれば植物の緑、空の青色などを部分的に補正することでさらにWEBデザインのクオリティを上げることができます。そこで今回は、ポイント的な画像補正を中心とした画像編集の小技を紹介します。

部分的な画像補正の必要性

基本的にWEBデザインに写真を用いる場合には、画像補正、レタッチを行う必要があります。カメラマンがレタッチを行う場合もありますが、基本的にはデザインに合わせて画像補正を行うことでデザインと統一感をもたせることができます。トーンカーブやレベル補正などでの明度やコントラスト調整、彩度の調整などで全体を編集するだけでも印象は変わりますが、例えば植物と人物が入った写真の色調を編集する時、全体の数値を調整してしまうと人物の肌の色や血色が不自然になってしまったり、植物が色褪せて見えてしまったりするケースが考えられます。そのため、大きくメインに使用する写真を編集する際は、必要に応じて個別に補正を行いましょう。

Photoshopでの小技集

デザインと画像の色調を整えたり、WEBデザインのアクセントとして画像中の色を強調するなど、画像の補正もWEBデザインの重要な要素の一つです。今回はオブジェクトなど部分的な色調補正に絞ったPhotoshopを用いた画像補正の小技をご紹介します。

車のボディカラーなどオブジェクトの色の変更方法

自社が扱うプロダクトや最新の設備写真などはなるべくそのままの色味を使う方がいいですが、イメージ写真中の被写体や写真に映り込んだ備品などの色味をデザインの要素と統一すると色調が統一されデザインに統一感が生まれます。パスや自動選択ツールを用いて色を変えたい部分のマスクを作成し、「色調・彩度」の調整レイヤーを適用して色味を変更しましょう。

植物の緑、空の青を鮮やかにして風景の印象を良くする

野外の撮影では高確率で映り込むことが考えられる植物の緑や空の青は、例外はありますが彩度や明度を高めることでデザインのアクセントになります。しかし、不用意に画像の彩度を上げると人物の肌色や建物の色味が不自然になる恐れもあるため、彩度と明度を上げた調整レイヤーを用意し、ブラシやグラデーションツールで自然に見えるようマスクを調整しましょう。
また、曇り空の写真はPhotoshopの「空の置き換え」機能の精度が高く、高いクオリティの青空の再現が可能です。

擬似的に光源を増やし画像を明るくする

画像の上に文字をレイアウトしたい時や、背景との境界をはっきりとさせたい時など、画像が全体的に暗い、トーンが統一されている場合、どうしても色調補正だけではデザインが成立しない場合があります。グラデーションでマスクを設定した「色相・彩度」レイヤーをハードライトなどオーバーレイ系の描画モードにすることで、擬似的に光源を表現できます。もちろん実際の光源などに比べると不自然になってしまいますが、工夫次第で前ボケの表現なども可能です。

今回のまとめ

写真はGoogleのクローラーに読み込まれるわけではありませんが、WEBデザインにおいて、ユーザーに興味を持ってもらうフックとしての写真の影響力は絶大です。どんなに平面構成的なデザインが洗練されていても、写真一枚でその印象は大きく変わります。Webデザインに写真を使用する際はより良い写真を選定した上で、デザインに合わせたレタッチを心がけましょう。