#1 たった5分で変わる！デザイン力UPのための、Photoshopしあわせ♡レタッチ術【明るさ・色味編】

はじめまして！　Photoshop愛好歴25年のウェブデザイナー、マスベサチといいます。

今回から3回にわたって、Photoshopを使ったレタッチのポイントと手順を紹介していきます。

「レタッチ」とは、写真に以下のような加工をほどこし、魅力的にブラッシュアップする作業のことです。

• 写真を明るくしたり、暗くしたりする
• ゴミや余計なものを削除する
• 色を整えたり、変えたりする
• 形をキレイに整える

レタッチがなぜ重要なのか？

次のデザインを見比べてみてください。

同じデザインでも、右のように写真がキレイになることで全体のクオリティがグッと上がって見えますよね。

デザインの工程で、なんとなくになりがちな写真レタッチ。わたしの周りでも、初学者の方からベテランの方まで「写真素材をそのまま使っていて、レタッチはそんなにしない」という方が意外に多い印象です。

しかし、上の例のように写真のクオリティUPはデザインのクオリティに直結します。レイアウトや配色、フォントの扱いなどと同じようにデザインには欠かせない要素です。と言っても、神技のような高度なテクニックは不要。たった数分のかんたんレタッチで仕上がりがグッと変わるので、タイムパフォーマンスも抜群です。

クライアントもデザイナーも、そして見る人も幸せになれる「しあわせレタッチ」を一緒に習得していきましょう！

準備

Photoshopの画面レイアウト

この記事では、Photoshopのワークスペースの設定を［初期設定］の状態で解説を進めていきます。ワークスペースとはPhotoshopのパネルのレイアウトのことです。

メニューバーの［ウィンドウ］＞［ワークスペース］をクリックしましょう。

• ［初期設定］にチェックがついている場合：［初期設定をリセット］をクリックして、ワークスペースをリセット
• ［初期設定］にチェックがついていない場合：［初期設定］をクリック

※使用バージョン：Photoshop 2024（v 25.5.1）

サンプルファイルのダウンロード

サンプルファイルを使って、本記事の解説内容を実際に試せます。ダウンロードして、ぜひ一緒にやってみてください。

• サンプルファイルをダウンロードする

上記をダウンロードすると以下2つのファイルが入っています。ダブルクリックしてPhotoshopで開きましょう。

• 01_try.psd
• 02_design.psd

主に使用するのは「01_try.psd」です。

「02_design.psd」は、最後に写真をデザインに反映した状態を確認するために使います。

「02_design.psd」には「01_try.psd」が〈リンク〉という形式で配置されています。そのため、「01_try.psd」を編集・保存すると、「02_design.psd」に編集後の状態が自動で反映されるつくりになっています。

「明るさ」「色味」とは？

実際の手順の前に「明るさ」と「色味」の意味をおさえておきましょう。

写真の「明るさ」

次の写真を見比べてください。

左は暗く、右は明るい状態です。
明るさや暗さが写真の“味”になっている場合もありますが、一般的には明るすぎたり暗すぎたりしないように調整します。また、近くに配置された写真どうしの明るさのバランスにも留意しましょう。

写真の「色味」

写真の〈色味〉（いろみ）とは「微細な色の具合」のことです。写真に限らず、印刷物や映像、デザイン全体に対しても使われます。

また、写真の色味に関連して〈色かぶり〉という用語があります。写真を撮る方だと耳にしたことがあるかもしれません。〈色かぶり〉とは、特定の色が強すぎたり、弱すぎたりする状態のことです。

以下の写真を見比べてください。

左は青みがかった状態（＝青かぶり）、右は赤みがかった状態（＝赤かぶり）です。

色かぶりを起こしている写真は、実際に見たときの印象と違っているため、一般的には補正する必要があります。しかし、あえて特定の色を強くすることで写真から感じる印象をコントロールすることもできます。

• 青みがかった写真：クールさや透明感、スタイリッシュな印象
• 赤みがかった写真：あたたかみやほっこりした印象

用途にあわせて「明るさ」や「色味」を自由に調整できるように、次のセクションから一緒に手順を学んでいきましょう。調整の手法はたくさんありますが、今回はその中から代表的な手法を紹介します。

