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

ワークショップ 2016.08.12

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

Tags: ,,
最終更新日: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は日本ではあまりみられませんが、海外では比較的使われているデザイン手法のように思います。アーティスティックで独特な世界観を表現するのにオススメなので是非使ってみてはいかがでしょうか。

 

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?