ホームページを魅せる!【第1回】

ホーム > ワンポイント講座 > ホームページを魅せる!【第1回】

その文章、きちんと読まれていますか? 〜配色のコツ

自社のホームページを改めて見たとき、「なんとなくカッコ悪い」「悪くはないが、パッとしない」という印象を持たれる方は意外と多いのではないでしょうか。特にホームページの制作をプロの業者に委託せず、社内のちょっとパソコンに詳しい社員に任せていたりすると、こうした問題が起こりがちです。

これは、基本的なデザインスキルが不足しているので当たり前のことなのですが、ちょっとしたデザインの原則を知っておくだけで、ホームページの印象は劇的に改善します。「デザイン」と聞くと難しいテクニックやセンスが必要と思いがちですが、すぐに実践できるホームページを「魅せる」コツを12回にわたってご紹介していきます。今回はその第1回目として、配色をテーマに取り上げます。

まずは左の例を見てください。これは、ある施設のホームページで実際に使われていた見出しです。これを見て「何かイマイチ」という印象を持たれた方は多いと思いますが、どうすればもっと見栄えの良い見出しになるのでしょうか。実は、ここでポイントとなっているのが「配色」なのです。

ステップ1:明度差を大きくすることが読みやすさの基本

一つ目の例では、薄い緑色の背景に白い文字が使われています。これは、明度差の少ない配色です。
「明度」というのは色の属性の一つで、明るさの度合いを表します。緑色の場合、明度が高く白に近い緑から、黒に近い濃い緑まで無数の緑色がありますが、隣り合った色の明度差が少ないと、視認性は悪くなります。つまり、背景色と文字色の明度差が小さいと、文字が読みにくくなるのです。
 

ステップ2:色の持つ特性を意識する

次に2つ目の例を見てみましょう。ややくすんだ水色の背景に、暗い紫色の文字が使われています。この場合、明度差は確保されていますが、どことなくぼんやりした印象です。その理由の一つは、背景色も文字色も暗いトーンの色が使われていることにあります。
色味の強さを表す色の属性を「彩度」といいます。彩度が低ければ暗く沈んだ色になり、彩度が高くなるほど鮮やかな色合いになります。彩度の高い色は、アクセントカラーとして小さな面積で用いると、全体を引き締まった印象にする効果があります。

以上のようなポイントに沿って改善した一例が、左の見出しです。グラデーションやエンボス(浮彫り)などの凝った処理は使用していませんが、視認性を損なうことなく、適度にアイキャッチのある見出しへと生まれ変わっていることがご理解いただけることと思います。
 

ステップ3:WebPilotで文字の色を変更してみよう

最後に、WebPilotで文字の色を変更する方法をご紹介します。 WebPilotで文字の色を変更するには、変更したいテキストを選択し、カラーパレットから色を選択するだけで完了です。

このページの先頭へ