#2 たった5分で変わる！デザイン力UPのための、Photoshopしあわせ♡レタッチ術【風景編】

Photoshop愛好歴25年のウェブデザイナー、マスベサチです。

2024年3月からスタートした新連載『PsとAiを実践的に学ぶ！クリエイター直伝のテクニック集』。今回で2回目となりました。

今回は、ウェブサイトのメインビジュアルに使われることの多い風景写真を題材に、ちょっとの手間でグッとクオリティが上がるレタッチ術を紹介します。

風景レタッチのポイント

建物や風景の写真で特に気をつけるべきポイントは、以下の3点です。

① 写真の傾きを補正する
② ゴミや不要な要素を削除する
③ 明るさと色味を調整する

準備

Photoshopの画面レイアウト

この記事では、Photoshopのワークスペースの設定を［初期設定］の状態で解説を進めていきます。画面レイアウトの設定について、詳しくは前回の記事のこちらの項目をご覧ください。

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

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

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

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

上記をダウンロードして解凍すると、以下2つのファイルが入っています。

• photo.psd：主に作業に使用するファイル
• work.psd：最後に写真をデザインに反映した状態を確認するためのファイル

「work.psd」に「photo.psd」を〈リンク配置〉しており、「photo.psd」での編集が「work.psd」に自動反映される仕組みになっています。

どちらのファイルも、ダブルクリックしてPhotoshopで開きましょう。
ここからは、「photo.psd」を開いた状態で読み進めてください。

ポイント1「写真の傾きを補正する」

「photo.psd」の写真を見てください。
この写真が右肩下がりに傾いていることがわかりますでしょうか。

普段、あまり「写真の傾き」を意識していなければ気づきにくいポイントですが、写真の水平垂直がとれているかどうかは、最低限気をつけるポイントです。あえて斜めになっている構図でない限り、写真の傾きはきちんと補正しましょう。

写真が傾いているかどうか自分ではわからない場合

「写真の傾き」を意識し慣れていない場合は、写真が傾いているかどうか、判断しにくいでしょう。そんなときは、〈ガイド〉を引くことで判断しやすくなります。

① メニューバーの［表示］＞［定規］にチェックを入れて〈定規〉を表示させます。

② 表示された定規の目盛部分にカーソルを合わせ、作業画面内に向かってドラッグするとガイドが作成されます。ガイドを水平線のそばまでドラッグすると、水平線が水平ではないことが判断しやすくなります。

水平を確認し終わったあとのガイドは不要なので、⌘＋:（Windowsの場合はCtrl＋:）で非表示にしておきましょう。

写真の傾きを補正してみよう！

写真の傾きは、［切り抜きツール］を使うことで簡単に補正できます。早速やってみましょう！

①［切り抜きツール］を選択

② オプションバーの［角度補正］のアイコンをクリックしてオンにする
アイコンの領域が濃くなっている状態がオンです。

③［塗り］の種類を［背景(デフォルト)］にする
※［背景(デフォルト)］は、表記が［透明(デフォルト)］の場合もあるようです。［背景(デフォルト)］もしくは［透明(デフォルト)］を選択してください。

④ 水平にしたいラインをなぞるようにドラッグ
今回の場合は、水平線（空と海の境）が水平の目安となるラインなので、そこをなぞるようにドラッグしましょう。
ドラッグできたら、［return］キー/［Enter］キーで決定すると切り抜き完了です。バシッと傾きが補正されました！
さらに、回転したことによって生じた余白も自動でカットされています。この点も、［切り抜きツール］を使って角度補正をする大きなメリットです。

なぞるようにドラッグするだけで写真の傾きがきれいになるのは、簡単なのにとても気持ちが良いので、ぜひみなさんやってみてくださいね。

ポイント2「ゴミや不要な要素を削除する」

あきらかなゴミはもちろん、必要以上に目立ってしまう不要な要素や、雰囲気を損なう要素も削除しましょう。見せたい情報により集中させ、かつ美しい仕上がりになります。

今回は「右下にある折れた木の枝」を削除します。

ゴミや不要な要素を削除してみよう！

「いらないものをきれいに消す」のはPhotoshopの得意分野のひとつ。それには［削除ツール］を使うと簡単です。早速やってみましょう！

