たった5分で印象変わる!Photoshopで簡単デュオトーン加工

デザイン

デュオトーン(2色調表現)といえば、Spotify のアルバムアートワークがお馴染みですよね。最近また注目を集めているこの表現は、「鮮やかな色使い」「重ねグラデーション」「色のレイヤー表現」といったワードとともに、2026年のデザイントレンドでも注目されています。デュオトーンは一昔前のただの「色付け加工」を超えて、グラデーションと組み合わせることでより立体的でモダンな表現に応用できるんです。この記事では、Photoshopのグラデーションマップを使ったデュオトーンの基本手順と、そこから一歩進めた Gradient & Duotone(2026年トレンド風)の技法まで、初心者さんにもわかりやすく解説していきます。

Amazon | Anker Charger (20W, 2-Port) with USB-C & USB-C ケーブル 20W USB-C&USB-Cケーブル付属 2ポート急速充電器)【PSE技術基準適合/USB PD対応/PowerIQ搭載/コンパクトサイズ】 Android スマートフォン iPad その他 各種機器対応 (ホワイト) | Anker | AC式充電器
Anker Charger (20W, 2-Port) with USB-C & USB-C ケーブル 20W USB-C&USB-Cケーブル付属 2ポート急速充電器)【PSE技術基準適合/USB PD対応/PowerIQ搭載/コンパクトサ...

準備と写真選びのポイント

まずはベースとなる写真を選びます。コントラストがはっきりしている写真、被写体や背景がシンプルな写真がおすすめです。必要に応じてトーンカーブ」や「レベル補正」で明るさを整えましょう。これをしておくと、後で色の差がきれいに出ます

今回はこちらの画像を用意しました。

グラデーションマップでデュオトーンを作る

グラデーションマップを使う

写真の準備ができたら、メニューバーからレイヤー > 新規調整レイヤー > グラデーションマップを追加します。

レイヤーパネル下部の「新しい調整レイヤー作成」アイコン(半分塗りつぶしの丸)をクリックして「グラデーションマップ」を選ぶこともできます。

グラデーションを適用する

プロパティパネルを開き、グラデーションカラーをクリックしてグラデーションエディタを開きます。

グラデーションエディタが開いたら、グラデーションカラーの分岐点にあるストップをクリックして、カラーピッカーで色を変更します。

左端のストップはシャドウ側の色、右端のストップはハイライト側の色を表すので、ここで好みの2色をそれぞれ設定します。例えば深みのあるネイビーをシャドウに、明るいコーラルをハイライトに置くと一気にモダンな雰囲気になります。

指定した色でグラデーションマップが適用されました。

中央にあるミッドポイント(ダイヤ型)を左右に動かして、2色のブレンド比を微調整することで、肌の階調やテクスチャを自然に残すことができます。色を反転させたいときはプロパティの「逆方向」を使うと、簡単に配色が入れ替わります。

調整レイヤーなので非破壊で何度でも色を変えられるのが嬉しいポイントです。

Gradient × Duotoneでトレンド感をプラス

基本のデュオトーンだけでも十分に使える表現ですが、デュオトーンとグラデーションを掛け合わせることで、より立体的でトレンド感のある表現になります。

グラデーションマップだけでなく、その上に「グラデーション塗りつぶしレイヤー」を重ねて描画モードを変えると効果的です。例えば、淡いピンク〜オレンジのライン型グラデーションを上に置き、描画モードを「オーバーレイ」や「ソフトライト」に変えると、色が重なって深みのあるグラデーション効果が生まれます。

また、マスクを使って被写体と背景で色味を分ける方法もおすすめです。被写体だけを選択してマスクを作り、被写体側には強めのデュオトーン、背景には淡いグラデーションを適用すれば視線誘導ができ、広告ビジュアルとしての見栄えがぐっと良くなります。

さらに、グラデーションマップに複数のカラーストップを加えてトリトーンに近い色幅を作れば、単純な2色よりも豊かな色の表情が出ます。これらを組み合わせると、まさに「Gradient & Duotone」の最近のトレンドらしい、層のある色表現が作れます。

これらの手法を組み合わせると、ただの “2色調” を超えたGradient & Duotone のハイブリッド表現が作れるようになります。トレンドレポートでも、「重ねグラデーション」「レイヤードカラー表現」が 2026年の注目ワードとして挙げられているので、是非これらの掛け合わせを挑戦してみてください!

仕上げとチェック

仕上げでは、デュオトーンにした画像のコントラストや文字の見え方を必ず確認しましょう。画像が明るすぎたり色が強すぎると、上に重ねるテキストやボタンが読みにくくなるので、必要に応じてグラデーションマップ調整レイヤーの不透明度を下げたり、上に薄い黒や白のオーバーレイ(透明度を低くした長方形)を敷いて文字用の余白を確保します。
Web用に書き出すときは、実際の表示サイズで色味をチェックして完成です。

今回の記事のまとめ

Photoshopのグラデーションマップを使えば、デュオトーン加工は意外と手軽に作れます。2色だけで写真の印象を大胆に変えられるので、デザインのトーンを統一したいときや、ビジュアルにインパクトを出したいときにぴったりです。
さらに、トレンドのグラデーションを重ねたり、レイヤーのモードを調整したりすれば、より今っぽい雰囲気を作ることもできます。広告やSNSバナー、キャンペーンビジュアルなどに取り入れれば、目を引くワンポイントとして活躍してくれるはずです。
まずはお気に入りの写真を使って、色の組み合わせをいくつか試してみてください。色が変わるだけで、デザイン全体の世界観もがらっと変わります!


Amazon.co.jp: ワイヤレス充電器 Mag Safe充電器 マグネット式 【magsafe充電器+magsafeスタンド+ 20W USB-Cアダプター】 USB-Cケーブル 1.5m付き マグセーフ充電器 スタンド/パッド くっつく iPhone17/16/15/14 /13/12シリーズ対応 ワイヤレスイヤホン用 : 家電&カメラ
Amazon.co.jp: ワイヤレス充電器 Mag Safe充電器 マグネット式 【magsafe充電器+magsafeスタンド+ 20W USB-Cアダプター】 USB-Cケーブル 1.5m付き マグセーフ充電器 スタンド/パッド くっ...
タイトルとURLをコピーしました