ひとり起業家専門Webの分からないをサポート

見やすいホームページの色使いとは?色の初心者が気を付けたい3つのポイント

WRITER
 
見やすいホームページの色使いアイキャッチ
この記事を書いている人 - WRITER -

ホームページの色使い。

どこをどうしたらいいか分からない……という方、多いのではないでしょうか?
見てもらいたいところが多くて、あちらこちらに色をたくさん使ってしまい、かえって見づらくなってしまうこともありますよね。

まずは、見に来てくれた人が快適に閲覧できるような、見やすい色使いの基本をおさえてくださいね。

 

こんな方にオススメ

・ホームページやブログでどんな風に色を使ったらいいか分からない

・色をたくさん使いすぎてゴチャゴチャするのが嫌だ

 

1. ホームページの背景色と文字色

コントラストに気を付けよう

ホームページはパソコンやタブレット、スマホの画面で閲覧されています。紙媒体と比較して、文章を読む時に目がとても疲れやすいですよね。
読み続けてもらうためにも、ホームページやブログを書くときには、文字を読みやすくするようにしましょう。
文字を読みやすくするためには、背景色と文字色のコントラスト(明るさの差)に気をつけてくださいね。
以下の図をご覧ください。

コントラスト比較

左は背景色と文字色のコントラストが低いもの、右は背景色と文字色のコントラストが高いものです。

比較すると、コントラストが低いもの(左)はぼんやりして読みにくく、コントラストが高いもの(右)の方が、読みやすくなっていますね。

また、文字が真っ黒だと強すぎて読みづらい場合には、濃いグレーを使うといいです。

文字色比較黒とグレー

併せて、文字の大きさにも気を配ってくださいね。

ハレーションを起こさないようにしよう

ハレーションってどういうことでしょう?
以下の図をご覧ください。

ハレーション例

一色ずつは綺麗な色ですが、組み合わせるとギラギラして見ていて疲れたり、不快な感じになりませんか?
このような鮮やかな強い色同士を組み合わせると、その境目がギラギラしてまぶしく感じるハレーションという現象が起こってしまいます。
ホームページの文章では使っていなくても、バナーやボタンなどでも時々見かけるので、気をつけてくださいね。

テキストのリンク色について

今までホームページの世界では、テキストリンクの色は青、訪問済みリンクは赤紫にするというルールがありました。

でも最近ではそのルールも崩れてきて、ホームページのデザインに合わせて変えることが多くなりましたね。

それでも、黄色や緑などにしてしまうと、基本のリンク色から大きく外れてしまい、リンクであることが分からなくなる場合もあるので注意しましょう。

テキストリンクの下線を消してしまうとなおさらです。リンク先もクリックして読んでもらえるように、下線は不用意に消さないようにしてくださいね。

2. ホームページに使う色数について

ディスプレイの性能が良くなって、ホームページで表現できる色は無限になってきましたね。
つい色々たくさんの色を使いたくなってしまいます……。
ですが!それだと、どこを見ていいか分からなくなってしまうかも……。
色使いに慣れないうちは、色の数を少なくすることをオススメします。
ベースカラー、サブカラー、アクセントカラー、文字の色の4色くらいにおさえると、スッキリしますよ。

色の比率図

慣れてきたら、多色使いにもチャレンジしてくださいね!

3. ホームページに色を使う目的を考えよう

色を使う目的を整理すると、やみくもに色を使うことにはならずに済みます。
では、目的ってどんなことがあるでしょうか。

・目立たせる(見出し、テキストの強調、ボタン、バナー等)
・分類する(情報のカテゴリ別け)
・イメージを表現する(色が持つイメージを利用する)

見出しに色を使って目立たせる方法は、もう当たり前の手法ですね。

テキストを強調したいときには、テキスト自体に色を付けるのもいいですが、アンダーラインを引くのも有効です。その場合にも色数を増やさずに、同じ色で揃えるとまとまりがでますね。

情報を分類するために色を使う場合は、どうしても色数が増えてしまいます。分かりやすくするためには、一度決めた色のルールを別のページでも守るようにするといいですよ。

色で分類する例

イメージの表現については長くなりますので!

別記事で詳しく書こうと思ってます!どうぞお楽しみに!

この記事を書いている人 - WRITER -