クライアントから送られてきた画像がなんだかパッとしない。

イメージに合う画像があるけど白背景で物撮りしているわけではないので、切り抜いてみたら周りに背景色が残っている。

料理の画像がなんだか美味しそうに見えないなど経験をしたことありませんか？

バナーでもWebサイトでも画像はとても重要です。

店頭では実際に商品を見たり触って購入しますが、Web上では画像や商品紹介の文章などの情報で判断し商品を購入します。

私は本業で現在ECサイトの画像加工の業務に携わることが多いので、その経験からWebデザイン制作にも生かせる画像加工スキルをお伝えします。Webサイトも画像の雰囲気が代わるだけでグッと良くなるので、どんな場面でも使えるスキルだと思います。

画像加工は全てPhotoshopでの加工のやり方を記載しております。

経験が浅い方にもわかりやすいように、手順を簡単にまとめてますのでぜひ参考にしてください。

よい画像が見つかったけど、デザインしづらい。そんな時に試してほしいスキル。

よいイメージ画像が見つかったけどもう少し幅があったら、ここが空いていたらよかったのになと思う経験ってよくありませんか？

• イメージに合う画像があるけどレイアウトがサイズに合わない。
• 文字を入れるスペースが無い。
• 無駄なものが映っている。

そんなちょっと足りない、惜しいと思う時はこれからお伝えする方法をぜひ試してみてください。

この画像を使いたいけど幅が合わない→コンテンツに応じた塗りつぶし

バナーやFV（ファーストビュー）を作成する時など、

• もう少し背景の部分を増やしてテキストを入れたい
• モデルの写真を使いたいけど近距離から撮影していて幅が合わない

そういう時は、コンテンツに応じた塗ぶしを使って背景を伸ばしてみましょう。

人物など関係ないものが写り込んでしまっている→コンテンツに応じた塗りつぶし、パッチツール

これがなければもっとよく見せられるのになと思う時ってありますよね？

• 空の画像にテキストを入れたいけど雲が邪魔なので消したい
• ネックレスが２つ写っているが１つを消したい
• 偶然写ってしまった人物や車を消したい
• タグがついたままなので消したい

など使いたい画像の一部分を無くしたい時にとても使える方法です。

「コンテンツに応じた塗りつぶし」と「パッチツール」の使い分けに関しては、周りの背景によって使い分けるのがよいかなと思います。

今回は元写真の手前のカップルを「コンテンツに応じた塗り」で、左上の人をパッチツールで消しています。

コンテンツに応じた塗りつぶしのやり方

①なげなわツールで不要なものの周りを大き目に囲む（他の選択ツールが適している場合もあります）

②編集からコンテンツに応じた塗りつぶしをクリック

③１度で上手くいかない場合は何度か試して調節してください

パッチツールやり方

①パッチツールをクリック（今回は人の周りを小さめに囲みました）

②消したい部分をドラッグで選択

③コンテンツに応じるで修復

画像の切り抜きは上手く出来たけど配置するとなんだか違和感。そんな時に試してほしいスキル。

イメージに合う画像があるけど白背景で物撮りしているわけではないので、切り抜いて配置してみたらなんだか違和感。切り抜いた画像をLPに配置してみたらなんだか顔に血の気がなくみえるなど経験をしたことありませんか？

• 切り抜きしたが周りに元の背景色が残ってしまっている
• なんだか顔に血の気がなく見える

切り抜いても元の写真の背景色の要素ってどうしても残ってしまいます。

下記の方法を試してみてください。

写真を切り抜いたけど周りが黒っぽい見える→消しゴムツールで周りの色を消す

やり方

①画像を切り抜く

②消しゴムツールで境界線の黒色部分を消す（ズームツールでかなり大きくして少しずつ作業してください）

③ぼかしツールで境界線部分をぼかす（ぼかしではなく消しゴムツールで消す時に流量と不透明度を調節するやり方でもよいです。）

なんだか顔が青白く見える→写真は背景の色でトーンを変更する

背景が青っぽい色の場合どうしても顔が青白く見えてしまいます。

