画像を2色に加工する方法｜無料でデュオトーン画像を作れるブラウザツール

画像を2色で表現するデュオトーン加工とは？

デュオトーンとは、写真や動画の明るい部分と暗い部分を、それぞれ異なる2色に置き換える加工方法です。

一般的なカラー写真とは異なり、使用する色を2色に絞ることで、統一感のある印象的なビジュアルを作れます。

音楽配信サービスのプレイリストカバー、CDジャケット、ポスター、Webサイト、広告、SNS投稿などでも使われている表現です。

メディアソート株式会社が提供する「デュオトーン／カラーグレーディング」を使えば、画像編集ソフトをインストールせず、ブラウザ上で写真や動画を2色に加工できます。

デュオトーン画像の仕組み

デュオトーン加工では、元画像に含まれる明暗を利用して2色を割り当てます。

暗い部分には「シャドウ色」、明るい部分には「ハイライト色」が適用され、その中間部分は2つの色を混ぜ合わせたグラデーションで表現されます。

単純に画像全体へ色を重ねる加工とは異なり、元画像の明るさや立体感を残しながら色を置き換えられる点が特徴です。

• シャドウ色：画像の暗い部分へ適用する色
• ハイライト色：画像の明るい部分へ適用する色
• 中間部分：シャドウ色とハイライト色を混ぜて表現

同じ写真でも、選ぶ2色によってクール、ポップ、レトロ、ダークなど、まったく異なる印象を作れます。

デュオトーンとモノクロの違い

モノクロ加工では、主に白、黒、グレーを使って画像の明暗を表現します。

一方、デュオトーンでは、青とオレンジ、紫とピンクなど、任意の2色を使用できます。

モノクロ写真の落ち着いた雰囲気を残しつつ、ブランドカラーやデザインのテーマに合わせて色を付けられるのがデュオトーンのメリットです。

ブラウザで画像を2色に加工する方法

1．デュオトーン加工ツールを開く

以下のページへアクセスします。

デュオトーン／カラーグレーディングを開く

ソフトのダウンロードやアカウント登録は必要ありません。パソコンのブラウザから利用できます。

2．加工する画像または動画を読み込む

画面上のアップロードエリアをクリックするか、加工したいファイルをドラッグ＆ドロップします。

対応しているファイル形式は以下のとおりです。

• JPEG
• PNG
• WebP
• MP4
• WebM

読み込んだ素材は外部サーバーへ送信されず、利用している端末のブラウザ内で処理されます。

3．カラープリセットを選択する

最初に、用意されているカラープリセットからイメージに近い組み合わせを選択します。

利用できるプリセットは以下のとおりです。

• ブルー×オレンジ
• パープル×ピンク
• グリーン×イエロー
• レッド×シアン
• モノクロ
• カスタム

どの色を選べばよいか分からない場合は、まずプリセットを切り替えながら、素材との相性を確認するとよいでしょう。

4．シャドウ色を設定する

カスタムを選択すると、画像の暗い部分に適用するシャドウ色を自由に指定できます。

シャドウには、濃い青、紫、深い緑、暗い赤など、比較的暗い色を設定すると、画像の輪郭やコントラストを残しやすくなります。

明るい色を指定することもできますが、ハイライト色との差が小さいと平面的な仕上がりになるため注意しましょう。

5．ハイライト色を設定する

ハイライト色は、画像の明るい部分へ適用される色です。

オレンジ、黄色、ピンク、水色など、シャドウ色より明るい色を選ぶと、被写体の形や明暗が分かりやすくなります。

シャドウ色との組み合わせを変えることで、同じ写真からさまざまなデザインを作成できます。

6．適用強度を調整する

適用強度では、元画像に対してデュオトーン効果をどの程度反映するか調整できます。

強度を高くすると、画像全体が指定した2色で表現されます。強度を下げると元画像の色が残り、カラーグレーディングに近い自然な仕上がりになります。

• 2色の表現をはっきり見せたい：強度を高くする
• 元の色も残したい：強度を低くする
• 広告やポスターの背景に使いたい：中程度から高め
• 人物写真を自然に仕上げたい：弱めから中程度

7．加工した画像・動画を書き出す

