ブロガーが意識すべきWebの配色のルール4選

Webの配色ルールとは？

Webの配色ルールを知っておくメリット

今回紹介するWebの配色ルールは絶対に守らなければいけないものではありませんが、知っておくことで下記のメリットが期待できます。

論理的に色を決定できる。

もし、クライアントワークでデザインをする場合、配色について論理的に説明できるようになることで、お客様を納得させる要素になるかと思います。

クリック率などの成果アップが期待できる。

色について理解することで、クリック率アップなどの結果につながる可能性があります。

Webの配色ルールをチェックしよう！

配色ルール①：「WCAGのガイドライン」を守ろう。

色のコントラストについては、WCAG（Web Content Accessibility Guidelines ）というWebの標準的なガイドラインがあります。

色のコントラストとは、文字色と背景色の色の差です。コントラストを一定に保つことで視認性が良く読みやすい文章になります。特に上図のように濃い背景色に白いフォントを乗せるときに気をつけたいポイントです。

色のコントラストはSEOにおいても重要？

「Googleがアクセシビリティの指標を検索結果のランキングに反映させることはあるのでしょうか？」という問いに対して、Googleのジョン・ミューラー氏は下記のようにおっしゃっています。

I won’t say never, but I’m not aware of any immediate plans. In general though, when sites are hard to use, people steer away from them anyway, so over time things like recommendations & other signals tend to drop away, resulting in the site being less visible in search too.

（DeepL翻訳）絶対にないとは言いませんが、すぐにそのような計画があるとは思っていません。一般的に、使いにくいサイトは敬遠されるため、レコメンドなどのシグナルが減少し、結果的に検索にも引っかからなくなります。

Google ジョンミューラー氏のTwitterより引用

この発言を見る限り、今のところコントラストが検索順位に直接影響することは無いようです。しかし、ユーザービリティの悪いサイトは、ユーザーに嫌われ離脱される原因になり、結果的に順位に影響する可能性があるとのことです。

色のコントラストチェック方法（既存記事のチェック：Lighthouse）

ここからは色のコントラスト比をチェックする方法について2つ紹介したいと思います。どちらも無料ツールです。

コントラストをチェックする2つの方法

色のコントラストチェック方法（色の調整しながらチェックする方法）

上では、既存記事のコントラストについてチェック方法を紹介しました。次は、コントラストがNGとなった場合に、色味の計算をしながら調整ができるツール「colorable」をご紹介します。

配色ルール②：真っ黒「#000」を使わない。

文字色（フォント色）としてよく用いられる黒。黒といえば、最も黒い「#000（#000000）」をイメージされる方が多いかと思いますが、実はWebの世界では#000は使用はNGとされています。

大手企業サイトをみても、「#000」を使うサイトはほぼありません。
（他者サイトのフォントカラーを調べるには、Chrome拡張機能「ColorPick Eyedoropper」がおすすめです。）

#000が避けられる理由としては主に以下があるようです。

フォントカラーは何色がいいの？

では、真っ黒の代替としてどの色を使うかについては、大手サイトを見ても特に決まったルールはないようですが「#333」あたりが人気な気がします。

私はというと、#333333、#444444のゾロ目をよく使っています。理由は、ゾロ目のカラーコードは#333、#444のように省略して書けるからです。

アイキャッチなどの場合は、ベースカラーの色の彩度を落とした「ちょっと色味が入った黒」を使うと全体的な統一感がでやすいのでそちらもおすすめです。

配色ルール③：純色は避けよう。

真っ黒（#000）と同じように、純色も避けるべきです。理由は#000を避ける理由と同じ。コントラストが強すぎて目がチカチカして不快感を与えてしまうから。

▲純色とは、明度と彩度が100%になる色ですね。Figmaなどのデザインソフトのカラーピッカーの一番右上の色が純色となります。

純色のように鮮やかな色を使いたい場合は、彩度と明度を少し抑えると目に優しい色になります。

配色ルール④：CVボタンには目立つ色を使おう。

CVボタンの色は、Webページのは配色の中でも、クリック率に影響を与える重要な要素です。なるべく目をひくように効果的な色を使いましょう。

メインカラーの補色（あるいは反対色）で、なおかつアクセントカラー（その記事にあまり多く登場しない色）を使うと目をひきやすいと言われています。

逆に、視認性が低い色や、メインカラーと同じ色を使うと、ボタンが存在であることに気づいてもらえない可能性もありますので注意したいですね（上図左）。

補色とは？

補色とは、ある色を基本にした時に、その色の色相環の反対側の色のことです。基本の色と彩度と明度は同じになります。

▲例えば「緑」の場合、補色は赤、反対色はオレンジ～紫あたりの色のことを指します。

補色・反対色とは？

• 補色：基本の色の反対の色
• 反対色：補色の両隣あたりの色

補色・反対色を調べるツール

• Adobe Color
• Wave440.com – 反転色と補色のカラーコードを計算します。

まとめ

配色におすすめの本たち！

▲配色のお供におすすめの本です。使用しているすべての色に、「16進数、RGB、CMYK」の3種類の色コードが載っているから簡単にマネできます。表紙のイメージのとおり、全体的にガーリーでポップな配色が多いかも。

▲上と同じ会社さんの本。表紙はグラデでクールなイメージですが、中身はポップな配色たちが満載です。2色・3色・4色、それぞれのパターンが掲載されています。こちらも16進数、RGB、CMYKに対応。この本、実はKindle Unlimitedユーザーは無料で読めちゃいます。会員の方はぜひCHECKしてみてね。