白背景の時は問題なくても、青背景を使う場合は全く同じトーンだと注意が必要です。

（左）加工前→（中央）背景を水色に変更→（右）色相調整後

やり方

①切り抜いた画像を選択

②色相・彩度やカラーバランスなどで健康的に見えるような色合いになるまで調整する

商品写真をもっとよく見せるには？そんな思った時に試してほしいスキル。

クライアントが送ってきてくれた画像が正直あんまりよくなかった時ってどうしたらいいのでしょうか？

商品画像だったら売り上げに直結すると言っても過言じゃないので、せっかくの縁でお仕事を頼んでもらえたのだからなんとかしたいですよね。

• クライアントから送られてきた画像がなんだか美味しそうに見えない。
• その商品って熱いの？冷たいの？温度感がわからない。
• アパレルブランドなのに服のシワが目立ってしまっている。

そんなちょっと足りないと思った時は、これからお伝えする方法を試してもらえれば解決できるかもしれませんのでやってみてくださいね。

料理の写真が美味しそうにみえない→明るさとコントラストを調節、赤要素を増やしてみる

料理の写真は明るくする、コントラストを調節する、色調補正で赤要素を増やすことで基本美味しそうに見えるようになります。

（左）加工前→（中央）明るさとコントラストの調整のみ→（右）色相調整で赤要素を増やしています。

やり方

①イメージから色調補正で明るさとコントラストを調整する。（トーンカーブやレベル補正など、自分で使いやすいと思うものを使用してください。）

②色相・彩度をクリックし、レッド系の色相バーを調整します。

熱々の鍋のおいしさがなんだか伝わらない→湯気を足してみる

やり方

①湯気の画像を「スクリーン」で配置（湯気がはっきりし過ぎてしまう場合は不透明度を下げましょう。今回は70%で設定。）

②湯気レイヤーを選択してラスタライズし、鍋の枠線に沿ってなげなわツールで湯気を消したい部分を選択し削除する。

③ブラシツールで画像の境界線がはっきりしているところや湯気が多すぎる部分を消して馴染ませる（ブラシツールは流量や不透明度を調節しておく）

④湯気を入れると熱々に見える代わりに鍋の具材などが湯気を入れる前よりも少々見えづらくなるため、商品によってはコントラストを調節すると良いです。

夏にぴったりなアイスラテをもっと美味しそうに見せたい→水滴を足してみる

やり方

①水滴の画像をアイスラテのサイズに合うようにサイズを変更する

②「焼き込みカラー」で配置（水滴がはっきりし過ぎてしまうので不透明度を下げましょう。今回は40%で設定。）

③水滴レイヤーを選択してラスタライズし、コップの枠線に沿って多角形選択ツールではみ出した水滴部分を選択し削除する。

④「焼き込みカラー」で水滴を設定すると、ラテの色が少々濃く見えるため、水滴レイヤーの明るさを調節する。

アパレル商品のシワを伸ばしてもっと綺麗にみせたい→修復ブラシツール

やり方

①修復ブラシツールをクリック

②optionを押しながらシワのない部分をクリック

②シワを消したい部分をなぞる（ブラシのサイズは調節しておいてください）

布団や絨毯などはっきりとした柄にタグやシミ、モノが置いてある→なげなわツールでコピペ　

大きなはっきりした柄のものなどは「なげなわツール」で隣の柄をコピーしてそのまま貼り付けてしまったほうが自然な場合もあるので色々試してみてください。

やり方

①なげなわツールで近くの似ている柄の所を選択する（遠い場所を選択すると影の関係で配置した時に浮いて見えます。）

②optionを押しながらシミが隠れるように配置

②コピーした場所より写真の手前に配置の場合は少々大きくし、逆に奥に配置する場合は少々小さくする。

まとめ

初心者必見！Webデザインのクオリティを高める画像加工スキルはいかがだったでしょうか？

画像はWebデザインに絶対外せない要素なので、画像加工のスキルがあるとこんないいことがあります。ここではざっくりと説明していますが、コンテンツに応じる塗りや湯気や水滴のつけ方は他にも方法があります。ぜひ色々試して自分のスキルにしていってください。