ホームページの配色で気をつけるべき点

みなさん、こんにちは！
名古屋　HP運営です！

昨日雪降ってましたよ！雪！
名古屋では初雪になる見たいですねえ。
今日の方が降る予報でしたけど、降らなかったみたいですね！

とても寒いのですけど、真冬ってこんなもんでしたっけ？
確かに寒いのは間違い無いんですけど、これくらいならそこまで着込まなくても大丈夫そうなんですよね。

冬将軍が来てるんで、間違ってはいないんでしょうけど...

まあ！いずれ答え合わせ出来ますから、その時を待てば良いですね！

今回は、以前紹介させて頂いた視覚効果に近い内容になっています。
色によって、持たれる印象や感じ方が変わってくるってやつですね。
前の説明ではあまりホームページに活かせる部分が少なかったと思うので、今回は役に立つ内容に出来るよう務めます！

目次
・配色を使い分ける
　「赤色」を極力メインで使用しない
　文字色は青にするべからず！
　薄い色の配色の仕方
　基本的な文字色はもちろん「黒色」？
・まとめ

配色を使い分ける

今回は配色の使い分けについて紹介していきたいと思います！

そもそも配色って何？ってかたも居ると思いますが、簡単なことです。
色を配置・構成することを配色と言って、取り合わせた色合い、の意味が強いように感じます。

取り合わせた色合い、とゆう言葉があまり聞かない言葉ではありますが、まあ色の組み合わせであったりどこにどの色を使うか、とかそんなイメージで問題無いです！

ベストな配色もありますが、好みや会社のイメージカラーによって大きく変わってくる部分なので、これはしない方が良い！とゆうものを紹介していきます！

「赤色」を極力メインで使用しない

何故か？とゆう部分に関しては、以前説明したまんまです！
「赤色」が、そもそも色としての性質が強いので、目が疲れてしまいますし、攻撃的な色になっているので、メインで使うのは避けた方が良い、って感じですね！

「赤色」を使うのであれば、要所で強調したい言葉や伝えたい写真の枠なんかの、ワンポイントに使用するのがベストですね！
メインで使ってしまうと、何を強調しているのかわからなくなってしまうのも問題ですからね！

文字色は青にするべからず！

以前紹介した際、よく使われる色として紹介した「青色」ですね！

なんで文字色を「青色」にしない方が良いかと言うと、見にくい、とか目が疲れる、とかでは無いんですよね。

ホームページ、とゆうかウェブサイトの方がよく見かけると思いますが、みなさん、「青色」の文字って頻繁に見てますよね？
そう！リンクカラーに良く使われているんですよ！

https://note.com/nagoyahp
上記にリンクを貼ってみましたけど、通常だとここの色って「青色」のことが多いですよね？
なので、ユーザーの視点から見ると、あっなんかリンクが貼ってある！と認識してしまうんですよ。
実際にはリンクが貼っていない訳ですから、そうなるとユーザーにストレスを与えてしまう可能性が高いので、「青色」は文字色として通常使用しない方が良い訳です。

逆に、ホームページ上にリンクを貼る場合は、「青色」にしておけば勝手にユーザーが理解してくれるため、迷ったら「青色」で間違いないですよ！

薄い色の配色の仕方

薄い色は、ホームページの配色に使うのには有効的な色合いになると思います。
先程の「青色」でも、枠の色を真っ青にしてしまうと強い印象を与えてしまうため、「水色」くらいの色合いにしておけば、優しい印象を与えることが出来ます。

ただ、薄い色の使い方には少し注意すべき点があります。

背景を「青色」にしていて、その上に枠を設ける場合、枠の色を近い色の「水色」にするのは見栄えが良いでしょう。

ですが、背景色が「白色」だった場合、枠の色を薄い「灰色」にしてしまうと、違いがあるのか非常にわかりづらくなってしまいます。
見にくければ修正すれば良いだけなんですが、制作している時には気付きにくい分類だと思いますので、ある程度は気にしておいた方が良いと思います！

基本的な文字色はもちろん「黒色」？

疑問形で書いてありますが、だいたいは「黒色」ですよね。（笑）
どこの会社さんのホームページを見ていても、余程特殊なもので無い限りは「黒色」を使用しています。

もちろんこれは「黒色」で問題無いと思います。

ただ、結構多くの会社さんが、実は「灰色」の入った「黒色」を使用しているのはご存知でしょうか？

非常に分かりにくいレベルの誤差ではあるんですが、真っ黒な「黒色」と並べてみると、結構分かります！

なんで若干「灰色」を合わせているかは、ホームページの印象を柔らかくするために使用されています。丸いような感じですかね！
逆に真っ黒な「黒色」にしてしまうと、尖ったようなイメージを持たれるようなので、このように微妙に色の変化を与えているんですね！

理屈としては、先程説明させて頂いた色の薄さに繋がるのですが、薄い色とゆうのは周りの色と重なって見えにくくなってしまうものです。
背景色と文字色が同化してしまうからですね。
この同化している状態って、尖ったイメージは無いですよね？
弱いとか、優しいとかって印象を持たれることが多いでしょう。

このように、ちょっとした技術を使用するだけで、制作している時には分かりづらいけど、ユーザーに与える印象が変わるものもあるので、使うか使わないかは別として知っておいた方が良いでしょう！

まとめ

はい！
今回はだいたいこんな感じです！

以前の視覚効果の記事で書けなかったことを書いていたんですけど、また暴走して書ききれなかった内容もあります。（笑）

まあまあ、焦らず次回の機械にでも書いていきますね！

配色って、その会社さんによって変わるんですけど、大衆心理を考えておかないと、結局その意味を伝えることって難しいと思いますし、日常生活から養えることもあるので面白いですよ！
また色系のこと書いていきますね！

ではでは！
明日は出張なんだぜ！
最後まで読んで頂きありがとうございました〜

名古屋　HP運営