エムタメ!について facebook twitter

マーケティング担当者のために
マーケティングに関わるためになる情報をためていく

  1. TOP
  2. デザイン
  3. 「デュオトーン(Duo Tone)」のWebデザインが今っぽい!BtoB企業での採用事例

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2019/05/20
「デュオトーン(Duo Tone)」のWebデザインが今っぽい!BtoB企業での採用事例

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

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

1.デュオトーン(Duo Tone)とは?

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

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

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.

画像引用:Holm Marcher & Co.

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

●Andover Fork Truck Services(建設機械販売会社)

Andover Fork Truck Services

画像引用:Andover Fork Truck Services

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

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

Adison Partners

画像引用:Adison Partners

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

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

Holm Marcher & Co.

画像引用:Chunk Creative Agency

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

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

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

Chris Redshaw

画像引用:Chris Redshaw

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

5.まとめ

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

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

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

セミナー情報

セミナー情報

無料資料ダウンロード

BtoBマーケティングハンドブック 表紙

BtoBマーケティングハンドブック

無料ダウンロード

デジタルマーケティングのすすめ

デジタルマーケティングのすすめ

無料ダウンロード

関連キーワード

Web制作

特集

WEBリニューアル物語

WEB制作のよくある失敗に全て引っ掛かるけど憎めない青木の奮闘記

はじめての展示会物語

はじめての展示会出展までの道のりを描いたドッタンバッタン劇場

メールマーケティング