owned mediaウェブ制作に役立つコンテンツを発信中!

【デザインワークショップ】vol.10 Duotoneを使ったデザインバリエーション

最終更新日: Update!!
海外のwebサイトなどではよく使われている、2色で構成されたデザインイメージをご覧になったことはありますか?アーティスティックで、どことなくレトロな雰囲気が表現できるこのデザイン手法は「Duotone」(デュオトーン)と呼ばれており、2色のトーンという意味です。   今回はこのDuotoneを使ったデザインのバリエーションサンプルを幾つか挙げていきたいと思います。   その名の通り、Duotoneでは全体を2色の構成でまとめていきます。色数の制限がある中でどのように組み合わせるかでイメージが決まってしまうのでカラーのチョイスが重要なポイントになってきます。   ちなみに今回はこちらの写真を使ってサンプルデザインを作成していきます。   【デザインワークショップ】vol.10 Duotoneを使ったデザインバリエーション   Duotoneデザインにおいて写真を選ぶポイントとしては、 ・被写体の存在が明確 ・背景と被写体の境界がはっきりしている ・コントラストが強い といった項目をチェックすると大丈夫だと思います。  
Duotoneデザインの作成
DuotoneデザインのイメージはPhotoshopを使って作成していきます。ここでは「グラデーションマップ」機能を使った方法で進めていきたいと思います。   1.ベースとなる写真を用意します   【デザインワークショップ】vol.10 Duotoneを使ったデザインバリエーション     2.写真に対して調整レイヤーのグラデーションマップを適用します   【デザインワークショップ】vol.10 Duotoneを使ったデザインバリエーション     3.グラデーションのカラーを調整します   【デザインワークショップ】vol.10 Duotoneを使ったデザインバリエーション     こんな感じに仕上がりました!次にこのデザインに少し変化をつけていきたいと思います。   【デザインワークショップ】vol.10 Duotoneを使ったデザインバリエーション  
Duotoneデザインのバリエーション
A.グラデーションのコントラストを強くする   【デザインワークショップ】vol.10 Duotoneを使ったデザインバリエーション   グラデーションマップの設定で、グラデーション幅を狭くしてコントラストを強くしてみます。シャドウとハイライトの色味が強くなりメリハリが強くなります。   【デザインワークショップ】vol.10 Duotoneを使ったデザインバリエーション     B.階調数を減らす   【デザインワークショップ】vol.10 Duotoneを使ったデザインバリエーション   ポスタリゼーションで階調数を減らしてみます。グラデーション状の色のつながりが無くなることでフラットな印象に近づきます。   【デザインワークショップ】vol.10 Duotoneを使ったデザインバリエーション     C.カラーハーフトーンを適用する   【デザインワークショップ】vol.10 Duotoneを使ったデザインバリエーション   カラーハーフトーンを使うと2色トーンが互いに混在するイメージになり、コントラストが弱くなります。インク印刷物のような雰囲気が出ます。   【デザインワークショップ】vol.10 Duotoneを使ったデザインバリエーション    
Duotoneデザインにおける配色
2色という限られた配色のなかで、どのような色を選択するのが良いのでしょうか。幾つかのパターンをあげながら見ていきたいと思います。(下記の例はわかりやすいようにグラデーションのコントラストを少し上げています)   1.補色+ナチュラルハーモニー 色相環においてちょうど正対する位置にあたる補色の組み合わせで、青紫に近いほうの色の明度を低く、黄色に近いほうの色の明度を高くするナチュラルハーモニー配色でのパターンです。   【デザインワークショップ】vol.10 Duotoneを使ったデザインバリエーション   シャドウ:#a20000 ハイライト:#86ffa2   補色の組み合わせなので色相としてもコントラストが強く、またナチュラルハーモニーで色みが持つ本来の明度を保つので最もインパクトのある組み合わせになります。     2.補色+コンプレックスハーモニー 同じく補色の組み合わせですが、青紫に近いほうの色の明度を高く、黄色に近いほうの色の明度を低くするコンプレックスハーモニー配色でのパターンです。   【デザインワークショップ】vol.10 Duotoneを使ったデザインバリエーション   シャドウ:#006818 ハイライト:#ffa4a4   補色なので色みのコントラストはありますが、コンプレックスハーモニーのため、色みの明度差が小さくなるのでややコントラストが抑えられます。メリハリをつけながらも2つの色が馴染むようなイメージになります。     3.近似・類似色+ナチュラルハーモニー 2つの色相が近い、もしくは中間にあたる組み合わせでナチュラルハーモニー配色を使ったパターンです。色みが近すぎるとモノトーンに見えてしまうので注意が必要です。   【デザインワークショップ】vol.10 Duotoneを使ったデザインバリエーション   シャドウ:#6700b7 ハイライト:#7bf4f5   色みが近づくことでイメージの雰囲気を統一させることができます。補色に比べてコントラストは弱くなりますが、ナチュラルハーモニー配色でメリハリも適度に残っています。     4.近似・類似色+コンプレックスハーモニー 同じく色みが近い組み合わせでコンプレックスハーモニー配色を使ったパターンです。色みの組み合わせは中間色くらいまで離したほうが雰囲気がでます。   【デザインワークショップ】vol.10 Duotoneを使ったデザインバリエーション   シャドウ:#1e7473 ハイライト:#d89bfe   これまでの組み合わせのなかでは最もコントラストが弱い組み合わせになります。シャドウとハイライトが比較的馴染みますので、上にテキストが載るような背景としてはちょうどいいかもしれませんが、Duotoneとしてはあまり効果が得られないように見えます。   上記のパターンであれば、よりDuotoneが持つイメージを出す場合には、ナチュラルハーモニー配色が有効になるのではないでしょうか。色みについてはインパクトが強い分全体の世界観に合わせていくのがベターです。   これまでの内容を踏まえてサンプルデザインを作成してみました。   【デザインワークショップ】vol.10 Duotoneを使ったデザインバリエーション     Duotoneは日本ではあまりみられませんが、海外では比較的使われているデザイン手法のように思います。アーティスティックで独特な世界観を表現するのにオススメなので是非使ってみてはいかがでしょうか。  
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram