• WEB

シンプルでスタイリッシュ 伝わるデザインテクニック「モノクロームプラスワン」

  • ジョルノ
    ジョルノ デザインちーむ
  • このエントリーをはてなブックマークに追加
シンプルでスタイリッシュ 伝わるデザインテクニック「モノクロームプラスワン」

こんにちは。デザインチームのジョルノです。

今回はデザインする際の手法のひとつについてご紹介したいと思います。

その名も「モノクロームプラスワン」

どんなデザインなのか一言でいうと、モノクロームにワンポイントでカラーを追加するデザインです。こういったデザイン↓きっと目にした事があると思います。
モノクロームプラスワンの例

記事を書くにあたって、何て名前の手法かなーと思い、「白黒 単色 デザイン」とか「モノトーン 一色追加」とか「モノクロ ワンポイント」などなど、色々検索してみたんですが、見当たらなかったので命名してしまいました。

手法そのままのネーミングなので他にも同じ名前を使っている人はいるかもしれませんが。
とりあえず検索では「モノクロームプラスワン」で、意図した手法については上がってきませんので、皆さんが見てくれればこの記事がトップになって、このネーミングが浸透したらちょっと嬉しいです。

既に他のネーミングがされてるかもしれませんが、かなり検索かけても出てこないという事は定着したものはないという事で、この記事を見てくれた方、しっくりきたら今後は「モノクロームプラスワン」使ってください(´∀`*)

モノクロームとモノトーンとブラック&ホワイト

デザインの解説の前に言葉の定義をさせていただきたいと思います。
「モノクローム」と「モノトーン」という言葉を白黒という意味で使用している方や記事を目にしますが、本来この2つは「単色」という意味であって、必ずしも白黒の事ではありません。
セピアやその他の色の一色で表したものも「モノクローム」「モノトーン」といいます。

モノクローム・モノトーンという大きなくくりの中の白黒という感じです。

白黒を英語でいう場合、正しくは「Black and white」だそうです。

「モノクローム」は直訳すると「1つの色」を意味し、1色で描画・印刷・表示等された図画のことである。 略称モノクロ。
ここでいう1色とは、背景色に加え1色ということなので合わせれば2色あり、多くの場合はさらにその間のグラデーションがあります。
Wikipediaより

日本では黒・白・グレーなど無彩色だけで構成されることがモノクローム・モノトーンという認識が定着しているので、上記の事を知った上であればコミュニケーション上はそれでもOKだと思います。

「モノクロームプラスワン」の狙いと効果

私はこのデザインテクニックお気に入りの一つです。

まず、モノクロームで落ち着いた印象、シンプルでクールな雰囲気を与えつつ、プラスワンのカラーがポイントになって暗い印象を払拭する。

一色に限定されたカラーは、メインが何なのかという事をわかりやすく伝えてくれます。

そして選ばれたカラーによる効果が、モノクロームによって引き立てられる。お互いに相乗効果がある感じ。シナジーですね。

また、1枚のデザインだけでなく、Webサイトや、パンフレット、スライドといった連続性を求められるデザインの際も統一感をもたせやすいです。

「モノクロームプラスワン」の作り方(パス編)

では、いよいよPhotoshopでの作業手順をお伝えします。

サンプル画像

まず素材写真を選んだら、コピーしてカラーで残したいパーツを切抜きます。

切り抜き

次に背景レイヤーとなる画像を選択したら、色調補正から「色相・彩度」を選択し、彩度のスライダーを左端にもっていき-100に設定。

彩度を0にする

最後にお好みのテキストを配置すれば完成です。

完成画像

「モノクロームプラスワン」の作り方(色域指定編)

細かいパーツでパスでの切抜きが大変な場合、「色域指定」という機能を使用してみましょう。メニューバーの「選択範囲」から「色域指定」をクリック。

色域指定を選択

スポイトで写真の一箇所をクリックすると「クリックした場所と同じ色の部分を自動で選択してくれる」ツールです。

プラスワンで残したいカラーの部分をクリックします。今回はアイシャドウと花のカラーであるパープル部分をスポイトでクリック。

すると、「色域指定」のウィンドウに選択された範囲が白く、それ以外が黒く表示されます。

許容量のバーを左右にスライドしてお好みの選択範囲を指定したらOK。

色域指定の操作

そうすると、下記画像のように選択範囲が点線で表示されますので、ベクトルマスクを追加して選択範囲以外の部分が隠れるようにします。

色域指定の操作

あとはパス編の時と同様に背景レイヤーとなる画像を選択したら、色調補正から「色相・彩度」を選択し、彩度のスライダーを左端にもっていき-100に設定。

彩度を0にする

テキストを配置して完成です。

完成

プラスワンカラー部分をパスで選択するのか、色域指定で選択するのかは素材画像に合った方法を選んでください。

応用編

一色に限らず、ひとつのまとまりのみカラーで配置するのもアリです。

応用したサンプル画像

こちらは女性のみカラーで残して、背景はモノクロに。

最後に

「モノクロームプラスワン」の効果をスマホでお手軽に加工できるアプリをご紹介します。
MonoColor Cameraよかったらお試しください。

Thanks for your time☻

Thanks to photo by GATAG
kirstindale
mikeownby
Luxt Design
 霖霖七

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

ジョルノが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