① 削除ツールを選択
ツールバーの［スポット修復ブラシツール］のアイコンを長押しし、上から二つ目の［削除ツール］を選択。

【CHECK】
「各ストローク後に削除」にチェックが入っていると、1クリックごとに処理されてしまいます。チェックを外しておくと、すべて選択し終わってから一括で処理されます。

② 選択範囲を作成
削除したいものをドラッグで塗りつぶし、ピンク色の選択範囲を作成します。

【塗りつぶす時のポイント】
今回の作例はシンプルですが、もっと細かいものを削除したい場合、操作に慣れるまで塗りつぶすのが難しく感じるかもしれません。
以下のポイントに気をつけながら塗りつぶすと、やりやすいと思います。

• 画面を［ズームツール］（ショートカットキー：Z）で拡大する
• 削除したいものをひとまわり大きく塗りつぶす
• ブラシのサイズを調整しながら塗りつぶす
  • ブラシの縮小のショートカットキー：[
  • ブラシの拡大のショートカットキー：]

また、ある程度ははみ出したり輪郭が変になっても問題ありません。結果がおかしくなってしまったら、⌘＋Z（Windowsの場合はCtrl＋Z）で戻ってやり直せば大丈夫です。「ぴったり塗りつぶさなきゃ」と気にしすぎず、やりながら自分なりのコツを見つけていってください。

③削除完了
［return］キー/［Enter］キーで決定すると削除完了です。
削除ツールで塗りつぶしたものが、一瞬できれいに消えました。

ポイント3-1「写真を明るくする」

全体的に、暗く“どんより”して見えるため、明るさを明るくします。 トーンカーブを使った明るさ調整については、詳しくは前回の記事詳しく解説しています。ぜひご一読いただき、理解を深めてください。

明るくしてみよう！

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

② トーンカーブを調整
「トーンカーブ1」レイヤーが選択されていることを確認し、［プロパティ］パネルのトーンカーブを下の画像とだいたい同じになるように調整しましょう。

この時点では、「なんだか色が薄くて、むしろ変になった」と感じるかもしれません。このあとの補正できれいになるので、安心して次のステップに進んでください。

ポイント3-2「空の青を爽やかな色味にする」

明るさを明るくしたことで、空が白んでくすんでしまいました。そこで、澄んだきれいな青空にするため色味を調整しましょう。

今回は〈特定色域の選択〉という調整レイヤーを使います。

〈特定色域の選択〉とは

写真全体ではなく「ある特定の色の部分だけ」色調整ができる調整レイヤーです。 カラーバランスなど別の調整レイヤーで補正すると、例えばブルーを強めると画面全体が青味がかってしまいます。ですが、特定色域の選択を使うと、「写真の中の “青っぽい部分だけ” ブルーを強める」といった部分的な色調整ができます。

青を調整しよう！

①［特定色域の選択］の調整レイヤーを追加

②シアン系の調整
「特定色域の選択 1」レイヤーが選択されていることを確認し、［プロパティ］パネルの［カラー］から「シアン系」を選択します。 これで「この写真の “シアン系の部分だけ” 色調整する」ことができるようになりました。

その状態で、シアンのスライダーを右へ移動（数値は「+100」）します。 より空が水色っぽくなりました。

さらに、イエローのスライダーを左へ移動（数値は「-100」）します。 より空が爽やかな青になりました。

③ブルー系の調整
シアン系の調整だけではなく、さらにブルー系も調整することで、より青空を綺麗にできます。

「特定色域の選択 1」レイヤーが選択されていることを確認し、［プロパティ］パネルの［カラー］から「ブルー系」を選択します。 これで「この写真の “ブルー系の部分だけ” 色調整する」ことができるようになりました。

その状態で、シアンのスライダーを右へ移動（数値は「+100」）、イエローのスライダーを左へ移動（数値は「-100」）します。 これで、空がかなりきれいになりました。

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

［レイヤー］パネルの、各レイヤーの左にある目のアイコンをクリックすると、レイヤーの表示・非表示を切り替えられます。 「特定色域の選択 1」レイヤーの表示・非表示を、何度か切り替えてみてください。

ポイント3-3「木々の緑を鮮やかな色味にする」

