Web活!Webの運用・戦略・活用して
より良い経営を提供します!

色で与える印象が大きく変わる!

デザイン

おはようございます!
日高慎哉です!

最近Googleの話ばっかりしてたので
何か他のものネタで・・と思って

いろいろ考えていた結果
色について色々話してみようと思いました

↑思いつきで書いているので
今回のブログ
すでにコケそうな気がムンムンしてます!

あ、いつもGoogleさんの
検索の話などを偉そうにしておりますが

僕はWebの制作
設計からデザインから構築までの
全てを作るのが仕事です!

なので
どちらかというと
こちらの話が本職の話になります

 

ただし!
デザインの学校に行ってるわけでもなく
独学で勉強しています

そして、その独学で勉強した知識を
人に言語化して伝えるとなると
めっちゃ難しいなぁと
今気づきましたが

今日はこれで書こうと思ったので
強引に書いてみますので
優しく見守ってください!

 

色の与える影響って大きい

今更僕がいうのもなんですが
色によって与える印象って
大きく変わります

 

赤だとあったかいイメージだったり
情熱的な印象を与えたり

青は冷たい感じや
誠実な印象を与えたりします

 


例えば食べ物のポスターなんかが
青系の色で作られてたら
美味しそうな感じに見えなかったり
※冷たさを表現するときは別

 

色使いによって
古い感じの印象を受けたりもする

 

 

なので
ホームページやブログなどを作るとき
メインのカラーなどは
非常に大事!

 

色の表現方法RGB

普段の生活の中で
目にする

パソコンのディスプレイ

スマホ
テレビ

などは
全て

RGBという
色の表現で映し出されていて

R=Red(赤)

G=Green(緑)

B=Blue(青)

 

この3色の光を
調整して色々な表現が
行われています

 

この光が
何もないと真っ黒の状態

この3色を重ねて
マックスで光らせると
白の状態(画像真ん中の箇所)になります

 

色の表現は番号や英字で表される

そして
その色なんですが

ホームページ・ブログを
作るときには

色の番号で
「ここは何色にしてください」と
指定をおこなっています

 

ブログや何かしらで色を決める時に出てくる
カラーパレットみたいなのを
使ってるわけではないです

例えばなんですが
真っ黒は
#000000

赤は
#ff0000

緑は
#00ff00

青は
#0000ff

というように
番号・英字の組み合わせで
色の指定をおこなってます

 

この色の番号があることで
ホームページを作るときでも
ブログを作るときでも

いつでも
同じ色を表現することができます

※ちなみにwebでの色の表現方法は
他にもあります

 

たまには違う色を使ってみましょう!

これ以上難しい話をしても
うんざりかと思うので・・・

いつもブログを書くときの文字の装飾や
サムネを作ったりするときに

通常だと
カラーパレットに頼るしかないことも
多いのではないでしょうか?

 

この中だと色が限られていて
他の色を使いたいけど
自分で作るのも・・・

 

実際僕も
何色にしようかなぁと
悩みます

 

そんな時
僕は下記のサイトで
色を見ながら雰囲気に合った色を選びます

 

【WEB色見本】

https://www.colordic.org/

 

いろんな色の一覧が
出てるので直感的に
選べるかなぁと思います

 

特に僕が好きなのは
和の色

↓↓ここクリックすれば和の色見れます

なんと言いますか
和の色は
やさしいし、キレイ!

同じ原色の赤と
和の赤を比べても
痛くない感じ!?

表現難しいですね(笑)

このサイトの
色の名前の下に
先ほど説明した色番号が書いてあります

 

その番号をコピーしておけば
その色をどこでも使うことができます

ブログでもエクセルでも
必ず色番号を入れる箇所があるので!

 

わからないときは
ググってみてください

まとめ

この記事
書きながら着地を
探していたので

めっちゃ細かいことまで
書きそうになった・・危ない

ということで
自分が好きな色を
決めておくと良いですね!

先ほどご紹介したサイト

配色のパターンなんかも
紹介されてるので
参考にすると良いかと思います!

このサイト結構利用しているのに
配色パターンがあるのは
僕も先ほど知りました(笑)

それでは
また明日!

 

search envelope heart star user close search-plus home clock update edit share-square chevron-left chevron-right leaf exclamation-triangle calendar comment thumb-tack link navicon aside angle-double-up angle-double-down angle-up angle-down star-half status image gallery music video category tag chat quote googleplus facebook instagram twitter rss