レタッチのはじめの一歩！「調整レイヤー」の基本

写真の明るさや色味を調整する手順は、大きく分けて次の2つです。

① 「色調補正コマンド」を使う
② 「調整レイヤー」を使う

一度確定してしまうと、その編集をやり直すことが難しい ①「色調補正コマンド」 ではなく、あとから編集しやすいように ②「調整レイヤー」 で解説します。

明るさ調整の基本

暗く写っている写真は、明るい写真に比べて“どんより”して見えてしまいます。特に今回の作例は「このカフェで過ごすと明るい気持ちになれそう」と感じていただきたいですよね。そこで、トーンカーブを使って画像が明るくなるように調整します。

たったの3ステップ！明るくする・暗くする方法

先ほど開いておいた「01_try.psd」を使って解説を進めます。

1. ［トーンカーブ］の調整レイヤーを追加
［レイヤー］パネルの下にある丸いアイコンをクリックし、［トーンカーブ］をクリックします。すると、右の図のように「トーンカーブ1」レイヤーが追加されます。これを 調整レイヤー と呼びます。

この状態で［プロパティ］パネルを確認すると、トーンカーブの編集画面が表示されます。グラフ内の、左下から右上に横切っている斜めの線が トーンカーブ です。

2. コントロールポイントの追加・削除

トーンカーブは現在45°の対角線になっていますが、この線の角度を変えたり、曲線にすることで画像の明るさが変化します。

トーンカーブ上をクリックすると、〈コントロールポイント〉と呼ばれる点が追加されます。

コントロールポイントは、⌘＋クリック（Windowsの場合はCtrl＋クリック）で削除できます。

3. 明るさの調整

トーンカーブの真ん中あたりにコントロールポイントを追加し、下にドラッグしてトーンカーブを下げてみましょう。全体的に画像が暗くなります。

次に、同じコントロールポイントをそのまま上方向にドラッグしてみてください。今度は画像全体が明るくなります。今回は明るくしたいので、この状態にしておきましょう。

明るさ調整のビフォー・アフターを確認してみましょう。調整後は明るくなったことがわかります。

［レイヤー］パネルの「トーンカーブ1」レイヤーの左側にある目のアイコンをクリックし、レイヤーを非表示にすると調整前の状態が確認できます。表示/非表示を何度か繰り返すと、ビフォー・アフターが確認しやすいのでおすすめです。

もっと知りたい方向け：『トーンカーブの基本』

トーンカーブのグラフの右側は「写真の明るい部分」、左側は「写真の暗い部分」を表しています。

トーンカーブを最初の対角線の状態から上に上げると明るくなり、下に下げると暗くなるのは前述のとおりです。

例①）トーンカーブを 「S字型」 にすると、コントラストが高くなる

【コントラストとは】
〈コントラスト〉とは、色の明暗差のことです。明暗差がはっきりしている（＝明るい部分は明るく、暗い部分は暗い）ことを「コントラストが高い」、明暗差が小さい（＝明るい部分と暗い部分の差が少ない）ことを「コントラストが低い」と表現します。

例②）トーンカーブを 「逆S字型」 にすると、コントラストが低くなる

この基本を理解した上で、他にも自分でいろいろ試してみましょう。

どうしてトーンカーブを使うの？

明るさを調整するための〈調整レイヤー〉には、「トーンカーブ」の他にも「明るさ・コントラスト」「レベル補正」「露光量」の3つがあります。

その中でトーンカーブを使う理由は、他の3つに比べて細かい調整を行いやすいから です。明るさやコントラストを細かく調整できるだけではなく、色味の調整もできます。

最初はそこまでトーンカーブでの調整をしなくても、使用感に慣れておいて損はありません。ぜひ積極的に使って、トーンカーブに慣れていってください。

塗りつぶしまたは調整レイヤー

［レイヤー］パネルの下にある丸いアイコンをクリックすると表示される「塗りつぶしまたは調整レイヤー」のポップアップメニューは4つのセクションに分かれています。

いちばん上は「塗りつぶしレイヤー」、残りは「調整レイヤー」で、上から「明るさ」「色」「特殊な調整」のように分かれています。

