「デュオトーン（Duo Tone）」のWebデザインが今っぽい！BtoB企業での採用事例
最終更新日：2023/10/26
- 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」の影響からか、「コントラストが強めの写真を、ビビッドな色のデュオトーンに加工する」というような使われ方が多く見受けられます。
このように写真をデュオトーンに加工するのは、比較的簡単です。photoshopなどの画像加工ソフトでは、「グラデーションマップ」という機能を使えば、簡単に写真を2色のグラデーションに加工することができます。そのほかにも、CSSのみで手軽に実装できるカラーフィルターも公開されています。
2.デュオトーン（Duo Tone）が与えるデザイン効果
では、デュオトーンを採用したデザインは、どのような印象を与える効果があるのでしょうか。
前段でご紹介したように、デュオトーンはコントラストの強い2色を組み合わせることが多いため、躍動感や、インパクトのあるビジュアルを作るときに役立ちます。このほかにも、「写真の中心となる被写体を際立たせたい」「アーティスティックな雰囲気に仕上げたい」というような場合にも向いています。
これらのデザインが与える印象は、「どの2色を使うか」という配色の選択に大きく影響されます。デュオトーンのデザインで使用する色は、補色の関係（色相環で反対に位置する色の組合せ）にある2色を選択するのが基本です。補色は、お互いの色をもっとも際立たせる色の組み合わせで、メリハリのある印象を生みます。
色相環のイメージ（対角線にある色が補色）
3.BtoB企業のサイトでも使えるの？
このように、コントラストの強いデュオトーン配色を採用したデザインは、POPで明るい印象のため、BtoCサービス向きのような印象があります。しかし、色の使い方によっては、BtoB向けのWebサイトにも応用は可能です。配色のテクニックとして、2色のどちらかに彩度や明度の低いトーンの色を採用すれば、落ち着いた雰囲気や、締まった印象を表現することもできます。
たとえば、コーポレートサイトに社内の雰囲気がわかる写真を掲載するときや、採用サイトに社員のインタビューとともに写真を掲載するとき。きれいで、かっこいい写真をのせたいけれど、現実はなんだか「イマイチ…」となることも多いかと思います。このようなとき、写真の色味を加工することで、スマートフォンで撮った写真も、雰囲気のある写真に仕上げることができます。
では、デュオトーンがBtoBサイトで具体的にどのように活用されているか、海外のサイトを参考に見てみましょう。
4.BtoB企業のデュオトーン採用事例
●Andover Fork Truck Services（建設機械販売会社）
画像引用：Andover Fork Truck Services
フォークリフトのグリーンを活かし、そのほかの色はグレートーンにおさえることでゴチャつき感のないイメージになっています。
●Adison Partners（タレントマネジメント/コンサルティング会社）
画像引用：Adison Partners
青紫の写真と水色のテキストの組み合わせ。補色の組み合わせではないが、すっきりと目立つ印象です。
●Chunk Creative Agency（クリエイティブエージェンシー）
モノクロの写真にグラデーションのフィルターをかけたデザイン。よくある打ち合わせシーンも洗練された雰囲気です。
グラデーションについてはこの記事も参考にしてください。
5.まとめ
海外の事例を見ると、BtoBサイトでデュオトーンを採用する場合は、黒やグレー、濃い青などの落ち着いた印象の色と、ポイントとなる明るい色を組み合わせたデザインが多いようです。
日本のBtoBサイトは、比較的きちんとしたデザインが好まれるため、デュオトーンを採用した事例は少ないです。しかし、BtoBのWebサイトも「似たような雰囲気のサイトばかり…」という状況は避けたいもの。たとえば若い学生がターゲットの採用サイトを作る場合などに、まずは限定的にデュオトーンを使ってみるのもいいかもしれません。
Webデザインのトレンドを少しずつ取り入れて、BtoBサイトもマンネリ化を防ぎましょう。
