ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

あなたのサイトの視認性は大丈夫?配色のグレースケール化でWebサイトをチェックする方法

Webサイトが読みやすいかどうかは、文字サイズやレイアウトだけでなく配色によるところも大きいですよね。

配色というと、補色を使って色を際立たせる、なんていう技法を安易に使いがちですが、色の三要素(色相・彩度・明度)のうち、明度のコントラストが視認性に最も影響を与えます

したがって、明度差をチェックするのがWebサイトの配色適正化には欠かせないわけですね。なので、配色をしていてなんか見にくいなあと感じたら、Webサイトをグレースケール化して視認性をチェックするのがおすすめです。

そこで本記事では、Webサイトをグレースケール化する方法を解説します。

目次

補色で配色してもうまくいかない場合がある

色相主体で配色する場合で、よく知られている配色が補色を使うことです。

補色というのは、色相環で反対側の色をいいます。そういえば昔中学の美術で習ったような記憶が・・・。

例えば、色相環で8番の黄色と20番の青紫の関係や、4番の赤味の橙と16番の緑味の青の関係が補色です。

色相環と補色

補色での配色例

実際にこの補色を使って配色してみると次のようになりました。

補色で配色したテキストと背景色

どうでしょうか?左のテキストが黄色のものは視認性がはっきりしていますが、右のテキストが赤味の橙のものは、なんだか目がチカチカして見にくく感じませんか?

どちらも背景色に補色を使用したにもかかわらず、このように視認性に差が出ています。このように色だけにこだわると、見にくいWebサイトが出来上がってしまうことがあるのですね。

補色配色例をグレースケール化

これをグレースケール化すると視認性に差が出た理由がよくわかります

補色配色テキストをグレースケール化

いかがでしょうか?明らかに右のテキストは明度差が不足しているのがわかりますよね。このように、明度差が不足すると、補色を使ったとしても視認性は悪くなってしまうのです。

トーンを変えて明度差を改善する

もし、テキスト:赤味橙(4番)、背景色:緑味青(16番)の色相を使うならば、色相はそのままでもトーンを変化させると明度差を改善することができます。

テキスト赤味橙色_背景緑味青の明度差改善

ちなみに、テキスト色は元々vividトーンだったのをliteトーンに変更背景色はvividトーンからdeepトーンに変更しました。

このように同じ色相でも明度差を意識してつければ、視認性がぐっとよくなるのがわかりますよね。

色相環をグレースケール化して見る

一応参考までに色相環もグレースケール化して見てみましょう。この色相環は、PCCSでいうところの最も彩度の高いvividトーンを採用しているのですが、グレースケール化すると明度差があることがよくわかりますね。

色相環のグレースケール化

このように、補色であっても同じトーンの色を使って配色すると、明度差が不足してしまう場合があることに注意しましょう。

Webサイトもグレースケール化して確認する

それではここからは、本記事の本来の目的であるWebサイトをグレースケール化する方法について紹介していきます。

なぜWebサイトをグレースケール化する必要があるのかについては、ここまでの解説で十分理解できたのではないでしょうか?

方法1:Google Chromeの拡張ツールを利用する

Google Chromeの拡張ツールに、Grayscale Toolというのがあります。

入手先は、こちらです。

Grayscale Tool

使い方は簡単です。Google Chromeにインストールしたら、グレースケール化したいWebページを表示しながら、Shift+G を押すだけです。

しかし、今一つ動作が安定しません。例えばこのウェブチルサイトのトップページに適用すると、コンテンツ領域は確かにグレースケール化しますが、なぜか背景色はそのままです。

Grayscale Toolの適用例

サイトの一部でもよいので手軽にグレースケール化したい場合には使えるかなという感じです。

方法2:CSSのfilterプロパティを適用する

少し手間ですが、こちらの方法が確実にグレースケール化できる方法となります。

カスタムCSSとGoogle Chromeの開発者ツールを使います。次の記事で詳しく解説していますの参照ください。

手順は以下の通りです。

1.Google Chromeで開発者ツールを開ける。
(Ctrl(MacはCommand)+ Shift + I。またはWindowsならF12をクリック)

2.bodyタグをセレクタにして、次のCSSを適用する。

body {filter: grayscale(100%);}

この方法だときちんとグレースケール化できています。

filter CSSを適用したグレースケール化例

開発者ツールの中だけでの変更ですので、サイトを再読み込みすれば元に戻ります。

filterプロパティは、比較的新しいプロパティなので、IEでは使用できませんので注意しましょう。

グレースケール化するgrayscale()関数のほか、ぼやかしを入れるblur()関数、コントラスト調整するcontrast()関数など、サイトの配色や雰囲気を少し変更したいときに応用できそうですね。

まとめ

配色において、十分な明度差をとることは視認性の確保に欠かせません。したがてWebサイトをグレースケール化してチェックしてみることがおすすめです。

Webサイトをグレースケール化する方法を2つ紹介しましたが、Grayscale Toolはお手軽ですが動作に少し難があるため、私はもっぱらfilterプロパティを使うようにしています。

もちろん配色において、どのような色相を選ぶのかは、Webサイトのイメージを作り込むうえで重要です。ただし、色だけにこだわると、視認性の悪いWebサイトができあがってしまう可能性が出てきます。

そうなっていないか、ときどきWebサイトのグレースケール化でチェックしてみましょう。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる