TOM CREATIVE(トム クリエイティブ)

MENU

ARTICLE

WEB DESIGN

「#000」だけが黒じゃない。色々な黒の使い方





こんにちはトミオカです。

黒という色はデザインしていく上でかならず使いますよね?

ただ黒と言ってもたくさんの使い方があるのをご存知ですか?

そこで今回はそんな「黒」に焦点をあてて、少し細かいデザインのお話しをしたいと思います。

黒が人に与える印象

まずデザインをしていく上で、
「黒」という色が人にどのような印象を与えるか知る必要があります。

黒が人に与える印象

高級感 / 死 / 悪 / 上質 / 男性的 / クール / 重力 / 恐怖 / フォーマル

黒はクールで高級でかっこいいイメージがありますが、
死や恐怖などマイナス面もある色です。

そのため黒の使い方や、差し色などで、商品のイメージに合うデザインをしていかなければなりません。

黒を使用するサイトのジャンル

一概には言えないのですが、主に連想されるジャンルが以下のものではないでしょうか。

ファッション / 車 / 高級化粧品 / 高級食品 / 旅館 / 電子機器 / スポーツ

「悪」や「重力」というイメージから、
コーポレート系のサイトでは黒のイメージは毛嫌いされることがあります。

よくクライアントから、「かっこいいんだけど、爽やかさや信頼度が薄い」と言われることがあります。

そのため黒が人に与える印象をしっかりと把握し、デザインしていくことが大事なのです。

WEBで使用するカラーコード

ウェブで使用する色は「16進数」というものでできています。

IllustratorやPhotoshopでRGBで色調整した時の下画像の部分です。

16進数とは「#」から始まる6桁の数字の部分で、「ウェブカラー」とも呼ばれます。

6桁の数字は「0・1・2・3・4・5・6・7・8・9・a・b・c・d・e・f」の
16個の数字やアルファベットを使い、色を表現します。

例えば
黒だと「#000000」略して「#000」、
白だと「#ffffff」略して「#fff」
ということになります。

つまり「#000」とはWEB上で表現する黒の中で一番黒い色となります。

ただ黒に関しては色々な使い方ができるのがポイントです!

それでは実際にデザインしていく上で、
どのように黒を使っていけばいいか解説していきたいと思います。



WEBサイトで見る「黒」の使い方

「#000」に近いグレーを使用し、重さを軽減

出典:Pinterest

英語サイトなのでコンセプトまで読み解くことはできないのですが、
グレーを全面に使いつつ、スマートフォンや多角形のモチーフが飛んでいるビジュアルから、
軽さを表現しているのではないかと思います。

その時にクールなイメージは残しつつ、グレーを全面に使用して重力感は軽減しています。

「青み」を足して夜を表現

出典:nikkeisha RECRUIT 2020

もちろん真っ黒でも夜は表現できますが、夜の空って実際青いですよね!

そんな雰囲気にするために、青みをプラスした黒にするだけで
より夜空を表現できます。

グローバルナビゲーションのみに使用し強調

出典:株式会社中村建材工業所

前項でお話しした通り、黒というのは重力(目に強く入ってくる)イメージがあるため、
重要なところにアクセントをもたせるために、使用することが多くあります。

グローバルナビゲーションというのはサイトのメインコンテンツを示す場所なので、
黒を使ってしっかりメリハリをつけ、わかりやすくデザインされています。

差し色にゴールドを使用し、上質、高級感を演出

出典:Pinterest

黒にゴールドって、少し高級感を感じますよね!

ただ上手くゴールドをつかわないと少し安っぽくなったり、ダサくなったりするので要注意です。

こちらのサイトは、
大人のスイーツという意味合いで高級感をそこまで出しすぎず、
背景の黒がしっかりと商品の色まで引き立てています。

「ブランドカラー」を黒に足し、商品をイメージ

出典:Pinterest

抹茶の商品を色で連想させるため、黒というよりかは深緑をプラスしています。

とは言え下にスクロールすると黒がでてくるため、
かなり暗い緑で、ブランド感を表現しています。

写真をなじませてクールでかっこいい印象を演出

出典:Pinterest

黒い商品だからこそ、その雰囲気を上手に出しているサイトも多く見られます。

もちろん商品の存在感は埋まってはしまうのですが、
あえて背景の黒と同化させることで、商品の黒を全面で表現しています。

文字で見る「黒」の使い方

スミ文字にして!と要望があった時真っ黒(#000)にしますか?

実は文字の場合も黒の使い方は重要です。

下画像は白背景に長い文章が入った時の、スミ文字(#000)にした状態です。

くっきりと文字は見えるのですが、文字が多く、少し読みにくい印象があります。

これを例えば#323232に設定してみます。

比較してみるとわかりやすいと思うのですが、

ほんのすこーしだけ文字文字しい雰囲気やガチャガチャ感が軽減されたと思いませんか?

この黒の度合いと、改行位置などで読みやすさの詰めを行うことが大切です。



ボタンで見る「黒」の使い方

WEBのボタンにもたくさん表現方法がありますが、
黒の色味の他に、質感やグラデーション、枠などによって大きく印象が変わってきます。

下記画像をご覧ください。

かなり印象が変わりますよね!

ボタン一つにしても、しっかりとこだわってあげると一気にクオリティがあがります。

まとめ

いかがだったでしょうか?

色は人に与える印象がそれぞれ違います。

それを理解した上で、表現方法をたくさん身につけ、
いろんなジャンルができるデザイナーを目指してください。

少しでも参考になれば幸いです。