• ブログTOP
  • AI・ディープラーニング
  • AR
  • VR
  • WEBサイト
  • WEBマーケティング
  • SEO
  • SNS
  • その他
  • お問い合わせ

ALAKI株式会社

COZIKEEいつまでも使えるTech情報発信ブログ

リクルートサイトはこちら >

トレンドの”Duotone/デュオトーン”をWebデザインに取り入れる

2018年4月27日

  • このエントリーをはてなブックマークに追加

こんにちは!
デザインの伊東です。

ここ数週間WebVRの記事を何本か連続で投稿していましたが、今日は息抜き的に少し違った内容でいきたいと思います。
今回は、最近よく聞く”Duotone/デュオトーン“という色の使い方・Webデザインの手法をご紹介します。

この記事の目次

  • 1 Duotone/デュオトーンとは
  • 2 Duotone/デュオトーンを取り入れたサイト
  • 3 Photoshopで作るDuotone/デュオトーン
  • 4 CSSでDuotone/デュオトーンを取り入れる
  • 5 Duotone/デュオトーンを取り入れる時の注意点

Duotone/デュオトーンとは

Duotone/デュオトーンという言葉は、「Duo(ペアの)」+「tone(色調)」という2つの単語の組み合わせです。
その言葉の通り、写真などを2色で構成された色相で表現するデザインのテクニックのことを言います。

海外のサイトなどで取り入れられていますが、古くはポップアートの巨匠、アンディー・ウォーホルの作品でよく知れた手法です。

Duotone/デュオトーンを取り入れたサイト

百聞は一見に如かず、Duotone/デュオトーンを取り入れたWebサイトをご紹介しましょう。

デジタル音楽配信サービスの”spotify”です。
https://www.spotify.com/jp/

スクリーンショット 2018-04-27 0.08.08

Webサイトに限らず、様々なビジュアルをDuotone/デュオトーンで統一しています。
音楽を扱うサービスということもあり、静かなビジュアルよりもこういったダイナミックで動きのある配色がマッチしますね。

このように、サイトに大胆さを取り入れるのにもってこいなのがDuotone/デュオトーンです。

Photoshopで作るDuotone/デュオトーン

それでは、実際に普通の写真をPhotoshopでDuotone/デュオトーンに加工する方法をご紹介します。
今回はこんな無料素材をご用意しました。

free-stock-photos-public-domain-images-002

まずはPhotoshopで素材を開きます。
レイヤーパネルの右下にある、”調整レイヤーの新規追加”ボタンをクリックします。
その中に、”グラデーションマップ”という項目があるので、選択しましょう。

スクリーンショット 2018-04-27 0.20.45

すると、グラデーションを設定するダイアログが表示されますので、好きなグラデーションを設定します。
グラデーションの右側がハイトーンカラー(写真の中で明るくなっている部分)になります。

スクリーンショット 2018-04-27 0.24.14

グラデーションのプリセットの中に、あらかじめよく使うグラデーションのパターンを登録しておくと便利です。

スクリーンショット 2018-04-27 0.44.28

たったこれだけのステップで、簡単にDuotone/デュオトーンを取り入れた画像を作成することができました!

CSSでDuotone/デュオトーンを取り入れる

Duotone/デュオトーンはWebサイトに簡単に取り入れることができます。
先ほど紹介した、そもそも画像自体を加工してしまう方法もありますが、CSSで実装する方法もあります。

colorfilter.css
http://lukyvj.github.io/colofilter.css/

こちらはcssのライブラリです。
上記のURLからファイルをダウンロードし、読み込みます。

1
<link href="path/to/colofilter.css" rel="stylesheet" type="text/css">

下記の画像のように、画像の親の要素に特定のクラスをつけるだけで普通の画像をデュオトーン加工することができます。

1
2
3
4
<div class="blend-blue">
    <img src="image.png"/>
    <span>lorem</span>
</div>

スクリーンショット 2018-04-27 1.03.39