プレビューで仕上がりを確認したら、加工したファイルを書き出します。

無料版では、透かし入り・1080px上限で書き出しできます。25ドルの買い切りプランを利用すると、透かしなし・フル解像度で書き出せます。

印象別のおすすめ配色

ブルー×オレンジ

青系のシャドウとオレンジ系のハイライトは、冷たい色と暖かい色を組み合わせた、コントラストの強い配色です。

映画のような雰囲気や、人物を印象的に見せたい場合に向いています。

パープル×ピンク

紫とピンクの組み合わせは、ポップ、ネオン、幻想的なイメージを作りやすい配色です。

音楽イベント、ファッション、コスメ、SNS向けのクリエイティブなどに適しています。

グリーン×イエロー

緑と黄色は、明るくエネルギッシュな印象を与えます。

自然やアウトドアだけでなく、ストリート系、スポーツ系、個性的なポスターデザインにも活用できます。

レッド×シアン

赤とシアンは色の差が大きく、強いインパクトを作りやすい組み合わせです。

サイバー、SF、ゲーム、ライブ告知など、目立つデザインに向いています。

モノクロ

白黒のデュオトーンは、シンプルで落ち着いた表現に適しています。

企業サイト、プロフィール写真、雑誌風のレイアウト、文字を重ねる背景素材などにも使いやすい配色です。

デュオトーンに向いている画像

明暗がはっきりしている写真

デュオトーンは元画像の明るさをもとに色を割り当てるため、光と影がはっきりした写真ほど立体的に仕上がります。

人物の顔が大きく写った写真

人物の顔や上半身を大きく撮影した画像は、デュオトーン加工との相性がよい素材です。

輪郭や表情を残しながら色を統一できるため、プロフィール、ポスター、音楽作品などに活用できます。

背景がシンプルな画像

背景に多くの色や物が含まれていても、デュオトーン加工によって全体の色を統一できます。

その中でも、背景と被写体の明るさに差がある画像を選ぶと、加工後も被写体が分かりやすくなります。

ブランドカラーを使った画像加工にもおすすめ

カスタム設定では、シャドウ色とハイライト色を自由に指定できます。

企業やサービスのブランドカラーを指定すれば、複数の写真に統一感を持たせることが可能です。

撮影時期や場所が異なる写真でも、同じ2色で加工することで、Webサイトや広告全体のトーンを揃えやすくなります。

コーポレートサイトのメンバー写真、採用サイト、イベント告知、SNS投稿など、デザインの統一感を重視する用途にも適しています。

デュオトーン加工の活用例

デュオトーン加工した画像や動画は、以下のような用途で活用できます。

• 音楽プレイリストのカバー画像
• CDジャケットや楽曲紹介画像
• YouTubeのサムネイル
• InstagramやXへの投稿
• イベントやライブの告知
• Webサイトのメインビジュアル
• バナー広告
• プロフィール写真
• 動画内の場面転換や演出

デュオトーンをきれいに仕上げるポイント

2色の明るさに差を付ける

シャドウ色とハイライト色の明るさが近すぎると、画像の立体感が失われる場合があります。

暗い色と明るい色を組み合わせることで、元画像の陰影を残しやすくなります。

補色や類似色を使い分ける

青とオレンジ、赤とシアンなど、色相環で反対側に位置する補色を使うと、コントラストの強いデザインになります。

紫とピンクなどの近い色を選ぶと、まとまりのある穏やかなグラデーションを作れます。

文字を重ねる場合は余白を確保する

ポスターやサムネイルへ文字を入れる場合は、加工後の背景と文字のコントラストを確認しましょう。

写真の情報量が少ない部分や、色が均一な部分へ文字を配置すると読みやすくなります。

まとめ

デュオトーンは、写真や動画の明暗を2色に置き換え、統一感のあるビジュアルを作る加工方法です。

Mediassort Studioの「デュオトーン／カラーグレーディング」では、プリセットの選択に加え、シャドウ色とハイライト色を自由に指定できます。

適用強度も変更できるため、完全な2色表現から、元の色を残した自然なカラーグレーディングまで調整可能です。

画像編集ソフトを使わずに写真を2色へ加工したい方は、ブラウザからお試しください。

画像・動画をデュオトーン加工する