「デュオトーン（Duo Tone）」のWebデザインが今っぽい！BtoB企業での採用事例

カテゴリ

デザイン 

タグ

Web制作 

• 2,300社以上のWeb制作実績！
• BtoB企業で成果を出すWeb制作プラン公開中！

• Webサイトを制作するだけではなく、戦略・施策立案、Web制作、SEO、MAを活用したリードナーチャリング、コンテンツマーケティングなど、Webマーケティングの川上から川下まで、一気通貫で支援が可能です。少しでもWebリニューアル、ホームページ制作に興味がある方はお気軽に詳細をご覧ください！
  
  

  詳細を見てみる

 

ここ数年、Webデザインでよく見かける「デュオトーン」をごぞんじでしょうか？
デュオトーン（Duo tone）とは、2つの色を組み合わせて表現されたデザインのこと。最近では、音楽サブスクリプションサービス「Spotify」のWebサイトや広告で取り入れられたのが有名です。

一見、カジュアルな印象のあるデザインですが、デュオトーンはBtoBサイトでも活用できるのでしょうか？今回の記事では、WebデザインのトレンドのひとつであるデュオトーンのBtoBでの採用事例をご紹介します。

1.デュオトーン（Duo Tone）とは？

2人組の歌手のことを「デュオ」と呼ぶことがあるように、「Duo」には「2つの」という意味があります。デュオトーンは、その名の通り、2つの色の組み合わせで表現したデザインのことです。

使用する色は、一般的にコントラストの強い2色が選ばれます。最近のデュオトーンのデザインの傾向としては、「Spotify」の影響からか、「コントラストが強めの写真を、ビビッドな色のデュオトーンに加工する」というような使われ方が多く見受けられます。

 

参考：SpotifyのWebサイト

 

このように写真をデュオトーンに加工するのは、比較的簡単です。photoshopなどの画像加工ソフトでは、「グラデーションマップ」という機能を使えば、簡単に写真を2色のグラデーションに加工することができます。そのほかにも、CSSのみで手軽に実装できるカラーフィルターも公開されています。

2.デュオトーン（Duo Tone）が与えるデザイン効果

では、デュオトーンを採用したデザインは、どのような印象を与える効果があるのでしょうか。
前段でご紹介したように、デュオトーンはコントラストの強い2色を組み合わせることが多いため、躍動感や、インパクトのあるビジュアルを作るときに役立ちます。このほかにも、「写真の中心となる被写体を際立たせたい」「アーティスティックな雰囲気に仕上げたい」というような場合にも向いています。

これらのデザインが与える印象は、「どの2色を使うか」という配色の選択に大きく影響されます。デュオトーンのデザインで使用する色は、補色の関係（色相環で反対に位置する色の組合せ）にある2色を選択するのが基本です。補色は、お互いの色をもっとも際立たせる色の組み合わせで、メリハリのある印象を生みます。

色相環のイメージ（対角線にある色が補色）

3.BtoB企業のサイトでも使えるの？

このように、コントラストの強いデュオトーン配色を採用したデザインは、POPで明るい印象のため、BtoCサービス向きのような印象があります。しかし、色の使い方によっては、BtoB向けのWebサイトにも応用は可能です。配色のテクニックとして、2色のどちらかに彩度や明度の低いトーンの色を採用すれば、落ち着いた雰囲気や、締まった印象を表現することもできます。

たとえば、コーポレートサイトに社内の雰囲気がわかる写真を掲載するときや、採用サイトに社員のインタビューとともに写真を掲載するとき。きれいで、かっこいい写真をのせたいけれど、現実はなんだか「イマイチ…」となることも多いかと思います。このようなとき、写真の色味を加工することで、スマートフォンで撮った写真も、雰囲気のある写真に仕上げることができます。

では、デュオトーンがBtoBサイトで具体的にどのように活用されているか、海外のサイトを参考に見てみましょう。

4.BtoB企業のデュオトーン採用事例

●Holm Marcher & Co.（ヘッドハンティングエージェンシー）

画像引用：Holm Marcher & Co.

落ち着いた赤とグレートーンの組み合わせが知的な雰囲気です。

●Andover Fork Truck Services（建設機械販売会社）

画像引用：Andover Fork Truck Services

フォークリフトのグリーンを活かし、そのほかの色はグレートーンにおさえることでゴチャつき感のないイメージになっています。

●Adison Partners（タレントマネジメント/コンサルティング会社）

画像引用：Adison Partners

青紫の写真と水色のテキストの組み合わせ。補色の組み合わせではないが、すっきりと目立つ印象です。

●Chunk Creative Agency（クリエイティブエージェンシー）

画像引用：Chunk Creative Agency

モノクロの写真にグラデーションのフィルターをかけたデザイン。よくある打ち合わせシーンも洗練された雰囲気です。

 

グラデーションについてはこの記事も参考にしてください。

エムタメ！過去記事：ダサイと廃れた「グラデーション」が、おしゃれになってトレンドデザインに！

●Chris Redshaw（クリエイティブディレクター/個人）

画像引用：Chris Redshaw

グレートーンの写真と黄色でコントラストを表現。カジュアルだが、きちんとした印象もあるデザイン。

5.まとめ

海外の事例を見ると、BtoBサイトでデュオトーンを採用する場合は、黒やグレー、濃い青などの落ち着いた印象の色と、ポイントとなる明るい色を組み合わせたデザインが多いようです。

日本のBtoBサイトは、比較的きちんとしたデザインが好まれるため、デュオトーンを採用した事例は少ないです。しかし、BtoBのWebサイトも「似たような雰囲気のサイトばかり…」という状況は避けたいもの。たとえば若い学生がターゲットの採用サイトを作る場合などに、まずは限定的にデュオトーンを使ってみるのもいいかもしれません。

Webデザインのトレンドを少しずつ取り入れて、BtoBサイトもマンネリ化を防ぎましょう。