jsで、マウスオーバーのタイミングでclassの付け替えを行えば、色の変化をつけることができます。

 

Duotone/デュオトーンを取り入れる時の注意点

ご紹介したように、簡単に加工できてしまうDuotone/デュオトーンですが、どんなデザインにも取り入れられるかと言われるとそうではありません。

通常の写真よりも大きく色が入るため、サイト全体のトーンを上手に統一しておく必要があります。

また、使用する2色を選ぶ際にも注意が必要です。
あまり色相の近い色を選ぶと、ぼやけた印象の写真になるので思い切った配色を心がけましょう。

Duotone/デュオトーンは、spotifyのように上手に取り入れることでさらに魅力的な見せ方をすることが可能です。

あなたのWebデザインの引き出しの中に入れておいてみてはいかがでしょうか。

  • ツイート
  • このエントリーをはてなブックマークに追加

You may also like...

  • デザイナーのマウスがゲーミングマウスに変わったら何が変わるのか

    デザイナーのマウスがゲーミングマウスに変わったら何が変わるのか

    3 6月, 2016

  • スクリーンショット 2017-10-12 0.51.54

    DTP入門part.2 グラフィックデザインで3種類の”黒”を使いこなす

    16 10月, 2017

  • ソフトがなくても大丈夫!画像サイズを調整してみよう。

    ソフトがなくても大丈夫!画像サイズを調整してみよう。

    14 10月, 2016

デザイナー募集
  • Next story After Effectsでアニメーションをつくる方法〜テキストにアニメーションをつける〜
  • Previous story システムに「Google Cloud Translation API」を入れて翻訳をしよう!-導入編-

運営会社

ALAKI株式会社 ALAKI株式会社採用サイト

弊社サービス

クリエイティブ業務のコミュニケーションを高速化 Webの知識が無くてもWebサイトの品質をチェックできます。

人気の記事

  • スクリーンショット 2019-02-15 20.02.23

    AR

    WebARはじめてみませんか?〜第3回 8th Wall WebでAndroidにも対応のマーカーレスWebARを実装する〜

    15 2月, 2019

  • 3e138557622f28f12a7e4f6993fe1e91

    セミナー

    第12回「ALAKI ◯◯Lab」を2019年2月27日(水)に開催します!

    12 2月, 2019

  • 988797d5fb4735dbdacd1583edaff784_s

    AI・ディープラーニング / システム開発

    Numpyを活用して画像の変化量を数値化してみよう!

    12 2月, 2019

  • スクリーンショット 2018-03-16 0.37.47

    AR

    WebARはじめてみませんか?〜第2回 A-frameで3Dオブジェクトを自在に操作する〜

    2 2月, 2019

  • 7939542edff23813b066e7be8dc28a92_s

    未分類

    PythonのOpenCVライブラリを活用して背景差分を取得してみよう!

    31 1月, 2019

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Laravel
  • Photoshop
  • Pug
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • WEBサイト
  • WEBマーケティング
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 未分類
  • 色

アーカイブ

  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年12月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年8月
  • 2017年7月
  • 2017年6月
  • 2017年4月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年9月
  • 2016年8月
  • 2016年7月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年7月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2013年10月
  • 2013年9月

Facebook

お問い合わせ

お問い合わせ

人気の記事

  • WebARはじめてみませんか?〜第3回 8th Wall WebでAndroidにも対応のマーカーレスWebARを実装する〜
  • 第12回「ALAKI ◯◯Lab」を2019年2月27日(水)に開催します!
  • Numpyを活用して画像の変化量を数値化してみよう!
  • WebARはじめてみませんか?〜第2回 A-frameで3Dオブジェクトを自在に操作する〜
  • PythonのOpenCVライブラリを活用して背景差分を取得してみよう!

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Laravel
  • Photoshop
  • Pug
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • WEBサイト
  • WEBマーケティング
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 未分類
  • 色

検索

ALAKI株式会社 © 2019. All Rights Reserved.