0%

Designデザインワークショップ

Posted:2016.08.12

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

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

 

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】