【テレワーク✖️ヒント】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、です。