手前に写っている木々の緑も、鈍く落ち込んで感じるため、グリーンをより強めて鮮やかな印象にします。

緑を調整しよう！

①［特定色域の選択］の調整レイヤーを追加

②グリーン系の調整

「特定色域の選択 2」レイヤーが選択されていることを確認し、［プロパティ］パネルの［カラー］から「グリーン系」を選択します。 これで「この写真の “グリーン系の部分だけ” 色調整する」ことができるようになりました。

その状態で、マゼンタのスライダーを左へ移動（数値は「-100」）します。 マゼンタと補色関係にあるのがグリーンであるため、マゼンタを下げることがグリーンを強めることにつながります。

③イエロー系の調整

グリーンには黄色味も含まれているため、グリーン系に追加して「イエロー系」も調整するとさらに緑部分の色調整ができます。

「特定色域の選択 2」レイヤーが選択されていることを確認し、［プロパティ］パネルの［カラー］から「イエロー系」を選択します。 これで「この写真の “イエロー系の部分だけ” 色調整する」ことができるようになりました。

その状態で、マゼンタのスライダーを左へ移動（数値は「-100」）します。 先ほどと同様、マゼンタを下げることがグリーンを強めることにつながります。

ここまででも随分良くなりましたが、緑の部分をもう少し鮮やかにしたいと思います。

④［特定色域の選択 2］のレイヤーを複製

［特定色域の選択 2］を選択した状態で、⌘＋J（Windowsの場合はCtrl＋J）を押すと、レイヤーが複製されます。

緑を鮮やかにするレイヤーが2枚重ねられたので、さらにグリーンが鮮やかになりました。効果が強すぎる場合は、レイヤーの不透明度を下げることで適用量を下げられます。

仕上がりを確認する

この状態で、「photo.psd」を⌘＋S（Windowsの場合はCtrl＋S）で保存し、「work.psd」を表示させましょう。最初に解説したとおり、「photo.psd」での編集が「work.psd」に自動反映されていることがわかります。

「写真の傾きを補正する」の項目で切り抜きによるサイズ変更をしたので、調整後の画像がひとまわり小さくなっています。

最後に、これを修正しましょう。

「photo」レイヤーを選択していることを確認し、⌘＋T（Windowsの場合はCtrl＋T）で［自由変形］にします。

その状態でツールオプションバーの［W］の右側のテキストフィールドに「1440px」と入力すると、画像のサイズが画面ぴったりに広がります。
※このとき、「px」も忘れずに入力しましょう。「px」を入力しないと「1440%」になってしまいます。

【POINT】
サイズ変更をするときに、［縦横比を固定］のアイコンの色が濃くなっている（＝有効である）ことを確認しておきましょう。もし有効になっていない場合は、アイコンをクリックすることで有効にできます。

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

［レイヤー］パネルの、「特定色域の選択 1」レイヤーの表示・非表示を、何度か切り替えてみてください。 調整前との違いがしっかりとわかります。

改めて並べて比較してみると、ビフォーよりもアフターの方がパッとみたときの印象が良く、メインビジュアルとしてのクオリティが上がっています。

まとめ

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

①写真の傾きを補正する
特に、風景や建物の写真は写真の傾きが目立つため水平垂直をしっかり補正する
使うツール：［切り抜きツール］

②ゴミや不要な要素を削除する
より見せたい情報に集中させることができ、かつ美しい仕上がりになる
使うツール：［削除ツール］

③明るさと色味を調整する
特に、空をより鮮やかな青に、木々や葉っぱをより鮮やかな緑にすると爽やかな印象になる
使うコマンド：［特定色域の選択］

前回の記事でもお伝えしたように、レタッチで大事なのは以下の2点です。

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

最後の記事でも、そのポイントと手順をお伝えします。

次回予告

最後となる次回は 【人物編】 をお送りします。

もともと写真レタッチはケースバイケースのことが多く、それが難しさにつながっています。その中でも人物レタッチは、一人ひとりの個人差があるため、画一的に「こうすれば良い」という基準を定めるのが難しいジャンルです。

しかし、その中でも「ここだけはおさえておきたい」という内容をお伝えいたします。どうぞお楽しみに！