【テレワーク✖️ヒント】WEB制作担当者の色のこだわり＃テレワンプラス
皆さんもご存知、色は感情を動かすと言います。
しかも、パッと目に入った色で、人は多くのものを判断しています。
だから、WEBサイト制作では、画像はもちろん、カラー遣いにとても気を配ります。
サイトの目的、クライアントが希望しているサイトイメージをよくヒアリングして、それを具体的なカラーで表現します。
例えば、WEBサイトではありませんが、弊社GSCが開発したテレワークツール、テレワンプラスは、ITに慣れていない人でも、いろんなツールを使いこなす必要なく、テレワークができるように、テレワークに必要な機能を全て組み込んだツールです。
だから、第一にパッと見た時に、目がしんどっ！※とならないように、そして、ITツールに慣れていない人でもとっつき易いかも、と思ってもらえるように、カラー遣いに気を配ります。
※ “目がしんどっ！”というのは、画面が全体的にごちゃついている、画面からの情報が多すぎるという意味です。
スッキリ、かつ優しい印象ということで、ベースは白、メインカラーはブルー、アクセントはピンクです。
カラーに、ベース、メイン、アクセントという役割分けをするのは、WEBサイトでも基本です。
これには“黄金比率”というものがあるんですね！
＜色の黄金比率＞
「色の黄金比率は、70:25:5」と言われます。
ベースカラーが70、メインカラーが25、アクセントカラー（サブカラー）を5の比率でデザインを作成するというものです。
この比率で作成すると、とてもスッキリした見やすいデザインになります。
さらに、色の組み合わせ次第で雰囲気もだいぶ変わります。
例えば、こんな感じです。
1、少し優しい癒し系の感じ
2、クールでかっこいい感じ
3、元気で明るい感じ
アクセントカラーひとつ変えるだけで、少しインパクトが強くなったり弱くなったりします。
2、クールでかっこいい感じ のアクセントカラーを替えてみると・・・
↑こうなります！
色の配分で、随分雰囲気が変わるので、WEB制作をするときは、何度も色のコードを変更して、試行錯誤を繰り返します。
※色のコードはこちらを参照
単純に赤、ブルーと言っても、みなさんご存知の通り、いろんな赤やブルーがあります。組み合わせもごまんとあります。
だから、色の組み合わせに迷って行き詰まることだってあります。
＜色に迷ったら…＞
そしたら、GSCのWEB制作スタッフは、ちょっと散歩に出かけます。
自然界は、そりゃもう色の組み合わせで溢れています。
目に入る色をカラーコードに言い換えてみると、どれだけこの世界に色が溢れているかがわかります。
自然の配色のお手本を見ながら歩いていると、10m進むのに10分かかることもあります。
夕陽が落ちていく空を見ると、
「わー今日の夕焼けはbackgroundが、linear-gradientの25degで、#ec6d71から#192f60だなー、きれいだな！」と感嘆します。
あ、これは翻訳すると、
「わー、今日の夕焼けは、紺色からオレンジのグラデーションできれいだな！」となります。
雑草を見ても、
「おーこの野ブドウは、border-radiusが50％の、radial-gradientが、#79c06eから#47266e だな！」と思います。
これも、言い換えると
「おーこの野ブドウは、丸々していて実が緑から濃い紫に熟している途中だな。」
と言っています。
目に映る景色をコードに言い換えてみると、ほんとに、自然界の精密で計算し尽くされたデザインに圧倒されます。
ではではここで、ちょっとお花のカラーデザインに注目してみましょう。
誰かの家の庭に咲いている花も、道端に何気なく生きている雑草も、素晴らしいカラーの組み合わせだらけで、どこに行ってもお手本を見つけることができます。
＜色の組み合わせのお手本：花＞
例えばポピー。
ポピーは、スッと一本茎が伸びて大きめの花びらをパッと咲かせています。
華奢なボディーなのに潔く咲いているポピーが私は大好きです。
ポピーの群生を見るとベースカラーは葉っぱのサマーグリーン「#009944」、花びらのメインカラーはポピーレッド「#ea5550」、そしてアクセントカラーとして雌シベに紫がかった紫黒「#2e2930」をもってきています。
なんとも粋でかっこいい配色！
ダリアも本当に素敵です。
いろんなカラーを惜しげもなく披露してくれます。
花の部分だけ見てみると、ベースカラーを白「#fff」、アクセントカラーにうっすら黄色「#f0e68」を入れています。そしてメインカラーにビビッド目のピンク「#c71585」を、花びらの縁から内側に向かってグラデーションでぼかしていってます。
ここでビビッドなカラーを持ってくるのかぁ！！と思います。
ここにあげているのは本当に本当にごく一例ですが、挙げていくときりがありません。
もしデザインに行き詰まったら、ぜひ少し気分転換に散歩に出てみてください。
ちょっと足を止めて、周りを見回してください。アイデアはあなたの周りにあふれています！
ちなみに、テレワンプラスのカラーコードは、ベースカラー：白#fff、メインカラー：ブルー#0652fd、アクセントカラー：ピンク#e01076、です。