webサイトのデザインにおいて、画像や写真は必須の要素です。
例えばサービスサイトやLPサイトがほとんどが文字で構成されていたら、何の説明なのか理解できず「別の商品を探しにいった方が早い」と感じてしまう可能性があります。
こういったユーザー離脱は、画像を交えて説明を加えることで解決します。
画像は専門用語に対してもイメージの理解を深める手助けとなり、魅力的な商材写真で興味を引くことも可能です。
今回は、サイト内の画像をよりよく魅せるための画像加工の方法について紹介します。
画像は、自分で撮影するか、フリー素材サイトから利用しましょう。
今回は、写真AC のフリー画像から加工していきます。
まず、なぜこのレイヤーが必要なのか？
直接加工すると、加工後に元には戻せなくなります。取り消しボタンを使っても上限がありますよね。
万が一、加工後に元の画像が必要になった時のために元画像は残しておきましょう。
PhotoShopで加工したい画像を読み込み、画像レイヤーを右クリック→「レイヤーを複製」します。
複製後は「(最初のレイヤー名)のコピー」というレイヤー名になるので、わかりやすく名前を変更しておきます。
「切り抜きツール」から、画像のサイズを調整しましょう。
画像の比率も細かく指定できるので、自分で作成したい比率を入力します。今回は4:3で作成します。
元々「1200px × 1000px」の画像を、4:3で切り抜く場合「1200px × 900px」にトリミングされます。
逆に、pixelやmmなどのキャンバスサイズの単位で打ち込むことも可能です。比率に換算して切り抜いてくれます。
画像の解像度指定は最後に行うので、比率だけ先に調整しましょう。
次に、画像の色味を整えていきます。
メニューバーの「イメージ」から「色調補正」を見ると、補正フィルターが多く表示されます。
それぞれ役割がありますが、今回は「明るさ・コントラスト」「色相・彩度」を調整しましょう。
「色調補正」から「明るさ・コントラスト」を選択します。
つまみを移動するか、直接数値を入力することで調整が可能です。
「明るさ」はそのまま画像全体の明暗。「コントラスト」は明るい部分と暗い部分の明暗の差を意味します。
コントラストが高いほど、明暗がはっきり分かれる画像になります。
右下の「プレビュー」にチェックをしておくとリアルタイムで加工された状態を確認できます。
今回の画像はアイテムと背景が白なので、画像を明るく、コントラストを高くすると同化してしまいますね。
全体的に見ると背景自体も白で明るい部類なので、商品の白と一緒に明るくなってしまいました。
今回は、韓国通販サイト風のノスタルジックな画像をめざします。
明るさを少しさげ、コントラストを思い切り下げて全体的なトーンを統一します。
再調整してみると、こんなイメージです。
コントラストを下げることで商品と背景の見え方が違いますね。
商品をよく魅せるために、商品は見えやすく、サイトの雰囲気に合った明るさにしましょう。
また、実際の色味に近づけるとわかりやすい紹介画像になります。
こちらもつまみを動かしたり、数値を入力することで調整ができます。
色相は虹色を左右に動かすことで全体的な色のバランスを調整できます。
全体的に彩度を下げてくすませて、色相をグリーンに持っていくとこんな印象になります。
思い切った色味にしたいのなら、彩度を上げると色がはっきり目立つようになります。
逆に一番下まで下げると完全に白黒になります。
今回はノスタルジーな印象にするので、明度は上げ、全体的な色味を薄くします。
色相は青みよりもベージュに近いイメージなので、左側に移動しました。
その上で彩度を少し上げることで、花のピンクがはっきりとしました。彩度は上げるとかなり色が目立つことがあるので、色調補正の「自然な彩度」から少しずつ調整してもいいと思います。
最初に用意した画像との違いを比べてみましょう。
元々の色味がこちら。
加工したものがこちらです。
色味を調整したことで、柔らかみが強調されて可愛らしい印象になりましたね。
サイト全体が白やベージュ基調の色であれば、自然かつ商品の印象がよく伝わる画像の完成です。
Webサイトの制作では、このように写真の色味は加工して統一させます。
無加工だとバラバラな印象になりがちですが、色調を調整してより魅力的なサイトづくりの一部にすることができます。
最後に、画像解像度の調整をします。
解像度が高くなるとその分画像自体のサイズが大きくなります。
サイトが重くなる原因にもなってしまうので、コンテンツの幅に合わせて調整しましょう。
メニューの「イメージ」から「画像解像度」を選択します。
今回は解像度180dpi に対して、幅が4000px 以上ありました。
サイトに掲載する画像の幅を600px の想定で加工したので、その倍の1200px に修正しました。
解像度の調整をしたら最終完成になるので、書き出して保存しましょう。
この際注意することは、解像度を修正したまま保存しないことです。解像度は小さくすることはできますが、大きくするとどうしても画像が荒くなります。
また色味やサイズの調整が必要になった時のことを考えて、色味調整が終了した時点でのデータを残しておくといいでしょう。
画像の加工作成については以上になります。
勿論、あえてそうしない限りは”画像だけ”のサイトにするわけにもいきません。
SEO対策も重視するのであれば、それなりの文章量も必要となります。
デザインするにあたって、文章と画像の適切なバランスをよく考えなくてはいけません。
サイトのどういう印象を強く表現したいか、何を伝えたいのか。構想段階でトーンを決定しておくとスムーズに進めることができるでしょう。
是非、サイトに合った加工方法を試してみてください。
関連記事
久保田 里佳子 
櫻井 邦則 
