海外のwebサイトなどではよく使われている、2色で構成されたデザインイメージをご覧になったことはありますか？アーティスティックで、どことなくレトロな雰囲気が表現できるこのデザイン手法は「Duotone」（デュオトーン）と呼ばれており、2色のトーンという意味です。   今回はこのDuotoneを使ったデザインのバリエーションサンプルを幾つか挙げていきたいと思います。   その名の通り、Duotoneでは全体を2色の構成でまとめていきます。色数の制限がある中でどのように組み合わせるかでイメージが決まってしまうのでカラーのチョイスが重要なポイントになってきます。   ちなみに今回はこちらの写真を使ってサンプルデザインを作成していきます。     Duotoneデザインにおいて写真を選ぶポイントとしては、 ・被写体の存在が明確 ・背景と被写体の境界がはっきりしている ・コントラストが強い といった項目をチェックすると大丈夫だと思います。  

Duotoneデザインの作成

DuotoneデザインのイメージはPhotoshopを使って作成していきます。ここでは「グラデーションマップ」機能を使った方法で進めていきたいと思います。   1.ベースとなる写真を用意します       2.写真に対して調整レイヤーのグラデーションマップを適用します       3.グラデーションのカラーを調整します       こんな感じに仕上がりました！次にこのデザインに少し変化をつけていきたいと思います。    

Duotoneデザインのバリエーション

A.グラデーションのコントラストを強くする     グラデーションマップの設定で、グラデーション幅を狭くしてコントラストを強くしてみます。シャドウとハイライトの色味が強くなりメリハリが強くなります。       B.階調数を減らす     ポスタリゼーションで階調数を減らしてみます。グラデーション状の色のつながりが無くなることでフラットな印象に近づきます。       C.カラーハーフトーンを適用する     カラーハーフトーンを使うと2色トーンが互いに混在するイメージになり、コントラストが弱くなります。インク印刷物のような雰囲気が出ます。      

Duotoneデザインにおける配色

2色という限られた配色のなかで、どのような色を選択するのが良いのでしょうか。幾つかのパターンをあげながら見ていきたいと思います。（下記の例はわかりやすいようにグラデーションのコントラストを少し上げています）   1.補色＋ナチュラルハーモニー 色相環においてちょうど正対する位置にあたる補色の組み合わせで、青紫に近いほうの色の明度を低く、黄色に近いほうの色の明度を高くするナチュラルハーモニー配色でのパターンです。     シャドウ：#a20000 ハイライト：#86ffa2   補色の組み合わせなので色相としてもコントラストが強く、またナチュラルハーモニーで色みが持つ本来の明度を保つので最もインパクトのある組み合わせになります。     2.補色＋コンプレックスハーモニー 同じく補色の組み合わせですが、青紫に近いほうの色の明度を高く、黄色に近いほうの色の明度を低くするコンプレックスハーモニー配色でのパターンです。     シャドウ：#006818 ハイライト：#ffa4a4   補色なので色みのコントラストはありますが、コンプレックスハーモニーのため、色みの明度差が小さくなるのでややコントラストが抑えられます。メリハリをつけながらも2つの色が馴染むようなイメージになります。     3.近似・類似色＋ナチュラルハーモニー 2つの色相が近い、もしくは中間にあたる組み合わせでナチュラルハーモニー配色を使ったパターンです。色みが近すぎるとモノトーンに見えてしまうので注意が必要です。     シャドウ：#6700b7 ハイライト：#7bf4f5   色みが近づくことでイメージの雰囲気を統一させることができます。補色に比べてコントラストは弱くなりますが、ナチュラルハーモニー配色でメリハリも適度に残っています。     4.近似・類似色＋コンプレックスハーモニー 同じく色みが近い組み合わせでコンプレックスハーモニー配色を使ったパターンです。色みの組み合わせは中間色くらいまで離したほうが雰囲気がでます。     シャドウ：#1e7473 ハイライト：#d89bfe   これまでの組み合わせのなかでは最もコントラストが弱い組み合わせになります。シャドウとハイライトが比較的馴染みますので、上にテキストが載るような背景としてはちょうどいいかもしれませんが、Duotoneとしてはあまり効果が得られないように見えます。   上記のパターンであれば、よりDuotoneが持つイメージを出す場合には、ナチュラルハーモニー配色が有効になるのではないでしょうか。色みについてはインパクトが強い分全体の世界観に合わせていくのがベターです。   これまでの内容を踏まえてサンプルデザインを作成してみました。       Duotoneは日本ではあまりみられませんが、海外では比較的使われているデザイン手法のように思います。アーティスティックで独特な世界観を表現するのにオススメなので是非使ってみてはいかがでしょうか。