copy_people copy_things copy_matter ttl_topics ico_blank ico_facebook ico_twitter ico_hatebu ico_index

2021/04/16

「ウェブサイトの本文色の黒は真っ黒(#000000)でないことが多い」って本当?検証してみた

INDEX

    「Webサイトの黒の文字色は真っ黒(#000000)だと強すぎるからあまり使われない」という噂を聞いたことがあったのですが、実際のところどうなのでしょうか??

    ということで今回は、いくつかのサイトをみて、本文色のカラーコードを調べてみました!

    サービス

    Google(検索結果)

    EVOWORX検索結果

    背景色  #ffffff
    URL   #202124 (明度 14%)
    文字   #4d5156 (明度 34%)

    URLの部分が#202124、青文字のリンクの下の説明文は#4d5156で薄めのグレーになっています。
    リンクの青色と合うようになのか、どちらの色も完全な無彩色ではなく、少し青っぽくなっているのですね!

    Twitter

    https://twitter.com/nowanowa2020

    背景色  #ffffff
    文字   #0f1419 (明度 10%)

    Twitterも青の入った黒になっていました!

    Facebook

    https://www.facebook.com/evoworx

    背景色  #ffffff
    文字   #050505 (明度 2%)

    明度2%なのでほぼ真っ黒です。

    Instagram

    https://www.instagram.com/wanko_nowa/

    背景色  #ffffff
    文字   #262626 (明度 15%)

    メディア

    日本経済新聞

    https://www.nikkei.com/

    背景色  #ffffff
    文字   #333333 (明度 20%)

    東洋経済オンライン

    https://toyokeizai.net/

    背景色     #ffffff
    記事大見出し  #000000 (明度 0%)
    本文      #444444 (明度 27%)

    東洋経済オンラインでは、本文は#222222ですが、記事の大見出しは真っ黒(#000000)になっています。
    大見出しがパッと目に入ってくるのは大見出しが大きくウェイトが太いから、というだけでなく、色が濃くなっているのも関係していそうです!

    Yahoo!ニュース

    https://news.yahoo.co.jp/

    背景色  #ffffff
    文字   #333333 (明度 20%)

    NewsPicks

    https://newspicks.com/

    背景色  #ffffff
    文字   #222222 (明度 13%)

    note

    https://note.com/

    背景色  #ffffff
    文字   #222222 (明度 13%)

    #333333、#222222はよく見かける気がします!!

    EC

    Amazon

    https://www.amazon.co.jp/

    背景色  #ffffff
    文字   #0f1111 (明度 7%)

    ZOZOTOWN

    https://zozo.jp/

    背景色  #ffffff
    文字   #2d2d2d (明度 18%)

    ワールドオンラインストア

    https://store.world.co.jp/

    背景色  #f5f5f5
    文字   #111111 (明度 7%)

    .st

    https://www.dot-st.com/

    背景色  #ffffff
    文字   #333333 (明度 20%)

    ユニクロ

    https://www.uniqlo.com/jp/ja/

    背景色  #ffffff
    文字   #1b1b1b (明度 11%)

    コーポレート

    株式会社リクルート

    https://www.recruit.co.jp/

    背景色  #ffffff
    文字   #51656f (明度 44%)

    本文の色は企業ロゴと近しい色になっています!

    トヨタ自動車株式会社

    https://global.toyota/jp/

    背景色  #ffffff
    文字   #212121 (明度 13%)

    株式会社メルカリ

    https://about.mercari.com/

    背景色   #ffffff
    タイトル  #222222 (明度 13%)
    本文    #333333 (明度 20%)

    ライン株式会社

    https://linecorp.com/ja/

    背景色  #ffffff
    文字   #000000 (明度 0%)

    LINEのコーポレートサイトでは、所々「#000000」が使われている箇所がありました。

    株式会社エヴォワークス

    背景色  #ffffff
    文字   #000000 (明度 0%)

    ちなみに、弊社コーポレートサイトも本文の色は「#000000」です!

    まとめ

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

    「#000000」が本文色として使われているサイトもありますが、明度10%〜30%程度の黒に近いグレーが一般的に使用されているといえそうです。

    一見同じような黒に見えても少し青が入っていたりと、サイトによって色相・彩度・明度が少しずつ違っていて面白いですね。
    また、同じサイト内でも、タイトルの黒と本文の黒が違っていたりと、使われるところによって黒の色が異なるものもありました。

    皆さんはどんな発見がありましたか?
    少しでも参考になれば嬉しいです。

    CONTACT

    お仕事のご相談や、弊社についてのご質問や
    ご要望など、お気軽にお問い合わせください。

    View