見やすいサイトを作るための要素って色々ありますよね。
ヘッダーの大きさとか、画像の配置とか、背景色とか、文字の大きさとか。
ここで個人的な意見ではあるんですが、地味ながらかなり重要なものとして文字色があります。
白黒はコントラストがきつい
えっ文字色？黒でいいじゃん…？？?
ってお思いの方は多いかと思いますが、ーーかくいう僕もそう思っていたひとりでしたが、こうしてブログを書くために長時間スクリーンを見つめていると気がつくことがあるんですね。
白の背景に黒い文字は目が疲れる。
ときには数時間にわたってスクリーンとにらめっこすることもありますから、削減できるストレスは少しでも削減しておきたい
これに気がついてから背景を灰色にしてみたり、文字を大きくしてみたりいろいろ試したんですが、試行錯誤の末いまのスタイルに落ち着きました。
このサイトでは背景は白、文字色は焦げ茶色（#735c51）に設定してあります。
僕だけかもしれませんが、この設定がもっとも目への負担が少ない気がします。
最適な色は？コントラストとカラーコードについて
見やすいサイト、見ていて疲れにくいテキストの最適な色って何でしょうか。
色の感じ方は人によって違いますしこれに関して正解はないと思いますが、一般的に背景色とのコントラストを弱くすることが言えるみたいです。
例えば白の背景なら、黒よりも灰色のほうがコントラストが弱いために目が疲れにくいということ。
ただここで問題になるのが、灰色と言ってもどれくらいの濃さにすればいいの？という点です。
あまりに薄すぎるとむしろ見づらくなりますし、読んだ人によっては「何このサイト、幸薄ぅ〜…」な印象を与えかねません。
頑張って書いたのに幸薄いがために離脱されたら悲しいですよね。
そんなわけで、どんな色がいいのかな…色の定量的な表現があれば他のうまくいってるサイトとかからパクってこれるのになあ〜〜ッ！！（指ﾊﾟﾁｲｯ!
ってなるわけですが、あります。
それがカラーコードと言われるものです。
このサイトでは文字色を焦げ茶色（#735c51）にしていると言いましたが、この「#735c51」という呪文がカラーコードです。
「焦げ茶色で書いてね」と人に言っても、その人によって黒よりのこげ茶色だったり赤よりのこげ茶色だったりしますが、「#735c51で書いてね」とコンピュータ君に伝えてやれば、いつでも同じ色で表示してくれるわけです。
サイトの文字色など、構成するカラーの変更方法についてはこちらを参考にしてみてください↓。
カラーコードの調べ方
「カラーコード」とかでぐぐってみましょう。
色ごとのカラーコードをまとめたサイトがたくさんヒットすると思います。
たとえば同じ「緑色」でも「萌葱色」とか「浅緑」とか「若緑」とか、いろいろ種類があるんだあ〜ってわかっておもしろいです。
もちろんそれらひとつひとつにコードが割り振られています。
それからあるサイトで使われている文字色が知りたいときどうするか。
サイトのソースコードを開いて調べる方法もありますが、一番簡単なのはWebサービスを活用することでしょう。
「カラーピッカー」でぐぐると便利なサイトがたくさんあるのがわかります。
使い方としてまず画像ファイルを読み込ませるのですが、この際サイトを範囲選択してスクショできると便利です。テキストの部分だけをスクショすることで後の操作が少し楽になります。
まとめ
見やすいサイトのための文字色について、コントラストの点で気がついたことをまとめてみました。
GoogleやAmazon、楽天などの大手サイトでも、テキストや背景は真っ黒/真っ白ではなく、コントラストを下げるようなカラーコードが設定されています。
サイトを作る際はこうした大手サイトを参考にしてみるのも手かと思います。
おわり
コメント