![](https://switch.am/cms/wp-content/uploads/2023/11/31b7b08332006805ac5ab3506b0e7dd5-342x187-1.png)
───────────────────────────────────
今回は、WEB制作で垢抜けるための「黒色」についてまとめました!
───────────────────────────────────
現場では実は真っ黒な色ではなく、白と黒の中間にあたるグレーがよく使用されています。
なぜなら・・・
白背景に真っ黒だとコントラストが強く目が疲れてしまうからです。
また、原色はそれ以上の変化をつけられないため、経験値が高くないと美しくみせるのが難しいとも言われています。
それではいくつかのサイトを「黒色」に注目しながら、比較してみます。
![](https://switch.am/cms/wp-content/uploads/2023/11/da99539808aa7fdeb4ef6b81c2103139-768x564-2.jpg)
![](https://switch.am/cms/wp-content/uploads/2023/11/8947c16617b2b122fdbb6d90c94e2247-1-768x564-1.jpg)
![](https://switch.am/cms/wp-content/uploads/2023/11/a5dafc9bf6d7d91971332cecd9b7a188-768x564-2.jpg)
![](https://switch.am/cms/wp-content/uploads/2023/11/d553f6f23cca71f40363ace7a91e0707-768x564-1.jpg)
![](https://switch.am/cms/wp-content/uploads/2023/11/ec7447496523f002ff93900546b9ba26-1024x752-1.jpg)
(5枚目の比較は上から、真っ黒、Google検索結果、Youtube、Twitter)
カラーコードに注目してみると、真っ黒に見えても、実は真っ黒ではないんですね。
こう見ると、真っ黒はコントラストが強い、、そして色数が少ないので工夫をしないとワイヤー感(デザイン前の設計図)がでてしまいます…
他にもモノクロに絞って参考サイトを見てみると、
![](https://switch.am/cms/wp-content/uploads/2023/11/cd26f2cebf77255edfae0402f3683730-1-1024x752-1.jpg)
メインで使われている色は少し赤みがかっていて、優しい印象があります。殿堂入りの#333も使用されていました。
グレースケール内でのメリハリがあってとても綺麗です。WEBだけど雑誌みたいで読みやすいですね。
タイトルは#1c1c1c、リード文は#3c3c3cになっていました。
![](https://switch.am/cms/wp-content/uploads/2023/11/bf4353a21326950d48fe3a061d43014f-1024x752-1.jpg)
雰囲気のある写真を引き立てるような、アクセントで使われている力強い真っ黒(見出しの英語部分)
こちらもダイナミックに真っ黒が使われています
![](https://switch.am/cms/wp-content/uploads/2023/11/0e9480bc490a8b018fba1059cef4a075-1-1024x752-1.jpg)
少し青みがかった女性らしさのあるきれいめな印象の黒が高級感を演出しています。
GoogleフォントのMarcellusとも相性がぴったり。
配色に安定感があって色々なサイトに応用できそうです。
以上、「黒色」についてのまとめでした!