色味調整の基本

天候や照明など撮影される環境によって、写真の色味が不自然になってしまうことがあります。この違和感をレタッチで軽減しましょう。

色かぶりを補正する

1. ［カラーバランス］の調整レイヤーを追加

［レイヤー］パネルの下にある丸いアイコンをクリック＞［カラーバランス］をクリックし、カラーバランスの調整レイヤーを追加します。

この状態で［プロパティ］パネルを確認すると、カラーバランスの編集画面が表示されています。

2. 青みを取り除く

今回の写真は全体的に青みがかっているので、カラーバランスで 青み を取り除きましょう。

青みを取り除くには、青に近い色のバランスを下げます。
［プロパティ］パネルでカラーバランスの編集画面を確認すると、青に近い色は「シアン」と「ブルー」の2色あります。

そこで、青みを取り除くために以下の調整をします。

① シアンを下げる（＝レッドを上げる）
② ブルーを下げる（＝イエローを上げる）

まず、いちばん上の［シアン/レッド］のスライダーを右にドラッグ、もしくは「+30」と数値を入力し、シアンを下げます。右に移動するので上げるように思いますが、［レッド］に寄せることで［シアン］が弱くなるため“シアンを下げる”と表現しています。

次に、いちばん下の［イエロー/ブルー］のスライダーを左にドラッグ、もしくは「-20」と数値を入力し、ブルーを下げます。

ビフォー・アフターを見比べてみましょう。青みが取り除かれ、あたたかみのある雰囲気になりました。

明るさを調整したときと同様、［レイヤー］パネルの「カラーバランス1」レイヤーの左側にある目のアイコンをクリックし、表示/非表示を入れ替えてビフォー・アフターを確認しましょう。

同様に、赤っぽく見えるときはレッドを下げる、黄色っぽく見えるときはイエローを下げる、緑っぽく見えるときはグリーンを下げる、といった調整をすることで、さまざまなパターンの色かぶりに対応できます。

他にも自分でいろいろ試してみましょう。

【ポイント】
今回は飲み物の写真なので、多少、赤み・黄みを強めにしています。食べ物や飲み物の写真は寒色寄りにすると食欲を損なうイメージになるため、一般的には暖色寄りに調整します。

ビフォー・アフター

完成品のビフォー・アフターを見比べてみましょう。

調整前と見比べてみると、明るくなったことでホイップクリームが際立ち、ほっこりした時間を演出できるようになりました。

「01_try.psd」を⌘＋S（Windowsの場合はCtrl＋S）で上書き保存してから、「02_design.psd」を開きます。
［レイヤー］パネルにある「01_try」レイヤーの目のアイコンをクリックして非表示にすると、背面に配置してある「before」レイヤーが見えますので、何度かクリックして表示/非表示を切り替え、ビフォー・アフターを見比べてみてください。

まとめ

この仕上がりにするために行なったことは以下の2点です。

① 明るさを明るく
　1. トーンカーブの調整レイヤーを作成
　2. ［プロパティ］パネルでコントロールポイントを追加
　3. トーンカーブを上に上げる

② 色かぶりの軽減
　1. カラーバランスの調整レイヤーを作成
　2. 青みを軽減する
　　2-1. 「シアン/レッド」のスライダーを右にドラッグシアンを下げる
　　2-2. 「イエロー/ブルー」のスライダーを左にドラッグしてブルーを下げる

これらは2〜3ステップで完了するかんたんなレタッチです。しかし、そのひと手間を加えることで完成品のクオリティが上がります。

最初から難しいことをする必要はありません。それよりも重要なのは次の2点です。

• レタッチのポイント（＝どんなところをレタッチしたらいいのか？）を知っていること
• レタッチの手順を知っていること

残り2回の記事でも、そのポイントと手順をお伝えします。

次回予告

次回は 【建物・街並み編】 をお送りします。
特にウェブサイトでは、メイン画像に建物や街並みがよく使われます。しかし、支給された写真のクオリティが低くてこのままでは映えない…。そんなケースがよくあります。その解消のヒントをお伝えします。どうぞお楽しみに！