• ブログ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...

  • スクリーンショット 2018-03-02 0.54.59

    Webサイトに動きを!グリッチエフェクトを実装する「CSS Glitch Effect」

    2 3月, 2018

  • blog_160417_main

    色の与える印象の話

    22 4月, 2016

  • Hampshire Light  Lighting Design Services

    【2018年のデザイン予想】これからきそうな海外のWebデザインのトレンド5選

    5 1月, 2018

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

運営会社

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

弊社サービス

MUGHEN ALAKI クラウド型受発注システム さよなら過去のAR。WebARがイベント集客に革命を起こします。 広報活動の課題を数字で可視化し、出願者数アップをお手伝いします クリエイティブ業務のコミュニケーションを高速化 Webの知識が無くてもWebサイトの品質をチェックできます。

人気の記事

  • woman-desk

    未分類

    リモートワークでインタビュー動画を撮影する際の5つのコツ

    3 2月, 2022

  • main-visual

    AR

    実務で使うWebARのチェックポイント

    10 12月, 2021

  • 5050691_s

    未分類

    Web制作の現場から、JavascriptやPHPの「デバッグ」について考える

    14 9月, 2021

  • スクリーンショット 2021-07-10 9.04.44

    未分類

    AR(WebAR)の導入事例をご紹介!〜EC × AR〜

    10 7月, 2021

  • アセット 1@2x-100

    AR

    AR(WebAR)の導入事例をご紹介!〜観光 × AR〜

    25 6月, 2021

カテゴリー

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

アーカイブ

  • 2022年2月
  • 2021年12月
  • 2021年9月
  • 2021年7月
  • 2021年6月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年6月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 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

お問い合わせ

お問い合わせ

人気の記事

  • リモートワークでインタビュー動画を撮影する際の5つのコツ
  • 実務で使うWebARのチェックポイント
  • Web制作の現場から、JavascriptやPHPの「デバッグ」について考える
  • AR(WebAR)の導入事例をご紹介!〜EC × AR〜
  • AR(WebAR)の導入事例をご紹介!〜観光 × AR〜

カテゴリー

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

検索

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