デュオトーンは、写真や画像を2つの色のグラデーションだけで表現するグラフィック技法、およびそのスタイルです。もとは19世紀の商業印刷でモノクロ写真の階調を豊かにするために生まれた技法ですが、2015年のSpotifyのブランドリニューアルを機にWebデザインのトレンドとして爆発的に再評価。2色の組み合わせだけで強烈なブランドアイデンティティを瞬時に確立できる手法として、現在も多くのブランドやクリエイターに活用されています。
デュオトーンとは？
デュオトーンは、ひとつの写真や画像をシャドウ側とハイライト側にそれぞれ異なる色を割り当て、2色のグラデーションだけで表現する技法です。もとは19世紀の商業印刷において、モノクロ写真を黒一色で刷るよりも豊かな階調と深みを得るために考案されました。墨版（黒）に青・茶・赤などの第2色を組み合わせて刷り重ねることで、写真に独特の雰囲気と奥行きを生み出す技術として、写真集や高品質な雑誌印刷で広く使われてきました。
カラー印刷の普及とともに商業印刷での主役の座を退いたのち、2010年代にデジタルデザインの文脈で再評価されます。2015年、ブランディングエージェンシーCollinsが手がけたSpotifyのグローバルリブランディングで、鮮やかな補色同士のデュオトーン処理が全アーティスト写真に適用されると、その強烈なビジュアルアイデンティティがWebデザイン界に大きな衝撃を与え、現代デザインにおけるトレンドとして確立されました。
デュオトーン（デュープレックスとも呼ばれる）は、対照的な色のハーフトーンを別のハーフトーンの上に重ねて画像を再現するハーフトーン印刷技法である。主に画像の中間調とハイライトを際立たせるために用いられる。伝統的には重ねる対照色として黒が用いられ、青・黄・茶・赤が最もよく組み合わせられてきた。
（英語版 Wikipedia の内容を基に和訳・要約しています。細部の表現は原文と異なる場合があります。）
主な視覚的特徴
- 色コントラストの非常に強い2色（鮮やかな補色同士、またはディープな暗色とネオンカラー）の組み合わせが基本。この2色がシャドウとハイライトを担う
- 形写真や幾何学的な図形が2色のグラデーションに変換され、画像そのものがグラフィック要素として機能する。人物・建築・自然など被写体を問わない
- 構図背景全面にデュオトーン処理されたビジュアルを敷き、その上に文字を配置する大胆なレイアウトが定番。全面使いが最も強いインパクトをもたらす
- 書体強烈な色彩に負けない、太く力強いモダンなサンセリフ体やセリフ体が多用される。細いフォントは埋もれやすいため太さのコントラストが重要
- テクスチャ写真のハイライトからシャドウへの滑らかなグラデーション。粗い粒子感（ハーフトーンやノイズ）を加えてアナログ的な風合いを持たせる場合もある
- その他普通の写真を一瞬で非日常的かつ未来的、またはレトロな雰囲気のアート作品へと変貌させる。PhotoshopのグラデーションマップやCSSフィルターで手軽に再現可能
配色パレット
このスタイルでよく見られる傾向のあるカラーパレットです。デュオトーンは2色の選択によって印象が大きく変わるため、あくまでも一例として実際のWebデザインやグラフィック制作の参考にお役立てください。
代表的なクリエイティブチーム
Collins（コリンズ）
ニューヨーク／サンフランシスコ拠点のブランディングエージェンシー。2015年のSpotifyグローバルリブランディングを担当し、デュオトーンを全アーティスト写真に適用したことで、この技法を現代デザイントレンドの中心に押し上げた存在として広く語られている。
このスタイルを採用したブランド・作品
- ブランドSpotifyは2015年以降、アーティスト写真やプレイリストカバーにデュオトーン処理を全面的に採用したことで、この技法をWebデザイントレンドとして世界的に広めた火付け役として語られることが多い
- 音楽Blurのアルバム『Think Tank』（2003年）は、2色に絞り込んだ対比を強調したアートワークとして、デュオトーン的なアプローチの参照事例として言及されることがある
- 映画『ラ・ラ・ランド』（2016年）や『ブレードランナー 2049』（2017年）などのプロモーションビジュアルは、特定の2色を強調したトーン展開を持つ事例として、デザイン記事でデュオトーンと結びつけて語られることが多い
- ファッションアディダスの一部キャンペーンビジュアルにおいて、躍動感のあるアスリートの写真にデュオトーン処理に近い加工を施した事例として、デザインメディアで紹介されることがある
- Webエンタメ・文化系イベントの特設サイトや、クリエイティブスタジオのポートフォリオサイトにおいて、写真全面をデュオトーン処理し色彩のトーンを統一したレイアウトが採用される事例として広く紹介されている
AI生成プロンプト
このスタイルのビジュアルをAIで生成するためのプロンプトです。
英語版はMidjourney・Stable Diffusion向け、日本語版はGemini・Adobe Fireflyで使いやすい形式になっています。そのままコピーしてお使いください。
英語プロンプト
日本語プロンプト
Webデザインへの応用ヒント
音楽ストリーミング・エンタメ系の特設サイト、エッジの効いたクリエイティブ企業のコーポレートサイト、写真中心のポートフォリオサイトと特に相性の良いスタイルです。コントラストの低い2色を選ぶと画面がぼやけて視認性が下がり、逆に強烈すぎる補色の組み合わせは長時間閲覧に向かない点に注意。全面使いはヒーローセクションに絞り、本文エリアは余白を使って引き算するのがポイントです。組み合わせるならミニマリズムやY2K、ポップアートとの親和性が高いです。
